كيفية إنشاء قائمة متداخلة متنقلة قابلة للطي باستخدام أداة Divi Theme Builder

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

• إعداد القائمة الخاصة بك وتعيين الفئات الصحيحة لعناصر القائمة الخاصة بك
• بناء قائمتك باستخدام Theme Builder ووحدة القائمة
• إضافة الكود المخصص داخل Theme Builder

ستتمكن من تنزيل ملف نموذج JSON مجانًا أيضًا! دعنا نذهب اليها.

معاينة

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

متحرك

سطح المكتب

قم بتنزيل The Global Header Design مجانًا

هام: بعد تنزيل ملف JSON وتحميله إلى مُنشئ السمات الخاص بك ، ستظل بحاجة إلى إعداد قائمتك يدويًا باستخدام فئات CSS الصحيحة + إضافة وحدة الشفرة باستخدام كود CSS و JQuery (الخطوة 1 و 3 من هذا المنشور) .

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

1. إعداد القائمة الخاصة بك

إضافة عناصر القائمة وعناصر القائمة الفرعية

أول شيء عليك القيام به هو إنشاء قائمتك. أضف العناصر الفرعية التي تختارها.

أضف خيار فئة CSS

بمجرد إضافة عناصر القائمة ، يمكنك تمكين خيار فئات CSS بالنقر فوق "خيارات الشاشة" وتمكين "فئات CSS".

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

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

• فئات CSS: المستوى الأول

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

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

• فئات CSS: المستوى الثاني

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

انتقل إلى Divi Theme Builder

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

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

ابدأ في بناء العنوان العالمي الخاص بك بعد ذلك.

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

تباعد

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

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

فهرس Z.

قم بزيادة فهرس z للقسم أيضًا.

• الفهرس Z: 99999

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

هيكل العمود

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

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واسمح للصف باحتلال عرض الشاشة بالكامل.

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

تباعد

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

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

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

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

display: flex;

العمود 1

تباعد

بعد ذلك ، افتح إعدادات العمود 1 وأضف بعض المساحة المتروكة العلوية والسفلية المخصصة.

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

الحدود

أضف بعض نصف قطر الحدود أيضًا.

• أعلى اليمين: 100 بكسل
• أسفل اليمين: 100 بكسل

مربع الظل

وأكمل إعدادات العمود 1 بإضافة ظل مربع دقيق.

• مربع الظل الأفقي: 20 بكسل
• مربع قوة طمس الظل: 50 بكسل
• لون الظل: rgba (0،0،0،0.15)

العمود 2

تباعد

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

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

العمود 3

خلفية متدرجة

إلى العمود التالي والأخير. أضف خلفية متدرجة.

• اللون 1: # 26c699
• اللون 2: # abe02f
• اتجاه التدرج: 116 درجة

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة بعد ذلك.

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

الحدود

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

• أعلى اليسار: 100 بكسل
• أسفل اليسار: 100 بكسل

مربع الظل

أكمل إعدادات العمود بإضافة ظل مربع.

• مربع الظل الوضع الأفقي: -26 بكسل
• مربع الظل الوضع الرأسي: 0 بكسل
• لون الظل: # d2ff0c

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

تحميل الشعار

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

انتقام

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

• محاذاة الصورة: المركز

تحجيم

أكمل إعدادات الوحدة عن طريق تغيير العرض عبر أحجام الشاشات المختلفة.

• العرض: 120 بكسل (سطح المكتب) ، 80 بكسل (الجهاز اللوحي والهاتف)

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

اختر قائمة

في العمود 2 ، الوحدة الوحيدة التي نحتاجها هي وحدة القائمة. حدد القائمة التي قمت بإنشائها في الجزء الأول من هذا البرنامج التعليمي.

إزالة لون الخلفية

قم بإزالة لون خلفية الوحدة بعد ذلك.

تخطيط

بعد ذلك ، قم بتغيير إعدادات التخطيط.

• النمط: توسيط
• اتجاه القائمة المنسدلة: لأسفل

نص القائمة

صمم نص القائمة أيضًا.

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

القائمة المنسدلة

تابع عن طريق تغيير بعض الألوان في إعدادات القائمة المنسدلة.

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

الأيقونات

وأكمل إعدادات الوحدة عن طريق تغيير لون رمز قائمة الهامبرغر في إعدادات الرموز.

• لون أيقونة قائمة همبرغر: # 000000

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

إضافة محتوى

إلى الوحدة التالية والأخيرة ، وهي وحدة نصية في العمود 3. أضف نسخة من اختيارك.

إضافة رابط

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

• عنوان URL لارتباط الوحدة النمطية: #

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: شبه عريض
• لون النص: #ffffff
• حجم النص: 16 بكسل
• ارتفاع خط النص: 1em
• محاذاة النص: الوسط

تباعد

أكمل إعدادات الوحدة بإضافة بعض الهامش العلوي.

• الهامش العلوي: 10 بكسل

3. إضافة وظائف إلى القائمة باستخدام وحدة التعليمات البرمجية

أضف وحدة التعليمات البرمجية إلى العمود 2

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

أدخل CSS & JQuery Code

ثم أضف كود CSS و JQuery. تأكد من وضع كود CSS بين علامات النمط وكود JQuery بين علامات البرنامج النصي.

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

معاينة

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

متحرك

سطح المكتب

افكار اخيرة

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

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