كيفية إنشاء زر قائمة منسدلة باستخدام وحدة قائمة Divi Fullwidth

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

في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء زر قائمة منسدلة باستخدام وحدة قائمة Divi fullwidth. للقيام بذلك ، سننشئ أولاً قائمة في WordPress. بعد ذلك ، سوف نستخدم وحدة القائمة الكاملة لـ Divi لعرض تلك القائمة بأنماط مخصصة باستخدام Divi builder وقليل من CSS المخصص. والنتيجة هي زر قائمة منسدلة عملي وأنيق.

هيا بنا نبدأ.

نظرة خاطفة

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

سطح المكتب (القائمة المنسدلة عند التمرير)

الجهاز اللوحي والهاتف (القائمة المنسدلة عند النقر)

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

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

هذا كل شيء!

إنشاء قائمة في ووردبريس

قبل أن نبدأ في إنشاء القائمة المنسدلة باستخدام Divi Builder ، يجب علينا أولاً إنشاء قائمة WordPress التي نرغب في استخدامها لوحدة القائمة ذات النطاق الكامل. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress وانتقل إلى المظهر> القوائم. ثم أنشئ قائمة جديدة بالنقر على رابط إنشاء قائمة جديدة ، وإدخال اسم القائمة ، والنقر على زر "إنشاء قائمة".

في الوقت الحالي ، يمكنك إنشاء بعض الروابط المخصصة باستخدام "#" كعنصر نائب لعنوان url مع نص الرابط.

قم ببناء عناصر القائمة بحيث يحتوي عنصر قائمة المستوى العلوي على نص الارتباط "معرفة المزيد" مع ثلاثة عناصر قائمة فرعية تحته.

بعد ذلك تأكد من حفظ القائمة.

كيفية إنشاء زر قائمة منسدلة مع وحدة قائمة Divi Fullwidth

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

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء محتوى وهمي

أولاً ، أضف صف عمود واحد إلى القسم العادي الافتراضي.

أضف وحدة نصية

ثم أضف وحدة نصية إلى الصف بالمحتوى التالي:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

بعد ذلك ، قم بتحديث إعدادات التصميم على النحو التالي:

قسم الحشو

بعد ذلك ، قم بتحديث إعداد القسم بما يلي:

• الحشو: 0 بكسل للأسفل

تباعد الصفوف والحدود

بعد تحديث المساحة المتروكة للقسم ، افتح إعدادات الصف وقم بإعطاء الصف بعض المساحة المتروكة وحدًا بسيطًا.

• الحشو: 10vw أعلى ، 10vw أسفل ، 5vw يسار ، 5vw يمين
• عرض الحدود: 1 بكسل

إنشاء زر القائمة المنسدلة

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

إضافة قائمة العرض الكامل

لإنشاء وحدة قائمة عرض كامل ، أضف قسم عرض كامل جديد ضمن القسم العادي الحالي.

ثم أضف وحدة قائمة ذات عرض كامل إلى الصف.

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

ثم أخرج لون الخلفية الأبيض الافتراضي للقائمة.

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

تحديث تصميم المقطع بعرض كامل

افتح إعدادات قسم العرض الكامل وقم بتحديث ما يلي:

• لون الخلفية المتدرج الأيسر: # 0047d6
• تدرج الخلفية اللون الصحيح: # 45b2ff

• العرض الأقصى: 240 بكسل
• محاذاة القسم: المركز

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

• الزوايا الدائرية: 5 بكسل

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية و overflow و Z Index.

• فئة CSS: زر القائمة المنسدلة
• الفائض الأفقي: مرئي
• الفائض العمودي: مرئي
• الفهرس Z: 14

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

صمم قائمة Fulwidth

نحن الآن جاهزون لتصميم وحدة قائمة fulwidth. افتح إعدادات وحدة قائمة العرض الكامل وقم بتحديث ما يلي:

• جعل ارتباطات القائمة كاملة العرض: نعم
• لون نص القائمة المنسدلة: #ffffff
• لون نص قائمة الجوال: #ffffff
• محاذاة النص: الوسط
• لون خلفية القائمة المنسدلة: # 45b2ff
• لون خط القائمة المنسدلة: #ffffff
• لون خلفية قائمة الجوال: # 45b2ff

• خط القائمة: تشفير بلا شبه مكثف
• وزن خط القائمة: شبه عريض
• لون نص القائمة: #ffffff
• حجم نص القائمة: 16 بكسل
• تباعد أحرف القائمة: 2 بكسل
• الرسوم المتحركة للقائمة المنسدلة: قم بتوسيع

وضع زر القائمة المنسدلة

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

• الهامش: -40.5 بكسل للأعلى

اوشكت على الوصول

ها هي النتيجة حتى الآن ...

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

إضافة 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;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 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;
}

هنا هو النتيجة النهائية

تخصيص القائمة على الهاتف المحمول

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

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

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

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

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

content: "Learn More";

على سبيل المثال ، إذا كنت تريد أن تقرأ "القائمة" ، فيمكنك تغيير سطر CSS إلى ما يلي:

content: "Menu";

النتيجة النهائية

هنا هو النتيجة النهائية.

سطح المكتب (القائمة المنسدلة عند التمرير)

الجهاز اللوحي والهاتف (القائمة المنسدلة عند النقر)

عناصر فرعية إضافية

ويمكنك أيضًا إضافة عناصر قائمة فرعية! ما عليك سوى تحديث القائمة في صفحة محرر القائمة وستكون جاهزًا تمامًا.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!