هنگامی که یک صفحه فرود برای محصولات خاصی ایجاد می کنید، چه یک راه اندازی جدید باشد یا فروش که در حال آماده شدن برای آن هستید، احتمال اینکه در مقطعی از ماژول فروشگاه استفاده کنید بسیار زیاد است. ماژول Divi Shop به شما امکان می دهد محصولات را به صورت پویا از افزونه استخراج کنید از WooCommerce و با استفاده از گزینه های داخلی Divi به آنها حالت دهید.
اکنون به طور پیش فرض ماژول فروشگاه دارای چند ساختار ستون است که همه آنها به دو ستون در اندازه صفحه کوچکتر ترجمه می شوند. این بدان معناست که هرچه محصولات بیشتری برای نمایش انتخاب کنید ، پیمایش عمودی بیشتری برای رسیدن به قسمت بعدی صفحه مقصد مورد نیاز است.
در طراحی وب مدرن، تکنیکی است که اغلب برای محدود کردن اسکرول عمودی و نمایش عناصر بر اساس ترجیحات شما استفاده می شود. آخرین بازدید استفاده از کارت های مغناطیسی است. در این آموزش، ما به شما نشان خواهیم داد که چگونه بدون استفاده از افزونه، ماژول Divi Shop را به کارت های محصول پویا در اندازه های صفحه نمایش کوچکتر تبدیل کنید.
ما با آماده کردن عناصر مختلف بخش محصول خود و استفاده از مقدار کمی کد CSS برای فعال کردن افکت کشیدن شروع می کنیم. این یک راه عالی برای به نمایش گذاشتن طیف گسترده ای از محصولات در صفحه فرود است بدون اینکه شما را تحت تأثیر قرار دهد آخرین بازدید.
نتیجه احتمالی
قبل از اینکه به آموزش برویم ، بیایید نگاهی به نتیجه بیندازیم. ما فقط کارت های مغناطیسی محصول را روی تبلت ها و موبایل ها فعال می کنیم. در دسک تاپ ، ساختار ستونی را که در ماژول Shop تعیین می کنیم ، نگه می داریم.
1. صفحات WooCommerce و محصولات را تنظیم کنید
قبل از ورود به بخش Divi این آموزش، مهم است که افزونه از WooCommerce بر روی شما نصب و فعال می شود وب سایت. اگر قبلاً این کار را نکردهاید، بسته به تعداد محصولاتی که میخواهید در ماژول فروشگاه خود نمایش دهید، چندین محصول اضافه کنید.
2. یک صفحه جدید ایجاد کنید و طرح صفحه فرود لوازم التحریر را بارگیری کنید
ایجاد یک صفحه جدید
هنگامی که محصولات در محل خود قرار گرفتند ، صفحه جدیدی را در بخش وردپرس خود اضافه کنید. به صفحه خود عنوان دهید ، صفحه را منتشر کرده و Divi Visual Builder را فعال کنید.
طرح صفحه فرود را بارگیری کنید
پس از ورود به صفحه جدید خود ، به طرح های از پیش تعیین شده خود بروید و طرح صفحه فرود لوازم التحریر را بارگیری کنید. اگرچه ما از این طرح خاص استفاده می کنیم ، اما شما می توانید از هر طرح دیگری که می خواهید استفاده کنید ، به شرط اینکه ماژول فروشگاهی را درون این طرح اضافه یا قرار دهید.
3. بخش فروشگاه را ویرایش کنید
بخش را با ماژول Shop بیابید
اگر به صفحه جدید خود که با استفاده از طرح صفحه اصلی لوازم التحریر ایجاد کرده ایم ، پایین برویم ، به بخشی با یک ماژول فروشگاه برخورد خواهیم کرد. ما در مراحل بعدی این آموزش از این بخش استفاده خواهیم کرد.
تنظیمات خط
اندازه پاسخگو
با باز کردن تنظیمات ردیف ردیف حاوی ماژول Shop شروع کنید. همانطور که قبلاً ذکر شد ، ما همان طراحی را روی دسک تاپ نگه داریم ، فقط کارتهای کش رفتن محصول را در اندازه صفحه کوچکتر فعال خواهیم کرد.
برای ایجاد یک تجربه بدون دردسر ، به ردیف اجازه می دهیم تا با تغییر عرض در تنظیمات اندازه ، سمت چپ و راست صفحه را لمس کند.
- از عرض ناودان سفارشی استفاده کنید: 1
- عرض: 80٪ (دسک تاپ) ، 100٪ (رایانه لوحی و تلفن)
دید
همچنین با تنظیم تنظیمات قابلیت مشاهده بر روی پنهان ، اطمینان حاصل خواهیم کرد که چیزی فراتر از ظرف ردیف ها نیست.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
پارامترهای ماژول را خریداری کنید
تعداد محصولات و ساختار ستون دفتر مورد نظر خود را انتخاب کنید
سپس ، تنظیمات ماژول Shop را باز خواهیم کرد. تغییراتی که در کد CSS ایجاد می کنیم (که بعداً اضافه خواهیم کرد) به تعداد محصولاتی که نشان می دهیم بستگی دارد.
ما در ابتدا به شما نشان خواهیم داد که چگونه یک ماژول فروشگاه را با 8 محصول به کارتهای محصول تبدیل کنید. می توانید هر طرح ستونی را که می خواهید برای دسک تاپ انتخاب کنید.
- تعداد محصولات: 8
- طرح ستون: 4 ستون
اندازه پاسخگو
برای افزایش اندازه ماژول فروشگاه ، پارامترهای اندازه را در برگه طراحی تغییر خواهیم داد. توجه داشته باشید که ما این کار را فقط برای رایانه لوحی و تلفن انجام می دهیم.
- عرض: 100٪ (دسک تاپ) ، 250٪ (رایانه لوحی و تلفن)
- حداکثر عرض: 100٪ (میز) ، 250٪ (تبلت و تلفن)
کلاس CSS
ما همچنین یک کلاس CSS به ماژول فروشگاه خود اضافه خواهیم کرد. بعداً ، وقتی کد CSS را اضافه می کنیم ، می توانیم ماژول Shop را که فقط این کلاس CSS را حمل می کند ، تغییر دهیم. به عبارت دیگر ، اگر می خواهید ماژول Shop دیگری در حالت عادی ظاهر شود ، کنار گذاشتن این کلاس CSS به شما این امکان را می دهد.
- کلاس CSS: کارتهای کشویی محصول
سرریزهای واکنشی
ما با تغییر تنظیمات دید در اندازه های مختلف صفحه ، تنظیمات خط را تکمیل خواهیم کرد. همانطور که در تنظیمات مشاهده می کنید ، ما فقط می خواهیم اثر پیمایش در اندازه های کوچکتر صفحه نمایش رخ دهد.
- سرریز افقی: پنهان (دسک تاپ) ، پیمایش (رایانه لوحی و تلفن)
- سرریز عمودی: پنهان
زیر ماژول Shop یک ماژول کد اضافه کنید
پس از ویرایش ماژول Shop ، می توانید یک ماژول کد را در زیر اضافه کنید.
کد CSS را به ماژول اضافه کنید
کد CSS زیر ماژول 8 محصول فروشگاه ما را به طور خودکار به کارت های مغناطیسی واکنش پذیر تبدیل می کند:
<style>
@media all
and (max-width: 980px) {
.product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;}
.product-swipe-cards .woocommerce ul.products::before {content: none;display: block;}
.product-swipe-cards.et_pb_shop ul.products li.product {width: 100%
!important;}
.product-swipe-cards .woocommerce {width: 255%
!important;margin-left: 5%;}
.product-swipe-cards::-webkit-scrollbar {display: none;}
.product-swipe-cards {-ms-overflow-style: none;}
}
</style>
حساب های مختلف محصول را مطابقت دهید
حال ، اگر می خواهید محصولات کمتری (یا بیشتر) به ماژول فروشگاه خود اضافه کنید ، کد در دو مکان کمی تغییر می کند. این دو مکان باید به صورت دستی تغییر کند تا با نتیجه مورد نظر مطابقت داشته باشد. بیایید به عنوان مثال تعداد محصولات موجود در ماژول فروشگاه خود را به "4" تغییر دهیم.
- تعداد محصولات: 4
وقتی به کد خود برگشتیم ، باید دو تغییر ایجاد کنیم. ابتدا باید ستون های الگوی شبکه را اصلاح کنیم. به جای 8 ، ما از 4 (همان تعداد محصولاتمان) استفاده می کنیم. ما همچنین درصدی را که این محصولات در صفحات محصول ما اشغال می کنند افزایش می دهیم (هرچه محصولات بیشتر ، فضای کمتری داشته باشیم).
شبکه-الگو-ستون ها: تکرار (4 ، 14٪)! مهم؛
سپس عرض ظرفی را که محصولات در آن قرار می گیرد نیز تغییر خواهیم داد. برای 4 محصول ، این معادل 150٪ است. این مقادیر ثابت نیستند ، با بازی و یافتن هماهنگی بین ستونهای مدل شبکه و عرض ظرف بدست می آیند.
برای یافتن تراز مناسب ، به نمای موبایل داخل Visual Builder بروید و هنگام مشاهده نتیجه آن تغییرات ، مقادیر را با دقت تنظیم کنید.
width: 150%
!important;
یک ضربه محکم و ناگهانی اسکرول اضافه کنید
اگر میخواهید تجربه کاربری را در طراحی کارت کشیدن خود کمی جلوتر ببرید، میتوانید یک اسکرول نیز اضافه کنید. اسکرول گرفتن به شما اجازه می دهد آخرین بازدید برای پیمایش با ثابت کردن ابتدای یک محصول جدید.
این بدان معناست که اسکن آنها نیازی به دقیق ندارد ، اسلام پیمایش در بعضی از مواقع کار را بر عهده می گیرد و صفحه را تنظیم می کند تا موقعیت خود را در داخل مکانیسم پیمایش کناری تنظیم کند.
برای فعال کردن اسکرول گرفتن روی کارتهای کش رفتن محصول خود ، به هر محصول جداگانه در کد CSS یک خط کد CSS اضافه کنید (به صفحه چاپ زیر مراجعه کنید).
scroll-snap-align: شروع کنید
ما همچنین می خواهیم با اضافه کردن خط زیر کد CSS ، پیمایش اسکرول را در ماژول فروشگاه خود فعال کنیم.
scroll-snap-type: x اجباری است
برای نمایش سایر دسته ها از ماژول کارگاه استفاده مجدد کنید
یک ردیف را کلون کنید
پس از تکمیل اولین مجموعه کارتهای مغناطیسی ، می توانید کل ردیف را یک بار کلون کنید.
ماژول کد را در ردیف تکراری حذف کنید
تا زمانی که ماژول فروشگاه شما همان کلاس CSS قبلی را داشته باشد ، یک ماژول کد نیز انجام می شود. پیش بروید و ماژول کد را در خط تکراری خود حذف کنید.
ردیف تکراری را به همان اندازه که می خواهید کلون کنید
و بسته به اینکه چند مجموعه کارت کش رفتن را می خواهید در صفحه فرود خود نشان دهید ، اکنون ردیف تکرار را هر چند بار که نیاز است ، شبیه سازی کنید!
4. تغییرات صفحه را ذخیره کرده و نتایج را در یک دستگاه تلفن همراه مشاهده کنید
اطمینان حاصل کنید که پس از اضافه کردن کارتهای کش رفتن محصول ، قبل از خروج از Visual Builder صفحه خود را ذخیره کرده و کار شما تمام شده است!
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
آخرین افکار
در این مقاله ، ما به شما نشان داده ایم که چگونه ماژول Divi Shop یکپارچه را به کارتهای مغناطیسی محصول در اندازه صفحه نمایش کوچکتر تبدیل کنید. در دسک تاپ ، ساختار اصلی ستون را که به ماژول Shop اختصاص داده شده است ، نگه داشته ایم.
استفاده از نقشه های کش رفتن محصول به شما امکان می دهد محصولات بی پایان را به مکانیسم کش رفتن افقی اضافه کنید بدون اینکه بازدیدکنندگان پیمایش عمودی خود را تحت فشار قرار دهید.
این روندی است که اغلب در طراحی وب سایت مدرن مورد استفاده قرار می گیرد زیرا بر رفتار کاربر تمرکز دارد و دسترسی به طیف گسترده ای از عناصر در صفحه های کوچکتر را آسان می کند.
شما می توانید از این برگه های محصول در هر صفحه استفاده کنید ، اما مخصوصاً برای صفحه های فرود محصول که ایجاد می کنید بسیار مفید است. شما همچنین می توانید فایل طرح JSON را به صورت رایگان بارگیری کنید!
اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.