هنگامی که یک صفحه فرود برای محصولات خاصی ایجاد می کنید، چه یک راه اندازی جدید باشد یا فروش که در حال آماده شدن برای آن هستید، احتمال اینکه در مقطعی از ماژول فروشگاه استفاده کنید بسیار زیاد است. ماژول Divi Shop به شما امکان می دهد محصولات را به صورت پویا از افزونه استخراج کنید از WooCommerce و با استفاده از گزینه های داخلی Divi به آنها حالت دهید. 

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

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

ما با آماده کردن عناصر مختلف بخش محصول خود و استفاده از مقدار کمی کد CSS برای فعال کردن افکت کشیدن شروع می کنیم. این یک راه عالی برای به نمایش گذاشتن طیف گسترده ای از محصولات در صفحه فرود است بدون اینکه شما را تحت تأثیر قرار دهد آخرین بازدید

نتیجه احتمالی

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

انیمیشن فروشگاه ماژول محصول Divi

1. صفحات WooCommerce و محصولات را تنظیم کنید

قبل از ورود به بخش Divi این آموزش، مهم است که افزونه از WooCommerce بر روی شما نصب و فعال می شود وب سایت. اگر قبلاً این کار را نکرده‌اید، بسته به تعداد محصولاتی که می‌خواهید در ماژول فروشگاه خود نمایش دهید، چندین محصول اضافه کنید.

محصولات ووکامرس ایجاد کنید

2. یک صفحه جدید ایجاد کنید و طرح صفحه فرود لوازم التحریر را بارگیری کنید

ایجاد یک صفحه جدید

هنگامی که محصولات در محل خود قرار گرفتند ، صفحه جدیدی را در بخش وردپرس خود اضافه کنید. به صفحه خود عنوان دهید ، صفحه را منتشر کرده و Divi Visual Builder را فعال کنید.

صفحه divi ایجاد کنید
یک صفحه تقسیم جدید ایجاد کنید

طرح صفحه فرود را بارگیری کنید

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

طرح تقسیم را انتخاب کنید

3. بخش فروشگاه را ویرایش کنید

بخش را با ماژول Shop بیابید

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

ماژول فروشگاه را پیدا کنید

تنظیمات خط

اندازه پاسخگو

با باز کردن تنظیمات ردیف ردیف حاوی ماژول Shop شروع کنید. همانطور که قبلاً ذکر شد ، ما همان طراحی را روی دسک تاپ نگه داریم ، فقط کارتهای کش رفتن محصول را در اندازه صفحه کوچکتر فعال خواهیم کرد. 

برای ایجاد یک تجربه بدون دردسر ، به ردیف اجازه می دهیم تا با تغییر عرض در تنظیمات اندازه ، سمت چپ و راست صفحه را لمس کند.

  • از عرض ناودان سفارشی استفاده کنید: 1
  • عرض: 80٪ (دسک تاپ) ، 100٪ (رایانه لوحی و تلفن)
اصلاح طرح پاسخگو

دید

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

  • سرریز افقی: پنهان
  • سرریز عمودی: پنهان
پیکربندی دید Divi

پارامترهای ماژول را خریداری کنید

تعداد محصولات و ساختار ستون دفتر مورد نظر خود را انتخاب کنید

سپس ، تنظیمات ماژول Shop را باز خواهیم کرد. تغییراتی که در کد CSS ایجاد می کنیم (که بعداً اضافه خواهیم کرد) به تعداد محصولاتی که نشان می دهیم بستگی دارد. 

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

  • تعداد محصولات: 8
  • طرح ستون: 4 ستون
طراحی ستون divi را تغییر دهید

اندازه پاسخگو

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

  • عرض: 100٪ (دسک تاپ) ، 250٪ (رایانه لوحی و تلفن)
  • حداکثر عرض: 100٪ (میز) ، 250٪ (تبلت و تلفن)
پیکربندی طراحی پاسخگو

کلاس CSS

ما همچنین یک کلاس CSS به ماژول فروشگاه خود اضافه خواهیم کرد. بعداً ، وقتی کد CSS را اضافه می کنیم ، می توانیم ماژول Shop را که فقط این کلاس CSS را حمل می کند ، تغییر دهیم. به عبارت دیگر ، اگر می خواهید ماژول Shop دیگری در حالت عادی ظاهر شود ، کنار گذاشتن این کلاس CSS به شما این امکان را می دهد.

  • کلاس CSS: کارتهای کشویی محصول
تغییر ویژگی css divi shop ماژول

سرریزهای واکنشی

ما با تغییر تنظیمات دید در اندازه های مختلف صفحه ، تنظیمات خط را تکمیل خواهیم کرد. همانطور که در تنظیمات مشاهده می کنید ، ما فقط می خواهیم اثر پیمایش در اندازه های کوچکتر صفحه نمایش رخ دهد.

  • سرریز افقی: پنهان (دسک تاپ) ، پیمایش (رایانه لوحی و تلفن)
  • سرریز عمودی: پنهان
