عند إنشاء صفحة مقصودة لمنتجات معينة ، سواء كان ذلك إطلاقًا جديدًا أو بيعًا تستعد له ، فمن المحتمل أن تستخدم وحدة التسوق في مرحلة ما. تسمح لك وحدة Divi Shop باستخراج المنتجات ديناميكيًا من البرنامج المساعد WooCommerce وقم بتصميمها باستخدام خيارات Divi المضمنة.
الآن بشكل افتراضي ، تأتي وحدة المتجر مع عدد قليل من هياكل الأعمدة التي تترجم جميعها إلى عمودين بأحجام شاشة أصغر. هذا يعني أنه كلما زاد عدد المنتجات التي تختار عرضها ، زادت الحاجة إلى التمرير العمودي للوصول إلى الجزء التالي من صفحتك المقصودة.
في تصميم الويب الحديث ، غالبًا ما تستخدم تقنية للحد من التمرير الرأسي وعناصر العرض وفقًا لتفضيلاتك. آخر هو استخدام البطاقات الممغنطة. في هذا البرنامج التعليمي ، سنوضح لك كيفية تحويل وحدة متجر Divi إلى بطاقات منتجات ديناميكية بأحجام شاشة أصغر دون استخدام مكون إضافي.
سنبدأ بإعداد العناصر المختلفة لقسم منتجاتنا واستخدام كمية صغيرة من كود CSS لتمكين تأثير التمرير السريع. إنها طريقة رائعة لعرض مجموعة واسعة من المنتجات في صفحتك المقصودة دون إرباك موقعك آخر.
النتيجة المحتملة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة. نقوم فقط بتنشيط البطاقات الممغنطة للمنتج على الأجهزة اللوحية والهواتف المحمولة. على سطح المكتب ، نحتفظ بهيكل العمود الذي نحدده في وحدة Shop.
1. تكوين WooCommerce وصفحات المنتج
قبل الدخول إلى جزء Divi من هذا البرنامج التعليمي ، من المهم أن يكون المكون الإضافي WooCommerce تم تثبيته وتفعيله على موقع الويب الخاص بك. إذا لم تكن قد قمت بذلك بالفعل، أضف منتجات متعددة، اعتمادًا على عدد المنتجات التي تريد عرضها في وحدة المتجر الخاصة بك.
2. إنشاء صفحة جديدة وتنزيل تخطيط صفحة القرطاسية
قم بإنشاء صفحة جديدة
بمجرد أن تصبح المنتجات في مكانها الصحيح ، أضف صفحة جديدة في الواجهة الخلفية لـ WordPress. امنح صفحتك عنوانًا ، وانشر الصفحة وقم بتنشيط Divi Visual Builder.
قم بتنزيل تخطيط الصفحة المقصودة
بمجرد الدخول إلى صفحتك الجديدة ، انتقل إلى التخطيطات المحددة مسبقًا وقم بتنزيل تخطيط الصفحة المقصودة للقرطاسية. على الرغم من أننا نستخدم هذا التصميم المحدد ، إلا أنك حر في استخدام أي تخطيط آخر تريده ، طالما قمت بإضافة أو تحديد موقع وحدة تخزين داخل هذا التخطيط.
3. تعديل قسم المحل
حدد القسم بالوحدة النمطية للتسوق
إذا قمنا بالتمرير لأسفل إلى صفحتنا الجديدة التي أنشأناها باستخدام تخطيط الصفحة الرئيسية للقرطاسية ، فسنجد قسمًا به وحدة متجر. سنستخدم هذا القسم خلال الخطوات التالية من هذا البرنامج التعليمي.
إعدادات الخط
تحجيم استجابة
ابدأ بفتح إعدادات الصف للصف الذي يحتوي على وحدة المتجر. كما ذكرنا سابقًا ، نحتفظ بنفس التصميم على سطح المكتب ، وسنقوم فقط بتنشيط بطاقات تمرير المنتج على أحجام شاشة أصغر.
لخلق تجربة سهلة ، سنسمح للصف بلمس الجانب الأيسر والأيمن من شاشتنا عن طريق تغيير العرض في إعدادات التحجيم.
- استخدم عرض مزراب مخصص: 1
- العرض: 80٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
رؤية
سوف نضمن أيضًا عدم تجاوز أي شيء لحاوية الصف عن طريق تعيين معلمات الرؤية على مخفي.
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
إعدادات وحدة التسوق
اختر عدد المنتجات وهيكل عمود المكتب الذي تختاره
بعد ذلك ، سنفتح إعدادات وحدة المتجر. تعتمد التغييرات التي نجريها على كود CSS الخاص بنا (والتي سنضيفها لاحقًا) على عدد المنتجات التي نعرضها.
سنبدأ بتوضيح كيفية تحويل وحدة متجر مع 8 منتجات إلى بطاقات منتجات. يمكنك اختيار أي تخطيط عمود تريده لسطح المكتب.
- عدد المنتجات: 8
- تخطيط العمود: 4 أعمدة
تحجيم استجابة
لزيادة حجم وحدة المتجر الخاصة بنا ، سنقوم بتغيير معلمات التحجيم في علامة تبويب التصميم. لاحظ أننا نقوم بذلك فقط للجهاز اللوحي والهاتف.
- العرض: 100٪ (سطح المكتب) ، 250٪ (الجهاز اللوحي والهاتف)
- الحد الأقصى للعرض: 100٪ (مكتب) ، 250٪ (كمبيوتر لوحي وهاتف)
فئة CSS
سنضيف أيضًا فئة CSS إلى وحدة متجرنا. في وقت لاحق ، عندما نضيف كود CSS ، يمكننا تحويل وحدة Shop التي تحمل فئة CSS هذه فقط. بمعنى آخر ، إذا كنت تريد أن تظهر وحدة Shop أخرى في حالة طبيعية ، فإن ترك فئة CSS هذه سيسمح لك بالقيام بذلك.
- فئة CSS: بطاقات تمرير المنتج
تجاوزات رد الفعل
سوف نكمل معلمات الخط عن طريق تعديل معلمات الرؤية على أحجام مختلفة من الشاشات. كما ترون في الإعدادات، نريد فقط أن يحدث تأثير التمرير على أحجام الشاشات الأصغر.
- تجاوز أفقي: مخفي (مكتب) ، التمرير (الكمبيوتر اللوحي والهاتف)
- تجاوز عمودي: مخفي
أضف وحدة رمز تحت وحدة التسوق
بمجرد تعديل وحدة المتجر ، يمكنك إضافة وحدة رمز أدناه.
أضف كود 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 (انظر شاشة الطباعة أدناه).
التمرير ومحاذاة المفاجئة: ابدأ
سنقوم أيضًا بتنشيط التقاط التمرير في وحدة متجرنا عن طريق إضافة السطر التالي من كود CSS:
التمرير نوع المفاجئة: x إلزامي
أعد استخدام وحدة ورشة العمل لعرض الفئات الأخرى
استنساخ خط كامل مرة واحدة
بمجرد الانتهاء من المجموعة الأولى من البطاقات الممغنطة ، يمكنك استنساخ الخط بأكمله مرة واحدة.
إزالة وحدة التعليمات البرمجية في سطر مكرر
طالما أن وحدة متجرك تحتوي على نفس فئة CSS مثل الفئة السابقة ، فستعمل وحدة التعليمات البرمجية. امض قدمًا وقم بإزالة وحدة التعليمات البرمجية في سطر مكرر.
انسخ الخط المكرر بقدر ما تريد
واستنسخ الخط المكرر الآن عدة مرات حسب الضرورة ، اعتمادًا على عدد مجموعات بطاقات السحب التي تريد عرضها على صفحتك المقصودة!
4. حفظ تغييرات الصفحة وعرض النتائج على جهاز محمول
تأكد من أنه بمجرد الانتهاء من إضافة بطاقات تمرير المنتج ، تقوم بحفظ صفحتك قبل الخروج من Visual Builder وتنتهي!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية تحويل وحدة Divi Shop المدمجة إلى بطاقات مغناطيسية للمنتج على أحجام شاشة أصغر. على سطح المكتب ، احتفظنا بهيكل العمود الأصلي المخصص لوحدة Shop.
يتيح لك استخدام خرائط تمرير المنتج إضافة منتجات لا حصر لها إلى آلية التمرير الأفقي دون إرباك زوار التمرير العمودي.
غالبًا ما يستخدم هذا الاتجاه في تصميم مواقع الويب الحديثة لأنه يركز على سلوك المستخدم ويسهل الوصول إلى مجموعة واسعة من العناصر على الشاشات الأصغر.
يمكنك استخدام أوراق المنتج هذه في أي صفحة ، ولكنها مفيدة بشكل خاص لأي صفحات منتقل إليها تقوم بإنشائها. لقد تمكنت أيضًا من تنزيل ملف تنسيق JSON مجانًا!
إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.