كيفية إنشاء قائمة Mega مخصصة للتجارة الإلكترونية باستخدام أداة Divi's Theme Builder

عند إنشاء موقع ويب للتجارة الإلكترونية باستخدام Divi و WooCommerce ، هناك الكثير من الطرق لتخصيص المظهر العام ومظهر موقع الويب الخاص بك. تتيح لك وحدات Divi WooCommerce جنبًا إلى جنب مع Divi Theme Builder إنشاء قوالب لصفحات المنتج وصفحات الفئات والمزيد. ولكن إلى جانب التأكد من أن هيكل موقع الويب الخاص بك وصفحات WooCommerce جاهزة للإطلاق ، من المهم أيضًا التفكير في تجربة التنقل التي سيحصل عليها الزوار. تحدد القائمة التي تنشئها لموقع التجارة الإلكترونية الخاص بك نغمة سلوك الشراء للزائرين على موقع الويب الخاص بك.

لمساعدة موقع التجارة الإلكترونية الخاص بك على الوصول إلى إمكاناته الكاملة ، سنعرض لك كيفية إنشاء قائمة ضخمة مخصصة للتجارة الإلكترونية باستخدام Divi's Theme Builder. سنقوم ببناء كل شيء بصريًا ، باستخدام العناصر المضمنة في Divi ، واستخدام العناصر كقوائم منسدلة مع بعض التعليمات البرمجية. باستخدام هذا النهج ، ستتمكن من إنشاء أي نوع من قوائم التجارة الإلكترونية الضخمة لمواقع التجارة الإلكترونية التي تنشئها! ستتمكن من تنزيل ملف JSON مجانًا أيضًا.

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل مخطط قائمة ميجا للتجارة الإلكترونية مجانًا

لوضع يديك على تخطيط قائمة التجارة الإلكترونية الضخمة المجانية ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

كيفية تحميل ملف JSON

قم بفك ضغط المجلد المضغوط الذي تمكنت من تنزيله أعلاه. بعد ذلك ، انتقل إلى موقع WordPress الخاص بك> Divi> مكتبة Divi وقم بتحميل JSON.

بمجرد حفظ التخطيط الخاص بك في مكتبة Divi ، يمكنك الانتقال إلى Divi Theme Builder واستيراد التخطيط المحفوظ بالنقر فوق "إضافة رأس عام" أو "إضافة رأس مخصص" وتحديد "إنشاء رأس عام / مخصص". انتقل إلى علامة التبويب "التخطيطات المحفوظة الخاصة بك" في مكتبة Divi ، وحدد التخطيط الذي قمت بتحميله في الخطوة السابقة واحفظ جميع تغييرات Divi Theme Builder.

للحصول على قائمة تشغيل مباشرة من الخفاش ، ستتم مطالبتك بالانتقال إلى الجزء الأول من هذا البرنامج التعليمي أدناه ؛ إضافة فئات CSS إلى عناصر القائمة على مستوى فردي. ستحتاج أيضًا إلى تمكين إحدى فئات CSS داخل Code Module كما هو موضح في الجزء 5 من هذا البرنامج التعليمي. إذا لم تظهر الرموز بشكل صحيح ، فتأكد من التحقق من محتوى الرمز داخل وحدة التعليمات البرمجية. يجب أن تحتوي الرموز على محتوى "\ 4c" و "\ 21" كما يمكنك ملاحظته في شاشة الطباعة أدناه.

1. أضف فئات CSS إلى عناصر القائمة

انتقل إلى القوائم في المظهر

في الجزء الأول من هذا البرنامج التعليمي ، سنقوم بتعيين فئتين مختلفتين من CSS لعناصر القائمة التي نريد إضافة قائمة ضخمة منسدلة إليها. للقيام بذلك ، انتقل إلى القوائم في إعدادات مظهر لوحة معلومات WordPress الخاصة بك.

تمكين خيار فئة CSS

تأكد من تمكين خيار فئة CSS في الجزء العلوي من خلال تبديل خيارات الشاشة وتمكين خيار فئات CSS.

أضف فئات CSS متتالية إلى عناصر القائمة التي تحتاج إلى قائمة منسدلة

يحتاج كل عنصر من عناصر القائمة التي تريد تعيين قائمة ضخمة منسدلة إليها إلى فئتي CSS. أولاً ، فئة CSS عامة تسمى "المستوى الأول". تحتوي فئة CSS الثانية على رقم متتالي في نهايته ، "المستوى الأول -1" ، "المستوى الأول -2" ، "المستوى الأول -3" ، إلخ.

