Cum să adăugați link-uri de navigare a paginii lipicioase (Următorul, Anterior, Primul, Ultimul) la secțiunile Divi

Uneori este mai convenabil să navigați în conținutul paginii făcând clic pe butoane, mai degrabă decât derulând. Acest lucru este valabil mai ales pentru one-pagers sau dacă aveți anumite secțiuni secvențiale pe o pagină care garantează accesibilitate optimă pentru utilizatori. Adăugarea de link-uri de navigare a paginilor lipicioase în partea de jos a secțiunilor poate fi o alternativă unică pentru ca utilizatorii să deruleze constant sau pentru a include linkuri de ancorare în meniul principal al antetului.

În acest tutorial, vă vom arăta cum să adăugați linkuri lipsite de navigare a paginii (următorul, anterior, primul, ultimul) la o pagină din Divi. Acest lucru vă va permite să navigați cu ușurință la secțiuni specifice de-a lungul unei pagini.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Observați cum se schimbă legăturile de navigare lipicioase atunci când derulați pagina în jos.

Observați cât de ușor este să navigați la fiecare secțiune făcând clic pe linkurile de navigare.

Iată cum arată designul pe mobil.

Iată un codepen care demonstrează funcționalitatea de bază.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Adăugarea de link-uri de navigare a paginilor lipsite de secțiuni Divi

Crearea secțiunii de sus

În mod implicit, va exista o secțiune obișnuită gata de utilizare în Divi Builder. Folosind secțiunea obișnuită implicită, deschideți setările secțiunii și scoateți umplutura inferioară după cum urmează:

• Căptușeală: 0px jos

Setări rând

Adăugați un rând cu o coloană la secțiune.

Apoi actualizați setările de proiectare pentru rând după cum urmează:

• Lățime: 100%
• Lățime maximă: 80vw (desktop, tabletă), 95vw (telefon)

Titlul secțiunii

Pentru a crea titlul secțiunii, mai întâi, adăugați un nou modul de text la rând / coloană.

Apoi actualizați textul corpului cu următorul titlu H2:

<h2>Top</h2>

Sub fila Proiectare, actualizați setările de text pentru titlul H2 după cum urmează:

• Selectați fila H2
• Rubrica 2 Font: Montserrat
• Rubrica 2 Greutate font: Greu
• Rubrica 2 Stil font: TT
• Titlul 2 Aliniere text: centru
• Rubrica 2 Dimensiune text: 8vw (desktop, tabletă), 61,36 px (telefon)

Crearea secțiunii 1

Apoi, vom crea prima noastră secțiune care va conține legături lipsite de navigare. Pentru a crea secțiunea 1, copiați secțiunea superioară și etichetați secțiunea duplicată în mod corespunzător în vizualizarea straturilor.

Secțiunea 1 Culoare de fundal

Deschideți setările pentru Secțiunea 1 și actualizați culoarea de fundal:

• Culoare fundal: # fec0f4

Secțiunea 1 ID CSS pentru navigația prin legătură de ancorare

Pentru a ne conecta la această secțiune folosind linkurile noastre de ancorare, trebuie să adăugăm un ID CSS. Sub fila avansată, adăugați următorul ID CSS:

• ID CSS: unul

Actualizați textul titlului

Apoi actualizați textul titlului în modulul text pentru a citi „Secțiunea 1”.

Crearea rândului lipicios pentru secțiunea 1

Odată ce secțiunea și titlul sunt actualizate, vom crea un rând lipicios care va ține în cele din urmă legăturile noastre de navigare. Pentru a face acest lucru, adăugați un nou rând cu o coloană sub rândul existent în secțiunea 1.

Deoarece secțiunea noastră nu are umplutură de jos, rândul ar trebui să stea frumos chiar în partea de jos a secțiunii.

Setări de rânduri lipicioase

Pentru a face rândul lipicios, trebuie să actualizăm setările rândului.

Opțiuni lipicioase

Sub fila avansată, actualizați opțiunile de poziție lipicioasă după cum urmează:

• Poziție lipicioasă: lipiți-vă de partea de jos
• Limită superioară lipicioasă: secțiune
• Compensare față de elementele lipicioase înconjurătoare: NU

Acest lucru vă va asigura că rândul lipicios va fi cuprins în secțiune.

Setări de proiectare

Sub fila Proiectare, actualizați următoarele:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 25vw (desktop, tabletă), 50% telefon
• Alinierea rândurilor: dreapta (desktop, tabletă), stânga (telefon)
• Căptușeală: 0 px sus, 0 px jos

Pentru a ascunde rândul (împreună cu butoanele pe care le va conține), vom muta rândul în spatele secțiunii de sub acesta folosind setările de traducere a transformării. Apoi, vom deplasa rândul în sus în vizualizare atunci când se află în starea lipicioasă. Acest lucru vă va asigura că butoanele sunt vizibile numai atunci când sunt în stare lipicioasă.

Pentru a face acest lucru, faceți clic pe pictograma lipicioasă (miniatură) când treceți cu mouse-ul peste titlul opțiunii de transformare pentru a activa fila lipicioasă. Apoi actualizați opțiunile de transformare după cum urmează:

• Transformați axa Y (desktop): 100%
• Transformați axa Y (lipicioasă): 0%

Offset poziție

În cele din urmă, vom avea un alt rând de stick pentru primul și ultimul buton care se vor lipi în partea dreaptă jos a ferestrei. Deci, trebuie să mutăm acest rând de stânga spre stânga.

Pentru a muta rândul lipicios, accesați fila avansată și actualizați opțiunile de compensare a poziției după cum urmează:

• Originea offsetului: dreapta sus
• Offset orizontal: 25vw (desktop, tabletă), 0 px (telefon)

Notă: Decalajul telefonului este setat la 0 px, deoarece alinierea rândurilor va fi setată la stânga, iar lățimea va fi de 50%.

Coloană CSS Sticky Row

Pentru a ne asigura că butoanele noastre stau perfect adiacente una cu cealaltă și aliniate vertical, vom adăuga un mic fragment de CSS personalizat pentru a pune butoanele într-un aspect al grilei CSS.

Sub fila avansată, adăugați următorul CSS la elementul principal:

display:grid;
grid-template-columns:50% 50%;

Adăugarea divizorului și a butonului următor la rândul lipicios (secțiunea 1)

Acum este timpul să începem să adăugăm butoanele noastre la coloană. Pentru această primă secțiune, avem nevoie doar de un buton Următor. Deci, avem nevoie de un divizor care să servească drept substituent pentru butonul din stânga.

Împărțitor

Adăugați un nou separator în coloană.

Apoi setați opțiunea Show Divider la „NO”.

Butonul Următor

Sub modulul divizor, adăugați un modul buton.

Apoi actualizați setările pentru conținutul butonului:

• Text buton: Următorul
• Adresa URL a butonului: #two

Adresa URL „#two” va trece la următoarea secțiune pe care o vom crea cu ID-ul CSS „two”.

Sub fila Proiectare, actualizați următoarele:

• Aliniere buton: centru
• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 2.1vw (desktop, tabletă), 16.1px (telefon)
• Culoarea textului butonului: # 000000
• Fundalul butonului: #eeeeee
• Lățimea chenarului butonului: 0 px
• Pictogramă buton: săgeată în jos (vezi captura de ecran)
• Afișați pictograma doar pe Hover pentru buton: NU

• Marja: 2% corect

Pentru a vă asigura că butonul se întinde pe toată lățimea coloanei grilei CSS, adăugați următorul CSS personalizat la Elementul principal:

display:block !important; width: 100%;

Crearea secțiunii 2

Acum că am terminat secțiunea 1, copiați secțiunea 1 pentru a crea secțiunea 2 și actualizați eticheta în vizualizarea straturilor în consecință.

Actualizați secțiunea 2 Culoarea fundalului și textul titlului

