Divi: كيفية إضافة رمز هامبرغر إلى وحدة القائمة

من قبل غايتان | Divi, ديفي دروس

هل ترغب في إضافة رمز هامبرغر إلى وحدة القائمة الخاصة بـ Divi ?

إذا قمت ببناء رأسك في Divi، هناك عدة طرق للقيام بذلك. 

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

يعطي هذا مظهرًا بسيطًا إلى العنوان الخاص بك مع إضافة التفاعل أيضًا.

دعونا نذهب.

مسح

قبل الغوص في هذا البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة.

تحميل DIVI Now !!!

قم بإنشاء قالب رأس عام جديد باستخدام Divi Builder

انتقل إلى Divi Theme Builder

من لوحة تحكم WordPress ، انتقل إلى "ديفي> باني الموضوع' ثم اضغط "إضافة رأس عام"

ديفي موضوع باني

أضف عنوانًا عالميًا جديدًا

سوف تظهر القائمة المنسدلة. لبدء البناء من الصفر ، تابع بالاختيار "إنشاء رأس عام".

تصميم تصميم الرأس العالمي

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

لون الخلفية

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

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

مباعدة

التبديل إلى علامة التبويب تصميم من القسم وتعديل المعلمات التالية.

  • المساحة المتروكة (أعلى وأسفل): 0 بكسل

أضف سطرًا جديدًا

هيكل العمود

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

التحجيم

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

  • العرض الأقصى: 1 بكسل

مباعدة

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

  • المساحة المتروكة (أعلى وأسفل): 5 بكسل

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

حدد القائمة لإضافتها

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

تنزيل الشعار

تنزيل a شعار.

قم بإزالة لون الخلفية

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

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

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

  • قائمة الخط: Poppins
  • وزن خط القائمة: شبه عريض
  • لون النص: # 003e51
  • حجم نص القائمة: 16 بكسل
  • محاذاة النص: صحيح

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

ثم قم بتغيير الإعدادات من القائمة المنسدلة.

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

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

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

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

التحجيم

ثم انتقل إلى إعدادات التحجيم وقم بتعيين أقصى عرض لـ شعار.

مباعدة

قم أيضًا بإزالة الهامش السفلي الافتراضي من الوحدة النمطية.

  • الهامش (السفلي): 0 بكسل

اجعل القسم مثبتًا

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

  • موقف مثبت: التمسك بالأعلى
  • الإزاحة من العناصر اللاصقة المحيطة: نعم
  • الانتقال الافتراضي والأنماط الثابتة: نعم

لون الخلفية في حالة لزجة

ثم قم بتغيير لون خلفية القسم إلى الحالة اللاصقة.

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

ظل مربع الحالة اللزجة

قم أيضًا بتطبيق ظل الصندوق على القسم.

  • لون الظل (سطح المكتب): rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
  • لون الظل (مثبت): rgba (0,0,0,0.04،XNUMX،XNUMX،XNUMX)

تمت إضافة رمز هامبرغر إلى وحدة القائمة

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

أولاً ، افتح إعدادات وحدة القائمة ، وانتقل إلى علامة التبويب متقدم وتعيين معرف CSS.

  • معرف CSS: قائمة divi

أضف وحدة رمز ضمن وحدة القائمة

بعد ذلك ، أضف وحدة رمز ضمن وحدة القائمة.

أضف علامات للنمط والنص

سوف نستخدم كود CSS و JQuery. للتحضير لذلك ، سنضيف علامات النمط والنص.

أضف كود CSS

سنقوم بلصق الأسطر التالية من كود CSS بين علامات النمط:

.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

أضف مسج

أضف سطورًا لفتح كود JQuery

بعد ذلك سيكون لدينا كود JQuery. أضف الأسطر التالية من كود JQuery بين علامات البرنامج النصي:

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

إنشاء المتغيرات

قم بإنشاء بعض المتغيرات بعد ذلك.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

ضع رمز التبديل في وحدة القائمة

بعد ذلك ، ضع متغير رمز التبديل في وحدة القائمة باستخدام سطر التعليمات البرمجية التالي:

toggleIcon.insertAfter(desktopMenu);

أضف وظيفة النقر

نحن نضيف أيضًا وظيفة النقر.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

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

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

ديفي موضوع باني

مسح

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

أيقونة همبرغر في وحدة قائمة Divi

تحميل DIVI Now !!!

وفي الختام

في هذه المقالة ، أوضحنا لك كيفية الإبداع في العنوان العالمي الخاص بك في Divi Theme Builder. 

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

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...

إرسال مراجعة

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

هذا الموقع يستخدم Akismet للحد من غير المرغوب فيها. تعرف على المزيد حول كيفية استخدام بيانات التعليقات الخاصة بك.