3 طرق إبداعية لتصميم الرابط النشط للملاحة العمودية Divi

نشرت: 2017-09-11

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

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

3 طرق إبداعية لتصميم الرابط النشط للملاحة العمودية Divi

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

كيف تعمل

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

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

ملاحظة: اعلم أن هذه الطريقة تنطبق فقط على مواقع الويب المكونة من صفحة واحدة فقط.

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

ستكون الأمثلة التي سنعرضها لك كيفية صنعها ذات قيمة خاصة إذا كنت تستخدم التنقل العمودي. لذا ، امض قدمًا وقم بتمكين التنقل العمودي في Theme Customizer (إذا لم تكن قد فعلت ذلك بالفعل في المنشور السابق).

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

ارتباط نشط

نمط الارتباط النشط # 1

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

ارتباط نشط

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

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

إخفاء صورة الشعار: تمكين
حجم النص: 24
تباعد الأحرف: -1
الخط: Happy Monkey
لون النص: #FFFFFF
لون الارتباط النشط: #FFFFFF
لون الخلفية: rgba (255،255،255،0)
لون خلفية القائمة المنسدلة: rgba (255،255،255،0)

ارتباط نشط

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

الشيء التالي الذي عليك القيام به هو إضافة بعض أكواد CSS. هناك طريقتان يمكنك من خلالهما إضافة كود CSS إلى موقع الويب الخاص بك. سنتعامل مع ثلاث طرق في هذه الأمثلة ، بدءًا من خيارات السمة. إذا كنت تستخدم لوحة معلومات WordPress الخاصة بك ، فانتقل إلى Divi> Theme Options> قم بالتمرير لأسفل في علامة التبويب General وضع الأسطر التالية من CSS Code في مربع CSS المخصص:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

نمط الارتباط النشط # 2

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

ارتباط نشط

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

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

إخفاء صورة الشعار: تمكين
حجم النص: 24
تباعد الأحرف: 2
الخط: جراد البحر
لون النص: #FFFFFF
لون الارتباط النشط: #FFFFFF
لون الخلفية: rgba (255،255،255،0)
لون خلفية القائمة المنسدلة: rgba (255،255،255،0)

ارتباط نشط

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

كما قيل في المثال السابق ، يمكنك إضافة كود CSS إلى موقع الويب الخاص بك من خلال طرق متعددة. بالإضافة إلى إضافة الكود المخصص إلى "خيارات السمة" ، يمكنك إضافته إلى "مُخصص القوالب" أيضًا. إذا كنت تستخدم لوحة معلومات WordPress الخاصة بك ، فانتقل إلى المظهر> تخصيص> CSS إضافية وضع سطور التعليمات البرمجية التالية داخل حقل CSS المخصص:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

نمط الارتباط النشط # 3

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

ارتباط نشط

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

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

إخفاء صورة الشعار: تمكين
حجم النص: 16
تباعد الأحرف: 2
الخط: جوزفين سلاب
نمط الخط: عواصم
لون النص: #FFFFFF
لون الارتباط النشط: #FFFFFF
لون الخلفية: rgba (255،255،255،0)
لون خلفية القائمة المنسدلة: rgba (255،255،255،0)

ارتباط نشط

أضف كود CSS إلى صفحة واحدة على وجه الخصوص

خيار آخر لديك لإضافة كود CSS هو إضافته إلى صفحة واحدة على وجه الخصوص. افتح صفحتك الأولى (وبالتالي ، الصفحة التي وضعت فيها كل المحتوى) باستخدام Divi Builder وانقر على الأيقونة التالية:

ارتباط نشط

بمجرد النقر فوق الرمز ، ضع الأسطر التالية من كود CSS داخل حقل CSS المخصص:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

افكار اخيرة

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

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

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