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