ویجت

۹۱۳۰۲۶۵۴ ۰۲۱

اسلایدر محصولات پویا با اسمارت اسلایدر برای المنتور

کروسل اسلایدر محصولات پویا در اسمارت اسلایدر

آنچه خواهید آموخت

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

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

در اسلایدهای کروسل میتونین اندازه اسلایدر و اندازه اسلایدها رو جداگانه تنظیم کنید. اسلایدهایی که در کنار هم نمایش داده میشن در یک صفحه قرار دارن. میتونین حداکثر عرض رو برای صفحه هم تنظیم کنید. در این مثال ویدئوی ما 3 اسلاید در هر اسلایدر ظاهر میشه.

اسلایدر محصول پویا

لایه ها در اسمارت اسلایدر پرو

اسلایدر محصولات ووکامرس

جذاب ترین لایه در این مثال لایه ترنزیشن یا انتقاله. وقتی ماوس رو روی تصویر اسلایدر میبریم همراه با یک انیمیشن نرم تصویر عوض میشه.

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

انیمیشن در اسمارت اسلایدر پرو

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

کروسل محصولات ووکامرس

لی آت یا طرح در اسمارت اسلایدر پرو

اگر لیست لایه رو باز کنید، میتونین تمام لایه های اسلاید خودتون رو بررسی کنین. مثلا در تصویر زیر یک لایه انتقال در بالای اسلاید و یک ردیف زیرش وجود داره. این سطر دو ستون داره لایه های عنوان داخلش قرار دارن.

لیست لایه ها در افزونه اسمارت اسلایدر پرو

اسلایدرهای ریسپانسیو اسمارت اسلایدر پرو

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

اسلایدرهای پویا در اسمارت اسلایدر پرو

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


اسمارت اسلایدر پرو


المنتور پرو

9 پاسخ

  1. با سلام اسلایدری که میسازم از 5 تا اسلاید بیشتر قرار نمیده تو اسلایدر ، تو همین آموزش هم اخر آموزش 5 تا بیشتر برای شما نیست چکارکنم بیشتر بشه؟ ممنون از سایت خوبتون

    1. سلام و درود خدمت شما دوست عزیز
      احتراما، برای این مورد می توانید از ابزارک “لیست شبکه” موجود در افزونه JetEngine نیز استفاده نمایید که قابلیت شخصی سازی بیشتری نیز دارد.
      باتشکر از حضور شما

  2. سلام.
    ممنون از آموزش خوبتون.
    چه جوری اسلایدری که به این روش ساختید رو تو صفحه ی المنتور درج کنم؟

  3. سلام وقت بخیر
    این افزونه اسلایدر فقط برای ساخت این نمونه اسلاید هستش یا ویژگیهای دیگری هم داره

    1. درود بر شما،
      کلا برای ساخت اسلایدر هست انواع اسلایدر.
      دموهاشو میتونین در این لینک ببینید.

      1. سلام چطوری میتونم ی اسلایدر طراحی کنم که توی اون سایز هم بشه انتخاب کرد مثل سایت های پوشاک M L XL این مدلی بشه انتخاب کرد از افزونه swachs استفاده میکنم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *