Cum se combină o bară de derulare cu un meniu de navigare fix în Divi

Indicatorii barei de progres pot adăuga o notă frumoasă site-ului dvs. web, stimulând UX cu o interacțiune utilă (și distractivă). În mod normal, barele de progres stau singure în partea de sus a paginii, fără prea multe conexiuni cu conținutul real al paginii. Utilizatorul are pur și simplu un indicator vizual al locului în care se află pe pagină. Dar, astăzi, vom duce această funcționalitate la un alt nivel.

În acest tutorial, vă vom arăta cum să combinați o bară de progres cu un meniu fix de navigare în Divi. Acest design este unic prin faptul că bara de progres se corelează cu lățimea butoanelor meniului. Și pentru că lățimea butoanelor meniului este egală (în procente) cu înălțimea secțiunilor de conținut care pot fi derulate pe pagină, fiecare buton va fi completat de bara de progres a derulării exact în momentul în care utilizatorul ajunge la secțiunea corespunzătoare a butonului. Și dacă acest lucru nu este suficient, vom face din fiecare buton o legătură de ancorare la secțiunile corespunzătoare, de asemenea, pentru un bonus UX adăugat!

Acest design ar fi perfect pentru a aduce un utilizator printr-o pagină de destinație care descrie pașii unui proces. Ei bine, veți vedea.

Să începem!

Trage cu ochiul

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

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!

https://youtu.be/Kf-ciVKEZFI

Abonați-vă la canalul nostru Youtube

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.

Partea 1: Crearea aspectului paginii cu secțiunea pe ecran complet

Secțiunea de sus

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

Înainte de a adăuga un modul, actualizați setările rândului după cum urmează:

• Lățime: 100%
• Lățime maximă: 100%
• Căptușeală: 0 px sus, 0 px jos

În interiorul rândului, adăugați un modul text.

Apoi deschideți setările pentru modulul text și lipiți următorul HTML pentru a crea un antet colorat:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

Sub fila de proiectare, actualizați alinierea textului la centru.

Actualizați următoarele stiluri de titlu H2:

• Rubrica 2 Font: Roboto
• Rubrica 2 Dimensiune text: 6vw

Deschideți setările secțiunii și actualizați înălțimea pentru a fi 100vh (sau 100% din înălțimea ferestrei / ferestrei). Acest lucru vă va asigura că secțiunea este pe ecran complet. Apoi scoateți căptușeala după cum urmează:

• Înălțime: 100vh
• Căptușeală: 0 px sus, 0 px jos

Pentru a vă asigura că rândul / conținutul din secțiune rămâne centrat vertical în cadrul secțiunii, adăugați următorul CSS personalizat la Elementul principal al secțiunii:

display:flex;
flex-direction:column;
justify-content:center;

Primul pas Secțiunea

Următoarea secțiune din aspect va fi primul din cei patru pași. Este, de asemenea, prima secțiune la care va derula primul nostru link de ancorare a meniului.

Pentru a crea secțiunea primului pas, copiați secțiunea de sus pe care tocmai am creat-o.

Apoi deschideți setările pentru secțiunea duplicat și actualizați culoarea de fundal:

• Culoare fundal: # 222222

Apoi, deschideți setările de text și înlocuiți textul corpului cu următoarele:

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

Schimbați alinierea textului la aliniat la stânga.

Apoi actualizați următoarele:

• Rubrica 2 Culoarea textului: # 00a4e0
• Lățime maximă: 40vh (desktop), 80vh (tabletă)
• Alinierea modulului: centru

Aceasta are grijă de secțiunea din primul pas.

Pasul doi Secțiunea

Pentru a crea secțiunea pasului doi, copiați secțiunea pasul unu pe care tocmai am creat-o.

Deschideți setările secțiunii și adăugați un gradient de fundal deasupra culorii de fundal, după cum urmează:

• Culoare fundal gradient stâng: rgba (255.255.255,0.85)
• Culoare fundal gradient drept: rgba (255,255,255,0,85)

Apoi actualizați culoarea titlului:

• Rubrica 2 Culoare text: # ee4266

Culoarea de fundal și titlu a acestei secțiuni se va potrivi cu culorile butonului care se corelează cu această secțiune din meniul pe care îl vom crea mai târziu.

Pasul trei Secțiunea

Pentru a crea secțiunea pasului trei, copiați secțiunea pasul doi și trageți-o în partea de jos a paginii.

Apoi modificați culoarea antetului modulului de text.

• Rubrica 2 Culoarea textului: # 26c485

Pasul patru Secțiunea

Pasul nostru final este pasul patru. Pentru a crea această secțiune, copiați secțiunea pasului doi și trageți-o în partea de jos a paginii.