• عنصر القائمة الأول الذي يحتوي على القائمة المنسدلة: المستوى الأول - المستوى الأول - 1
• عنصر القائمة الثاني الذي يحتوي على قائمة منسدلة: المستوى الأول - المستوى الأول - 2
• عنصر القائمة الثالث الذي يحتوي على القائمة المنسدلة: المستوى الأول - المستوى الأول - 3

2. أنشئ رأسًا عالميًا باستخدام منشئ سمات Divi

انتقل إلى Divi Theme Builder وابدأ في بناء العنوان العالمي

بمجرد وضع عناصر القائمة في مكانها ، حان الوقت للتبديل إلى Divi. سننشئ رأسًا عالميًا جديدًا بالانتقال إلى Divi Theme Builder الخاص بنا والنقر على "إضافة رأس عام". سنقوم ببناء الرأس العالمي من البداية.

القسم # 1 الإعدادات

تباعد

بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا. افتح هذا القسم وقم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الرؤية

إخفاء هذا القسم على الجهاز اللوحي والهاتف بعد ذلك. نحن نحتفظ بهذا القسم فقط بأحجام الشاشات الكبيرة للتأكد من أن تجربة التنقل على أحجام الشاشات الأصغر لن تصبح مربكة.

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة الصورة النمطية إلى العمود 1

تحميل الشعار

حان الوقت لإضافة وحدات ، بدءًا من وحدة الصورة في العمود 1. قم بتحميل شعارك.

تباعد

انتقل إلى علامة تبويب تصميم الوحدة وأضف بعض الهامش العلوي.

• الهامش الأعلى: 3٪

أضف وحدة نصية إلى العمود 2

إضافة محتوى

إلى العمود التالي. أضف وحدة نصية مع بعض المحتوى الذي تختاره.

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص على النحو التالي:

• خط النص: أوزوالد
• وزن خط النص: متوسط
• نمط خط النص: أحرف كبيرة
• لون النص: # 000000
• حجم النص: 19 بكسل

تباعد

أضف بعض الهامش العلوي والسفلي أيضًا.

• الهامش الأعلى: 5٪
• الهامش السفلي: 5٪

استنساخ وحدة النص مرتين ووضع التكرارات في العمود 3 و 4

تغيير النسخ

بمجرد الانتهاء من أول وحدة نصية في العمود 2 ، يمكنك استنساخها مرتين ووضع التكرارات في العمود 3 و 4. تأكد من تغيير المحتوى في كلتا الوحدتين المكررتين.

أضف القسم رقم 2

تباعد

أضف قسمًا آخر أسفل القسم السابق مباشرةً. افتح إعدادات القسم وقم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف الصف رقم 2

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الحدود

بعد ذلك ، انتقل إلى إعدادات الحدود وقم بتطبيق الحد العلوي والسفلي.

• عرض الحد العلوي:
  • سطح المكتب: 2 بكسل
  • الجهاز اللوحي والهاتف: 0 بكسل
• عرض الحد السفلي: 2 بكسل
• لون الحدود: # ff6600

إضافة وحدة قائمة إلى العمود

اختر قائمة

أضف وحدة قائمة إلى عمود الصف وحدد قائمة من اختيارك.

أضف الشعار على الجهاز اللوحي والهاتف

بعد ذلك ، أضف شعارًا على الجهاز اللوحي والهاتف عن طريق تمكين الخيارات سريعة الاستجابة وتحميل ملف صورة الشعار الخاص بك. اترك مساحة سطح المكتب فارغة.

عناصر

نحن نقوم بتمكين سلة التسوق ورموز البحث أيضًا.

• إظهار رمز عربة التسوق: نعم
• إظهار رمز البحث: نعم

إعدادات نص القائمة

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص القائمة على النحو التالي:

• خط القائمة: أوزوالد
• نمط خط القائمة: أحرف كبيرة
• لون نص القائمة: # 000000
• حجم نص القائمة: 19 بكسل

إعدادات نص القائمة المنسدلة

نحن بصدد تغيير لون خط القائمة المنسدلة أيضًا.

• لون خط القائمة المنسدلة: #ffffff

إعدادات الرموز

جنبا إلى جنب مع إعدادات الرموز.

• لون أيقونة عربة التسوق: # ff6600
• لون أيقونة البحث: # ff6600
• لون أيقونة قائمة همبرغر: # ff6600

فئة CSS

أكمل إعدادات الوحدة بإضافة فئة CSS. سنستخدم فئة CSS هذه لاحقًا في البرنامج التعليمي عندما نضيف الكود.

• فئة CSS: فئة القائمة

