مرکز آموزش

مقدمه؛

یکی از بخش‌های جذاب و پرفروش در فروشگاه‌های اینترنتی، بخش شگفت‌انگیز یا همان Amazing Offers است. در این مقاله قصد داریم بدون نیاز به نصب هیچ افزونه اضافی، فقط با استفاده از المنتور پرو و کمی کدنویسی ساده HTML و CSS، یک اسلایدر شگفت‌انگیز مشابه دیجی‌کالا طراحی کنیم.

پیش‌نیازها

• وردپرس با ووکامرس فعال

• المنتور پرو (برای درج HTML و استایل‌های سفارشی)

• محصولات دارای تخفیف (برای نمایش در اسلایدر)

یه نکته خیلی مهم ؛ توی المنتور کانتینر و سکشن ها به صورت موروثی از هم استایل میگرین و استایل پدیری بالایی دارن "
میبایست قبل از ایجاد کد نویسی با المان html اول بخش و سکشن و کانتینر مورد نطرتون رو جایابی کنید و بعد اقدام به کدنویسی و استایل دهی بکنید.
اما اگر ناچار بودید ؛

در محیط‌هایی مثل المنتور، گاهی اوقات به‌جای دیباگ طولانی، بهترین راه اینه که:

یک سکشن جدید و تمیز بسازیم
 همه HTML و CSS رو از صفر توی اون سکشن قرار بدیم
 اینطوری هیچ تداخلی از سکشن‌های قبلی، استایل‌های کش‌شده، یا المان‌های مخفی‌شده ایجاد نمی‌شه

 گام اول: افزودن ویجت HTML در المنتور

وارد صفحه‌ی مورد نظر در المنتور شوید و یک المان HTML اضافه کنید. سپس کد زیر را درون آن قرار دهید:

<div class="amazing-scroll-container">
  <div class="custom-amazing-card">
    <a href="https://yourstore.com/product-category/amazing-offers/" target="_blank">
      <img src="https://yourstore.com/wp-content/uploads/amazing-icon.svg" alt="پیشنهاد شگفت‌انگیز">
      <h3>پیشنهادهای شگفت‌انگیز</h3>
      <p>با تخفیف‌های استثنایی خرید کن!</p>
    </a>
  </div>

  <div class="amazing-products-wrapper">
    [products limit="12" columns="4" on_sale="true" orderby="date" order="DESC"]
  </div>
</div>

 توجه: آدرس لینک و تصویر را مطابق با فروشگاه خودتان تنظیم کنید.

 گام دوم: استایل‌دهی به اسلایدر با CSS

در همان ویجت HTML یا از بخش تنظیمات سفارشی قالب، CSS زیر را اضافه کنید:

.amazing-scroll-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem;
  gap: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.custom-amazing-card {
  flex: 0 0 auto;
  width: 220px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;
  scroll-snap-align: start;
  transition: transform 0.2s;
}

.custom-amazing-card:hover {
  transform: translateY(-5px);
}

.custom-amazing-card img {
  width: 150px;
  margin-bottom: 20px;
}

.custom-amazing-card h3 {
  font-size: 14px;
  color: #e60023;
  margin: 8px 0 4px;
}

.custom-amazing-card p {
  font-size: 12px;
  color: #444;
}

.amazing-products-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.amazing-products-wrapper ul.products {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.amazing-products-wrapper ul.products li.product {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s;
  margin: 0 !important;
}

.amazing-products-wrapper ul.products li.product:hover {
  transform: translateY(-5px);
}

.amazing-products-wrapper ul.products li.product img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.amazing-products-wrapper ul.products li.product h2,
.amazing-products-wrapper ul.products li.product h3 {
  font-size: 14px;
  margin: 8px 0 4px;
  color: #e60023;
}

.amazing-products-wrapper ul.products li.product .price {
  font-size: 13px;
  color: #444;
}

.amazing-products-wrapper ul.products li.product .button {
  display: none !important;
}

ویژگی‌های این اسلایدر:

• طراحی تمیز و شبیه به دیجی‌کالا

• اسکرول افقی روان بدون افزونه

• واکنش‌گرا (responsive)

• قابل اجرا در تمامی صفحات المنتور

• بدون نیاز به افزونه‌های پولی مانند JetWooBuilder یا Slider plugins

نکات حرفه‌ای

1. برای استفاده در وبلاگ یا مقالات آموزشی، می‌توانید این HTML را به عنوان بلوک Reusable ذخیره کنید.

2. با استفاده از scroll-snap، تجربه کاربری در موبایل بسیار بهبود پیدا می‌کند.

3. در صورت نیاز، می‌توانید scrollbar را با CSS مخفی یا شخصی‌سازی کنید:

.amazing-scroll-container::-webkit-scrollbar {
  height: 6px;
}
.amazing-scroll-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

نتیجه‌گیری

ساخت یک اسلایدر حرفه‌ای شگفت‌انگیز مانند دیجی‌کالا بدون افزونه، نه تنها امکان‌پذیر بلکه بسیار بهینه‌تر است.

این روش با استفاده از المنتور پرو، انعطاف بالایی دارد و از بار اضافی پلاگین‌ها جلوگیری می‌کند.

در نتیجه، سایت شما سریع‌تر، سبک‌تر و حرفه‌ای‌تر خواهد بود.