آموزش ساخت اسلایدر پیشنهاد شگفت انگیز دیجی کالا با المنتور

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

چرا اسلایدر پیشنهاد شگفت‌انگیز وردپرس مهم است؟

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

در این مقاله، شما یاد می‌گیرید:

• چگونه اسلایدر محصولات در المنتور بسازید.
• نحوه افزودن تایمر شمارش معکوس به اسلایدر.
• نکات بهینه‌سازی اسلایدر فروشگاهی وردپرس برای سئو و سرعت.
• ایده‌های خلاقانه برای طراحی اسلایدر کاربرپسند.

طراحی اسلایدر پیشنهاد شگفت انگیز ریسپانسیو (برای موبایل و تبلت)

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

پیش‌نیازهای ساخت اسلایدر دیجی‌کالا با المنتور

برای شروع آموزش ساخت اسلایدر پیشنهاد شگفت انگیز دیجی کالا، موارد زیر را آماده کنید:

• وردپرس: نسخه 6.5 یا بالاتر برای عملکرد بهینه.
• المنتور پرو: برای دسترسی به ویجت‌های پیشرفته مانند اسلایدر وردپرس و تایمر.
• ووکامرس: برای اتصال محصولات به اسلایدر پیشنهاد شگفت‌انگیز.
• قالب سازگار: مانند Hello Elementor برای طراحی سایت فروشگاهی.

آموزش گام‌به‌گام ساخت اسلایدر پیشنهاد شگفت‌انگیز

ما قبلاً در آموزشی با عنوان ساخت پیشنهاد شگفت‌انگیز با المنتور در سایت میهن تم، نحوه ساخت اسلایدر محصولات تخفیف‌خورده را به‌صورت ویدیویی آموزش داده بودیم. در این مقاله با جزییات بیشتری به روش طراحی اسلایدر پیشنهاد شگفت‌ انگیز با المنتور پرو، ساخت گرید محصولات تخفیف‌ خورده و استفاده از ویجت Loop Carousel می‌پردازیم تا شما بتوانید یک اسلایدر حرفه‌ ای با شمارش معکوس تخفیف و نمایش درصد تخفیف ایجاد کنید که باعث افزایش نرخ تبدیل و فروش سایتتان شود. این روش به شما امکان می‌دهد بدون نیاز به افزونه اضافی، تجربه کاربری جذاب و مدرنی برای بازدیدکنندگان فراهم کنید.

مرحله ۱: آماده‌سازی صفحه و محصولات تخفیف‌دار

1. ایجاد صفحه جدید: در پیشخوان وردپرس، به صفحات > افزودن جدید بروید و یک صفحه برای اسلایدر پیشنهاد شگفت‌انگیز ایجاد کنید.
2. فعال‌سازی المنتور: روی «ویرایش با المنتور» کلیک کنید.
3. تنظیم محصولات در ووکامرس:
   • به محصولات > افزودن جدید بروید.
   • محصولاتی با تخفیف ویژه یا دسته‌بندی «پیشنهاد شگفت‌انگیز وردپرس» اضافه کنید.
   • زمان‌بندی تخفیف را در تنظیمات محصول تنظیم کنید.

نکته سئو: از کلمات کلیدی مانند «تخفیف ویژه» و «پیشنهاد شگفت‌انگیز» در عنوان و توضیحات محصول استفاده کنید.

Alt Text پیشنهادی برای تصاویر: «محصول تخفیف‌دار در اسلایدر پیشنهاد شگفت‌انگیز دیجی‌کالا»

مرحله ۲: آموزش ساخت قالب لوپ برای نمایش محصولات تخفیف‌دار در المنتور

در این مرحله از آموزش ساخت اسلایدر پیشنهاد شگفت انگیز دیجی کالا، باید یک قالب حلقه (Loop Template) برای نمایش تک‌تک محصولات تخفیف‌دار ایجاد کنیم. این قالب مشخص می‌کند هر محصول چگونه در گرید یا کاروسل ظاهر شود؛ مثلاً تصویر محصول، عنوان، قیمت و درصد تخفیف در قالب به صورت مرتب و جذاب چیده می‌شوند. با ساخت این قالب، می‌توانیم کنترل کامل روی طراحی هر آیتم داشته باشیم و آن را در ویجت Loop Carousel به کار ببریم تا مجموعه‌ای از محصولات تخفیف‌دار را به صورت حرفه‌ای و منظم نمایش دهیم. اکنون مراحل ساخت این قالب حلقه را قدم به قدم با هم پیش می‌رویم.

1. رفتن به بخش قالب‌های حلقه

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

• نوع قالب را روی حلقه (Loop Item) قرار دهید.
• یک نام برای قالب وارد کنید (مثلاً: تخفیف ویژه).
• روی “ایجاد قالب” کلیک کنید.

2. طراحی قالب لوپ