3. بناء صف منسدل داخل قالب الرأس

إضافة قسم جديد (مخصص إلى القائمة المنسدلة لعناصر القائمة الأولى)

تحجيم

الآن بعد أن أصبح لدينا قائمتنا في مكانها الصحيح ، حان الوقت للانتقال إلى الجزء التالي من البرنامج التعليمي المخصص لإنشاء القوائم المنسدلة لقائمة التجارة الإلكترونية الضخمة. لإنشاء أول قائمة منسدلة ضخمة للتجارة الإلكترونية ، سنضيف قسمًا جديدًا. افتح إعدادات القسم وتأكد من ضبط العرض والحد الأقصى للعرض على 100٪ في إعدادات التحجيم.

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

فئة CSS

ثم أضف فصلين من فئات CSS. الرقم الموجود في نهاية فئة CSS الثانية هو نفس الرقم المستخدم لعنصر القائمة الأول في الجزء الأول من هذا البرنامج التعليمي.

• فئة CSS: القائمة المنسدلة القائمة المنسدلة -1

إضافة صف جديد إلى المقطع

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

لون الخلفية

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف لون خلفية أبيض.

• لون الخلفية: #ffffff

تحجيم

انتقل إلى علامة تبويب تصميم الصف وقم بتغيير إعدادات التحجيم كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الحدود

وتطبيق الحد السفلي.

• عرض الحد السفلي: 2 بكسل
• لون الحد السفلي: # ff6600

إعدادات العمود 1 و 2

بعد ذلك ، افتح إعدادات العمود 1 و 2 بشكل فردي.

تباعد

أضف قيم المساحة المتروكة التالية إلى كلا العمودين:

• الحشوة العلوية:
  • سطح المكتب والجهاز اللوحي: 10٪
  • الهاتف: 5٪
• الحشوة السفلية:
  • سطح المكتب والجهاز اللوحي: 10٪
  • الهاتف: 5٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

العنصر الرئيسي CSS

مع سطر واحد من كود CSS. سيساعدنا هذا في وضع الأعمدة بجانب بعضها البعض على أحجام شاشة أصغر أيضًا.

width: 50% !important

إعدادات العمود 3

خلفية متدرجة

إلى إعدادات العمود 3. قم بتطبيق الخلفية المتدرجة التالية:

• اللون 1: rgba (0،0،0،0.08)
• اللون 2: # 0a0a0a
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

قم بتحميل صورة خلفية من اختيارك بعد ذلك.

العنصر الرئيسي CSS

وأضف بعض الهامش الأيمن إلى العمود باستخدام سطر واحد من كود CSS.

margin-right: 10px !important;

الرؤية

للتأكد من أن القائمة المنسدلة للجوال ليست مربكة للغاية ، فإننا نخفي هذا العمود بالكامل على الجهاز اللوحي والهاتف.

إعدادات العمود 4

خلفية متدرجة

بعد ذلك ، لدينا العمود الرابع. أضف نفس الخلفية المتدرجة.

• اللون 1: rgba (0،0،0،0.08)
• اللون 2: # 0a0a0a
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

قم بتحميل صورة الخلفية هنا أيضًا.

الرؤية

وإخفاء العمود على الجهاز اللوحي والهاتف.

أضف وحدة نصية إلى العمود 1

أضف اسم فئة المنتج إلى Content Box

حان الوقت لإضافة وحدات! يمكنك وضع أي شيء تريده في هذه القائمة المنسدلة. نحن نستخدم وحدات نصية ، بدءًا من الأولى في العمود 1. أضف اسم فئة.

أضف رابط فئة المنتج

أضف الرابط إلى هذه الفئة التالية.

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص على النحو التالي:

• خط النص: أوزوالد
• نمط خط النص: أحرف كبيرة
• لون النص: # 000000
• حجم الخط:
  • سطح المكتب: 22 بكسل
  • الجهاز اللوحي: 18 بكسل
  • الهاتف: 16 بكسل
• تباعد الحروف النصية: -0.6 بكسل
• ارتفاع خط النص: 2.4em

الحدود

أضف حدًا سفليًا أيضًا.

• عرض الحد السفلي: 2 بكسل
• لون الحد السفلي:
  • الافتراضي: rgba (0،0،0،0)
  • تحوم: # ff6600

استنساخ وتعديل وحدة النص عدة مرات حسب الحاجة

بمجرد الانتهاء من الأولى ، يمكنك استنساخها عدة مرات كما تريد ونشر التكرارات عبر كل من العمود 1 و 2.

تغيير عناوين فئة المنتج والروابط

