Cum să creați o bară de navigare lipicioasă de jos în sus în Divi

În tutorialul Divi de astăzi vă vom arăta, pas cu pas, cum să creați o bară de navigare lipicioasă de jos în sus în Divi. Acest lucru va permite bara de navigare să rămână inițial în partea de jos a paginii pentru un aspect unic deasupra paginii. Apoi, odată ce parcurgeți secțiunea de sus a paginii, bara de navigare se va lipi în partea de sus a paginii și va rămâne acolo pe tot restul paginii. Ați putea spune că pagina va „prelua” meniul din partea de jos a ecranului și va aduce un efect de interacțiune frumos în meniul principal și pe site-ul dvs. web.

Să începem!

Trage cu ochiul

Pentru a vă ajuta să vizualizați rezultatul pe care încercăm să îl obținem, să aruncăm o privire asupra rezultatului final:

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.

Crearea unei bare de navigare lipicioase de jos în sus în Divi

Partea 1: Crearea secțiunii de sus și a antetului

Pentru prima parte a acestui tutorial, vom crea secțiunea și titlul de mai sus care va servi drept secțiunea principală a antetului paginii noastre. Secțiunea va fi pe ecran complet pe desktop pentru a vă asigura că secțiunea ocupă întreaga fereastră.

Adăugați rând

Pentru a începe, adăugați un rând cu o coloană la secțiunea implicită.

Setări secțiune

Înainte de a adăuga un modul, deschideți setările pentru secțiune și adăugați un fundal după cum urmează:

• Culoare fundal: # e9f9ff
• Imagine de fundal: [adaugă imagine]

Sub fila de proiectare, actualizați înălțimea minimă și căptușeala.

• Înălțime minimă: 100vh (desktop), automată (tabletă și telefon)
• Garnitura: 20vh sus, 20vh jos

Text de antet

Pentru a crea textul antetului, adăugați un nou modul de text pe rând.

Apoi actualizați conținutul cu următoarea rubrică H1:

<h1>Above the Fold</h1>

Setări text

Sub fila de proiectare a setărilor de text, actualizați stilurile de font de titlu după cum urmează:

• Font de titlu: Rubik
• Greutatea fontului de titlu: Semi îndrăzneț
• Titlu Font Style TT
• Alinierea textului de antet: centru
• Culoare text antet: # 302ea7
• Dimensiune text antet: 130 px (desktop), 70 px (tabletă), 40 px (telefon)
• Distanța între litere de titlu: 2 px
• Înălțimea liniei de direcție: 1.3em

Partea 2: Crearea secțiunii de mai jos

Pentru a demonstra funcționalitatea barei de navigare lipicioase, trebuie să adăugăm o secțiune de mai jos, astfel încât să putem avea spațiu de derulare.

Pentru a crea secțiunea, duplicați secțiunea de mai sus pe care tocmai am creat-o.

Actualizați fundalul secțiunii duplicat.

• Culoare fundal: # f4def1

Apoi acordați secțiunii o înălțime minimă mare, astfel încât să avem loc pentru a derula pagina. Aceasta este doar o secțiune de completare în locul conținutului real al unei pagini.

• Înălțime minimă: 200vh

Apoi actualizați conținutul modulului text înlocuind cuvântul „Mai jos” cu „Mai sus”.

Partea 3: Crearea barei de navigare lipicioase

Pentru a crea bara de navigare lipicioasă de jos în sus, primul nostru pas este să creăm o nouă secțiune cu un rând cu o coloană.

Adăugați o secțiune nouă și un rând

Adăugați o nouă secțiune obișnuită direct sub secțiunea de mai sus.

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

Secțiunea Fundal și capitonare

Deschideți setările secțiunii și actualizați culoarea de fundal.

• Culoare fundal: # 302ea7

Apoi scoateți căptușeala superioară și inferioară, astfel încât bara de navigare să aibă o înălțime mai mică.

• Căptușeală: 0 px sus, 0 px jos

Adăugați Depășire vizibilă

Pentru a vă asigura că meniurile derulante vor rămâne vizibile, actualizați opțiunile de vizibilitate după cum urmează:

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Acordați secțiunii o poziție absolută pe mobil

Meniul vertical mobil se va deschide sub pictograma hamburger în mod implicit. Dacă păstrăm bara de navigare în partea de jos, aceasta va ascunde meniul derulant dacă utilizatorul face clic pe ea în poziția de jos. Pentru o experiență mai bună a utilizatorului, dorim ca bara de navigare să înceapă chiar în partea de sus a paginii pe ecranul tabletei și al telefonului.

