Contoarele animate sunt o modalitate distractivă și eficientă de afișare statistică pentru dumneavoastră vizitatori. Animația este declanșată de încărcare leneșă pentru a face navigarea în pagină cu adevărat interesantă. Puteți plasa câte contoare doriți în acest modul.

modul de măsurare divi.png

Cum să adăugați un modul de contor de bare la pagina dvs.

Înainte de a putea adăuga un modul de contor de bar la pagina dvs., va trebui mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de fiecare dată când creați o pagină nouă.

Dând clic pe acest buton, puteți activa Divi Builder, care vă va oferi acces la toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual.

De asemenea, puteți da clic pe buton Utilizați Visual Builder când îți răsfoiești site-ul pe frontend, dacă ești conectat la tabloul de bord WordPress.

utilizați divi builder

Odată introdus în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs. .

bar counter divi.png

Localizați modulul contorului de bare în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „Contor bare” și apoi faceți clic pe Enter pentru a căuta și adăuga automat modulul contor bare!

Odată adăugat modulul, veți fi întâmpinat cu lista opțiunilor modulului. Aceste opțiuni sunt împărțite în trei grupe principale: Conținut , Concepție et avansat .

Utilizați cazul pentru a afișa obiectivele proiectului într-un studiu de caz

Una dintre cele mai bune moduri de a utiliza modulul Bar Counters este ilustrarea statistică pentru studiile de caz. Pur și simplu etichetați fiecare bară cu o funcție sau un scop specific de proiect, astfel încât utilizatorul să știe ce servicii sunt incluse în proiect. În acest exemplu, folosesc modulul bar pentru a afișa trei obiective ale proiectului.

arată obiectivele proiectului 3.jpg

După cum puteți vedea, partea de sus a paginii include cele trei obiective ale proiectului utilizând modulul „Bar Counter”, iar partea de jos a paginii include rezultatele studiului de caz folosind modulul „Counter”. Număr ".

Să începem.

Utilizați constructorul vizual pentru a adăuga o secțiune standard cu un aspect cu lățime completă (1 coloană). Apoi adăugați un modul de contor de bare pe rând.

Actualizați parametrii contoarelor de bare după cum urmează:

Opțiuni de conținut

Procentul de utilizare: PORNIT
Culoarea fundalului: #dddddd
Culoarea fundalului barei: # e07a5e

Opțiuni de proiectare

Culoarea textului: Întunecat
Titlul fontului: implicit
Dimensiune font Titlu: 20px
Titlu Culoare text: # 405c60
Titlul liniei de înălțime: 2em
Font procentual: implicit
Dimensiunea fontului procentuală: 16px
Procentaj Culoare text: #ffffff
Procentaj linie înălțime: 2.5em

adăugați un cont divi.png

Acum reveniți la fila Conținut și selectați + Adaugă un articol nou pentru a adăuga primul contor de bare la modul.

Actualizați setările modulului individual după cum urmează:

Fila Conținut

Titlu: Titlul meu
Procentaj: 80

Salvați setările

personalizare număr bară divi.png

Adăugați două contoare de bare suplimentare în modul și dați fiecăruia un titlu și un procent.

bar counter divi lista bars.png

Asta este!

rezultatul final divi module barre.png

Opțiuni de conținut de contorizare a barelor

În fila Conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna în această filă.

opțiune modul de conținut bar divi.png

Procente de utilizare

În mod implicit, procentele sunt afișate în contorul barei de culori. Acest text poate fi dezactivat folosind această setare, permițând graficului cu bare vizuale să vorbească de la sine.

Culoarea de fundal

Această opțiune vă permite să reglați culoarea de fundal a fiecărui contor de bare. Această setare se aplică spațiului negativ din spatele culorii barei umplute.

Culoarea fundalului barei

Această opțiune vă permite să reglați culoarea de fundal a barei umplute. Această culoare de fundal se suprapune cu setarea anterioară a culorii de fundal.

