كيفية استبدال شريط القائمة الأساسي بوحدة قائمة Divi Fullwidth

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

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

في هذا البرنامج التعليمي ، سنوضح لك كيفية استبدال شريط القوائم الأساسي الخاص بك بوحدة قائمة Fullwidth باستخدام Divi's Carpenter Layout Pack. هذا جزء من مبادرة تصميم Divi المستمرة. يمكنك اختيار ما إذا كنت تريد تطبيق هذه الطريقة على جميع الصفحات أو على عدد قليل منها. دعنا نذهب اليها!

معاينة

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

تعطيل شريط التنقل الثابت

انتقل إلى خيارات موضوع ديفي

أول شيء يتعين علينا القيام به هو تعطيل خيار التنقل الثابت في خيارات سمة Divi. نحن نقوم بذلك للتخلص من مساحة القائمة الأساسية في الجزء العلوي من صفحتنا. للقيام بذلك ، انتقل إلى WordPress Dashboard> Divi> Theme Options.

تعطيل شريط التنقل الثابت

افتح علامة التبويب العامة وقم بتعطيل خيار شريط التنقل الثابت.

إنشاء قائمة أساسية

اذهب إلى القوائم

الشيء التالي الذي سنفعله هو إنشاء قائمتنا الأساسية. سنستخدم هذه القائمة الأساسية لكل من شريط القوائم الأساسي الافتراضي في الأعلى ووحدة القائمة الكاملة. لإضافة قائمتك ، انتقل إلى لوحة معلومات WordPress> المظهر> القوائم.

إضافة قائمة أساسية جديدة

أضف قائمة جديدة ، وامنح قائمتك اسمًا واجعلها القائمة الأساسية الخاصة بك.

إضافة صفحات وحفظ القائمة

أخيرًا وليس آخرًا ، أضف جميع صفحاتك واحفظ قائمتك.

نمط شريط القائمة الأساسي في مخصص الموضوع

انتقل إلى مُخصص الثيم

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

إعدادات شريط القوائم الأساسية

لمطابقة حزمة التخطيط ، قمنا بتطبيق التغييرات التالية:

• نمط الخط: غامق وكبير
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: # f25b3a
• لون خلفية القائمة المنسدلة: # f25b3a

إخفاء شريط القوائم الأساسي

صفحة واحدة

انتقل إلى صفحة الاختيار وتمكين Visual Builder

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

افتح إعدادات الصفحة

افتح إعدادات الصفحة التالية بالنقر فوق الرمز التالي أسفل صفحتك:

أضف كود CSS

قم بالتبديل إلى علامة التبويب خيارات متقدمة وأضف كود CSS التالي إلى مربع CSS المخصص:

#main-header {
display: none;
}

الموقع بالكامل

انتقل إلى خيارات موضوع ديفي

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

أضف كود CSS

استمر بالتمرير لأسفل حتى تصادف مربع CSS المخصص وأضف نفس كود CSS هناك:

#main-header {
display: none;
}

أضف شريط القوائم الأساسي إلى الصفحة

افتح الصفحة المقصودة باستخدام Visual Builder

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

أضف مقطع عرض كامل

تابع عن طريق إضافة قسم Fullwidth مباشرة أسفل قسم البطل الخاص بك.

أعلى الحدود

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

• عرض الحد العلوي: 7 بكسل
• لون الحد العلوي: # f25b3a

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

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

حدد القائمة الأساسية

حدد القائمة الأساسية الخاصة بك على أنها القائمة التي تريد ظهورها.

لون الخلفية

استمر بإعطاء الوحدة الخاصة بك لون خلفية أسود.

إعدادات الروابط

بعد ذلك ، افتح إعدادات الروابط وقم بتطبيق التغييرات التالية:

• لون الارتباط النشط: #FFFFFF
• لون نص القائمة المنسدلة: #FFFFFF
• لون نص قائمة الجوال: #FFFFFF
• اتجاه النص: يسار
• لون النص: فاتح

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

قم بتغيير إعدادات القائمة المنسدلة بعد ذلك:

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

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

أخيرًا ، سنجعل إعدادات النص تتطابق مع حزمة التخطيط:

• وزن خط القائمة: عريض للغاية
• نمط خط القائمة: أحرف كبيرة

اجعل قسم العرض الكامل عامًا واستخدمه في الصفحات الأخرى أيضًا

حفظ كقسم عالمي

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

أضف إلى صفحات أخرى بدون شريط القوائم الأساسي

يمكنك الآن بسهولة إضافة قائمة العرض الكاملة هذه إلى صفحات أخرى. يمكنك اختيار موقعها ولك مطلق الحرية في اللعب بخيارات التصميم المضمنة التي تأتي معها!

معاينة

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

افكار اخيرة

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