تأكد من تغيير جميع أسماء وروابط فئة المنتج.

أضف وحدة نصية إلى العمود 3

أضف اسم فئة المنتج

إلى العمود الثالث. أضف وحدة نصية جديدة وأدخل اسم فئة المنتج.

أضف رابط فئة المنتج

أضف الرابط أيضًا.

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص على النحو التالي:

• خط النص: أوزوالد
• وزن خط النص: غامق
• نمط خط النص: أحرف كبيرة
• لون النص: #ffffff
• حجم النص: 3.4vw
• ارتفاع خط النص: 1em

موقع

قم بتغيير موضع الوحدة أيضًا.

• الموقف: مطلق
• الموقع: أسفل اليسار
• الإزاحة العمودية: 2٪
• إزاحة أفقية: 2٪

استنساخ وحدة النص في العمود 3 ووضع نسخة مكررة في العمود 4

يمكنك استنساخ وحدة النص في العمود 3 ووضع النسخة المكررة في العمود 4.

تغيير اسم فئة المنتج والارتباط

تأكد من تغيير اسم فئة المنتج مع الارتباط.

استنساخ قسم كامل لإعادة استخدامه كعناصر قائمة منسدلة أخرى

بمجرد إنشاء القائمة المنسدلة للقسم الأول ، يمكنك استنساخها مرتين.

قم بتغيير كافة أسماء وروابط فئات المنتج

قم بتغيير جميع أسماء فئات المنتجات في القوائم المنسدلة الجديدة.

تغيير فئات CSS القسم على التوالي

إلى جانب القسم الأخير من فئة CSS لكل نسخة مكررة. تأكد من أنك تتبع أمرًا متتاليًا.

• فئة CSS: القائمة المنسدلة -2 القائمة المنسدلة

• فئة CSS: القائمة المنسدلة 3

4. أضف CSS & JQuery Code

إضافة وحدة رمز جديدة فوق وحدة القائمة

الآن وقد أصبح لدينا جميع عناصر القائمة في مكانها الصحيح ، فقد حان الوقت لوضع القوائم المنسدلة لقائمة التجارة الإلكترونية الضخمة داخل قائمتنا. للقيام بذلك ، سنضيف بعض التعليمات البرمجية إلى وحدة رمز جديدة. ضع وحدة الشفرة هذه أعلى وحدة القائمة في القسم الثاني.

أدخل كود CSS

افتح Code Module وأضف الأسطر التالية من كود CSS بين علامات النمط كما ترى في شاشة الطباعة أدناه :

/* Enable class below once you're done editing the menu */ 
   
/*
.dropdown-menu {
visibility: hidden;
}
*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
  
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}

.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

أدخل كود JQuery

أضف كود JQuery بين علامات البرنامج النصي كما ترى في شاشة الطباعة أدناه أيضًا.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. قم بتمكين فئة CSS بمجرد الانتهاء من تخصيص القائمة

بمجرد الانتهاء من تخصيص جميع أقسام القائمة المنسدلة ، سيكون لديك شيء واحد للقيام به: إخفاؤها من النظرة الأولى. سيمنع هذا القائمة المنسدلة من الظهور عند تحميل الصفحة. بمجرد تمكين فئة CSS هذه ، لن ترى الأقسام المنسدلة داخل Visual Builder بعد الآن ، ولكن ستتمكن من الوصول إليها في وضع الإطار الشبكي و / أو تعطيل فئة CSS مؤقتًا عند إجراء تغييرات على الأقسام المنسدلة. لتمكين الفئة ، قم بإزالة الأقواس "/ * * /" في بداية ونهاية فئة CSS.

6. حفظ تغييرات Divi Theme Builder

بمجرد الانتهاء من العنوان العالمي ، تأكد من حفظ جميع تغييرات Divi Theme Builder قبل عرض النتيجة على موقع الويب الخاص بك!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

في هذا المنشور ، أوضحنا لك كيفية إنشاء قائمة ضخمة مخصصة للتجارة الإلكترونية داخل Divi's Theme Builder. لقد أنشأنا القوائم المنسدلة باستخدام العناصر المضمنة في Divi ودمجناها مع بعض التعليمات البرمجية التي تساعد في توصيل القائمة بالقوائم المنسدلة وفقًا لذلك. يتيح لك هذا الأسلوب تخصيص القائمة المنسدلة للتجارة الإلكترونية بشكل كامل ، عبر أحجام شاشات مختلفة ، دون استخدام مكون إضافي! كنت قادرًا على تنزيل ملف JSON أيضًا. إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.