آقای برنامه نویس

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

قرار دادن محصولات وبسایت بصورت کاروسل (اسلاید) بسیار جذاب بوده و باعث افزایش تعامل کاربر با المان ها می‌شود. افزونه صفحه ساز المنتور ویژگی های بسیار زیادی دارد.

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

قرار دادن محصولات وبسایت بصورت کاروسل (اسلاید) بسیار جذاب بوده و باعث افزایش تعامل کاربر با المان ها می‌شود. افزونه صفحه ساز المنتور ویژگی های بسیار زیادی دارد. اما گاهی اوقات برای طراحی بخش هایی از وبسایت وردپرسی خود نیاز هست که از افزونه های جانبی المنتور کمک بگیریم.

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

مشاهده و خرید افزونه افزونه جت انجین فارسی (JetEngine) اورجینال

ساخت Listings محصول

برای شروع در پیشخوان وردپرس به بخش Listings < JetEngine (جت انجین > آگهی ها) وارد شده. سپس در بخش بالا سمت راست صفحه روی دکمه Add new (اضافه کردن) کلیک کنید تا یک Lsting جدید ساخته شود.

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

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

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

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

بعد از باز شدن ویرایشگر المنتور ،در بخش پایین سمت راست بر روی آیکون تنظیمات (چرخ دنده) کلیک کرده، و در بخش Listing Setting عرض Preview Width را بر روی 300px قرار دهید.

تنظیم Preview Width در طراحی کاروسل محصول با المنتور
تنظیم Preview Width

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

طراحی کاروسل محصول با المنتور - آقای برنامه نویس
اضافه کردن المان تصویر در المنتور

سپس در بخش محتوای المان تصویر، اندازه تصویر را روی Medium-300×300 قرار دهید.

طراحی کاروسل محصول با المنتور - آموزش رایگان المنتور

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

طراحی کاروسل محصول با المنتور - آقای برنامه نویس

سپس برای داینامیک کردن تصویر، در بخش انتخاب تصویر روی گزینه داینامیک کلیک کرده و نوع آن را روی تصویر محصول Product) Image) قرار دهید.

carousel product JetEngine4mr programerir 1 | آقای برنامه نویس | مرجع آموزش المنتور و وردپرس به زبان ساده
مرحله 1
create carousel product2 1 | آقای برنامه نویس | مرجع آموزش المنتور و وردپرس به زبان ساده
تصویر داینامیک شد!
create carousel product3mr programerir | آقای برنامه نویس | مرجع آموزش المنتور و وردپرس به زبان ساده
مرحله 2

سپس از قسمت المان ها، ویجت سربرگ را در زیر تصویر درج می کنیم. در قدم بعدی باید همانند مراحل قبل باید عنوان ابزارک را نیز داینامیک کرده و حالت آن را روی عنوان محصول (Product title) قرار می دهیم.

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

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

طراحی کاروسل محصول با المنتور - آموزش رایگان المنتور

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

طراحی کاروسل محصول با المنتور - آقای برنامه نویس
طراحی کاروسل محصول با المنتور

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

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

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

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

ابزارک Listing Grid افزونه جت انجین

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

سپس از المان ها، ویجت Listing Grid را در صفحه درج می کنیم.

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

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

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

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

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

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام آقای برنامه نویس عضو شوید.
saeedhassani
saeedhassani
محتوا پادشـــاه است، با تایپ هر کلمه یک قدم به هدفـم نزدیک تـر میشم...
saeedhassani
saeedhassani
محتوا پادشـــاه است، با تایپ هر کلمه یک قدم به هدفـم نزدیک تـر میشم...

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

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

پاسخ خود را پیدا نکردید؟
همکاران ما آنلاین هستند تا پاسخگوی سوالات شما باشند حتما سوال خود را در بخش دیدگاه ها بپرسید.
افزونه مستر پک برای افزونه صفحه ساز المنتور
افزونه مستر پک در مخزن وردپرس به‌صورت رایگان منتشر شد!

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

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

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

قابلیت کد کوتاه ضروری در افزونه المنت پک - آقای برنامه نویس
قابلیت کد کوتاه ضروری در افزونه المنت پک

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

تغییرات وردپرس 5.7 - آقای برنامه نویس
وردپرس 5.7 منتشر شد!

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

طراحی صفحه در دست تعمیر وردپرس با المنتور
طراحی صفحه در دست تعمیر وردپرس با المنتور

وردپرس برخی اوقات به بروزرسانی و تعمیر احتیاج داره. و هنگامی که وبسایت در دست تعمیر و دیباگ هست برای حفظ امنیت وبسایت نمیتوان وبسایت را در دسترس بازدید کنندگان قرار داد. به همین دلیل هنگام تعمیر وبسایت، ترجیحاً حالت تعمیر رو فعال میکنند!

نحوه تغییر DNS دامنه های ir در ایرنیک - آقای برنامه نویس آموزش المنتور و وردپرس
نحوه تغییر DNS دامنه های ir در ایرنیک

دامنه هویت وب‌سایت را در اینترنت مشخص می‌کند. تغییر dns دامنه های ir با دامنه های جهانی متفاوت است. بهترین راه تغییر DNS دامنه ir در پنل وب سایت ایرنیک است.

سفارشی سازی قالب وردپرس با ابزار inspect element
سفارشی سازی قالب وردپرس با ابزار inspect element

آیا تاکنون قصد داشته اید بصورت موقت یک صفحه وب را ویرایش کنید تا درمورد رنگ ها، فونت ها و استایل های وبسایت تصمیم گیری کنید؟ این عمل با ابزاری که هم اکنون روی مرورگر وب شما با نام inspect element وجود دارد کاملا امکان پذیر است.

طراحی پوسته باکس پست‌های المنتور - آقای برنامه نویس
طراحی پوسته باکس پست‌های المنتور

احتمالا شما نیز تاکنون از ویجت پست های المنتور استفاده کرده‌‌اید. این المان تنها دارای 3 پوسته ( کلاسیک، کارت ها و محتوای تمام عرض ) می‌باشد. ولی شاید نیاز به سفارشی سازی و اضافه کردن امکانات بیشتری برای نمایش پست‌ها داشته باشید.

ساخت ابزارک در وردپرس و افزودن ابزارک به قالب وردپرس
ساخت ابزارک در وردپرس و افزودن ابزارک به قالب وردپرس

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

ورود به حساب