5 lucruri interesante pe care le poți face în Divi cu Anchor Links

Linkurile ancoră pot îmbunătăți navigarea și vă pot ajuta să vă organizați conținutul, în special pe un site web cu conținut de formă lungă. Unul dintre celelalte avantaje principale ale utilizării legăturilor de ancorare, altele decât navigarea, este faptul că sunt minunate pentru SEO. Deși conceptul de utilizare a legăturilor de ancorare este foarte simplu, poate fi greu să știi de unde să începi. Este de fapt unul dintre primele lucruri la care am mers la vânătoare când am început să dezvolt site-uri web WordPress.

Acest articol vă arată 5 lucruri interesante pe care le puteți face în Divi cu linkuri de ancorare. Pentru aceste exemple, tot ce aveți nevoie este Divi și dorința de a învăța.

Să mergem!

Veți afla cum să:

1. Derulați și deschideți un comutator cu un link de ancorare în Divi
2. Creați un meniu de navigare cu o singură pagină
3. Salt la o secțiune de pagină dintr-o altă pagină
4. Utilizați navigarea Divi Dot
5. Adăugați linkuri de ancorare la titlurile dvs.

5 lucruri interesante pe care le poți face în Divi cu Anchor Links

Abonați-vă la canalul nostru Youtube

Derulați și deschideți un comutator cu un link de ancorare în Divi

Comutările sunt unul dintre acele elemente care pot îmbunătăți experiența utilizatorului. Spune-mi leneș (aș folosi cuvântul eficient), dar cu cât îmi este mai ușor să obțin informațiile mele, cu atât mai bine. Sunt un mare fan al comutării pentru anumite tipuri de conținut.

Una dintre cele mai bune utilizări pe care le-am văzut pentru comutare este pentru paginile cu întrebări frecvente. Acestea funcționează excelent pentru a dezvălui mici informații despre care utilizatorul dorește să se concentreze. Acest lucru va dura doar un minut și câteva linii de JavaScript pentru a fi finalizat. De asemenea, puteți utiliza o variantă a acestei metode pentru a deschide file sau acordeoane și, deși acest lucru poate părea dificil, nu este prea complex.

Mai întâi, creați o pagină nouă și implementați constructorul vizual. Apoi selectați opțiunea „Alegeți un aspect premade”. În fereastra pop-up Încărcare din bibliotecă, găsiți aspectul paginii Întrebări frecvente contabile tastând „faq” în bara de căutare. Apoi faceți clic pe aspect și pe previzualizarea care apare, faceți clic pe butonul Utilizați acest aspect pentru a-l implementa pe pagina dvs.

Acum sunteți gata să adăugați funcționalitatea linkului de ancorare. Pentru acest exemplu, voi folosi butonul din secțiunea de antet de sus ca legătură de ancorare, astfel încât, atunci când faceți clic, pagina să deruleze la o comutare specifică care se va deschide simultan automat.

Pentru a face acest lucru, deschideți mai întâi setările butonului și adăugați următoarea adresă URL pentru buton:

Adresă URL a butonului: # toggle3

I-am dat acestui link de ancorare ID-ul „toggle3” pentru a ne aminti că vreau să fac link la a treia comutare de pe pagină. Acest nume de id se va corela cu ID-ul CSS de comutare pe care îl vom adăuga mai târziu, astfel încât butonul să știe la ce comutare să derulați.

Apoi adăugați o clasă CSS unică la modulul buton:

Clasa CSS: open-toggle

Apoi salvați setările.

Acest nume de clasă vă ajută să vă reamintească acțiunea deschiderii comutatorului atunci când faceți clic pe buton. Vom folosi această clasă în jqeury personalizat pentru a obține funcționalitatea dorită într-un pic.

Apoi derulați pagina în jos până la rândul care conține cele două coloane ale modulelor de comutare care sunt utilizate pentru Întrebări frecvente. Deschideți setarea celui de-al treilea modul de comutare din prima coloană. Acesta este modulul la care dorim să derulăm și să îl deschidem când facem clic pe butonul (sau pe linkul de ancorare).

Sub fila Advance, adăugați următorul ID CSS:

ID CSS: comutare3

Este important ca acest lucru să se coreleze exact cu adresa URL a butonului utilizată anterior. Singurul diferit aici este că trebuie să lăsați „#” deoparte.

Ultimul pas implică adăugarea unui cod personalizat în corpul paginii noastre. Pentru aceasta, navigați la Opțiunile temei Divi și deschideți fila Integrare, apoi lipiți următoarele în secțiunea corp, așa cum se arată în GIF de mai jos.

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

Nu uitați să înfășurați codul în eticheta script corespunzătoare.

Acum puteți testa pagina dvs. pentru a vedea dacă funcționează.

Pentru a înțelege puțin despre ceea ce face acest cod. Să aruncăm o privire mai atentă. Iată din nou fragmentul:

jQuery(function ($) {
    //open toggle on button click
	$('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
	});
});

În cod, selectorul „a.open-toggle” se referă la butonul cu clasa noastră personalizată. Selectorul „# toggle3.et_pb_toggle_2 .et_pb_toggle_title” se referă la titlul comutatorului cu ID-ul „toggle3” și la clasa „et_pb_toggle_2”.

Clasa „et_pb_toggle_2” este de fapt clasa asociată cu a treia comutare. Acest lucru se datorează faptului că Divi oferă primului comutator clasa „et-pb_toggle_0”, al doilea comutator „et-pb_toggle_1” și așa mai departe.

Deci, dacă doriți să știți care este clasa pentru o anumită comutare de pe pagina dvs., puteți număra pur și simplu de la 0 începând cu prima comutare de pe pagină și puteți merge mai departe. Sau puteți oricând să inspectați codul html pentru a găsi clasa în acest fel.

Acest lucru este important de știut pentru a vă putea actualiza codul în consecință. De exemplu, dacă doream ca butonul meu să deschidă a doua comutare de pe pagină, aș înlocui „# toggle3.et_pb_toggle_2 .et_pb_toggle_title” cu „# toggle3.et_pb_toggle_1 .et_pb_toggle_title”.

Acest fragment de cod este o variantă a conceptului următor. Am încercat să-l păstrez cât mai simplu posibil.

Această tehnică interesantă ar funcționa și pentru filele și acordeonele. Trucul este să identificați clasele CSS potrivite pentru elementul sau fila acordeon, astfel încât să îl puteți utiliza în cod.

Creați un meniu de navigare cu o singură pagină

Acest tip de design de meniu este popular pentru site-urile cu o singură pagină. Poate fi util să creați legături în meniu pentru a trece de la secțiune la secțiune de pe pagina dvs. Acest lucru este util mai ales dacă creați un site cu o singură pagină sau o pagină de destinație. Puteți consulta documentația despre cum să creați site-uri web de o pagină cu Divi pentru mai multe informații despre acest proces.

Iată o prezentare rapidă despre cum să faceți acest lucru.

Acest lucru va funcționa pentru orice aspect premade, dar pentru acest exemplu, voi folosi aspectul paginii de pornire Web Freelancer. Creați o pagină nouă, implementați constructorul vizual, selectați „Alegeți aspectul premade”, apoi implementați aspectul paginii de start Freelancer pe pagina dvs.

Acum trebuie să adăugați coduri CSS la fiecare secțiune pe care doriți să o legați (sau să derulați). Găsiți secțiunea intitulată „Serviciile mele”. Deschideți setările secțiunii, faceți clic pe fila avansată și adăugați următorul ID CSS:

CSS ID: servicii

Apoi, găsiți secțiunea „lucrare prezentată” și dați secțiunii respective un ID CSS după cum urmează:

ID CSS: lucru

Și adăugați următorul ID CSS și la secțiunea „Despre noi”:

ID CSS: aproximativ

Cu aceste trei secțiuni configurate în mod corespunzător cu ID-urile lor CSS unice, putem cunoaște crearea linkurilor noastre de ancorare a meniului.

Din tabloul de bord, navigați la Aspect> Meniuri și creați un nou meniu principal . Apoi creați trei linkuri personalizate cu următoarea adresă URL și text de legătură:

Link personalizat 1
URL: #servicii
Text link: servicii

Legătură personalizată 2
URL: #work
Textul legăturii: funcționează

Link personalizat 3
URL: #despre
Text link: Despre

Nu uitați să selectați setați locația afișajului la Meniul principal. Apoi salvați meniul.

Acum, când vă vizitați pagina, o puteți încerca. Este posibil să observați că există o defilare lină. Acest lucru se datorează faptului că tema Divi adaugă automat o defilare lină - această caracteristică a fost adăugată în versiunea Divi 2.4.

Pentru mai multă inspirație în construirea site-urilor web killer one page, consultați aceste postări:

• Cum să construiți o bară laterală fixă ​​receptivă cu linkuri de ancorare
• Cum se creează secțiuni pe ecran complet cu legături de derulare de sus și de jos cu Divi
• Cum să creați legături active pe derulare pentru site-urile web Divi cu o singură pagină

Salt la o secțiune de pagină dintr-o altă pagină

Putem folosi exemplul de mai sus pentru a demonstra acest lucru. Deoarece am adăugat un ID CSS la trei secțiuni de pe pagină (servicii, serviciu, despre), nu numai că putem să accesați acea secțiune folosind linkurile noastre de ancorare a meniului, dar putem să accesați și acele secțiuni dintr-o pagină complet diferită.

Tot ce trebuie să faceți este să utilizați adresa URL a linkului de ancorare atunci când ați creat un link pe o altă pagină. Dacă doriți să puneți un link către secțiunea de servicii cu ID-ul „servicii”, ar arăta ceva de genul, www.yourdomain.com/page/#services .

Iată un exemplu de modul în care pagina se va încărca și defila la secțiunea „Serviciile mele” atunci când faceți legătura cu secțiunea respectivă dintr-o altă pagină.

Acest lucru funcționează excelent pentru multe apeluri la acțiune diferite (adică aflați mai multe, obțineți Divi, votați-mă !, etc.) la care ați putea dori să treceți de la diferite pagini ale site-ului dvs.

Utilizați navigarea Divi Dot

Din punct de vedere tehnic, acestea sunt legături de ancorare încorporate. Nu va trebui să adăugați propriile coduri de secțiune CSS. Funcția Navigare prin puncte creează automat legături de ancorare din secțiunile dvs. Pentru a activa navigarea cu puncte pentru pagina dvs., pur și simplu setați opțiunea Navigare prin puncte la „ACTIVAT” în Setările paginii Divi din partea dreaptă sus a ecranului atunci când editați pagina. După ce activați Navigarea prin puncte, Divi adaugă automat un meniu transparent pe partea laterală a paginii. Fiecare punct derulează către secțiunile din întreaga pagină atunci când faceți clic.

Pentru mai multe informații, există o postare excelentă despre cum să adăugați etichete la navigarea cu puncte.

Adăugați linkuri de ancorare la titlurile dvs.

Adăugarea de linkuri ancoră la titluri este întotdeauna o idee bună. Este o modalitate excelentă de indexare a paginilor mai lungi cu mult conținut, permițându-vă să navigați cu ușurință la fiecare titlu din aceeași pagină sau să creați linkuri către aceste titluri din alte pagini de pe site-ul dvs. web. De asemenea, ajută motoarele de căutare să acceseze cu crawlere site-ul dvs.

Pentru a adăuga un ID CSS la anteturile dvs. utilizând Divi Builder, deschideți modulul care conține textul antetului. Asigurați-vă că aveți fila text deschisă. Găsiți eticheta antet (h1, h2, h3, etc ...) și apoi introduceți un id între parantezele etichetei antet începătoare. Iată un exemplu de titlu h3 cu id-ul „webdesign”:

<h3 id="webdesign">Website Design</h3>

Acum pot conecta la acest antet de oriunde, atâta timp cât folosesc adresa URL corectă a legăturii de ancorare. Care pentru acest exemplu ar trebui să arate cam așa:

www.yourdomain.com/page/#webdesign

Acest lucru va fi util și pentru paginile sau postările care nu utilizează generatorul Divi. Pentru a adăuga linkuri de ancorare la titlurile dvs. pentru aceste pagini sau postări, deschideți fila Text din editorul de text WordPress. Pur și simplu localizați antetul la alegere și adăugați id-ul în eticheta antet, așa cum se arată mai jos.

Exact asta am făcut pentru această postare. Legăturile de secțiune din partea de sus a acestui post servesc ca un cuprins frumos care leagă diferitele titluri ale postării.

Lucruri destul de mișto.

Încheierea

Link-urile de ancorare au câteva utilizări practice excelente, dar nu înnebuni prea mult cu ele, pentru că trebuie întotdeauna să-ți iei în considerare publicul și obiectivele. Amintiți-vă, un design bun se referă la funcționalitate și funcționalitate, astfel încât, în unele cazuri, legăturile de ancorare pot fi foarte utile. Dar în altele, înseamnă doar că utilizatorii fac un pas înainte și înapoi peste secțiunile de paralaxă și se termină pierdându-se. Sperăm că ați putut obține câteva sfaturi utile din această postare.

Aveți sfaturi sau întrebări despre legăturile de ancorare? Spuneți-ne despre experiențele dvs. în secțiunea de comentarii de mai jos.