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