Cum să stivați titluri lipicioase pe derulare pentru navigarea unică a legăturilor de ancorare în Divi

Opțiunile lipicioase ale lui Divi continuă să deschidă ușile pentru un nou design și funcționalitate. În acest tutorial, vom proiecta un mod creativ de a conduce utilizatorii prin conținutul unei pagini web folosind titluri lipicioase ca linkuri de ancorare. Titlurile lipicioase se lipesc de partea de sus și de jos a ferestrei browserului ca un identificator util al conținutului vizualizat, precum și al conținutului care se află deasupra sau dedesubt. Adăugând legături de ancorare la aceste anteturi lipicioase, putem permite utilizatorilor să facă clic pe aceste anteturi lipicioase pentru a trece la secțiunea corespunzătoare. Aceasta este o modalitate excelentă de a spori experiența utilizatorului pe paginile care afișează un proces (cum ar fi pașii pentru o rețetă).

Pentru a construi navigarea lipitoare a legăturii de ancorare a antetului, vom folosi doar opțiunile încorporate ale Divi. Funcționalitățile de pe desktop și mobile sunt ambele unice. Iar rezultatele te pot surprinde!

Să începem!

Trage cu ochiul

Iată o privire asupra titlurilor lipicioase cu navigarea pe linkul de ancoră pe care o vom construi în acest tutorial.

Descărcați GRATUIT aspectul de navigare a legăturilor ancore Sticky Headings

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:

• Dacă nu ați făcut-o încă, instalați și activați tema Divi.
• Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
• Selectați opțiunea „Alegeți un aspect premade”.

• Din fereastra pop-up Încărcare din bibliotecă, găsiți și încărcați aspectul paginii de rețete a setului de mese din pachetul de aspect al setului de mese.

Partea 2: Modificarea aspectului

Ștergerea rândurilor

Odată ce aspectul a fost încărcat, ștergeți cele două rânduri din partea de jos a celei de-a doua secțiuni denumită Instrucțiuni.

Acum ar trebui să aveți un rând cu conținutul pentru „pasul 01” al rețetei.

Crearea unui rând nou și completarea acestuia cu conținut

Titlurile lipicioase vor locui în coloana din stânga a unui rând cu două coloane. Pentru a crea această configurare, adăugați un nou rând de coloane 0ne-sferturi trei sferturi sub rândul curent.

Folosind mulitselect (țineți apăsat cmd / ctrl și faceți clic), selectați cele trei module care conțin conținutul pentru primul pas al rețetei din rândul de aspect premodat de mai sus.

Apoi trageți aceste module în coloana din dreapta a noului rând pe care tocmai l-ați creat.

Ștergeți rândul gol de mai sus când ați terminat.

Partea 3: Crearea de titluri lipicioase pentru fiecare rând

Acest aspect va include patru rânduri, fiecare conținând un antet lipicios în coloana din stânga. După crearea primului titlu lipicios pentru primul rând, vom dubla rândurile pentru a crea fiecare rând suplimentar de conținut.

Crearea titlului lipicios pentru primul rând (primul pas)

Pentru a crea primul titlu lipicios pentru primul pas, adăugați un nou modul de text în coloana din stânga a rândului.

Apoi actualizați setările de proiectare pentru textul titlului H4 după cum urmează:

• Titlul 4 Greutate font: îndrăzneț
• Titlul 4 Stil font: TT
• Titlul 4 Aliniere text: centru
• Titlul 4 Dimensiune text: 15 px
• Rubrica 4 Spațierea literelor: 3 px
• Titlul 4 Înălțimea liniei: 2em

Apoi actualizați spațiul și colțurile rotunjite după cum urmează:

• Marja: 0 px
• Căptușeală: 10 px
• Colțuri rotunjite: 3 px

NOTĂ: Datorită dimensiunii textului (15 px), înălțimii liniei (2em care este egală cu 30 px), umpluturii (10 px) și marginii inferioare H4 implicite (10 px), înălțimea rezultată a modulului de text este de 50 px (30 px + 10 px + 10px). Acest lucru este important de reținut, astfel încât să știm cât de mult trebuie să compensăm fiecare poziție superioară și inferioară a stickului înainte.

Sub fila avansată, actualizați următoarele opțiuni lipicioase:

• Decalaj inferior lipicios: 150 px (desktop), 0 px (tabletă)
• Limită superioară lipicioasă: secțiune (desktop), niciuna (tabletă)
• Limita lipicioasă inferioară: secțiune (desktop), rând (tabletă)
• Offset de elemente lipicioase înconjurătoare: NU

Această tehnică se va asigura că legăturile noastre de ancorare trage rândul în partea de sus a ferestrei browserului atunci când faceți clic pe antetul lipicios.

Apoi, actualizați culoarea de fundal în starea lipicioasă:

• Culoare de fundal lipicioasă: # febd2d

Apoi actualizați indexul Z în starea lipicioasă:

• Indicele Z (lipicios): 10003

Acest lucru vă va asigura că titlul va rămâne deasupra altor titluri lipicioase ori de câte ori se stivuiesc pe mobil.

Actualizați conținutul fals