در صفحه المنتور، حالا باید المان‌های محصول را به صورت دلخواه درون قالب قرار دهید.

پیشنهاد می‌شود المان‌های زیر را اضافه کنید:

✅ تصویر محصول

• ابزارک “تصویر محصول” را اضافه کنید.
• حالت نمایش را روی “محتوای پویا” قرار دهید.

✅ عنوان محصول

• از ابزارک “عنوان پست” یا “عنوان محصول” استفاده کنید.

✅ درصد تخفیف

• ابزارک “HTML” یا “عنوان” را اضافه کنید.
• سپس از محتوای پویا استفاده کرده یا یک شرط بنویسید تا درصد تخفیف نمایش داده شود (در صورت موجود بودن فیلد اختصاصی یا متا).

✅ قیمت محصول

• ابزارک “قیمت محصول” را اضافه کنید تا قیمت فعلی و تخفیف‌خورده نمایش داده شود.

📌 نکته: در صورتی که بخواهید داخل اسلایدر پیشنهاد شگفت انگیز دیجی کالا درصد تخفیف را محاسبه و نمایش دهید (مثلاً ۳۰٪ تخفیف)، باید از افزونه‌هایی مانند JetWooBuilder یا JetEngine برای ساخت فیلدهای پویا یا کدنویسی استفاده کنید، مگر اینکه قالبتان این قابلیت را از قبل داشته باشد.

البته در ادامه آموزش ما کدهای لازم برای نمایش میزان درصد تخفیف را در قالب حلقه برای شما قرار خواهیم داد.

4. تنظیمات نهایی

• قالب را ذخیره کنید.
• نیازی به تعیین شرط نیست چون این قالب داخل ویجت Loop Carousel فراخوانی خواهد شد.

در مرحله بعد باید این قالب را در ویجت حلقه کاروسل استفاده کنیم که در ادامه به آن خواهیم پرداخت.

مرحله ۳: افزودن تایمر شمارش معکوس به اسلایدر

تایمر شمارش معکوس، یکی از بهترین ابزارها برای ایجاد حس فوریت در کاربر است و می‌توان آن را تنها با المنتور پرو، بدون نیاز به هیچ افزونه‌ اضافه‌ای طراحی کرد. این ویژگی مخصوصاً برای نمایش تخفیف‌های زمان‌دار یا پیشنهادهای ویژه بسیار کاربردی است.

در ادامه یاد میگیریم که:

• یک تایمر شمارش معکوس جذاب قرار می‌دهیم
• محصول یا پیشنهاد ویژه را با طراحی چشم‌نواز نمایش می‌دهیم
• طراحی را کاملاً واکنش‌گرا و متناسب با موبایل انجام می‌دهیم

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

1. ویجت شمارش معکوس را از المنتور پرو به اسلایدر پیشنهاد شگفت‌انگیز اضافه کنید.
2. تنظیمات تایمر:
   • تاریخ و ساعت پایان تخفیف را وارد کنید.
   • رنگ تایمر را با برند خود هماهنگ کنید (مثلاً قرمز برای حس فوریت).
3. محل قرارگیری: تایمر را در بالای تصویر محصول یا در یک باکس شناور قرار دهید.

مزیت: تایمر شمارش معکوس المنتور می‌تواند نرخ کلیک را تا 32٪ افزایش دهد .

مرحله ۴: ساخت گرید محصولات تخفیف‌دار با ویجت Loop Carousel در المنتور

برای طراحی یک اسلایدر حرفه‌ای از محصولات تخفیف‌دار در سایت خود، المنتور پرو ویجتی به نام Loop Carousel (حلقه کاروسل) در اختیار شما قرار می‌دهد. این ویجت عملکردی مشابه Loop Grid دارد، با این تفاوت که آیتم‌ها به‌صورت افقی (side-to-side) جابه‌جا می‌شوند نه عمودی، و تجربه‌ای پویا و جذاب برای کاربر ایجاد می‌کند.

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

🧩 گام ۱: افزودن ویجت Loop Carousel به صفحه

ابتدا از ویرایشگر المنتور، ویجت Loop Carousel را جستجو کرده و آن را به محل مورد نظر در صفحه اضافه کنید.

این ویجت از قالب‌های Loop برای طراحی ظاهر هر آیتم استفاده می‌کند و نمایش پویا و قابل فیلتر برای انواع محتوا مانند محصولات، نوشته‌ها و صفحات فراهم می‌کند.

🎨 گام ۲: تنظیم بخش طرح‌بندی (Layout)

از تب Content وارد بخش Layout شوید. در اینجا تنظیمات زیر را پیکربندی کنید:

Template Type (نوع قالب):
گزینه Products را انتخاب کنید.

Choose Template (انتخاب قالب):
یکی از قالب‌های طراحی‌شده Loop (برای نمایش ظاهر هر محصول) را انتخاب کنید. در صورت نیاز روی Edit Template کلیک کنید.