Eticheta de administrare

Aceasta va schimba eticheta modulului din generator pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul de module al interfeței Divi Builder.

Bar Counter Design Opțiuni

În fila Proiectare, veți găsi toate opțiunile de stil pentru modul, cum ar fi fonturile, culorile, dimensiunea și spațiul. Această filă vă permite să modificați aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a modifica aproape orice.

opțiune design modul contra barre.png

Culoarea textului

Puteți alege aici dacă textul dvs. va fi deschis sau întunecat. Dacă lucrați cu un fundal întunecat, textul dvs. ar trebui să fie ușor. Dacă fundalul dvs. este deschis, textul dvs. ar trebui să fie negru. Puteți personaliza în continuare culoarea textului utilizând opțiunile suplimentare de culoare ale textului care urmează.

Fonturi de titlu

Puteți modifica fontul textului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi minunate alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, majuscule și subliniate.

Dimensiunea fontului titlului

Aici puteți regla dimensiunea textului din titlu. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Culoarea textului titlului

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului titlului dvs., alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor de titlu

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul titlului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de titlu

Înălțimea liniei afectează spațiul dintre fiecare linie a textului titlului. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea spațiului dorit în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

procent din textul modulului divi barre.png

Procentajul de text

Puteți modifica fontul textului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi minunate alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, majuscule și subliniate.

Dimensiunea fontului procentual

Aici puteți ajusta dimensiunea textului ca procent. Puteți trage glisorul de interval pentru a mări sau micșora dimensiunea textului sau puteți introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Culoarea textului procentual

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului ca procent, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea procentuală a literelor

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă a textului ca procent, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei procentuale

Înălțimea liniei afectează spațiul dintre fiecare rând al textului ca procent. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea spațiului dorit în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de dimensiunea dvs. pentru a-i schimba tipul de unitate.

Raza de raza

Aplicarea unei raze de margine va rotunji colțurile barei în blatul barei. Cu cât raza chenarului este mai mare, cu atât colțurile sunt mai rotunjite.

frontieră opțiune divi builder.png

Utilizați marginea

Activarea acestei opțiuni va plasa o margine în jurul modulului. Această margine poate fi personalizată utilizând următorii parametri condiționali.

Culoarea frontierei

Această opțiune afectează culoarea chenarului. Selectați o culoare personalizată din selectorul de culori pentru ao aplica la bordura dvs.

Lățimea frontierei

În mod implicit, marginile au o lățime de 1 pixel. Puteți crește această valoare trăgând glisorul de interval sau introducând o valoare personalizată în câmpul de introducere din dreapta glisorului. Unități de măsurare personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită de la „px” la altceva, de ex. Em, vh, vw etc.

Stilul de frontieră

Bordurile acceptă opt stiluri diferite, incluzând: solid, punctat, punctat, dublu, groove, creastă, inserare și start. Selectați stilul dorit din meniul derulant pentru a-l aplica la chenar.

Îmbinarea barului

Împletirea este spațiul adăugat în interiorul modulului dvs., între marginea modulului și elementele sale interne. Aici puteți adăuga umplutura personalizată de sus și de jos la modulul barei.

Opțiuni avansate de contorizare a barelor

În fila Avansat, veți găsi opțiuni pe care designerii web mai experimentați le pot găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

opțiuni de bare de cont avansate.png

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema dvs. copil Divi sau în CSS personalizat pe care îl adăugați la pagina dvs. sau la site-ul dvs. web utilizând opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi aplicat și modulului și oricăruia dintre elementele interne ale modulului. În secțiunea CSS personalizată, veți găsi un câmp text unde puteți adăuga CSS direct la fiecare element. Intrările CSS din aceste setări sunt deja încorporate cu etichete de stil. Deci trebuie doar să introduceți reguli CSS separate prin punct și virgulă.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.

Gata pentru acest tutorial.