عند إنشاء صفحة منتج في Divi، يمكننا استخدام وحدة الأكورديون لعرض معلومات المنتج باستخدام محتوى ديناميكي. سيمنحك هذا تصميمًا فريدًا لصفحات منتجاتك مع الحفاظ على مساحة الصفحة القيّمة.
في هذا البرنامج التعليمي، سنوضح لك كيفية استخدام ميزة المحتوى الديناميكي في Divi لإنشاء قائمة منسدلة لمعلومات المنتج، بالإضافة إلى كيفية تصميم القائمة المنسدلة (ومحتواها) باستخدام Divi Visual Builder.
دعونا نبدأ.
مسح
فيما يلي معاينة للتصميم الذي سنبنيه في هذا البرنامج التعليمي.
تذكر أنه يجب أن يكون لديك تكوين المنتج كما هو موضح في هذا البرنامج التعليمي لتحقيق نفس النتائج.
إبدأ الآن
للبدء ، سوف تحتاج إلى القيام بما يلي:
- إذا لم تقم بذلك بالفعل، فقم بتثبيت وتفعيل قالب Divi المثبت (أو إضافة Divi Builder إذا كنت لا تستخدم قالب Divi).
- قم بتثبيت وتفعيل إضافة WooCommerce. إذا كانت هذه هي المرة الأولى التي تقوم فيها بإعداد WooCommerce، فستحتاج إلى تشغيل معالج الإعداد الأساسي لتجهيز متجرك. بمجرد الانتهاء من ذلك، ستكون جاهزًا لإضافة منتجاتك الجديدة.
- قم بإنشاء منتج جديد كما هو موضح أدناه.
إعداد المنتج العينة
لتكوين نموذج المنتج لهذا البرنامج التعليمي ، انتقل إلى المنتجات> إضافة جديد. امنح المنتج عنوان "تدليك (جلسة واحدة)" وانقر لاستخدام Divi Builder.
ثم قم بتحديث إعدادات صفحة المنتج التالية ومعلومات المنتج:
1. ضمن إعدادات صفحة Divi ، حدد تخطيط No Sidebar.
2. إضافة / اختيار فئة المنتج
3. أضف صورة المنتج
4. أضف محتوى الوصف.
5. تحت بيانات المنتج، قم بتغيير نوع المنتج إلى منتج متغير.
6. أضف سمة باسم "Type" بالقيم التالية: Swedish | الحجر الساخن | اروماثيرابي | الأنسجة العميقة. تأكد من تحديد "تستخدم للصيغ".
7. بعد ذلك، في علامة التبويب "الاختلافات" ضمن مفتاح تبديل بيانات المنتج، استخدم إدخال القائمة المنسدلة لإنشاء اختلافات من جميع السمات.
8. حدد "ضبط الأسعار العادية" من القائمة المنسدلة لضبط السعر العادي للمتغيرات الثلاثة.
9. في مربع الحوار ، أدخل القيمة "50" واختر موافق.
10. ل بمجرد الانتهاء ، احفظ أو نشر المنتج.
أنت الآن جاهز للبدء في تصميم التصميم الخاص بك باستخدام منتج Accordion مخصص.
إنشاء قائمة منسدلة لمعلومات المنتج بمحتوى ديناميكي في Divi
يعرض نظام عرض المنتجات الافتراضي معلومات المنتج باستخدام وحدات ووكومرس المختلفة. في هذا المثال، نريد استخدام قائمة منسدلة لعرض ثلاثة عناصر رئيسية من معلومات المنتج: وصف المنتج، ومعلومات إضافية عنه، وتقييمات المستخدمين. تُعرض هذه العناصر الثلاثة حاليًا في وحدة ووكومرس تابز. كل ما علينا فعله هو إزالة وحدة ووكومرس تابز واستبدالها بوحدة قائمة منسدلة تحتوي على نفس المعلومات، ولكن عبر محتوى ديناميكي.
إليك كيفية القيام بذلك.
أولاً ، انقر فوق استخدام Divi على نظام الواجهة الأمامية لنشر المولد المرئي. ثم قم بإزالة وحدة Woo Tabs.
ثم أضف وحدة Accordion جديدة لاستبدال علامات التبويب.
في نافذة إعدادات الأكورديون المنبثقة، انقر فوق رمز الترس الموجود على الأكورديون الأول لفتح إعدادات الأكورديون الفردية.
أدخل العنوان "حول المنتج".
بعد ذلك، مرر مؤشر الماوس فوق منطقة إدخال محتوى النص وانقر على أيقونة المحتوى الديناميكي.
حدد "وصف المنتج" من قائمة المحتوى الديناميكي.
سيعرض هذا الوصف الطويل للمنتج الذي حددناه للمنتج على الواجهة الخلفية.
بمجرد وضع محتوى الأكورديون الأول ، افتح إعدادات الأكورديون الثانية وقم بتحديث ما يلي:
- العنوان: المواصفات
ثم أضف المحتوى الديناميكي "معلومات المنتج الإضافية" إلى الجسم.
بمجرد أن يصبح محتوى الأكورديون الثاني جاهزًا ، قم بإضافة عنصر جديد في الأكورديون وقم بتحديث إعدادات الأكورديون على النحو التالي:
- العنوان: معلومات إضافية
بعد ذلك، أضف المحتوى الديناميكي "مراجعة المنتج" إلى النص الأساسي لدمج عنصر/محتوى مراجعة المنتج.
ملاحظة: تأكد من إضافة تقييم واحد على الأقل للمنتج حتى تتمكن من رؤية المحتوى على الصفحة المباشرة.
اتفاقية المنتج وتصميم المحتوى مع Divi
الآن وقد أصبح لدينا المحتوى الديناميكي اللازم لعرض معلومات المنتج في قسم الأكورديون، أصبحنا جاهزين لتخصيصه باستخدام إعدادات وحدة الأكورديون المدمجة.
افتح إعدادات وحدة Accordion وقم بتحديث ما يلي:
- لون الأيقونة: #ff9375
- استخدام حجم خط الأيقونة: نعم
- حجم الخط رمز: 26px
- تبديل لون الخلفية: #ffffff
- فتح عنوان النص اللون: #ff9375
- عنوان النص: #222222
- خط العنوان: لاتو
- عنوان الخط: Bold
- عنوان نمط الخط: TT
- حجم عنوان النص: 20px
- مساحة أحرف العنوان: 0.2em
- ارتفاع سطر العنوان: 2em
- خط الجسم: لاتو
- نص حجم النص: 16px
- ارتفاع الجسم: 1.8em
- لون نص الرابط: #ff9375
سيستهدف هذا جميع الروابط التي لديك في المحتوى الديناميكي لكل الأكورديون ، مثل تصنيف النجوم.
- لون نص القائمة غير مرتبة: # ff9375
- نوع نمط قائمة غير مرتبة: دائرة
- مسافة بادئة لعناصر القائمة غير المرتبة: 5%
- عرض الحد: 0px
- عرض الحد العلوي: 1px
- لون الحد العلوي: #222222
وللخطوة الأخيرة ، دعونا نضيف استخراج css صغير لاستخراج الهامش الافتراضي بين موازين الأكورديون.
ضمن علامة التبويب "متقدم"، أضف CSS التالي إلى عنصر التبديل:
margin-bottom: 0px;
لنلقِ نظرة الآن على التصميم النهائي لمعلومات منتج الأكورديون.
التعديلات النهائية على التخطيط
يمكن إجراء بعض التعديلات على التصميم ليتناسب مع تصميم الأكورديون. على سبيل المثال، يمكننا تغيير خط كل وحدة إلى Lato، وإضافة حدود مخصصة ونصف قطر للحدود حول القائمة المنسدلة المتغيرة، وتحديث زر "إضافة إلى السلة" بلون خلفية ثابت مناسب.
بمجرد الانتهاء من ذلك ، ها هي النتيجة النهائية.
لقد أدرجت هذا التصميم كملف تحميل مجاني أعلاه. تفضل بالاطلاع عليه بنفسك. لاحظ أنك ستحتاج إلى إعداد المنتج الموضح في هذا الشرح لتحقيق نفس النتائج.
ملاحظة: يتم استخلاص اللون الافتراضي لمعظم عناصر منتجات WooCommerce في Divi من قيمة اللون الثانوي في إعدادات تخصيص القالب. قد يكون من الأسهل تحديث هذا اللون الثانوي بعد تحديث وحدة ألوان WooCommerce.
الأفكار النهائية
كما تعلمنا، لا تقتصر عناصر عرض معلومات المنتج الديناميكية على وحدات WooCommerce فقط. يُعدّ قسم معلومات المنتج القابل للطي مثالًا رائعًا على كيفية استخدام أي وحدة Divi لعرض معلومات المنتج بطريقة مميزة وموجزة. استكشف تصاميم جديدة ومبتكرة لقسم معلومات المنتج القابل للطي في صفحات منتجاتك. وبالطبع، يمكنك استخدام وحدات تبديل متعددة بدلًا من قسم معلومات المنتج القابل للطي لتحقيق نتائج مماثلة.