Apoi, actualizați culoarea de fundal a secțiunii:

• Culoare fundal: # 8dc6c1

Apoi actualizați textul titlului pentru a citi „Secțiunea 2” în modulul text al rândului de sus.

Actualizați secțiunea 2 ID CSS

Sub fila avansată, actualizați secțiunea cu un nou CSS ID:

• ID CSS: două

Adăugați butoanele următoare și anterioare la rândul lipicios (secțiunea 2)

În interiorul rândului lipicios al Secțiunii 2, ștergeți modulul divizor și copiați butonul Următor, astfel încât să aveți două butoane.

Actualizați adresa URL a butonului următor

Deschideți setările pentru primul buton / stânga Următorul și actualizați linkul butonului după cum urmează:

• Adresa URL a butonului: #three

Adresa URL „#three” va trece la următoarea secțiune pe care o vom crea cu ID-ul CSS „three”.

Adăugați textul butonului anterior și adresa URL a linkului

Pentru a face butonul Anterior, deschideți setările pentru al doilea buton / dreapta și actualizați următoarele:

• Textul butonului: Anterior
• Adresa URL a butonului: #one

Adresa URL „#one” va reveni la secțiunea cu ID-ul CSS „one”.

Adăugați pictograma butonului anterior

Apoi actualizați pictograma:

• Pictogramă buton: săgeată sus (vezi captura de ecran)

Crearea secțiunii 3

Acum că am terminat secțiunea 2, copiați secțiunea 2 pentru a crea secțiunea 3 și actualizați eticheta în vizualizarea straturilor în consecință.

Actualizați secțiunea 3 Culoarea fundalului și textul titlului

Adăugați o nouă culoare de fundal la secțiune:

• Culoare fundal: # 9fa5f4

Apoi actualizați textul titlului pentru a citi „Secțiunea 3” în modulul text al rândului de sus.

Actualizați secțiunea 3 ID CSS

Sub fila avansată, actualizați secțiunea cu un nou CSS ID:

• ID CSS: trei

Adăugați divizor și butonul anterior la rândul lipicios (secțiunea 3)

Adăugați divizor și ștergeți butonul Următor

Am putea continua și a crea câte secțiuni este nevoie pentru a include butoanele Următor și Anterior. Dar pentru acest exemplu, vom face din secțiunea 3 ultima secțiune cu legături de navigare.

Deci, deoarece nu vom avea nevoie de un buton următor, ștergeți butonul următor și înlocuiți-l cu un divizor, așa cum am făcut în secțiunea 1.

Actualizați adresa URL a butonului anterior

Apoi, deschideți setările pentru butonul Anterior și actualizați adresa URL a linkului:

• Adresa URL a butonului: #two

Adresa URL „#two” va reveni la secțiunea cu ID-ul CSS „two”.

Crearea secțiunii de jos

Acum, că sunt 3 secțiuni completate cu funcționalitatea lor de navigare pe rânduri și funcții de legare ancoră, vom crea o secțiune de jos care va servi ca o secțiune a paginii care nu include navigarea lipicioasă Next / Prev. Aceasta este pentru a demonstra dacă există secțiuni suplimentare pe pagină care ar putea să nu necesite o navigare lipicioasă.

Pentru a crea secțiunea de jos, pur și simplu copiați secțiunea de sus și trageți-o sub secțiunea 3.

Apoi actualizați textul titlului pentru a citi „Partea de jos”.

Crearea secțiunii Sticky Bottom

Pentru ultimul nostru pas, trebuie să creăm o secțiune lipicioasă care să se lipească în partea de jos a paginii și să conțină prima și ultima noastră legătură de navigare (ancoră). Această secțiune trebuie să se afle în partea de jos a paginii, dacă doriți ca linkurile de navigare să apară pe toate secțiunile paginii atunci când derulați.

Sub Secțiunea de jos, creați o nouă secțiune obișnuită.

