كيفية جعل تداخل التنقل القياسي والعمودي على موقع Divi الخاص بك

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

• كيف تجعل قائمتك الثانوية تتداخل مع التنقل العمودي
• كيفية إصلاح قائمتك الثانوية عند التمرير
• كيف تجعل التذييل يتداخل مع التنقل العمودي

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

نتيجة

بنهاية هذا البرنامج التعليمي ، ستتمكن من تحقيق النتيجة التالية على موقع ويب يستخدم التنقل العمودي:

مصدر إلهام للملاحة القياسية والعمودية المتداخلة

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

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

لقد استوحينا الإلهام من موقع Alex Brands الذي يستخدم القائمة الثانوية في الأعلى والتنقل العمودي على الجانب الأيسر من الصفحة.

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

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

كيفية جعل تداخل التنقل القياسي والعمودي على موقع Divi الخاص بك

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

خطوات عامة

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

دون أي استحقاق آخر ؛ هيا بنا نبدأ.

إنشاء القائمة الخاصة بك وإضافة عناصر القائمة

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

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

أضف الرموز الاجتماعية إلى القائمة الثانوية

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

لتنشيط القائمة الثانوية وإظهار الرموز الاجتماعية ، ابدأ بالانتقال إلى لوحة معلومات WordPress> تخصيص> الرأس والتنقل> Header Elements> تمكين خيار "إظهار الرموز الاجتماعية".

قم بتنشيط التنقل العمودي

الخطوة التالية التي ستحتاج إلى اتخاذها هي تمكين التنقل العمودي داخل Divi builder الخاص بك. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress> المظهر> تخصيص> الرأس والتنقل> تنسيق الرأس> تمكين التنقل العمودي.

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

تعطيل الملاحة الثابتة لقائمتك الأساسية

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

اجمع بين التنقل القياسي والعمودي

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

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

أضف كود CSS إلى خيارات السمة

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

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

أضف كود CSS إلى مُخصص السمة

الاحتمال الآخر لديك هو إضافة خطوط كود CSS إلى Theme Customizer. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress> المظهر> تخصيص> CSS إضافي> والصق خطوط CSS في حقل CSS المخصص:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة من تصميم Line / shutterstock.com