Înainte de a duplica rândul nostru pentru mai mulți pași, scoateți titlul H4 din modulul de text de sus din coloana 2. Apoi copiați al doilea modul de text (cu textul de paragraf) în coloana 2 și lipiți-l de trei ori sub modulul de imagine. Acest lucru ne va oferi mai mult conținut pentru a parcurge.

Duplicați rândul 1

Pentru a crea al doilea rând pentru pasul doi, duplicați rândul 1.

Creați titlu lipicios pentru al doilea rând (pasul doi)

Deschideți setările de text pentru titlul din coloana 1 a rândului duplicat (al doilea) și schimbați textul H4 la „Pasul 02”.

Apoi actualizați opțiunile lipicioase pentru text după cum urmează:

• Offset Top Sticky: 50 px (desktop), 0 px (tabletă)
• Decalaj inferior lipicios: 100 px (desktop)
• Limita superioară lipicioasă: secțiune (tabletă)

Apoi actualizați indexul Z pentru starea lipicioasă:

• Indicele Z (lipicios): 10002

Duplicați rândul 2

Pentru a crea al treilea rând pentru pasul trei, duplicați rândul 2.

Creați titlu lipicios pentru al treilea rând (pasul trei)

Deschideți setările de text pentru titlul din coloana 1 a rândului duplicat (al treilea) și schimbați textul H4 la „Pasul 03”.

Apoi actualizați opțiunile lipicioase pentru text după cum urmează:

• Decalaj superior lipicios: 100 px (desktop)
• Decalaj inferior lipicios: 50 px (desktop)

Apoi actualizați indexul Z pentru starea lipicioasă:

• Indicele Z (lipicios): 10001

Duplicați rândul 3

Pentru a crea al patrulea rând pentru pasul patru, duplicați rândul 3.

Creați un titlu lipicios pentru al patrulea rând (pasul patru)

Deschideți setările de text pentru titlul din coloana 1 a rândului duplicat (al treilea) și schimbați textul H4 în „Pasul-04”.

Apoi actualizați opțiunile lipicioase pentru text după cum urmează:

• Decalaj superior lipicios: 150 px (desktop)
• Decalaj inferior lipicios: 0 px (desktop)

Apoi actualizați indexul Z pentru starea lipicioasă:

• Indicele Z (lipicios): 10000

Actualizați indexul coloanei Z pentru fiecare rubrică lipicioasă

Chiar dacă actualizăm indexul z pentru fiecare titlu de stick, trebuie să actualizăm și indexul z pentru coloana părinte a fiecărui head pentru a ne asigura că ordinea de stivuire pe mobil funcționează.

Pentru a face acest lucru, deschideți setările pentru fiecare coloană părinte a fiecărui titlu lipicios (pasul 1-4) și actualizați indexul z al coloanei pentru fiecare după cum urmează:

Rândul 1, coloana 1

• Indicele Z: 20

Rândul 2, coloana 1

• Indicele Z: 19

Rândul 3, coloana 1

• Indicele Z: 18

Rândul 4, coloana 1

• Indicele Z: 17

Partea 3: Crearea legăturilor de ancorare a titlurilor lipicioase

Pentru a crea legăturile de ancorare pentru fiecare titlu, trebuie să atribuim un ID CSS rândului care corespunde adresei URL a modulului pentru titlu.

Pasul 1 Anchor Link

Pentru a crea legătura de ancorare pentru primul titlu lipicios din rândul 1, deschideți setările pentru rândul 1 și adăugați următorul ID CSS:

• ID CSS: unul

Apoi deschideți setările modulului text pentru titlul „pasul 01” și adăugați următoarea adresă URL a modulului:

• Adresă URL a modulului: #one

Pasul doi Link de ancorare

Pentru a crea legătura de ancorare pentru al doilea titlu lipicios din rândul 2, deschideți setările pentru rândul 2 și adăugați următorul ID CSS:

• ID CSS: două

Apoi deschideți setările modulului de text pentru titlul „pasul 02” și adăugați următoarea adresă URL a modulului:

• Adresă URL a modulului: #two

Pasul trei Link de ancorare

Pentru a crea legătura de ancorare pentru al treilea titlu lipicios din rândul 3, deschideți setările pentru rândul 3 și adăugați următorul ID CSS:

• ID CSS: trei

Apoi, deschideți setările modulului text pentru titlul „pasul 03” și adăugați următoarea adresă URL de modul:

• Adresă URL a modulului: #three

Pasul patru Link de ancorare

Pentru a crea legătura de ancorare pentru al patrulea titlu lipicios din rândul 4, deschideți setările pentru rândul 4 și adăugați următorul ID CSS:

• ID CSS: patru

Apoi deschideți setările modulului text pentru titlul „pasul 04” și adăugați următoarea adresă URL a modulului:

• Adresă URL a modulului: # patru

Rezultate finale

Gânduri finale

Numai titlurile lipicioase sunt utile pentru a ține utilizatorii conștienți de conținutul vizualizat. Și, crearea de titluri lipicioase ca navigație prin legătura ancoră este un mod eficient unic de a spori experiența utilizatorului într-un mod care îi determină pe utilizatori să navigheze rapid prin pași. Sperăm că acesta va deveni un design util pentru orice pagină care îi ghidează pe utilizatori printr-un proces.

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

Noroc!