Number of Slides (تعداد اسلایدها):
تعیین می‌کند چه تعداد محصول در کل نمایش داده شود، مثلاً 10.

Slides to Display (تعداد محصولات در هر ردیف):
مثلاً 4 تا ۶ محصول به‌صورت هم‌زمان نمایش داده شود.

Slides on Scroll:
چند اسلاید با هر بار کلیک فلش حرکت کند (معمولاً 1).

Equal Height:
فعال کردن این گزینه باعث می‌شود همه آیتم‌ها در ارتفاع یکسان قرار بگیرند و طراحی منظم‌تری داشته باشید.

🔍 گام ۳: تنظیم بخش Query (کوئری)

در تب Content، بخش Query را باز کنید تا محتوای داخل اسلایدر را فیلتر کنید:

Source (منبع):
محصولات را انتخاب کنید.

حراج (فقط محصولات تخفیف‌دار):
از بین گزینه ها حراج را انتخاب کنید تا فقط محصولات دارای تخفیف نمایش داده شوند.

Include / Exclude (شامل / استثنا):
می‌توانید دسته‌بندی خاص، نویسنده، برچسب یا محصول خاصی را اضافه یا حذف کنید.

Order By (مرتب‌سازی بر اساس):
گزینه‌هایی مثل تاریخ، عنوان، محبوبیت یا تصادفی را انتخاب کنید.

Order:
به‌صورت صعودی یا نزولی.

Query ID (شناسه کوئری):
اگر می‌خواهید از این کوئری در فیلترها استفاده کنید، یک شناسه اختصاصی برای آن بنویسید.

⚙️ گام ۴: تنظیم بخش Settings (تنظیمات حرکتی)

در همین تب Content، بخش Settings را باز کنید:

Autoplay (پخش خودکار):
غیر فعال کنید تا اسلایدر به‌صورت خودکار حرکت نکند.

Infinite Scroll (اسکرول بی‌نهایت):
غیرفعال کنید ، در صورت فعال بودن، پس از پایان اسلایدها، دوباره از اول نمایش داده می‌شوند.

Transition Duration (مدت زمان جابجایی):
سرعت حرکت بین اسلایدها، مثلاً 500 میلی‌ثانیه.

Scroll Direction (جهت حرکت):
Left-to-Right یا Right-to-Left را انتخاب کنید.

Pause on Hover / Interaction:
با فعال‌سازی این گزینه‌ها، در زمان توقف موس روی اسلایدر یا کلیک کاربر، پخش خودکار متوقف می‌شود.

🧭 گام ۵: تنظیم Navigation (جهت‌یابی با فلش)

در همین تب Content:

• Arrows (فلش‌ها):
  فعال‌سازی فلش‌های قبل و بعد.
• Previous/Next Icon:
  می‌توانید آیکن دلخواه را از کتابخانه آیکن المنتور انتخاب کنید یا فایل SVG دلخواه را آپلود کنید.
• Icon Position (موقعیت فلش‌ها):
  می‌توانید جهت‌یابی افقی و عمودی را برای فلش‌ها انتخاب کنید:
  • افقی: شروع / وسط / پایان
  • عمودی: بالا / وسط / پایین
  • همچنین می‌توانید فاصله دقیق را با واحد پیکسلی تنظیم کنید.

🔢 گام ۶: فعال‌سازی Pagination (صفحه‌بندی)

در صورت تمایل به نمایش موقعیت فعلی در اسلایدر:

• Pagination Type:
  می‌توانید یکی از موارد زیر را انتخاب کنید:
  • Dots (نقاط دایره‌ای)
  • Fractions (عدد/عدد)
  • Progress Bar (نوار پیشرفت)
• می‌توانید رنگ، اندازه، موقعیت (داخل یا بیرون)، و فاصله آن با محتوا را نیز از تب Style تنظیم کنید.

🖌️ گام ۷: تنظیمات ظاهری از تب Style

برای شخصی‌سازی طراحی:

• Gap between slides:
  فاصله بین هر آیتم در اسلایدر.
• Navigation Style:
  اندازه، رنگ و حالت hover آیکن‌های فلش را تنظیم کنید.
• Pagination Style:
  رنگ، اندازه و فاصله صفحه‌بندی را تغییر دهید.

سوالات متداول (FAQ) درباره اسلایدر پیشنهاد شگفت‌انگیز

نتیجه‌گیری

ساخت اسلایدر پیشنهاد شگفت انگیز دیجی کالا با المنتور راهی عالی برای افزایش تعامل کاربران و فروش است. با این آموزش، می‌توانید یک اسلایدر محصولات در المنتور طراحی کنید که هم ریسپانسیو باشد و هم برای سئو بهینه شده باشد. اگر سوال یا پیشنهادی دارید، در بخش نظرات با ما در میان بگذارید!