Pentru a face acest lucru, acordați secțiunii o poziție absolută pe tabletă și telefon.

• Poziție: relativă (desktop), absolută (tabletă și telefon)

Adăugați Poziție lipicioasă pentru desktop și mobil

Pentru a adăuga poziția lipicioasă la secțiunea barei de navigare, actualizați următoarele:

• Poziție lipicioasă: lipiți de sus și de jos (desktop), lipiți de sus (tabletă și telefon)

Actualizați capitonarea rândurilor

Odată ce secțiunea lipicioasă este completă, deschideți setările pentru rândul din secțiune și actualizați căptușeala după cum urmează:

• Căptușeală: 10 px sus, 10 px jos

Creați meniul de navigare

Cu secțiunea și rândul în poziție, suntem gata să creăm meniul de navigare.

Începeți prin adăugarea unui modul de meniu la rândul cu o coloană.

Conținut meniu

Actualizați conținutul meniului după cum urmează:

• selectați meniul din meniul derulant
• adăugați o imagine de siglă (folosesc o imagine de 122x52px)
• scoateți culoarea de fundal implicită

Sub fila Design, actualizați următoarele setări de text și pictogramă din meniu:

• Culoare link activ: #fff
• Font de meniu: Rubik
• Stilul fontului meniului: TT
• Culoare text meniu: #fff
• Dimensiune text meniu: 16 px
• Alinierea textului: dreapta
• Culoare linie meniu derulant: # e19dff
• Culoarea textului meniului mobil: # 302ea7
• Culoare pictogramă coș de cumpărături: #fff
• Culoare pictogramă de căutare: #fff
• Culoare pictogramă meniu hamburger: #fff

Utilizarea unei margini pentru a compensa poziția absolută a barei de navigare pe mobil

Deoarece secțiunea barei de navigare are o poziție absolută pe mobil, bara va sta deasupra (și va tăia) secțiunea superioară a paginii. Pentru a remedia acest lucru, trebuie să compensăm secțiunea superioară folosind o margine superioară care are aceeași înălțime ca bara / secțiunea de navigare.

Inspectați înălțimea secțiunii barei de navigare pe mobil

Pentru a determina înălțimea barei de navigare pe mobil, deschideți o versiune live a paginii într-o fereastră nouă a browserului. Apoi, puteți micșora lățimea browserului sub 980 px pentru a vedea meniul mobil. Faceți clic dreapta pe secțiunea care conține meniul și alegeți opțiunea inspectare element din meniul clic dreapta al browserului. Ar trebui să vedeți o cutie de instrumente sub secțiune care arată dimensiunile secțiunii (inclusiv înălțimea). Pentru acest exemplu, înălțimea secțiunii barei de navigare este de 72 px.

Adăugați Decalajul de margine de sus la secțiunea de deasupra pliului

Acum, după ce am stabilit înălțimea secțiunii, deschideți setările pentru secțiunea superioară (deasupra pliantei).

Sub fila de proiectare, adăugați următoarea margine superioară pe tabletă și telefon:

• Lățimea marginii superioare: 72 px (tabletă și telefon)
• Culoarea chenarului superior: # 302ea7

Deoarece marginea are aceeași înălțime ca secțiunea cu poziția absolută, nu veți putea vedea marginea, deoarece servește doar pentru a împinge secțiunea în jos, astfel încât să nu fie tăiată.

Rezultat final

Verificați rezultatul final!

Gânduri finale

Crearea unei bare de navigare lipicioase de jos în sus poate fi realizată cu ușurință prin utilizarea poziției încorporate a Divi și a opțiunilor lipicioase. Cheia este să oferiți secțiunii de mai sus o înălțime de 100vh și apoi adăugați secțiunea barei de navigare de mai jos, care se lipeste în partea de jos și de sus a browserului. Din fericire, acest lucru vă va ajuta să adăugați un site mai unic și mai atrăgător la site-ul dvs. web.

Această bară de navigare lipicioasă funcționează cel mai bine pentru un design de pagină mai degrabă decât pentru un șablon global. Acestea fiind spuse, puteți alege cu ușurință să utilizați acest lucru ca proiectare a paginii de pornire și să utilizați un antet global pentru restul paginilor utilizând generatorul de teme Divi.

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

Noroc!