رفتن به محتوای اصلی

ماژول Divi Shop را به نقشه های محصول پویا از طریق موبایل تبدیل کنید

Divi: ساده ترین تم وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تنظیمات خط

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

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

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

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

دید

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

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

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

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

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

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

ما در ابتدا به شما نشان خواهیم داد که چگونه یک ماژول فروشگاه را با 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٪ است. این مقادیر ثابت نیستند ، با بازی و یافتن هماهنگی بین ستونهای مدل شبکه و عرض ظرف بدست می آیند. 

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

برای یافتن تراز مناسب ، به نمای موبایل داخل 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 صفحه خود را ذخیره کرده و کار شما تمام شده است!

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

بررسی

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

به راحتی فروشگاه آنلاین خود را ایجاد کنید

دانلود رایگان WooCommerce، بهترین پلاگین تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتال خود را در وردپرس. [توصیه میشود]

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

آخرین افکار

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

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

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

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

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

این مقاله حاوی نظرات 0

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

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

این سایت از Akismet برای کاهش ناخواسته استفاده می کند. در مورد نحوه استفاده از اطلاعات نظرتان بیشتر بدانید.

بازگشت به بالا
0 سهام
سهم
صدای جیر جیر
ثبات