پیکربندی سرریز

زیر ماژول Shop یک ماژول کد اضافه کنید

پس از ویرایش ماژول Shop ، می توانید یک ماژول کد را در زیر اضافه کنید.

ماژول کد را در زیر ماژول divi 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>

اضافه کردن کد css divi

حساب های مختلف محصول را مطابقت دهید

حال ، اگر می خواهید محصولات کمتری (یا بیشتر) به ماژول فروشگاه خود اضافه کنید ، کد در دو مکان کمی تغییر می کند. این دو مکان باید به صورت دستی تغییر کند تا با نتیجه مورد نظر مطابقت داشته باشد. بیایید به عنوان مثال تعداد محصولات موجود در ماژول فروشگاه خود را به "4" تغییر دهیم.

  • تعداد محصولات: 4
حساب محصول مختلف را مطابقت دهید

وقتی به کد خود برگشتیم ، باید دو تغییر ایجاد کنیم. ابتدا باید ستون های الگوی شبکه را اصلاح کنیم. به جای 8 ، ما از 4 (همان تعداد محصولاتمان) استفاده می کنیم. ما همچنین درصدی را که این محصولات در صفحات محصول ما اشغال می کنند افزایش می دهیم (هرچه محصولات بیشتر ، فضای کمتری داشته باشیم).

شبکه-الگو-ستون ها: تکرار (4 ، 14٪)! مهم؛

سپس عرض ظرفی را که محصولات در آن قرار می گیرد نیز تغییر خواهیم داد. برای 4 محصول ، این معادل 150٪ است. این مقادیر ثابت نیستند ، با بازی و یافتن هماهنگی بین ستونهای مدل شبکه و عرض ظرف بدست می آیند. 

برای یافتن تراز مناسب ، به نمای موبایل داخل Visual Builder بروید و هنگام مشاهده نتیجه آن تغییرات ، مقادیر را با دقت تنظیم کنید.

width: 150%!important;

کد divx css اضافی اضافه کنید

یک ضربه محکم و ناگهانی اسکرول اضافه کنید

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

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

برای فعال کردن اسکرول گرفتن روی کارتهای کش رفتن محصول خود ، به هر محصول جداگانه در کد CSS یک خط کد CSS اضافه کنید (به صفحه چاپ زیر مراجعه کنید).

scroll-snap-align: شروع کنید

ما همچنین می خواهیم با اضافه کردن خط زیر کد CSS ، پیمایش اسکرول را در ماژول فروشگاه خود فعال کنیم.

scroll-snap-type: x اجباری است

کد css را سفارشی کنید

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

یک ردیف را کلون کنید

پس از تکمیل اولین مجموعه کارتهای مغناطیسی ، می توانید کل ردیف را یک بار کلون کنید.

دوباره از ماژول کارگاه divi استفاده کنید

ماژول کد را در ردیف تکراری حذف کنید

تا زمانی که ماژول فروشگاه شما همان کلاس CSS قبلی را داشته باشد ، یک ماژول کد نیز انجام می شود. پیش بروید و ماژول کد را در خط تکراری خود حذف کنید.

ماژول کد divi را کپی کنید

ردیف تکراری را به همان اندازه که می خواهید کلون کنید

و بسته به اینکه چند مجموعه کارت کش رفتن را می خواهید در صفحه فرود خود نشان دهید ، اکنون ردیف تکرار را هر چند بار که نیاز است ، شبیه سازی کنید!

ماژول را به همان اندازه که لازم است کلون کنید
ماژول divi تکراری

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

اطمینان حاصل کنید که پس از اضافه کردن کارتهای کش رفتن محصول ، قبل از خروج از Visual Builder صفحه خود را ذخیره کرده و کار شما تمام شده است!

پیش نمایش آزمایشی در دستگاه تلفن همراه

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

انیمیشن فروشگاه ماژول محصول Divi

آخرین افکار

در این مقاله ، ما به شما نشان داده ایم که چگونه ماژول Divi Shop یکپارچه را به کارتهای مغناطیسی محصول در اندازه صفحه نمایش کوچکتر تبدیل کنید. در دسک تاپ ، ساختار اصلی ستون را که به ماژول Shop اختصاص داده شده است ، نگه داشته ایم. 

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

این روندی است که اغلب در طراحی وب سایت مدرن مورد استفاده قرار می گیرد زیرا بر رفتار کاربر تمرکز دارد و دسترسی به طیف گسترده ای از عناصر در صفحه های کوچکتر را آسان می کند.

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

اگر س questionsال یا پیشنهادی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.