إصلاح قائمة التنقل المستجيبة في Divi

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

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

هيا بنا نبدأ.

إصلاح قائمة التنقل المستجيبة في Divi

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

أربعة حلول لقائمة ملاحة مزدحمة

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

المشكلة

المشكلة الأكثر شيوعًا التي أواجهها عند استخدام قائمة التنقل الافتراضية لـ Divi هي عندما يريد العميل الكثير من عناصر قائمة المستوى الأعلى. إن وجود أكثر من 5 عناصر قائمة (أو وجود عناصر قائمة ذات حجم خط كبير) في قائمة التنقل الرئيسية سيؤدي غالبًا إلى إنشاء فاصل سطر وشعار موسع عندما يصل حجم الشاشة إلى عرض يتراوح بين 980-1100 بكسل (حجم أجهزة الكمبيوتر المحمولة الصغيرة وأقراص كبيرة). أنا واثق من أنك واجهت هذه المشكلة من قبل ، حتى لو لم تلاحظها من قبل. يبدو شيئًا كالتالي:

ليست مثالية. لنلق نظرة على أربعة حلول لهذه المشكلة.

الحل رقم 1: اجعل شريط القوائم كامل العرض

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

انتقل إلى مُخصص السمة> الرأس والتنقل> شريط القائمة الأساسي وحدد جعل العرض الكامل .

الحل الثاني: اضبط إعدادات الشعار والخط.

هناك حل بسيط آخر لمشكلتك وهو استخدام إعدادات أداة تخصيص السمات لضبط خيارات Logo Max Height أو Text Size أو Font الافتراضية.

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

الحل رقم 3: عرض قائمة الهاتف المحمول عند نقطة توقف جديدة.

فيما يلي النطاقات العامة لكل نقطة من نقاط التوقف داخل Divi:

سطح المكتب الكبير: 1405 بكسل وما فوق
سطح المكتب القياسي: بين 1100 بكسل و 1405 بكسل
أجهزة الكمبيوتر المحمولة والأجهزة اللوحية الكبيرة: بين 980 بكسل و 1100 بكسل
الأجهزة اللوحية: بين 768 بكسل و 980 بكسل
الهواتف الذكية والأجهزة اللوحية الصغيرة: بين 320 بكسل و 768 بكسل ؛
الهواتف الذكية: بين 320 بكسل و 480 بكسل ؛

نقطة التوقف التي تتحول فيها قائمة التنقل الافتراضية إلى قائمة الجوال (مع التنقل في الهامبرغر) هي 980 بكسل. أي شاشة بحجم أقل من 980 بكسل ستظهر قائمة الهاتف المحمول.

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

انتقل إلى Theme Customizer > CSS الإضافي وأدخل ما يلي:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

هذا الاستعلام عن الوسائط يقوم بأمرين. يخفي القائمة العادية ويعرض قائمة الهاتف المحمول عند نقطة توقف 1024 بكسل.

الحل رقم 4: ضبط نمط القائمة عند نقطة توقف معينة

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

إليك CSS الافتراضي لـ Divi لعناصر القائمة الخاصة بك:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

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

انتقل إلى Theme Customizer> CSS الإضافي وأدخل ما يلي:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

ما يفعله CSS هو تغيير حجم الخط إلى 14 بكسل والحشو الصحيح إلى 15 بكسل على أي شاشة 1200 بكسل أو أقل. يؤدي ذلك إلى إنشاء انتقال سلس عند ضبط حجم الشاشة على سطح المكتب ويسمح لك بالحفاظ على التنقل الافتراضي على الأجهزة اللوحية الكبيرة وأجهزة الكمبيوتر المحمولة الصغيرة.

ضبط أنماط الرأس الأخرى

هناك خمسة أنماط رأس للاختيار من بينها داخل Divi's Theme Customizer (لا يتم احتساب التنقل العمودي). تتضمن الأنماط الخمسة الافتراضي (الذي تم تناوله بالفعل في هذا المنشور) Slide-in و Fullscreen و Centered و Center Inline Logo.

انزلاق للداخل وأنماط ملء الشاشة

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

أسلوب مركزي

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

نمط شعار مضمن في المنتصف

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

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

لاحظ كيف تم وضع الشعار خارج المركز قليلاً في القائمة مقارنة بالشعار المتمركز في قسم الرأس.

الآن سأقوم بتقصير عنصر القائمة المسمى "عناصر المعلومات" إلى "المعلومات". انظر الآن إلى الكيفية التي ينتقل بها الشعار أكثر إلى المركز.

قد يكون هذا الحل هو كل ما تحتاجه للحصول على الشعار في المكان الذي تريده. قد تتمكن من تغيير شيء مثل "من نحن" إلى "حول" أو العكس لإجراء تلك التعديلات الصغيرة.

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

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

ثم قم بفتح عنصر القائمة الذي ترغب في استهدافه. ثم أدخل فئة CSS في مربع إدخال فئات CSS. أنا أدعو لي "تنبيه".

بعد ذلك ، انتقل إلى Divi> Theme Customizer> CSS الإضافي وأضف CSS المخصص التالي:

#top-menu li.nudge  {
padding-right: 32px;
}

باستخدام هذا css ، يتم إعطاء مساحة صحيحة تبلغ 32 بكسل فقط للعنصر الذي يحتوي على فئة "nudge" ؛ هذا يدفع الشعار إلى ما يكفي لجعله في المنتصف.

هذا كل شيء!

خواطر ختامية

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

أنا متأكد من أن هناك المزيد من المشاكل والحلول التي لم أتطرق إليها في هذا المنشور. لا تتردد في نشرها في التعليقات. إنني أتطلع إلى الاستماع منك.

هتافات!