3 moduri creative de a crea un link activ al navigării verticale Divi

În acest tutorial Divi, vă vom arăta câteva moduri interesante de a stiliza linkul activ în navigarea dvs. verticală. Acest tutorial urmărește un tutorial anterior în care v-am arătat cum să creați linkuri active pe scroll pentru site-urile web Divi de o pagină. Așadar, înainte de a încerca diferitele moduri de stilare, ar trebui să configurați mai întâi linkurile active pentru a derula articolul anterior, deoarece codul pe care îl vom folosi se va baza mai departe pe acest lucru.

Ceva pe care ar trebui să-l rețineți în timpul acestui tutorial este faptul că puteți vedea rezultatele numai după ce ați salvat pagina. Previzualizând pagina, modificările nu vor apărea.

3 moduri creative de a crea un link activ al navigării verticale Divi

Abonați-vă la canalul nostru Youtube

Cum functioneaza

Pentru a crea o navigare care ajustează automat linkul activ în timp ce derulați pagina, am folosit pluginul Defilare pagină până la ID care vă ajută cu ușurință să obțineți rezultatele dorite. În plus, pluginul vă oferă, de asemenea, diferite opțiuni pe care le puteți alege manual din setări.

Pluginul vă ajută să identificați poziția pe care un vizitator îl are pe site-ul dvs. și va modifica elementul de meniu în funcție de secțiunea de pe site-ul dvs. web la care se uită în prezent. Aceasta este o interacțiune mică, care vă va ajuta cu siguranță vizitatorii să navigheze pe un singur pager. Ei vor ști automat ce parte a paginii dvs. explorează și cât de departe sunt de alte secțiuni de care ar putea fi interesați.

Notă: să știți că această metodă se aplică numai site-urilor web realizate dintr-o singură pagină.

Activați navigarea verticală

Exemplele pe care vi le vom arăta cum să faceți vor fi valoroase mai ales dacă utilizați navigarea verticală. Deci, mergeți mai departe și activați navigarea verticală în Customizerul tematic (dacă nu ați făcut-o deja în postarea anterioară).

Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Format antet> Activați navigarea verticală.

Stilul de legătură activ # 1

Primul exemplu pe care am dori să-l arătăm este unul strălucitor. De fiecare dată când un vizitator trece pe lângă una dintre secțiuni, un alt element de meniu va începe să strălucească. Este un mod subtil, dar frumos și elegant, de a-ți ajuta vizitatorii să navigheze printr-un singur pager.

Setări principale ale barei de meniu

Începeți prin a face câteva modificări la bara de meniu principală. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Bara de meniu principală și efectuați următoarele modificări:

• Ascundeți imaginea logo-ului: activați
• Dimensiune text: 24
• Spațierea literelor: -1
• Font: Happy Monkey
• Culoarea textului: #FFFFFF
• Culoare link activ: #FFFFFF
• Culoare fundal: rgba (255,255,255,0)
• Culoare de fundal drop-down: rgba (255,255,255,0)

Adăugați cod CSS la Opțiunile temei

Următorul lucru pe care va trebui să-l faceți este să adăugați un cod CSS. Există câteva moduri în care puteți adăuga cod CSS pe site-ul dvs. web. Vom gestiona trei metode în aceste exemple, începând cu Opțiunile temei. Dacă vă aflați în tabloul de bord WordPress, accesați Divi> Opțiuni temă> Derulați în jos fila General și plasați următoarele linii de cod CSS în caseta CSS personalizată:

@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%;
}}

Stilul de legătură activ # 2

Al doilea stil de link activ este unul care are un aspect foarte curat și elegant. Ca de obicei, linkurile active se vor schimba în funcție de modul în care derulați site-ul web de o singură pagină. Când faceți clic pe unul dintre elementele de meniu, se va aplica același stil.

Setări principale ale barei de meniu

Vom începe prin a face la fel ca în primul exemplu al acestui post; făcând modificări la bara de meniu principală. Pentru a face acest lucru, accesați Aspect în tabloul de bord WordPress> Personalizați> Antet și navigare> Bara de meniu principală și asigurați-vă că aveți următoarele setări:

• Ascundeți imaginea logo-ului: activați
• Dimensiune text: 24
• Spațierea literelor: 2
• Font: homar
• Culoarea textului: #FFFFFF
• Culoare link activ: #FFFFFF
• Culoare fundal: rgba (255,255,255,0)
• Culoarea fundalului meniului drop-down: rgba (255,255,255,0)

Adăugați cod CSS la Customizerul temei

După cum am spus în exemplul anterior, puteți adăuga codul CSS pe site-ul dvs. web prin mai multe moduri. Pe lângă adăugarea codului personalizat la Opțiunile temei, îl puteți adăuga și la Personalizatorul temei. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> CSS suplimentar și plasați următoarele linii de cod în câmpul CSS personalizat:

@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;
}}

Stilul de link activ # 3

Al treilea stil de link activ pe care am ales să îl partajăm cu dvs. este unul care se concentrează în principal pe cuvântul cheie care este utilizat ca element de meniu. Utilizând setările corecte pentru umbra textului, același text va înconjura elementul de meniu, care subliniază poziția pe care o are vizitatorul pe site-ul dvs. web.

Setări principale ale barei de meniu

Pentru acest ultim exemplu, începeți prin a face câteva modificări la bara de meniu principală. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Bara principală de meniu și efectuați următoarele modificări pentru navigarea verticală:

• Ascundeți imaginea logo-ului: activați
• Dimensiune text: 16
• Spațierea literelor: 2
• Font: Josefin Slab
• Stilul fontului: majuscule
• Culoarea textului: #FFFFFF
• Culoare link activ: #FFFFFF
• Culoare fundal: rgba (255,255,255,0)
• Culoarea fundalului meniului drop-down: rgba (255,255,255,0)

Adăugați cod CSS la o pagină în special

O altă opțiune pe care trebuie să o adăugați cod CSS este adăugarea acestuia la o pagină în special. Deschideți prima pagină (și astfel, pagina în care ați plasat tot conținutul) cu Divi Builder și faceți clic pe următoarea pictogramă:

După ce ați făcut clic pe pictogramă, plasați următoarele linii de cod CSS în câmpul CSS personalizat:

@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;
}}

Gânduri finale

În această postare, v-am arătat câteva modalități frumoase și ușoare de a stiliza linkul activ din meniul dvs. Această postare a urmărit o postare anterioară în care v-am arătat cum să creați linkuri active pe scroll pentru site-urile web Divi de o pagină. Amintiți-vă că va trebui să salvați mai întâi modificările înainte de a putea vedea rezultatele, doar previzualizarea paginii dvs. nu va face treaba. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Botond1977 / shutterstock.com