Apoi actualizați titlul pentru modulul text din secțiunea respectivă.

• Rubrica 2 Culoarea textului: # 2a1e5c

Rezultat

Iată rezultatul aspectului nostru de până acum.

Partea 2: Crearea barei de progres și a meniului Scroll

Următoarea parte este locul în care creăm în cele din urmă bara de progres cu butoanele noastre de meniu. Ideea este să adăugați o secțiune fixă ​​în partea de sus a paginii. Apoi, în interiorul secțiunii, vom crea un rând care conține un modul divizor care va servi drept indicator al barei de progres. În partea de sus a rândului cu bara de progres, vom adăuga un alt rând care va conține butoanele noastre. Fiecare buton va avea un fundal transparent (sau semitransparent) pentru a dezvălui bara de progres din spatele acestuia în timp ce utilizatorul derulează pagina.

Pentru a începe, să creăm secțiunea fixă ​​în partea de sus a paginii. Continuați și creați o nouă secțiune obișnuită și trageți-o în partea de sus a aspectului paginii.

Deschideți setările secțiunii și scoateți umplutura după cum urmează:

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

Sub fila avansată, actualizați următoarele:

• Poziție: Fix
• Indicele Z: 999

Acest lucru vă va asigura că secțiunea rămâne fixă ​​în partea de sus a ferestrei browserului pentru o funcționalitate ușoară a legăturii de ancorare. De asemenea, se va asigura că secțiunea iese din fluxul normal al documentului / html și nu se adaugă la înălțimea documentului general. Acest lucru ne va face ca bara de derulare să ajungă la sfârșitul fiecărui buton exact când utilizatorul ajunge la fiecare secțiune / pas de pe pagină atunci când derulează.

În secțiune, adăugați un rând cu o coloană.

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

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%
• Căptușeală: 0 px sus, 0 px jos
• Poziție: Absolută

Deschideți setările coloanei și adăugați următorul CSS personalizat la elementul principal:

height: 100%;
display:flex;
align-items:center;

Acest lucru vă va asigura că coloana are aceeași înălțime ca secțiunea. De asemenea, va permite modulelor să aibă și înălțimea de 100%. Aceasta va fi cheia pentru a vă asigura că bara de progres umple secțiunea.

Pentru a crea bara de progres, adăugați un modul divizor în coloană.

Apoi actualizați setările divizorului după cum urmează:

• Show Divider: NU
• Culoare fundal: # 222222

• Lățime: 100%
• Înălțime: 100%

NOTĂ: Oferim barei de progres o lățime de 100% aici, astfel încât să o puteți vedea în design. Vom crește și micșora lățimea separatorului / barei de progres cu JQuery.

Sub fila avansată, adăugați un ID CSS și acordați-i o poziție absolută.

• CSS ID: scrollBar
• Poziție: Absolută

Adăugarea indicatorului de text procentual

Apoi, vom adăuga un loc pentru a afișa procentajul poziției de derulare în timp ce utilizatorul derulează pagina. Acest lucru se va corela cu lățimea barei de progres.

Sub divizor, adăugați un modul text.

Apoi lipiți următorul HTML în corp:

<p><span></span></p>

JQuery-ul nostru va scrie textul procentual în acest HTML (între etichetele span). Nu vei putea vedea nimic acum.

Deși textul procentual nu este încă vizibil, trebuie totuși să adăugăm următorul stil în așteptarea apariției acestuia.

• Font text: Roboto
• Stil de text text: TT
• Culoarea textului textului: #ffffff
• Dimensiune text text: 16 px
• Căptușeală: 0,8 em sus, 0,8 jos, 15 px stânga

Sub fila avansată, acordați-i o clasă CSS personalizată și dezactivați-o pe telefon și tabletă.

• Clasa CSS: et-progress-label
• Dezactivați pe: telefon, tabletă

Deși nu am terminat, acesta este un loc bun pentru a adăuga codul nostru personalizat necesar pentru a afișa bara de progres și procentajul.

Pentru a adăuga codul, adăugați un modul de cod sub modulul de text.

Apoi lipiți următorul cod în caseta de cod, asigurându-vă că îl înfășurați cu etichetele de script necesare:

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

Aceasta are grijă de bara de progres și de textul procentual. Să trecem la meniul de navigare.

Construirea butoanelor de meniu cu Anchor Links

