في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء زر قائمة منسدلة باستخدام وحدة قائمة Divi ذات العرض الكامل. للقيام بذلك ، سننشئ أولاً قائمة في WordPress. سنستخدم بعد ذلك وحدة قائمة Divi ذات العرض الكامل لعرض هذه القائمة بأنماط مخصصة باستخدام Divi builder وقليلًا من CSS المخصص. والنتيجة هي زر قائمة منسدلة عملي وأنيق.
دعونا نبدأ.
مسح
فيما يلي نظرة عامة على زر القائمة المنسدلة الذي سنقوم بدمجه في هذا البرنامج التعليمي.
ما تحتاجه للبدء
للبدء ، إذا لم تكن قد قمت بذلك بالفعل ، فقم بتثبيت وتنشيط موضوع ديفي مثبتًا (أو المكون الإضافي Divi Builder إذا كنت لا تستخدم ملف موضوع ديفي). سوف نستخدم Divi builder في البداية لتصميم زر القائمة المنسدلة.
هذا هو !
إنشاء قائمة في وورد
قبل أن نبدأ في إنشاء القائمة المنسدلة باستخدام Divi Builder ، نحتاج أولاً إلى إنشاء قائمة WordPress التي نرغب في استخدامها لوحدة قائمة العرض الكامل. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress وانتقل إلى المظهر> القوائم. ثم أنشئ قائمة جديدة بالنقر على رابط إنشاء قائمة جديدة ، وإدخال اسم القائمة والنقر على زر "إنشاء قائمة".
في الوقت الحالي ، يمكنك إنشاء روابط مخصصة باستخدام "#" كعنصر نائب لعنوان URL مع نص الرابط.
قم ببناء عناصر القائمة بحيث يحتوي عنصر قائمة المستوى الأعلى على رابط "معرفة المزيد" مع ثلاثة عناصر قائمة فرعية.
بعد ذلك ، تأكد من حفظ القائمة.
كيفية إنشاء زر قائمة منسدلة مع وحدة القائمة Divi بالعرض الكامل
بمجرد إنشاء القائمة ، يمكننا البدء في تصميم زر القائمة المنسدلة باستخدام Divi. لبدء المشروع ، أنشئ صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
إنشاء محتوى وهمية
أولاً ، أضف صفًا من عمود واحد إلى القسم القياسي الافتراضي.
أضف وحدة نصية
ثم أضف وحدة نمطية نصية إلى السطر مع المحتوى التالي:
قائمة ديفي المحتوى الخاص بك يذهب هنا. قم بتحرير أو إزالة هذا النص في الصفحة أو في إعدادات محتوى الوحدة النمطية. يمكنك أيضًا تصميم كل جانب من جوانب هذا المحتوى في إعدادات تصميم الوحدة النمطية وحتى تطبيق CSS مخصص على هذا النص في إعدادات الوحدة النمطية المتقدمة.
ثم قم بتحديث معلمات التصميم كما يلي:
قسم الحشو
ثم ، قم بتحديث إعداد القسم بالعناصر التالية:
- الحشو: 0px أسفل
تباعد الخط والحدود
بعد تحديث تعبئة القسم ، افتح إعدادات الخط وقم بتعيين حد تعبئة بسيطًا لها.
- مواد التنجيد: 10vw في الأعلى ، 10vw في الأسفل ، 5vw في اليسار ، 5vw في اليمين
- عرض الحد: 1px
إنشاء زر القائمة المنسدلة
من أجل إنشاء زر القائمة المنسدلة ، سنستخدم وحدة قائمة كاملة العرض. سيسمح لنا ذلك بإضافة القائمة التي تم إنشاؤها مسبقًا.
إضافة قائمة العرض الكامل
لإنشاء وحدة قائمة كاملة العرض ، أضف قسمًا كامل العرض جديدًا تحت القسم القياسي الحالي.
ثم أضف وحدة قائمة كاملة العرض إلى السطر.
في النافذة المنبثقة لإعدادات القائمة كاملة العرض (أسفل المحتوى) ، استخدم القائمة المنسدلة لتحديد القائمة التي تريد عرضها. يجب أن تكون هذه هي نفس القائمة التي أنشأناها سابقًا باسم "قائمة الأزرار المنسدلة".
بعد ذلك ، قم بإزالة لون الخلفية الأبيض الافتراضي للقائمة.
بمجرد إضافة القائمة باستخدام وحدة القائمة ذات العرض الكامل ، احفظ الإعدادات. سنعود إلى هذه الوحدة بعد قليل لإنهاء التصميم. لكن في الوقت الحالي ، سنضيف خلفية إلى قسم العرض الكامل.
تحديث تصميم قسم العرض الكامل
افتح الإعدادات الخاصة بقسم العرض الكامل وقم بتحديث ما يلي:
- التدرج الخلفي الأيسر: # 0047d6
- التدرج الخلفي الأيمن اللون: # 45b2ff
- أقصى عرض: 240px
- محاذاة القسم: المركز
قمت بتعيين الحد الأقصى لعرض القسم على 240 بكسل ، لأن هذا هو عرض عرض القائمة المنسدلة الافتراضي في Divi. إنه أيضًا حجم جيد لزر على سطح المكتب والجوال.
- زوايا مدورة: 5px
في علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية و Overflow و Z Index.
- فئة CSS: زر منسدل
- تجاوز أفقي: مرئي
- تجاوز عمودي: مرئية
- مؤشر Z: 14
هناك حاجة إلى فئة CSS حتى نتمكن من استهداف CSS الخارجي في هذا القسم لاحقًا. يجب ضبط الفائض على مرئي حتى نتمكن من رؤية القائمة المنسدلة. وسيساعدك الفهرس Z في الحفاظ على القائمة المنسدلة فوق كل المحتوى الآخر على الصفحة.
تصميم القائمة Fulwidth
نحن الآن جاهزون لتصميم وحدة قائمة Fulwidth. افتح إعدادات وحدة قائمة العرض الكامل وقم بتحديث ما يلي:
- إنشاء روابط قائمة كاملة العرض: نعم
- لون نص القائمة المنسدلة: # fffff
- لون نص قائمة الجوّال: #ffffff
- محاذاة النص: المركز
- لون خلفية القائمة المنسدلة: # 45b2ff
- لون خط القائمة المنسدلة: #ffffff
- لون خلفية القائمة: #45b2ff
- قائمة الخط: ترميز بدون شبه مكثف
- قائمة الخط الوزن: نصف جريئة
- لون نص القائمة: #ffffff
- حجم نص القائمة: 16px
- تباعد القائمة: 2px
- الرسوم المتحركة للقائمة المنسدلة: توسيع
ضع زر القائمة المنسدلة
لكي يتداخل الزر مع الحد السفلي ، نحتاج إلى إضافة هامش علوي سلبي هو نصف ارتفاع الزر تمامًا.
- الهامش: -40.5px عالية
كما ترى ، لا تشغل مساحة التمرير منطقة الزر بالكامل بعد ، ولا تزال القائمة المنسدلة على اليمين. لحل هذه المشكلة ، يمكننا إضافة CSS مخصص.
مضيفا العرف المغلق
قبل إضافة CSS المخصص ، تأكد من إضافة معرف CSS "المنسدلة" إلى قسم العرض الكامل (وليس الوحدة النمطية).
بدون معرف CSS ، لن يعمل CSS أدناه.
لإضافة CSS المخصص ، افتح إعدادات الصفحة والصق التعليمة البرمجية التالية في مربع إدخال CSS المخصص.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important؛ } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px؛ ارتفاع الخط: 81 بكسل ؛ } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px؛ ارتفاع الخط: 1.6em ؛ } .dropdown-button .et_mobile_menu li a: hover، .nav ul li a: hover، .dropdown-button .fullwidth-menu a: hover {opacity: 1؛ } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important؛ } .dropdown-button .fullwidth-menu li {display: block؛ } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px؛ }
ها هي النتيجة النهائية
الأفكار النهائية
يتضمن إنشاء زر قائمة منسدلة باستخدام وحدة قائمة Divi ذات العرض الكامل بضع خطوات أساسية. أولاً ، نقوم بإنشاء القائمة في WordPress التي نريد دمجها في الوحدة النمطية. ثم نستخدم أداة Divi builder من أجل وحدة قائمة العرض الكامل ونمطها حسب رغبتنا. ثم نضيف CSS مخصصًا لصقل التصميم سواء على سطح المكتب أو على الهاتف المحمول. وكانت النتيجة قائمة منسدلة جميلة (ومفيدة) تم طرحها للتمرير فوق سطح المكتب والنقر على الجوال. آمل أن تجد هذه إضافة مفيدة لمجموعة أدوات التصميم الخاصة بك.
