Modulul Divi Bar Counters

Cuprins: arată

Cum să adăugați, să configurați și să personalizați Modulul Divi Bar Counters.

Contoarele animate sunt o modalitate distractivă și eficientă de a afișa statistici vizitatorilor tăi. Animația este declanșată folosind încărcare leneșă pentru a face navigarea pe pagină cu adevărat captivantă. Puteți plasa câte contoare doriți în interiorul acestui modul.

Vezi Demo Modulul Divi Bar Counters

Cum să Adăugați Modulul Divi Bar Counters 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. Odată ce tema Divi a fost instalată pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postări de fiecare dată când construiți o pagină nouă. Făcând clic pe acest buton, se va activa Divi Builder, oferindu-vă acces la toate modulele Divi Builder. Apoi, faceți clic pe butonul Utilizați generatorul vizual pentru a lansa generatorul în modul vizual. Puteți, de asemenea, să faceți clic pe butonul Utilizați Visual Builder atunci când navigați pe site-ul dvs. în front-end dacă sunteți conectat la tabloul de bord WordPress.

După ce ați intrat în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Noile module pot fi adăugate numai în interiorul Rândurilor. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând pe pagina dvs. Avem câteva tutoriale grozave despre cum să folosiți elementele de rând și secțiune ale lui Divi.

Găsiți modulul contor bar în lista de module și faceți clic pe el pentru a-l adăuga pe pagina dvs. Lista de module poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „contor bar” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul contor bar! Odată ce modulul a fost adăugat, veți fi întâmpinat cu lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut, Design și Avansat.

Exemplu de Caz de Utilizare: Utilizare Modulul Divi Bar Counters Pentru a Afișa Obiectivele Proiectului Într-un Studiu de Caz

O modalitate excelentă de a folosi modulul Bar Counters este ilustrarea statisticilor pentru studii de caz. Pur și simplu etichetați fiecare bară cu o anumită caracteristică sau obiectiv al proiectului, astfel încât utilizatorul să știe ce servicii au fost incluse în proiect. În acest exemplu, adaug folosind modulul Bar pentru a afișa trei obiective ale proiectului.

După cum puteți vedea, partea de sus a paginii include cele trei obiective ale proiectului folosind Modulul Bar Counter, iar partea de jos a paginii include rezultatele studiului de caz folosind Modulul Number Counter.

Să începem.

Utilizați generatorul vizual pentru a adăuga o secțiune standard cu un aspect cu lățime completă (1 coloană). Apoi adăugați un modul Bar Counters la rând.

Actualizați setările contoarelor de bare după cum urmează:

Opțiuni de Conținut

Procente de utilizare: ACTIVAT
Culoare de fundal: #dddddd
Culoare de fundal bară: #e07a5e

Opțiuni de Proiectare

Culoare text: Întunecat
Fontul titlului: implicit
Dimensiunea fontului titlului: 20px
Culoare text titlu: #405c60
Înălțimea liniei de titlu: 2 em
Font procentual: implicit
Dimensiunea fontului procentual: 16px
Culoarea textului procentual: #ffffff
Înălțimea liniei procentuale: 2,5 em

Actualizați setările contoarelor de bare

Acum reveniți la fila Conținut și selectați + Adăugați 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: Branding
Procent: 80

Salvează Setările

Adăugați încă două contoare de bare la modul și dați fiecăruia un Titlu și un Procent.

Asta e!

Opțiuni de Conținut Pentru Bar Counter

În fila de Conținut veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Orice lucru care controlează ceea ce apare în modulul tău va fi întotdeauna găsit în această filă.

Utilizați Procente

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

Culoare de Fundal

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

Culoare de Fundal Bară

Această opțiune vă permite să reglați culoarea de fundal a barei umplute. Aceste setări de culoare de fundal se suprapun cu setarea anterioară de culoare de fundal.

Eticheta de Administrator

Acest lucru va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul modulului din interfața Divi Builder.

Opțiuni de Design a Bar Counter

În fila de design veți găsi toate opțiunile de stil ale modulului, cum ar fi fonturi, culori, dimensiune și spațiere. Aceasta este fila pe care o veți folosi pentru a schimba modul în care arată modulul. Fiecare modul Divi are o listă lungă de setări de design pe care le puteți folosi pentru a schimba aproape orice.

Culoarea Textului

Aici puteți alege dacă textul va apărea deschis sau întunecat. Dacă lucrați cu un fundal întunecat, atunci textul dvs. ar trebui să fie deschis. Dacă fundalul este deschis, atunci textul ar trebui să fie setat la întuneric. Puteți personaliza și mai mult culoarea textului folosind opțiunile suplimentare de culoare a textului care urmează.

Font de Titlu

Puteți schimba fontul textului din titlu selectând fontul dorit din meniul drop-down. Divi vine cu zeci de fonturi grozave alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.

Dimensiunea Fontului Titlului

Aici puteți ajusta dimensiunea textului titlului. Puteți trage glisorul pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită a dimensiunii textului direct în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.

Culoarea Textului Titlului

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

Spațiere Dintre Litere în Titlu

Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul titlului, utilizați glisorul pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.

Înălțimea Liniei de Titlu

Înălțimea liniei afectează spațiul dintre fiecare linie din textul titlului Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.

Font Procent

Puteți schimba fontul textului procentual selectând fontul dorit din meniul drop-down. Divi vine cu zeci de fonturi grozave alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.

Dimensiunea Fontului Procentual

Aici puteți ajusta dimensiunea textului procentual. Puteți trage glisorul pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită a dimensiunii textului direct în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.

Culoarea Textului Procentual

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

Spațiere Dintre Litere în Textul Procentual

Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul dvs. procentual, utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.

Înălțimea Liniei Procentuale

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

Raza de Bordură

Aplicarea unei raze a marginii va rotunji colțurile barei în contorul de bare. Cu cât raza bordurii este mai mare, cu atât colțurile devin mai rotunjite.

Utilizați Border

Activarea acestei opțiuni va plasa un chenar în jurul modulului dvs. Acest chenar poate fi personalizat folosind următoarele setări condiționate.

Culoarea Chenarului

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

Lățimea Chenarului

Î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ăsură personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită de la „px” la altceva, cum ar fi em, vh, vw etc.

Stil de Chenar

Chenarele acceptă opt stiluri diferite, inclusiv: solid, punctat, punctat dublu, canelura, creasta, inset și start. Selectați stilul dorit din meniul drop-down pentru a-l aplica la chenar.

Padding Bar

Padding este spațiul adăugat în interiorul modulului, între marginea modulului și elementele sale interne. Aici puteți adăuga padding superior personalizat și padding inferior la Modulul Divi Bar Counters.

Opțiuni Avansate Pentru Contorul de Bare

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat la oricare dintre multele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate la modul, care pot fi folosite pentru a personaliza modulul în fișierul style.css al Temei Copil.

ID CSS

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

Clasa CSS

Introduceți clase CSS opționale care vor fi utilizate pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema Divi Child sau în CSS-ul personalizat pe care îl adăugați la pagina sau site-ul dvs. folosind Opțiunile Temei Divi sau setările paginii Divi Builder.

CSS Personalizat

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

Vizibilitate

Această opțiune vă permite să controlați pe ce dispozitive apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, telefoane inteligente sau computere desktop. Acest lucru este util dacă doriți să utilizați diferite module pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.

Opțiuni de Conținut Pentru Contorul de Bare Individuale

Titlu

Titlul definit aici va apărea deasupra contorului de bar. Lăsați necompletat pentru a nu avea titlu.