Cum să creați legături active pe derulare pentru site-urile web Divi cu o singură pagină

Publicat: 2017-08-30

În tutorialul de astăzi vă vom arăta cum să vă stilizați legăturile de navigare verticale, astfel încât pe măsură ce un vizitator parcurge pagina, linkul de meniu corespunzător secțiunii în care se află va fi evidențiat. Este un mic efect plăcut care adaugă un pic de interactivitate între designul dvs. web și comportamentul utilizatorului. Această metodă funcționează deosebit de bine dacă creați un site web cu o singură pagină.

Pentru cei cărora le este greu să-și imagineze acest efect în minte, am oferit o previzualizare mai jos.

Rezultat

Să aruncăm o privire asupra rezultatului final pe care îl veți putea obține după ce urmați această postare:

linkuri active

După cum puteți vedea, linkul activ evidențiat se modifică automat pe măsură ce utilizatorul parcurge secțiunile paginii (precum și pe clic).

Inspirație

Ne-am găsit inspirația pentru această postare pe site-ul Filmschool Berlin pe care l-am menționat ca exemplu în postarea noastră de navigare verticală. Un cititor din comentariile acelei postări a cerut să le arătăm cum să creeze efectul de legătură activă de defilare și iată-ne aici!

linkuri active

Cum să creați legături active pe derulare pentru site-urile web Divi cu o singură pagină

Abonați-vă la canalul nostru Youtube

Noțiuni introductive: Descărcați pagina Defilați la ID Plugin

Pentru a elimina acest design, vom începe prin a folosi pluginul gratuit și bine evaluat pentru derularea paginii la ID-ul pe care îl puteți găsi aici. Faceți clic pe butonul „Descărcați” și salvați fișierul ZIP pentru plugin undeva unde îl puteți găsi imediat.

linkuri active

Încărcați și activați pagina Defilați la ID Plugin

Următorul lucru pe care trebuie să-l faceți este să accesați tabloul de bord WordPress> Plug-uri> Adăugați nou> Selectați fișierul ZIP pe care tocmai l-ați descărcat și încărcați-l.

linkuri active

După aceea, nu uitați să activați și pluginul.

Activați navigarea verticală

Înainte de a intra în setările pluginului Defilare pagină până la ID, vom activa mai întâi navigarea verticală (și navigarea fixă ​​la pasul următor). Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> Antet și navigare> Format antet> Și activați navigarea verticală.

linkuri active

Activați navigarea fixă

Mai departe, să activăm navigarea fixă ​​a site-ului dvs. web. Acest lucru este necesar, deoarece întregul punct al utilizării linkurilor active pe scroll este ca vizitatorii să vadă în ce secțiune se află, când se află în ea. Dacă vă aflați în tabloul de bord WordPress, accesați Divi> Opțiuni temă> Și activați bara de navigare fixă ​​din fila General.

linkuri active

Derulați pagina la Setări plugin ID

Pentru această parte, ne vom întoarce la pluginul care a fost încărcat recent. După ce ați activat pluginul, va trebui să utilizați setările corecte. Pentru a accesa setările, faceți clic pe „setări” chiar sub numele pluginului.

linkuri active

După ce ați făcut acest lucru, veți observa diferitele opțiuni care vă ajută să determinați cum se vor comporta linkurile active pe site-ul dvs. web. Pentru exemplul pe care l-am făcut, folosim următoarele setări:

  • Activați pe meniul WordPress Link-uri: Da
  • Durata derulării: 200 de milisecunde
  • Reglați automat durata defilării: Da
  • Derularea animației de derulare: liniară
  • Derulați întotdeauna ușor când ajungeți la sfârșitul paginii / documentului: Da
  • Opriți derularea paginii pe rotița mouse-ului sau prin atingere: Da
  • Aspectul paginii: automat
  • Permiteți un singur element evidențiat la un moment dat: Da
  • Păstrați elementul curent evidențiat până când urmează să apară următorul element: Da
  • Evidențiați după următoarea țintă: Da
  • Adăugați valoarea hash a linkului dat clic pe bara URL / adresă a browserului: Da
  • Derulați de la / la diferite pagini: Da
  • 0 milisecunde întârziere pentru derulare către țintă la încărcarea paginii
  • Împiedicați alte scripturi să gestioneze linkurile pluginului (dacă este posibil): Da
  • Normalizați țintele punctului de ancorare: Da

linkuri active

linkuri active

linkuri active

Adăugați ID și clasă CSS la secțiuni

