مقدمه:
افزونه‌های زیادی برای ساخت اسلایدر محصولات در المنتور وجود دارد که هرکدام امکانات و ویژگی‌هایی را دراختیار شما قرار می‌دهد.اسلایدرها روشی عالی برای نمایش محصولات هستند و میتوان از آنها برای فروش بیشتر محصولات استفاده کرد. در اکثر وبسایت‌ها برای نمایش محصولاتی که دارای تخفیف ویژه هستند از اسلایدرهایی تحت عنوان پیشنهاد شگفت انگیز استفاده می‌کنند.
در این مقاله ما به عنوان نمونه اسلایدر پیشنهاد شگفت انگیز دیجی کالا را با استفاده از المنتور و افزونه DN Slider ایجاد خواهیم کرد. شما میتوانید با اعمال تنظیمات متفاوت‌تر اسلایدرهای متنوعی مشابه وبسایت‌های ( کالاتیک، تیمچه، وب‌پوش و …) ایجاد کنید
مراحل ایجاد اسلایدر پیشنهاد شگفت انگیز دیجی کالا با المنتور و DN Slider
1.تنظیمات کلی اسلایدر:
در ابتدا تعداد اسلایدهایی که قصد داریم به طور همزمان نمایش داده شوند را مشخص می‌کنیم. این تعداد را در دسکتاپ 7، در تبلت 5 و در موبایل 2 وارد می‌کنیم.
فاصله بین اسلاید ها را 2 پیکسل وارد کرده و حالت free mode را فعال می‌کنیم. ارتفاع اسلایدر را 260 پیکسل وارد کرده و لودتبل تصاویر را فعال می‌کنیم
2.تب محتوای اسلاید اول:
برای ساخت اسلایدر پیشنهاد شگفت انگیز دیجی کالا تیتر اسلاید اول را حذف کرده و تصویر مناسب را برای اسلاید اول انتخاب می‌کنیم . متن دکمه اسلاید اول را نیز به (مشاهده همه) تغییر داده و آیکن مناسب را برای آن انتخاب می‌کنیم.
3.تب محتوای محصولات:
در تب محتوای محصولات میتوان مشخص کرد که چه محصولاتی در اسلایدر ما باید نمایش داده شود. در قدم اول تعداد محصول برای نمایش را مشخص کرده و بعد از آن منبع محصولات، چیدمان و صعودی یا نزولی بودن آن را مشخص می‌کنیم.
4.گزینه باز شدن صفحه محصول هنگام کلیک روی اسلاید:
با فعال کردن این گزینه هنگامی که کاربر شما بر روی اسلاید محصول کلیک می‌کند(هرکجای اسلاید محصول) به صفحه محصول منتقل می‌شود. اگر قصد ندارید که صفحه محصول در پنجره جدید باز شود میتوانید گزینه باز شدن صفحه محصول در پنجره جدید را خاموش کنید
5.دکمه محصولات:
هر اسلاید محصول دارای یک دکمه می‌باشد که شما میتوانید از این دکمه برای باز شدن صفحه محصول و یا افزودن مستقیم محصول به سبدخرید استفاده کنید. (در اسلایدر پیشنهاد شگفت انگیز نیازی به این دکمه نیست و باید در تب استایل این دکمه را حذف کرد)
6.بخش محصولات ناموجود:
دراین قسمت میتوان مشخص کرد که محصولات ناموجود به چه صورت در اسلایدر ما نمایش داده شوند. این بخش دارای سه گزینه می‌باشد (نمایش محصول با لیبل – نمایش محصول بدون لیبل – عدم نمایش محصول ناموجود) که شما با توجه به نیاز خود میتوانید هرکدام از این گزینه‌ها را انتخاب کنید (در اسلایدر پیشنهاد شگفت انگیز ما گزینه نمایش محصول با لیبل را انتخاب می‌کنیم)
7.تب محتوای اسلاید آخر
اسلاید آخر اسلایدر را هم باید مشابه به اسلاید اول تنظیم کنیم، تصویر مناسب را انتخاب کرده و متن دکمه را هم (مشاهده همه) تنظیم می‌کنیم و در انتها به سراغ تب استایل خواهیم رفت.
اعمال تنظیمات مربوط به تب استایل
در تب استایل، تظیمات مربوط به ظاهر اسلایدر را در المنتور اعمال کرده تا اسلایدر ما دقیقا مشابه اسلایدر پیشنهاد شگفت انگیز دیجی کالا شود. در قدم اول تنظیمات استایل مربوط به ظاهر کلی اسلایدر را انجام می‌دهیم
1.استایل کلی اسلایدر:
در ابتدا رنگ پس‌زمینه کلی اسلایدر را تنظیم کرده سپس مقداری فاصله داخلی به اسلایدر می‌دهیم (از چپ و راست 4 پیکسل و از بالا و پایین 12 پیکسل) همچنین لبه‌های اسلایدر را کمی گرد می‌کنیم، در آخر هم پیکان‌های تغییر اسلاید را استایل دهی کرده و به سراغ تنظیمات مربوط به اسلاید اول می‌رویم
2.استایل دهی به اسلاید اول:
- در ابتدا مقدار فاصله گذاری را روی 6 پیکسل تنظیم نموده و رنگ پس‌زمینه اسلاید اول را حذف می‌کنیم
- در قدم بعد مقداری فاصله داخلی به اسلاید اول داده (از راست 16 و چپ 20 پیکسل) و سایز تصویر را روی 170 پیکسل قرار می‌دهیم
- در اخر هم تایپوگرافی دکمه اسلاید اول را تنظیم می‌کنیم
3.استایل دهی به اسلاید محصولات
با توجه به اسلایدر مورد نیاز خود، میتوانید تنظیمات متفاوتی را برای ساخت اسلایدر محصولات اعمال کنید.
برای اسلایدر پیشنهاد شگفت انگیز تنظیماتی که باید در المنتور اعمال شوند به شرح زیر است:
- ابتدا رنگ پس‌زمینه اسلاید محصولات را روی سفید تنظیم کرده، مقداری فاصله داخلی به اسلاید محصولات داده (راست و چپ 9 پیکسل، پایین 35 پیکسل و از بالا 12 پیکسل) و لبه‌های اسلاید محصولات را 7 پیکسل گرد می‌کنیم.
- به سراغ محتوای اسلاید محصولات رفته ، انیمیشن و رنگ پس‌زمینه محتوا را حذف می‌کنیم همچنین ارتفاع محتوا را روی 31 تنظیم کرده و به سراغ تصویر محصولات می‌رویم.
- در استایل تصویر محصولات نیز ابتدا پوشش کامل تصویر را غیرفعال کرده سپس اندازه نمایشگر را روی شامل تنظیم می‌کنیم و ارتفاع تصویر را 60 قرار می‌دهیم.
برای ساخت اسلایدر پیشنهاد شگفت انگیز دیجی کالا نیازی به نمایش عنوان و توضیحات محصول نمی‌باشد بنابراین این دو مورد را حذف کرده و قیمت محصولات را استایل‌دهی خواهیم کرد، در بخش بعدی نیز دکمه محصولات را حذف می‌کنم
4.فلش تخفیف، تایمرشمارش معکوس و لیبل محصلات ناموجود:
در ابتدا مکان فلش تخفیف محصولات را مشخص کرده و سپس عرض آن را تنظیم می‌کنیم (38 پیکسل)
در مرحله بعد تایپوگرافی را تنظیم نموده و ارتفاع خط را 14 پیکسل وارد می‌کنیم و در آخر هم رنگ پس‌زمینه را تنظیم کرده و لبه‌های فلش تخفیف را گرد می‌کنیم
نکته در مورد بخش (تنظیم از سمت) : دراین قسمت شما میتوانید مشخص کنید که فلش تخفیف شما از کدام سمت فاصله بگیرد به عنوان مثال اگر تنظیم از سمت، راست انتخاب شود و فاصله از سمت راست را 40 پیکسل وارد کنید فلش تخفیف شما 40 پیکسل از سمت راست اسلاید فاصله خواهد گرفت.
بخش تایمر شمارش معکوس و لیبل محصلات ناموجود، مشابه فلش تخفیف بوده و به راحتی مکان و استایل این دو مورد را تنظیم می‌کنیم
5.اسلاید اخر اسلایدر
تنظیمات اسلاید آخر اسلایدر هم مشابه اسلاید اول بوده، بنابراین تنظیمات مربوط به این قسمت را مشابه اسلاید اول اعمال می‌کنیم تا به شکل زیر نمایش داده شود
حالت تبلت و موبایل
برای این که اسلایدر ما در دستگاه‌های تبلت و موبایل به خوبی نمایش داده شود باید ابتدا در تب محتوا ارتفاع اسلایدر را در حالت تبلت روی 260 پیکسل تنظیم کرده سپس به تب استایل اسلاید اول رفته و فاصله داخلی اسلاید اول را کمتر می‌کنیم (از راست 15 و از چپ 17 پیکسل) فاصله فلش تخفیف را نیز از سمت چپ کمتر می‌کنیم
DN Slider افزونه‌ای کاملا واکنشگرا بوده و شما میتوانید برای ساخت اسلایدر محصولات در المنتور تنظیمات بیشتری در حالت های موبایل و تبلت وارد کنید تا اسلایدر شما در انواع دستگاه‌ها زیبا و جذاب به نظر برسد.
دانلود تصاویر استفاده شده در اسلایدر:
