طراحی کاروسل محصول با المنتور

دوره تخصصی UI باالمنتور

طراحی کاروسل محصول با المنتور

نویسنده : امیرمحمد معلمی
45 دیدگاه
آخرین بروزرسانی : 7 مهر, 1400

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

برای طراحی کاروسل محصول در المنتور ما نیاز داریم تا از آبزارک Listings افزونه جت انجاین استفاده کنیم.

Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

آنچه در این مطلب می خوانید

افزونه های مورد نیاز

ساخت Listings محصول

از منو پیشخوان وردپرس > JetEngine > وارد Listings شده و از بخش بالا سمت راست Add new را می زنیم تا یک Lsting جدید بسازیم!

تنظیمات پنجره Setup Listing Item مطابق با تصویر زیر تنظیم و نامی برای Listing خود درج و در نهایت روی دکمه Create Listing Item کلیک می کنیم تا ویرایشگر Listing باز شود.

در قسمت میز کار ویرایشگر روی آیکون چرخ دنده کلیک کرده و در بخش Listing Setting عرض

از قسمت ابزارک های افزونه المنتور، ابزارک تصویر را به میز کار خود هدایت می کنیم.

در بخش محتوا ابزارک تصویر اندازه عکس را روی Medium 300*300 قرار می دهیم.

همچنین در قسمت پیوند، نوع پیوند را روی آدرس سفارشی قرار داده و آن را روی حالت داینامیک (Post URL) قرار می دهیم

همچنین باید تصویر خود را نیز داینامیک کرده، روی گزینه داینامیک کلیک کرده و نوع آن را روی Product Image قرار می دهیم.

از قسمت ابزارک های افزونه المنتور، ابزارک سربرگ را در زیر تصویر قرار می دهیم. تگ HTML را روی div قرار داده و همانند مراحل قبل باید عنوان ابزارک را داینامیک کرده و حالت آن را روی Product title قرار می دهیم.

همچنین در قسمت پیوند، نوع پیوند را روی حالت داینامیک (Post URL) قرار می دهیم. می توانید مطابق با سلیقه خود تنظیمات استایل عنوان (اندازه عنوان، رنگ و … ) خود را در تب استایل سفارشی سازی کنید.

در این مرحله ابزارک سربرگ را در زیر عنوان محصول قرار می دهیم. تگ HTML را روی div قرار داده و  عنوان ابزارک را داینامیک کرده و حالت آن را روی Product Price قرار می دهیم.

همچنین در قسمت پیوند، نوع پیوند را روی حالت داینامیک (Post URL) قرار می دهیم. می توانید مطابق با سلیقه خود تنظیمات استایل عنوان (اندازه عنوان، رنگ و … ) خود را در تب استایل سفارشی سازی کنید.

همانطور که در مشاهده می کنید. نتیجه نهایی محصول ما در Listing به صورت زیر می باشد.

ابزارک Listing Grid

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

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

در تب محتوا ابزارک در بخش General در بخش Listing نامی که در مرحله ساخت Listing درج کردیم را انتخاب می کنیم. همچنین مابقی تنظیمات را مطابق با تصویر زیر تنظیم می کنیم

در بخس Slider گزینه Enable slider را فعال کنیم تا نمایش محصولات به صورت اسلایدر باشد.

باکمی استایل دهی به ابزارک Listing Grid می توانیم همانند تصویر زیر یک کاروسل محصول ووکامرسی را به نمایش در ییاوریم.