هل تريد إنشاء قائمة جانبية منزلقة وسريعة الاستجابة في Divi؟
عند إنشاء ملف موقع انترنت، غالبًا ما تتساءل عن نوع الرأس المراد إنشاؤه. الأكثر استخدامًا على الويب هو شريط القوائم الأفقي في الأعلى ، ولكن هناك أيضًا خيارات أخرى ، مثل القائمة المنزلقة.
غالبًا ما تساعدك القوائم المنزلقة في الحد من المساحة التي يشغلها الرأس العام. لذا يمكنك السماح بقائمة منزلقة تظهر عندما يكون ملف آخر انقر على أيقونة الهامبرغر في الزاوية اليمنى العليا.
لذلك ، يساعدك استخدام القائمة المنسدلة على إضافة تفاعل إضافي إلى ملف موقع انترنت.
في هذا البرنامج التعليمي ، سوف نوضح لك كيفية إنشاء واحد باستخدام Divi's Theme Builder.
لنبدأ!
مسح
قبل أن نتعمق في هذا البرنامج التعليمي ، دعنا أولاً نلقي نظرة على النتيجة التي سنحصل عليها.
انتقل إلى Theme Builder وأنشئ رأسًا عامًا
انتقل إلى Theme Builder
للبدء ، انتقل إلى Theme Builder من قائمة Divi الموجودة في لوحة معلومات WordPress الخاصة بك وانقر فوق "Add Global Header".
قم بإنشاء الرأس العام
تابع عن طريق تحديد "إنشاء عنوان عام".
قم بإنشاء نمط رأس
إعدادات القسم
لون الخلفية
بمجرد دخولك إلى محرر القوالب ، ستلاحظ قسمًا. افتح هذا القسم واجعل لون الخلفية شفافًا.
- الخلفية: rgba (255,255,255,0،XNUMX،XNUMX)
مباعدة
قم بالتبديل إلى علامة تبويب النمط وإزالة جميع الهوامش السفلية والعلوية.
- رأس الهامش الداخلي: 0 بكسل
- الهامش الداخلي السفلي: 0 بكسل
البريد المركزي
بعد ذلك ، سنقوم بتغيير موضع القسم بالانتقال إلى علامة التبويب المتقدمة وتغيير إعدادات الموضع.
- المركز: ثابت
- الموقع: أعلى الوسط
أضف السطر الأول
هيكل العمود
بمجرد الانتهاء من إعدادات القسم ، أضف صفًا جديدًا باستخدام بنية العمود التالية:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:
- أقصى عرض: 97٪
- أقصى عرض: 100٪
مباعدة
قم بتغيير إعدادات التباعد.
- الهامش الداخلي الأقصى: 1٪
- الهامش الداخلي السفلي: 0 بكسل
العنصر الرئيسي
بعد ذلك، انتقل إلى علامة التبويب "خيارات متقدمة" وأضف سطرين من كود CSS إلى العنصر الرئيسي في السطر. وهذا سوف يساعدنا على محاذاة عموديا محتويات من العمود في صفنا.
display: flex;
align-items: center;
أضف وحدة صورة إلى العمود 1
تنزيل الشعار
حان الوقت لإضافة وحدات ، بدءًا من وحدة صورة في العمود 1. قم بتحميل شعارك.
أضف وحدة نصية إلى العمود 3
أضف 3 مسافات إلى منطقة المحتوى
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
لون الخلفية
قم بتعديل لون خلفية الوحدة.
- الخلفية: rgba (0,0,0,0.04،XNUMX،XNUMX)
إعدادات النص
بعد ذلك ، قم بالتبديل إلى علامة تبويب النمط وإزالة ارتفاع سطر النص. سيساعدنا هذا في التحكم الكامل في النطاقات التي أضفناها.
- ارتفاع سطر النص: 0em
التحجيم
سنقوم بتعديل معلمات تحجيم الوحدة.
- أقصى عرض: 120 بكسل
- محاذاة النص: صحيح
مباعدة
وسنكمل معلمات الوحدة بتحويل الوحدة إلى مربع. لهذا سوف نستخدم قيم الحشو المخصصة في إعدادات التباعد.
- رأس الهامش الداخلي: 40 بكسل
- الهامش الداخلي السفلي: 60 بكسل
- الهامش الداخلي الأيسر: 40 بكسل
- الهامش الداخلي الأيمن: 40 بكسل
أضف السطر الثاني
هيكل العمود
الصف التالي! سنستخدم هذا الخط لتصميم القائمة المنزلقة بالكامل. استخدم هيكل العمود التالي:
لون الخلفية
بدون إضافة وحدات نمطية ، افتح إعدادات الصف وقم بتغيير لون الخلفية كما يلي:
- الخلفية: # e7e0e2
صورة الخلفية
نستخدم أيضًا صورة خلفية منقوشة. يمكنك استخدام نمط الخلفية من اختيارك.
- حجم صورة الخلفية: الحجم الفعلي
- موضع صورة الخلفية: المركز
- كرر صورة الخلفية: كرر
التحجيم
بعد ذلك ، قم بالتبديل إلى علامة تبويب النمط وقم بتغيير إعدادات الحجم وفقًا لذلك:
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- أقصى عرض: 20٪ (كمبيوتر مكتبي) ، 40٪ (كمبيوتر لوحي) ، 60٪ (هاتف)
- الارتفاع: 100 فولت
مباعدة
قم أيضًا بتغيير إعدادات التباعد على أحجام الشاشات المختلفة.
- الهامش الداخلي للقمة: 10 vw (سطح المكتب) ، 30 vw (tablet) ، 40 vw (phone)
الحدود
وأكمل معلمات الخط بإضافة حد أيسر.
- عرض الحد الأيسر: 10 بكسل
- لون الحد الأيسر: # 24394a
- نمط الحد الأيسر: مزدوج
أضف وحدة نصية إلى العمود
إضافة محتوى
حان الوقت لإضافة عنصر قائمة وحدة النص الأول! أضف النسخة إلى الصندوق محتويات.
إضافة رابط
تابع عن طريق إضافة ارتباط ذي صلة إلى عنصر القائمة.
- عنوان URL لارتباط الوحدة النمطية: #
لون الخلفية
ثم قم بتغيير لون الخلفية.
- الخلفية: rgba (216,210,212,0.35،XNUMX،XNUMX)
إعدادات النص
بعد ذلك ، قم بالتبديل إلى علامة التبويب Style'3 وقم بتغيير إعدادات النص كما يلي:
- خط النص: Domine
- نص خفيف خفيف: نص غامق
- نص لون النص: # 000000
- حجم نص النص: 1vw (سطح المكتب) ، 2vw (كمبيوتر لوحي) ، 3vw (هاتف)
- محاذاة النص: توسيط
مباعدة
أكمل إعدادات الوحدة عن طريق إضافة قيم تباعد مخصصة على أحجام شاشات مختلفة.
- الهامش السفلي: 1vw (سطح المكتب) ، 2vw (كمبيوتر لوحي) ، 3vw (هاتف)
- الهامش الداخلي الأقصى: 1vw
- الهامش الداخلي السفلي: 1vw
وحدة نص استنساخ (وحدة واحدة لكل عنصر قائمة)
بمجرد الانتهاء من وحدة نص عنصر القائمة الأولى ، يمكنك استنساخها عدة مرات حسب الحاجة. فقط تأكد من أن الوحدات الخاصة بك لا تتجاوز ارتفاع النافذة.
تحرير محتوى وحدة النص المكرر والروابط
تعديل محتويات وروابط كل وحدة نصية مكررة.
أضف وحدة الزر إلى العمود
أضف نسخة
آخر وحدة نحتاجها في هذا الصف هي وحدة زر. أضف نسخة من اختيارك.
إضافة رابط
أضف أيضًا ارتباطًا.
- URL ارتباط الزر: #
انحياز
قم بالتبديل إلى علامة تبويب النمط وقم بتغيير محاذاة الزر.
- محاذاة الزر: توسيط
إعدادات الزر
تابع عن طريق تخصيص وحدة الأزرار على النحو التالي:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 0,7 vw (سطح المكتب) ، 1,5 vw (جهاز لوحي) ، 2,5 vw (هاتف)
- لون نص الزر: # 000000
- زر الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- لون حدود الزر: # 24394a
- زر Border Radius: 0 بكسل
- تباعد حرف الزر: 4 بكسل
- زر الخط: فتح بلا
- زر Soft Light: نص غامق
- زر نمط النسخ: TT
مباعدة
وأكمل إعدادات الوحدة بإضافة قيم تباعد مخصصة على أحجام شاشات مختلفة.
- الهامش العلوي: 5vw
- الهامش الداخلي الأقصى: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (الهاتف)
- أسفل الهامش الداخلي: 1vw (سطح مكتب) ، 2vw (كمبيوتر لوحي) ، 3vw (هاتف)
- الهامش الداخلي لليسار: 1,8 فولكس فاجن (سطح مكتب) ، 3 فولكس فاجن (كمبيوتر لوحي) ، 4 فولكس فاجن (هاتف)
- الهامش الداخلي الأيمن: 1,8 vw (سطح المكتب) ، 3 vw (tablet) ، 4 vw (phone)
أضف وظيفة الانزلاق
أضف معرف CSS إلى وحدة نص أيقونة القائمة
الآن بعد أن أصبح لدينا جميع العناصر في مكانها الصحيح ، حان الوقت لإنشاء تأثير القائمة المنزلقة سريع الاستجابة! أولاً ، افتح وحدة النص (التي تحتوي على النطاقات) في العمود الثالث من صفك الأول واستخدم معرف CSS مخصصًا في علامة التبويب خيارات متقدمة. سنستخدم معرف CSS هذا لإنشاء وظيفة النقر في الكود الخاص بنا.
- معرف CSS: الانزلاق في الفتح
أضف فئة CSS إلى السطر رقم 2
ثم افتح السطر الثاني ، وانتقل إلى علامة التبويب خيارات متقدمة وأضف فئة CSS مخصصة. عند النقر عليه ، سينزلق الخط.
- فئة CSS: الشريحة في حاوية القائمة
قم بتغيير موضع الخط رقم 2
سنقوم أيضًا بتغيير موضع هذا الخط. لاحظ كيف يتطابق الإزاحة الأفقية مع عرض الخط على أحجام الشاشات المختلفة في إعدادات التحجيم.
- الموقف: مطلق
- الموقع: أعلى اليمين
- الإزاحة الأفقية: -20٪ (سطح المكتب) ، -40٪ (الكمبيوتر اللوحي) ، -60٪ (الهاتف)
قم بتغيير عتامة الخط 2
وجلب التعتيم إلى 0 في الحالة الافتراضية.
opacity: 0;
أضف وحدة Code إلى العمود الثاني من الصف الأول
أدخل كود CSS
لإنشاء تأثير وظيفة النقر وتصميم عصي رمز الهامبرغر الخاص بنا ، سنحتاج إلى بعض كود CSS. أضف وحدة رمز إلى العمود الثاني من صفك الأول و ضع الأسطر التالية من كود CSS بين علامات الأنماط ، كما ترى في شاشة الطباعة أدناه:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
أدخل كود JQuery
سنحتاج أيضًا إلى إضافة بعض JQuery لوظيفة النقر. تأكد أنك ضع الكود بين علامات البرنامج النصي كما ترى في شاشة الطباعة أدناه:
jQuery (الوظيفة ($) {$ ('# slide-in-open'). انقر فوق (function () {$ (this) .toggleClass ('open')؛ $ ('. slide-in-menu-container') .toggleClass ("منزلق في القائمة") ؛}) ؛}) ؛
حفظ التغييرات منشئ الموضوع وإظهار النتيجة على موقع الويب
بمجرد الانتهاء من جميع عناصر العنوان العام الخاص بك ، كل ما عليك فعله هو حفظ جميع التغييرات وعرض النتيجة على موقعك!
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.
وفي الختام
في الختام ، في هذه المقالة ، أوضحنا لك كيفية استخدام مُنشئ سمات Divi لإنشاء قائمة انزلاقية سريعة الاستجابة. لهذا ، قمنا بدمج أفضل العناصر والخيارات المضمنة في Divi مع رمز وظيفة النقر المخصص. لذلك ، فهو يتيح لك التركيز على تصميم القائمة المنزلق للخارج والسماح للكود بالاهتمام بالجزء الوظيفي من الرأس العام!
إذا كان لديك أي أسئلة أو اقتراحات ، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.