[Ad_1]
Să începem!
studiu
Pentru a vă ajuta să vizualizați rezultatul pe care încercăm să îl obținem, să analizăm rezultatul final:
Descarcă aspectul GRATUIT
Pentru a pune mâna pe modelele din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. Pentru a accesa descărcarea, va trebui să vă abonați la lista noastră de corespondență Divi Daily folosind formă de mai jos. Ca nou abonat, vei primi și mai multe beneficii Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.
Pentru a importa aspectul secțiunii în biblioteca Divi, accesați biblioteca Divi.
Faceți clic pe butonul Import.
În fereastra pop-up de portabilitate, selectați fila Import și alegeți fișierul de descărcat de pe computer.
Apoi faceți clic pe butonul de import.
După ce ați terminat, aspectul secțiunilor va fi disponibil în Divi Builder.
Treci la tutorial, nu?
Ce ai nevoie pentru a începe
Pentru a începe, va trebui să faceți următoarele:
- Dacă nu ați făcut-o deja, instalați și activați Divi tema.
- Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din front-end (builder vizual).
- Alegeți opțiunea „Construiți 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 liniei de plutire 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 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 fundal: # e9f9ff
- Imagine de fundal: [adaugă imagine]
În fila Proiectare, actualizați înălțimea minimă și căptușeala.
- Înălțime minimă: 100 vh (computer desktop), automat (tabletă și telefon)
- Garnitura: 20vh de sus, 20vh de jos
Antet
Pentru a crea textul antetului, adăugați un nou modul de text pe linie.
Apoi actualizați conținutul cu următorul antet H1:
<h1>Above the Fold</h1>
Setări text
În fila Proiectare din Setări text, actualizați stilurile de font de titlu după cum urmează:
- Fontul titlului: Rubik
- Greutate font antet: Semi îndrăznețe
- Stilul fontului antet TT
- Aliniere text antet: centru
- Culoarea textului titlului: # 302ea7
- Dimensiunea textului titlului: 130 px (desktop), 70 px (tabletă), 40 px (telefon)
- Spațierea literelor antet: 2 px
- Înălțimea liniei de direcție: 1,3 em
Partea 2: Crearea secțiunii sub pliere
Pentru a demonstra funcționalitatea barei de navigare lipicioase, trebuie să adăugăm o secțiune sub cutie, astfel încât să putem avea loc pentru derulare.
Pentru a crea secțiunea, copiați secțiunea de deasupra liniei de plutire pe care tocmai am creat-o.
Actualizați fundalul secțiunii duplicat.
- Culoarea fundalului: # 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 completat în locul conținutului real de pe o pagină.
Apoi actualizați conținutul modulului text înlocuind cuvântul „Mai jos” cu „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ă.
Adăugați o nouă secțiune și o nouă linie
Adăugați o nouă secțiune obișnuită direct sub secțiunea de deasupra liniei de plutire.
Apoi adăugați un rând la o coloană în secțiune.
Fundalul secțiunii și căptușeala
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ă.
- Completare: 0 px sus, 0 px 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ă:
- Debord orizontal: vizibil
- Debord vertical: vizibil
Acordați secțiunii o poziție absolută pe mobil
Meniul derulant mobil se va deschide în mod implicit sub pictograma hamburger. 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 de pe ecranul tabletei și al telefonului.
Pentru aceasta, atribuiți secțiunii o poziție absolută pe tabletă și telefon.
- Poziție: relativă (computer desktop), absolută (tabletă și telefon)
Adăugați o 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 umplerea rândurilor
Odată ce secțiunea lipicioasă este completă, deschideți setările rândului din secțiune și actualizați umplutura după cum urmează:
- Căptușire: 10 pixeli în partea de sus, 10 pixeli în partea de jos
Creați un meniu 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 unei coloane.
Conținutul meniului
Actualizați conținutul meniului după cum urmează:
- selectați meniul din lista derulantă
- adăugați o imagine de siglă (folosesc imaginea de 122px la 52px)
- eliminați culoarea de fundal implicită
În fila Proiectare, actualizați următoarele setări pentru textul și pictograma meniului:
- Culoare link activ: #fff
- Font meniu: Rubik
- Stilul fontului meniului: TT
- Culoarea textului meniului: #fff
- Dimensiunea textului meniului: 16 px
- Aliniere text: dreapta
- Culoarea liniei meniului drop-down: # e19dff
- Culoarea textului meniului mobil: # 302ea7
- Culoarea pictogramei coșului de cumpărături: #fff
- Culoarea pictogramei de căutare: #fff
- Culoarea pictogramei meniului 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 superioară a paginii. Pentru a rezolva această problemă, trebuie să compensăm secțiunea superioară folosind o margine superioară de 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 reduce lățimea browserului sub 980px 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 contextual al browserului. Ar trebui să vedeți o cutie de instrumente sub secțiune care să prezinte 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 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 fila Proiectare, adăugați următoarea margine superioară atât pe tabletă, cât și pe 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
Descoperiți rezultatul final!
Ultimele gânduri
Crearea unei bare de navigare lipicioasă de jos în sus poate fi realizată cu ușurință utilizând poziția încorporată și opțiunile lipicioase ale Divi. 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 de partea de jos și de sus a navigatorului. Sperăm că acest lucru vă va ajuta să adăugați un aspect mai unic și mai captivant deasupra liniei de plutire 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 generatorul. Divi tema.
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Pentru sănătatea ta!
[Ad_2]