Apoi actualizați secțiunea disponibilă în vizualizarea straturilor în mod corespunzător (adică „Secțiunea inferioară lipicioasă”).

Crearea rândului pentru prima și ultima legătură de navigare

Pentru a adăuga mai multe funcții de navigare la pagina noastră de secțiuni, vom crea două butoane suplimentare (sau linkuri de ancorare) care vor trece la prima (secțiunea 1) și ultima (secțiunea 3) secțiuni de pe pagină.

Duplicați Sticky Row în secțiunea 2 și trageți-l în secțiunea Sticky Bottom

Pentru a crea rândul pentru primul și ultimul link de navigare, putem duplica rândul lipicios (rândul 2) din secțiunea 2 și trageți-l în noua secțiune Sticky Bottom.

Actualizați setările rândului

Pentru această ultimă secțiune, vom face ca întreaga secțiune să fie lipicioasă, astfel încât să putem elimina setările lipicioase moștenite din setările noastre de rând duplicat și să îi oferim o poziție absolută.

Deschideți setările rândului și executați următoarele:

Apoi, actualizați opțiunile de poziție după cum urmează:

• Poziție: Absolută
• Locație: dreapta jos
• Decalaj orizontal: 0 px
• Poziție lipicioasă: Nu lipiți

Sub fila Proiectare, resetați opțiunile de transformare pentru rând.

Adăugați primul și ultimul buton pentru secțiunea inferioară lipicioasă

Pentru a crea primul buton, deschideți setările pentru butonul din stânga și actualizați următoarele:

• Text buton: Mai întâi
• Adresa URL a butonului: #one

Apoi actualizați pictograma Buton la o altă săgeată sus.

Pentru a crea ultimul buton, deschideți setările pentru butonul din dreapta și actualizați următoarele:

• Text buton: Ultima
• Adresa URL a butonului: #three

Apoi actualizați pictograma Buton la o altă săgeată în jos.

Actualizați setările secțiunii pentru secțiunea Sticky Bottom

Apoi, deschideți setarea secțiunii și actualizați următoarele:

• Lățime: 100%;
• Înălțime: 0px;
• Căptușeală: 0 px sus, 0 px dreapta

Acest lucru asigură practic că secțiunea nu ocupă spațiu real pe pagină. Dar, deoarece rândul are o poziție absolută, acesta va fi afișat în continuare deasupra secțiunii.

În cele din urmă, sub fila avansată, actualizați următoarele:

• Vertical Overflow: vizibil
• Overflow orizontal: vizibil
• Poziție lipicioasă: lipiți-vă de partea de jos
• Limita superioară lipicioasă: zona corpului
• Offset de elemente lipicioase înconjurătoare: NU

Rezultat final

Observați cum se schimbă legăturile de navigare lipicioase atunci când derulați pagina în jos.

Observați cât de ușor este să navigați la fiecare secțiune făcând clic pe linkurile de navigare.

Iată cum arată designul pe mobil.

Gânduri finale

Link-urile de navigare lipicioase pe care le-am construit în acest tutorial ar trebui să fie utile pentru cei care caută o alternativă eficientă la defilarea tradițională sau includ linkuri de ancorare în antetul dvs. global. Și, puteți duplica cu ușurință secțiunile și puteți actualiza linkurile de ancorare (și ID-urile CSS corespunzătoare pentru fiecare secțiune) pentru a crea mai mult conținut.

Pentru cele mai bune rezultate, fiecare secțiune ar trebui să aibă conținut suficient pentru a se extinde dincolo de înălțimea browserului. Dacă nu, acele legături de ancorare nu pot deveni lipicioase (sau vizibile). O modalitate ușoară de a vă asigura că acest lucru se întâmplă este de a oferi fiecărei secțiuni o înălțime minimă de 100vh. Dacă nu-ți place asta, poți alege oricând să scapi de opțiunea de transformare a lipitului pentru fiecare dintre rândurile lipicioase, astfel încât butoanele să rămână vizibile.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!