إنشاء القائمة المنسدلة المتقدمة للموضوعات الأنيقة باستخدام أداة Divi Theme Builder

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

في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إعادة إنشاء هذه القائمة المنسدلة "السمات الأنيقة" المتقدمة داخل Divi's Theme Builder. سنجمع بين أفضل ما في العالمين ؛ سنستخدم عناصر Divi المضمنة لإنشاء أساس القوائم المنسدلة الخاصة بنا ودمجها مع بعض الأكواد التي تضع القوائم المنسدلة داخل قائمة WordPress. ستتمكن من تنزيل ملف 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 من هذا البرنامج التعليمي.

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

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

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

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

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

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

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

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

2. قم بإنشاء رأس مخصص باستخدام منشئ سمات Divi

انتقل إلى Divi Theme Builder

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

ابدأ في إنشاء رأس عام

ثم حدد "Build Global Header" لإعادة توجيهك إلى محرر القالب.

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

لون الخلفية

داخل القالب ، ستلاحظ قسمًا. افتح هذا القسم وقم بتغيير لون الخلفية.

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

تباعد

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

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

مربع الظل

وقم بتضمين ظل الصندوق الخفيف أيضًا.

• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 30 بكسل
• لون الظل: rgba (103151.255.0.17)

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

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

تباعد

قم بتغيير قيم المساحة المتروكة العلوية والسفلية في إعدادات التباعد التالية.

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

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

اختر قائمة

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

تحميل الشعار

قم بتحميل الشعار بعد ذلك.

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

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

• خط القائمة: Lato
• وزن خط القائمة: غامق
• نمط خط القائمة: أحرف كبيرة
• لون نص القائمة: rgba (32،41،47،0.62)
• حجم نص القائمة: 13 بكسل
• تباعد أحرف القائمة: 3 بكسل
• محاذاة النص: صحيح

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

قم بإجراء بعض التغييرات على إعدادات القائمة المنسدلة بعد ذلك.

• لون خلفية القائمة المنسدلة: #ffffff
• لون خط القائمة المنسدلة: rgba (0،0،0،0)
• لون نص القائمة المنسدلة: # 000000
• لون خلفية قائمة الجوال: # f2f4f5
• لون نص قائمة الجوال: # 000000

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

وكذلك إعدادات الرموز.

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

تحجيم

وأكمل إعدادات الوحدة عن طريق تعيين أقصى ارتفاع للشعار لإعدادات التحجيم.

• أقصى ارتفاع للشعار: 64 بكسل

3. إنشاء عناصر قائمة منسدلة

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

هيكل العمود (مطلوب مطابقة عدد القوائم المنسدلة)

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

تحجيم

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

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

تباعد

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

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

فئة CSS

وقم بتعيين فئة CSS للصف.

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

جميع فئات العمود CSS

بمجرد الانتهاء من إعدادات الصف العامة ، افتح كل عمود على حدة وقم بتعيين فئة CSS التالية:

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

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

إضافة محتوى

حان الوقت لإضافة وحدات! سنبدأ بإنشاء أول قائمة منسدلة في العمود الأول. لعرض جميع المنتجات المختلفة ، سنستخدم Divi's Blurb Module. أضف بعض المحتوى من اختيارك.

حدد أيقونة

ثم حدد أيقونة مطابقة.

إضافة رابط

أضف ارتباطًا إلى الوحدة أيضًا.

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

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

• لون الأيقونة: # 8f42ec
• وضع الصورة / الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 30 بكسل

إعدادات نص العنوان

بعد ذلك ، حدد نمط نص العنوان.

• خط العنوان: Lato
• وزن خط العنوان: غامق
• نمط خط العنوان: أحرف كبيرة
• لون نص العنوان: # 8f42ec
• حجم نص العنوان: 16 بكسل
• تباعد حروف العنوان: 2 بكسل

إعدادات النص الأساسي

جنبا إلى جنب مع النص الأساسي.

• خط الجسم: لاتو
• لون النص الأساسي: 999999 #

تحجيم

نحن نتأكد من أن عرض المحتوى هو "100٪" أيضًا.

• عرض المحتوى: 100٪

تباعد

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

• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل
• الحشو الأيسر: 6٪ (كمبيوتر مكتبي) ، 2٪ (كمبيوتر لوحي) ، 3٪ (هاتف)
• الحشو الأيمن: 6٪ (كمبيوتر مكتبي) ، 2٪ (كمبيوتر لوحي) ، 3٪ (هاتف)

يحوم:

• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل
• الحشوة اليسرى: 8٪
• الحشوة اليمنى: 4٪

الرسوم المتحركة

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

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

فئة CSS

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

• فئة CSS: عنصر قائمة منسدلة

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

أخيرًا وليس آخرًا ، سنكمل إعدادات الوحدة النمطية عن طريق تغيير المؤشر باستخدام سطر واحد من كود CSS في العنصر الرئيسي.