Acum suntem pregătiți să construim meniul de navigare care va include patru butoane care acoperă întreaga lățime a browserului. M-am gândit că ar fi grozav ca bara de defilare să umple fiecare buton pe măsură ce utilizatorul ajunge la secțiunea corespunzătoare la care se conectează. Iată ideea. Fiecare buton va avea o lățime de 25% din lățimea totală a browserului. Și întrucât cele patru secțiuni ale noastre au toate aceeași înălțime (100vh), fiecare dintre cele patru secțiuni reprezintă 25% din aria totală derulabilă a aspectului paginii. Acest lucru vă va asigura că bara de progres ajunge la sfârșitul fiecărui buton exact pe măsură ce secțiunea corespunzătoare umple fereastra de vizualizare. Ai prins asta? Dacă nu, sperăm că va avea mai mult sens mai târziu.

Rândul și coloana

Pentru a crea butoanele meniului, mai întâi, trebuie să creăm un rând cu patru coloane sub rândul care conține bara de progres / divizorul.

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

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%
• Căptușeală: 0 px sus, 0 px jos

Pentru a ne asigura că coloanele trebuie stivuite pe mobil, trebuie să adăugăm următoarele elemente CSS personalizate la elementul principal:

display:flex;
flex-wrap:nowrap;

Butonul Pasul 1

Pentru a crea primul buton, adăugați un modul buton în coloana din stânga.

Actualizați textul butonului și adresa URL a linkului după cum urmează:

• Text buton: Pasul 1
• Adresa URL a butonului: #one
  (acest link ancoră va sări secțiunea cu ID-ul CSS corespunzător pe care îl vom adăuga mai târziu)

Apoi, actualizați stilurile de butoane după cum urmează:

• Aliniere buton: centru
• Dimensiune text buton: 20 px (desktop), 14 px (tabletă)
• Culoarea fundalului butonului: transparent
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Distanța dintre litere și butoane: 0.2em
• Buton Font: Roboto
• Stil Font Buton: TT
• Căptușeală: 0.8em sus, 0.8em jos, 0 stânga, 0 dreapta

Pentru a face ca butonul să se extindă pe toată lățimea coloanei, adăugați următorul CSS personalizat la elementul principal:

display:block !important;
width: 100%;

Pasul 2 Buton

Pentru a crea butonul pentru pasul doi, copiați butonul din coloana unu și trageți-l în coloana 2.

Apoi actualizați următoarele:

• Culoarea textului butonului: # ee4266
• Culoarea fundalului butonului: rgba (255,255,255,0,85)

Culoarea de fundal semi-transparentă va fi combinată cu culoarea neagră a barei de progres (în spatele acesteia) pentru a se potrivi cu fundalul corespunzător din secțiunea pasului doi.

Apoi actualizați adresa URL a linkului butonului cu următoarele:

• Adresa URL a butonului: #two

Pasul 3 Buton

Pentru a crea butonul pasului 3, duplicați butonul pasului 1 (are aceeași culoare bg) și trageți-l în coloana 3.

Apoi actualizați culoarea textului butonului:

• Culoarea textului butonului: # 26c485

Apoi actualizați adresa URL a linkului butonului cu următoarele:

• Adresa URL a butonului: #three

Pasul 4 Buton

Pentru a crea butonul pasului 3, duplicați butonul pasului 2 (are aceeași culoare bg) și trageți-l în coloana 4.

Apoi actualizați culoarea textului butonului:

• Culoarea textului butonului: # 2a1e5c

Apoi actualizați adresa URL a linkului butonului cu următoarele:

• Adresa URL a butonului: # patru

Adăugarea ID-urilor CSS ale secțiunii corespondente pentru linkurile de ancorare

Odată ce butoanele sunt terminate și toate au adresele URL de legătură ancoră, putem adăuga ID-urile CSS ale secțiunii corespunzătoare la fiecare secțiune la care dorim să treacă fiecare buton pe pagină.

Primul pas Secțiunea CSS ID

Deschideți setările pentru secțiunea primul pas și adăugați următorul ID CSS:

• ID CSS: unul

Pasul doi Secțiunea CSS ID

Deschideți setările pentru secțiunea pasului doi și adăugați următorul ID CSS:

• ID CSS: două

Pasul trei Secțiunea CSS ID

Deschideți setările pentru secțiunea pasului trei și adăugați următorul ID CSS:

• ID CSS: trei

Pasul patru Secțiunea CSS ID

Deschideți setările pentru secțiunea pasului patru și adăugați următorul ID CSS:

• ID CSS: patru

Rezultat final

Gânduri finale

Acest meniu al barei de progres este cu siguranță un design unic, care are potențialul pentru o varietate de aplicații. Sperăm că vă ajută cu următorul dvs. proiect. Și, nu ezitați să explorați nenumăratele variante de design disponibile în constructorul Divi pentru a crea propriul meniu al barei de progres.

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

Noroc!