Următorul lucru pe care trebuie să-l faceți este să atribuiți diferitele ID-uri CSS și Derularea paginii pe ID CSS Class diferitelor secțiuni de pe un singur pager. Pentru aceasta, deschideți setările fiecărei secțiuni și accesați fila Advanced. În fila Advanced, alegeți diferitele ID-uri CSS pe care doriți să le utilizați pentru secțiunile dvs. Știți că, pentru ca acesta să funcționeze, va trebui să atribuiți un ID CSS diferit fiecăreia dintre secțiunile de pe un singur pager.

activelinks

În acest exemplu, folosim „acasă” ca primul nostru ID CSS. Clasa CSS, totuși, este aceeași pentru fiecare dintre secțiuni și vă ajută să legați secțiunea de pagina Derulare la plugin ID. Numele clasei CSS este „ps2id”.

Adăugați un ID la elementele de meniu

În continuare, este timpul să creați elementele de meniu și să vă asigurați că sunt în conformitate cu secțiunile și cu pluginul Defilare pagină până la ID. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Meniuri . Dacă aveți deja un meniu principal, puteți lucra la acesta. Dacă nu, puteți tasta titlul și puteți crea un nou meniu. Nu uitați să faceți din acesta un meniu principal.

Utilizați linkuri personalizate

Apoi, veți avea nevoie de linkuri personalizate pentru a obține rezultatele dorite. Începeți prin adăugarea unui prim link personalizat. Adăugați site-ul dvs. web urmat de ID-ul primei secțiuni în câmpul link-ului, așa cum se arată în captura de ecran de mai jos.

Activați clasele CSS

Următorul lucru pe care va trebui să-l faceți, dacă nu ați făcut-o în trecut, este să activați clasele CSS pentru elementele din meniu. Pentru aceasta, faceți clic pe opțiunea „Opțiuni ecran” din colțul din dreapta. Odată ce posibilitățile apar, activați clasele CSS.

linkuri active

Utilizați Derularea paginii până la ID CSS Class

După ce ați activat clasele CSS pentru elementele de meniu, puteți continua și lega manual Derularea paginii la clasa ID la fiecare dintre elementele de meniu. Clasa CSS este aceeași cu care am folosit pentru a atribui ID-uri secțiunilor noastre, și anume „ps2id”.

linkuri active

Efectuați modificări ale aspectului

Puteți face tot felul de modificări la meniul principal, chiar și atunci când utilizați această metodă. Pentru a vă arăta cum puteți face modificările, vom recrea exemplul nostru de navigare verticală.

Notă: După cum sa menționat în introducerea acestui post, nu veți putea vedea modificările pe care le-ați făcut în timp ce previzualizați pagina. Mai întâi trebuie să publicați pagina și să o vizualizați în modul său live pentru a observa rezultatele.

Personalizator tematic

Începeți accesând Theme Customizer> Header & Navigation> Main Menu și efectuați următoarele modificări pentru a arăta meniul principal:

  • Ascundeți imaginea logo-ului: Da
  • Logo Înălțime maximă: 83
  • Marja superioară a meniului: 0
  • Dimensiune text: 14
  • Spațierea literelor: -1
  • Font: Lato Light
  • 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)

linkuri active

linkuri active

Opțiuni tematice CSS personalizate

Pentru a schimba stilul de link activ, va trebui să adăugăm un cod CSS personalizat. Dacă vă aflați în tabloul de bord WordPress, accesați Divi> Opțiuni temă> Derulați în jos fila General și lipiți următoarele linii de cod CSS în caseta CSS personalizată: 

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

În plus, am folosit și un meniu transparent care se suprapune, pe care l-am tratat mai detaliat în această postare. Pentru a aplica aceste modificări CSS și site-ului dvs., copiați și inserați următoarele linii de cod CSS și î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;
}
}

linkuri active

Rezultate

După ce ați urmat toți pașii din această postare, ar trebui să puteți obține acest rezultat final:

linkuri active

Puteți, desigur, modifica stilul după propriile preferințe (sau îl puteți utiliza și pentru navigare de sus).

Gânduri finale

În acest tutorial, v-am arătat cum să creați un meniu de navigare vertical interactiv pentru one-pagers. V-am arătat cum puteți utiliza pluginul Derulare pagină până la ID în combinație cu tema Divi pentru a obține cu ușurință rezultatul pe care doriți să îl obțineți. Într-o postare viitoare, vom reveni la aceasta și vă vom arăta cum să creați stilul creativ al linkurilor active pe care le utilizați prin această metodă. 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 Yurlick / shutterstock.com