cursor: pointer;

استنساخ الوحدة النمطية x3

بمجرد الانتهاء من أول وحدة Blurb Module ، قم باستنساخها ثلاث مرات.

تغيير المحتوى والأيقونات

قم بتعديل كل المحتوى والرموز لكل نسخة مكررة.

تغيير الروابط

جنبا إلى جنب مع الروابط.

استنساخ الوحدة النمطية Last Blurb مرة واحدة

تابع عن طريق استنساخ آخر وحدة Blurb Module في العمود مرة واحدة.

أضف لون الخلفية

افتح إعدادات Blurb Module المكررة وقم بتغيير لون الخلفية.

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

تغيير إعدادات الرمز

قم بتعديل إعدادات الرمز أيضًا.

• لون الأيقونة: # 3b45eb
• حجم خط الأيقونة: 22 بكسل

تغيير إعدادات نص العنوان

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

• لون نص العنوان: # 3b45eb
• حجم نص العنوان: 14 بكسل

تغيير المحتوى والرابط

وبالطبع المحتوى والرابط.

تعطيل على الجهاز اللوحي والهاتف

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

استنساخ الوحدة النمطية x3

بمجرد اكتمال النوع الثاني من Blurb Module ، يمكنك استنساخه ثلاث مرات.

تغيير المحتوى والأيقونات

تأكد من تغيير المحتوى والرموز لكل تكرار.

تغيير الروابط

جنبا إلى جنب مع الروابط.

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

إضافة محتوى

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

لون الخلفية

ثم قم بتغيير لون الخلفية.

• لون الخلفية: # 3776ff

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتعديل إعدادات النص وفقًا لذلك:

• خط النص: لاتو
• وزن خط النص: غامق
• نمط خط النص: أحرف كبيرة
• لون النص: #ffffff
• تباعد حروف النص: 3 بكسل
• محاذاة النص: الوسط

تباعد

أضف بعض قيم التباعد المخصصة أيضًا.

• الهامش العلوي: 20 بكسل
• الهامش السفلي: 20 بكسل
• الهامش الأيسر: 4٪
• الهامش الأيمن: 4٪
• الحشوة العلوية: 15 بكسل
• الحشو السفلي: 15 بكسل

الحدود

ثم أضف الزوايا الدائرية إلى إعدادات الحدود.

• جميع الزوايا: 100 بكسل

مربع الظل

تفعيل ظل الصندوق الخفيف.

• مربع الظل الرأسي: 14 بكسل
• لون الظل: rgba (0،0،0،0) (افتراضي) ، rgba (0،0،0،0.09) (تحوم)

تحويل الترجمة

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

• اليمين: -3 بكسل (تحوم)

فئة CSS

مثل جميع الوحدات الأخرى في القائمة المنسدلة ، تحتاج هذه الوحدة إلى فئة CSS التالية:

• فئة CSS: عنصر قائمة منسدلة

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

وسنكمل إعدادات الوحدة النمطية عن طريق تغيير المؤشر باستخدام سطر واحد من كود CSS في العنصر الرئيسي.

cursor: pointer;

احذف العمود 2 و 3

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

استنساخ العمود الأول مرتين

استنساخ العمود الأول مرتين.

تخصيص العناصر

وقم بتخصيص جميع العناصر في القائمتين المنسدلتين الأخريين كيفما تشاء.

4. أضف CSS & JQuery Code

أضف وحدة كود جديدة إلى عمود الصف رقم 1

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

أدخل كود CSS

وأدخل كود CSS التالي:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
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);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

أدخل كود JQuery

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

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$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');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

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

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

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

6. إنشاء أكثر من 3 قوائم منسدلة

أضف فئات CSS إلى عناصر القائمة في المظهر

إذا كنت تبحث عن طريقة لإضافة أكثر من 3 قوائم منسدلة إلى قائمتك ، فستحتاج إلى العودة إلى قائمتك وإضافة فئات CSS متتالية إلى عنصر القائمة الرابع.

• عنصر القائمة الرابع الذي تريد تعيين قائمة منسدلة إليه: المستوى الأول المستوى الأول - 4

عمود النسخ في نهاية الصف

بعد ذلك ، ارجع إلى رأسك وانسخ العمود الأخير.

تأكد من وجود فئات CSS في العمود والوحدة النمطية

تأكد من أن فئات CSS للأعمدة والوحدات النمطية موجودة في القائمة المنسدلة الجديدة ، وقد انتهيت! من المهم دائمًا تخصيص عمود جديد لقائمة منسدلة جديدة واتباع ترتيب العمود في الصف. هذا يعني أن العمود 1 سيكون القائمة المنسدلة 1 ، والعمود 2 سيكون القائمة المنسدلة 2 ، إلخ.

• فئة العمود CSS: عمود القائمة المنسدلة
• فئة CSS للوحدة: عنصر قائمة منسدلة

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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