مقدمه:
احتمالا تا به حال به ساخت اسلایدر محصولات در المنتور فکر کرده‌اید، اسلایدرها نقش مهمی در وبسایت‌های فروشگاهی ایفا می‌کنند. ایجاد یک اسلایدر محصولات جذاب باعث می‌شود که مشتریان، تعداد زیادی از محصولات شما را مشاهده و خریداری کنند.
در این مقاله دو نوع متفاوت از اسلایدر محصولات ووکامرس را با المنتور و DN Slider ایجاد خواهیم کرد پس تا انتهای این مقاله همراه ما باشید.
DN Slider چیست؟
DNSlider یک افزونه بسیار انعطاف پذیر برای ساخت اسلایدر محصولات ووکامرس در المنتور می‌باشد. در این افزونه امکان شخصی سازی و مدیریت تمام بخش‌های اسلایدر محصولات وجود دارد. این قالبیت به شما امکان ایجاد انواع مختلف اسلایدر محصولات را میدهد تا شما بتوانید ایده‌‌‌های خود را برای ساخت اسلایدر محصولات پیاده سازی کنید.
دو نکته پیش از شروع کار:
-
پیش از شروع باید بدانیم که چه اسلایدری را می‌خواهیم ایجاد کنیم.
در DNSlider طرح و الگوی آماده ای وجود ندارد و درواقع این افزونه طرح و ایده شما را می‌سازد.
-
تنظیمات لازم برای تبلت و موبایل باید اعمال شود.
همانطو که گفته شد DNSlider یک افزونه بسیار انعطاف پذیر می‌باشد، به شکلی که ظاهر اسلایدر ایجاد شده با این افزونه در دسکتاپ می‌تواند کاملا متفاوت با ظاهر موبایل یا تبلت باشد.
ساخت اسلایدر اول در المنتور (تب محتوا):
برای ساخت اسلایدر اول، نیازی به اسلاید سفارشی برای آخر و اول اسلایدر نیست، بنابراین نمایش اسلاید اول و آخر را غیر فعال می‌کنیم تا این دو اسلاید حذف شوند.
در بخش محصولات، متن دکمه را به “مشاهده محصول” تغییر داده و یک آیکن مناسب برای آن انتخاب می‌کنیم.
تنظیمات اسلایدر اول در تب استایل (پیکان‌های ناوبری):
در تب استایل ابتدا به سراغ پیکان‌های ناوبری می‌رویم و مقدار سایز، عرض و ارتفاع آنها را وارد می‌کنیم.همچنین رنگ پس زمینه را تنظیم کرده و مقدار border radius را افزایش می‌دهیم تا پیکان‌های تغییر اسلاید ما به شکل دایره نمایش داده شود.
در این مدل اسلایدر لازم است که پیکان‌های تغییر اسلاید در سمت چپ و پایین اسلایدر قرار بگیرند. برای انجام این کار تنظیمات پیشرفته پیکان‌ها را فعال کرده و جایگاه پیکان‌ها را سمت چپ انتخاب کنیم. درآخر مکان عمودی پیکان‌ها را افزایش داده تا آنها در جای مورد نظر قرار بگیرند.
تنظیمات اسلایدر اول در تب استایل (محصولات):
- در این مدل اسلایدر نیازی به پوشش کامل تصویر نیست، بنابراین در ابتدا پوشش کامل تصویر را غیر فعال و اندازه نمایشگر را شامل انتخاب می‌کنیم.
- مکان قرارگیری محتوا را سمت راست تنظیم کرده و عرض محتوا را 100 وارد می‌کنیم.
- نوع پس زمینه اسلاید محصولات را گرادیانت و رنگ اول و دوم را انتخاب می‌کنیم. در آخر موقعیت هر دو رنگ را 30 درصد و زاویه را 302 وارد می‌کنیم.
- رنگ پس زمینه محتوا را حذف، چینش محتوا را وسط و ارتفاع آن را 100 درصد وارد می‌کینم.
- فونت سایز عنوان محصولات را برای دسکتاپ وارد کرده و در بخش طرح ها حاشیه متن و زیرخط ویژه را فعال می‌کنیم.
- رنگ و اندازه حاشیه متن و زیرخط ویژه را تنظیم می‌کنیم.
- فونت و رنگ توضیحات محصول را وارد کرده و نمایش قیمت را غیرفعال می‌کنیم.
- مقدار فاصله را برای توضیحات 14 و برای عنوان 7 وارد می‌کنیم.
تنظیمات اسلایدر اول در تب استایل (دکمه محصولات):
در ابتدا فونت سایز دکمه محصولات را وارد و جایگاه دکمه را نیز سمت راست قرار می‌دهیم. در آخر عرض و ارتفاع دکمه محصولات را 192 و37 پیکسل وارد کرده و لبه‌های دکمه محصولات را گرد می‌کنیم.
برای زیباتر شدن دکمه محصولات میتوانیم رنگ پس زمینه را در هنگام هاور موس تغییر دهیم.
در این مدل اسلایدر نیازی به نمایش فلش تخفیف و تایمر شمارش معکوس نداریم، پس نمایش این دو مورد را در تب استایل غیرفعال می‌کنیم.
تنظیم اسلایدر در تبلت:
- ابتدا ارتفاع اسلایدر را در تبلت 270 پیکسل وارد می‌کنیم، سپس به تب استایل رفته و عرض محتوا را 100 قرار می‌دهیم.
- فونت سایز مناسب را برای عنوان، توضیحات و دکمه محصولات انتخاب کرده و اندازه دکمه محصولات را نیز تنظیم می‌کنیم.
تنظیم اسلایدر در موبایل:
ارتفاع اسلایدر را در موبایل 340 پیکسل وارد کرده و در تب استایل مکان قرارگیری محتوا را پایین انتخاب می‌کنیم. در آخر تایپوگرافی را برای عنوان، توضیحات و دکمه محصولات تنظیم کرده و اندازه دکمه محصولات را کوچکتر می‌کنیم.
ساخت اسلایدر دوم در المنتور (تب محتوا):
- برای ساخت دومین اسلایدر محصولات در المنتور ابتدا dnslider را به برگه اضافه کرده و تعداد اسلاید در هرنمایش را وارد می‌کنیم (در دسکتاپ 4، تبلت 3 و مبایل 2).
- ارتفاع اسلایدر را در دسکتاپ 420 پیکسل وارد کرده و نمایش اسلاید اول و آخر را غیرفعال می‌کنیم.
- متن دکمه را به “خرید” تغییر می‌دهیم.
- امتیاز و دسته بندی محصولات را فعال کرده و رنگ دسته بندی را تنظیم می‌کنیم.
تنظیمات اسلایدر دوم در تب استایل (پیکان‌های ناوبری):
در ابتدا رنگ، سایز و اندازه پیکان ها را در دسکتاپ تنظیم و سپس به سراغ محصولات می‌رویم.
تنظیمات اسلایدر اول در تب استایل (محصولات):
- در ابتدا یک حاشیه یکپارچه به اسلاید محصولات داده و لبه اسلایدها را کمی گرد می‌کنیم.
- انیمیشن محتوا را غیرفعال کرده و ارتفاع محتوا را 53 قرار می‌دهیم.
- رنگ محتوا را تنظیم می‌کنیم.
- در این مدل اسلایدر نیازی به پوشش کامل تصویر نیست، پس این مورد را غیرفعال کرده و اندازه نمایشگر تصاویر را شامل انتخاب می‌کنیم.
- در قسمت عنوان محصولات تایپوگرافی را تنظیم کرده و در بخش طرح‌ها حاشیه متن و زیرخط ویژه را فعال می‌کنیم.
- رنگ و اندازه حاشیه متن و زیرخط ویژه را تنظیم می‌کنیم.
- در این اسلایدر نیازی به نمایش توضیحات محصول نیست، بنابراین گزینه نمایش توضیحات را غیرفعال می‌کنیم.
- دربخش قیمت، طرح نمایش را انتخاب کرده، رنگ و تایپوگرافی را هم وارد می‌کنیم.
تنظیمات اسلایدر اول در تب استایل (دکمه محصولات):
برای ساخت اسلایدر محصولات در المنتور (مشابه نمونه دوم) ابتدا تایپوگرافی دکمه محصولات را تنظیم کرده سپس عرض و ارتفاع آن را وارد می‌کنیم.
در این نمونه از اسلایدر ما می‌خواهیم دکمه محصولات روبری قیمت قرار داشته باشد، برای انجام این کار ابتدا جایگاه دکمه را سمت راست انتخاب و مقدار کنترل بالا را افزایش می‌دهیم تا دکمه محصولات روبروی قیمت قرار بگیرد.
در قدم بعد به سراغ فلش تخفیف رفته و طرح مربع‌ها را انتخاب می‌کنیم سپس نمایش تایمر شمارش معکوس را غیرفعال می‌کنیم.
تنظیم اسلایدر در تبلت:
برای سازگاری اسلایدر در دستگاه‌های تبلت تنها کافی است که ارتفاع اسلایدر را در تب محتوا کمتر کنیم (360 پیکسل).
تنظیم اسلایدر در موبایل:
ابتدا ارتفاع اسلایدر را در حالت موبایل 240 پیکسل وارد کرده سپس به تب استایل محصولات رفته و تایپوگرافی را برای عنوان و قیمت تنظیم می‌کنیم.
در آخر به سراغ دکمه محصولات رفته، تایپوگرافی و اندازه دکمه محصولات را مناسب برای دستگاه‌های موبایل تنظیم می‌کنیم.
نتیجه:
ساخت اسلایدر محصولات ووکامرس در المنتور، یک نمای کلی از محصولات شما را به مشتریان ارایه میدهد و به آنها کمک می‌کند تا محصولات را مقایسه و انتخاب کنند. بدون شک اسلایدر محصولات باید زیبا و سازگار با انواع دستگاه‌ها باشد.DNSlider این امکان را به شما میدهد تا محصولات خود را به بهترین شکل به مشتریان نمایش دهید.
