Doriți să creați o bară de navigare în Divi care să fie lipicioasă din partea de jos până în partea de sus a paginii?
În tutorial Divi Astăzi vă vom arăta pas cu pas cum să creați o bară de navigare de jos în sus în Divi.
Acest lucru va permite barei de navigare să rămână inițial în partea de jos a paginii pentru un aspect unic deasupra plierii. Apoi, odată ce derulați secțiunea de deasupra pliului paginii, bara de navigare va rămâne în partea de sus a paginii și va rămâne acolo pe toată pagina.
Ați putea spune că pagina va „prelua” meniul din partea de jos a ecranului și va aduce un efect de interacțiune plăcut în meniul dvs. principal și site-ul web.
Să începem!
studiu
Pentru a vă ajuta să vizualizați rezultatul pe care încercăm să-l obținem, să ne uităm la rezultatul final:
Descărcați DIVI acum!!!
Să începem prin a crea o pagină nouă cu Divi Builder
Pentru a începe, va trebui să faceți următoarele:
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Creați o bară de navigare lipicioasă de jos în sus în Divi
Partea 1: Crearea secțiunii și a antetului deasupra liniei de plutire
Pentru prima parte a acestui tutorial, vom crea secțiunea și antetul deasupra pliului, care vor servi ca secțiune principală de antet a paginii noastre. Secțiunea va fi pe ecran complet pe desktop pentru a vă asigura că secțiunea ocupă întreaga fereastră de afișare.
Citiți și: Divi: alegeți între grila și aspectul pe lățime completă a modulului Portofoliu filtrabil
Adăugați un rând
Pentru a începe, adăugați un rând la o coloană în secțiunea implicită.
Setări secțiune
Înainte de a adăuga un modul, deschideți setările secțiunii și adăugați un fundal după cum urmează:
- Culoare de fundal: #e9f9ff
- Imagine de fundal: [adăugați imagine]
Sub filă Amenajări, actualizați înălțimea minimă și umplutura.
- Înălțime minimă: 100vh (desktop), automat (tabletă și telefon)
- Căptușeală: 20vh (sus și jos)
Antet
Pentru a crea textul antetului, adăugați un nou modul Text la linie.
Apoi actualizați cuprins cu următorul antet H1:
<h1>Above the Fold</h1>
Setări text
Sub filă Amenajări în setările modulului Text, actualizați stilurile de font pentru antet, după cum urmează:
- Titlu:
- Font: Ruby
- Greutatea fontului: semi-aldine
- Stil: TT
- Alinierea textului: centrat
- Culoare text: #302ea7
- Dimensiune: 130px (desktop), 70px (tabletă), 40px (telefon)
- Spațiere între litere: 2px
- Înălțimea liniei: 1,3 em
Partea 2: Crearea secțiunii de sub linia de plutire
Pentru a demonstra funcționalitatea barei de navigare lipicioase, trebuie să adăugăm o secțiune sub fold, astfel încât să avem spațiu pentru a derula.
Pentru a crea secțiunea, duplicați secțiunea de deasupra pliului pe care tocmai l-am creat.
Actualizați fundalul secțiunii duplicat.
- Culoare de fundal: #f4def1
Apoi acordați secțiunii o înălțime minimă mare, astfel încât să avem spațiu pentru a derula în jos în pagină. Aceasta este pur și simplu o secțiune care trebuie completată în locul cuprins o singură pagină reală.
- Înălțime minimă: 200vh
Apoi actualizați cuprins a modulului Text prin înlocuirea cuvântului "De mai jos" de "De mai sus".
Partea 3: Creați bara de navigare lipicioasă
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 la o coloană.
A fost adăugată o nouă secțiune și linie
Mai întâi, să adăugăm o nouă secțiune obișnuită direct sub secțiunea de deasupra pliului.
Apoi, să adăugăm un rând cu o singură coloană la secțiune.
Fundalul secțiunii și căptușeala
Deschideți setările secțiunii și actualizați culoarea de fundal.
- Culoare de fundal: #302ea7
Apoi îndepărtați căptușeala de sus și de jos, astfel încât bara de navigare să aibă mai puțină înălțime.
- Umplutură: 0px (sus și jos)
Adăugați o revărsare 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 derulant mobil se va deschide implicit sub pictograma hamburger. Dacă păstrăm bara de navigare în partea de jos, ar ascunde meniul derulant dacă utilizatorul face clic pe el.
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 telefonului.
Pentru aceasta, acordați secțiunii o poziție absolută pe tabletă și telefon.
- Poziție: relativă (desktop), absolută (tabletă și telefon)
Adăugați o poziție lipicioasă pentru desktop și mobil
Pentru a adăuga poziția sticky la secțiunea barei de navigare, actualizați următoarele:
- Poziție lipită: lipiți de sus și de jos (desktop), lipiți de sus (tabletă și telefon)
Actualizați umplerea rândurilor
Odată ce secțiunea lipicioasă este completă, deschideți setările rândului din interiorul secțiunii și actualizați umplutura după cum urmează:
- Umplutură: 10px (sus și jos)
Creați un meniu de navigare
Cu secțiunea și linia la locul lor, suntem gata să creăm meniul de navigare.
Începeți prin adăugarea unui modul Meniu la rândul cu o singură coloană.
Conținutul meniului
Actualizați conținutul meniului după cum urmează:
- selectați meniul din lista derulantă
- adăugați imaginea logo-ului
- eliminați culoarea de fundal implicită
Sub filă Amenajări, actualizați următoarele setări de text și pictograme din meniu:
- Culoare Active Link: #fff
- Font meniu: Ruby
- Stil font meniu: TT
- Culoare text: #fff
- Dimensiunea textului meniului: 16px
- Alinierea textului: dreapta
- Culoarea liniei meniului 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
Folosirea unui chenar 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 de sus a paginii. Pentru a remedia acest lucru, trebuie să compensăm secțiunea superioară folosind un chenar superior de aceeași înălțime ca și 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 nouă fereastră de browser. Apoi puteți reduce lățimea browserului sub 980px pentru a vedea meniul mobil.
De asemenea, puteți consulta: Divi: Cum se creează o bară de navigare lipicioasă
Faceți clic dreapta pe secțiunea care conține meniul și alegeți opțiunea inspectați elementul în meniul contextual al browserului. Ar trebui să vezi o cutie OUTILS sub secțiunea indicând dimensiunile (inclusiv înălțimea) secțiunii.
Pentru acest exemplu, înălțimea secțiunii barei de navigare este de 72 de pixeli.
Adăugați un decalaj de margine de sus la secțiunea de deasupra pliului
Acum că am stabilit înălțimea secțiunii, deschideți setările pentru secțiunea de sus (deasupra pliului).
Sub filă Amenajări, adăugați următorul chenar de sus pe tabletă și telefon:
- Lățimea chenarului superior: 72 de pixeli (tabletă și telefon)
- Culoarea chenarului de sus: #302ea7
Deoarece chenarul are aceeași înălțime cu secțiunea cu poziția absolută, nu veți putea vedea chenarul, deoarece servește doar la împingerea secțiunii în jos, astfel încât să nu fie tăiată.
Rezultat final
Descoperiți rezultatul final!
Descărcați DIVI acum!!!
Concluzie
Crearea unei bare de navigare lipicioasă de jos în sus se poate face cu ușurință folosind poziția încorporată a Divi și opțiuni lipicioase.
Cheia este să acordați secțiunii de deasupra pliului o înălțime de 100vh, apoi adăugați secțiunea de mai jos a barei de navigare care se lipește în partea de jos și de sus a browserului. Sper că acest lucru vă va ajuta să adăugați un aspect mai unic și mai captivant deasupra pliului dvs site-ul web.
Această bară de navigare lipicioasă funcționează cel mai bine pentru un design de o singură pagină, mai degrabă decât pentru un șablon general. Acestea fiind spuse, puteți alege cu ușurință să utilizați acest design ca pagina de pornire și să utilizați un antet global pentru restul paginilor folosind Generator de teme Divi .
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
