Modulul Divi Circle Counter
Cum să adăugați, să configurați și să personalizați Modulul Divi Circle Counter.
Modulul Divi Circle Counter vă oferă o modalitate frumoasă și convingătoare din punct de vedere vizual de a afișa o singură statistică. Pe măsură ce derulați în jos, numărul crește și graficul cerc se umple până la locația bazată pe procente. Încercați să combinați mai multe module de contor de cerc pe o singură pagină pentru a oferi vizitatorilor o modalitate distractivă de a afla despre compania dvs. sau despre abilitățile dvs. personale.
Cum să Adăugați Modulul Divi Circle Counter pe Pagina dvs.
Înainte de a putea adăuga Modulul Divi Circle Counter la pagina ta, va trebui mai întâi să sari în 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 vă navigați pe site-ul dvs. în front-end dacă sunteți conectat la tabloul de bord WordPress.
Odată 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ă utilizați elementele rând și secțiune ale Divi.
Găsiți Modulul Divi Circle Counter î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 „circle counter” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul contor cerc! 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: Utilizarea Modulul Divi Circle Counter Pentru a Afișa Obiectivele Proiectului Într-un Studiu de Caz
O modalitate excelentă de a utiliza Modulul Circle Counters este de a ilustra statistici pentru studii de caz sau articole din portofoliu. Pur și simplu etichetați fiecare contor de cerc 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 Circle Counter pentru a afișa trei obiective ale proiectului.
După cum puteți vedea în imaginea de mai jos, 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 Circle Counter la rând.
Actualizați setările contorului cercului după cum urmează:
Opțiuni de Conținut
- Titlu: Branding
- Număr: 80
- Semn de procente: ON
- Culoare de fundal bară: #e07a5e
Opțiuni de Design
- Culoare cerc: #e07a5e
- Culoare text: Întunecat
- Fontul titlului: implicit
- Dimensiunea fontului titlului: 26px
- Culoare text titlu: #405c60
- Font de număr: implicit
- Dimensiunea fontului numărului: 46px
- Număr Culoare text: #405c60
Salvează setările.
Acum duplicați modulul Circle Counter de două ori și trageți fiecare duplicat în a doua și a treia coloană din rândul dvs.
Deoarece elementele dvs. de design au fost transferate în modulele duplicate, tot ce trebuie să faceți este să actualizați titlul și numărul contorului cercului.
Asta e!
Verificați pagina.
Opțiuni de Conținut Pentru Modulul Divi Circle 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ă.
Titlu
Introduceți un titlu pentru contorul de cerc. Acesta este de obicei un cuvânt care reprezintă acea statistică pe care o afișați. Acesta va fi afișat sub numărul din graficul cercului.
Număr
Definiți un număr pentru contorul de cerc. Alegerea unui număr sub 100 va face ca graficul cerc să se umple până la un procent egal cu numărul pe care l-ați introdus. De exemplu, introducerea numărului 20 va face ca cercul să umple 20% din drum cu culoarea accentului.
Semn de Procente
Aici puteți alege dacă semnul procentual trebuie adăugat după numărul stabilit mai sus.
Culoare de Fundal Pentru Bară
Aceasta va schimba culoarea de umplere a barei. Cantitatea de culoare de umplere este controlată de „numărul” selectat mai sus. Dacă selectați numărul 50 și o culoare de albastru, atunci cercul dvs. va umple 50% din drum cu o culoare albastră.
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 Pentru Modulul Divi Circle 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 Cercului
Aceasta este culoarea care va fi folosită pentru partea neumplută a cercului (spațiul negativ care nu este umplut de culoarea de fundal a barei definită în fila Conținut).
Opacitatea Culorii Cercului
Puteți reduce opacitatea părții umplute a cercului folosind această setare.
Culoarea Textului
Aici puteți alege dacă textul trebuie să fie 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 întunecat.
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 din 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 Pentru Numere
Puteți schimba fontul textului numeric 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 Numărului
Aici puteți ajusta dimensiunea textului numărului dvs. 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 Pentru Număr
În mod implicit, toate culorile textului din Divi vor apărea ca alb sau gri închis. Dacă doriți să schimbați culoarea textului numeric, alegeți culoarea dorită din selectorul de culori folosind această opțiune.
Spațiere Între Litere și Numere
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. numeric, 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 Pentru Numere
Înălțimea liniei afectează spațiul dintre fiecare linie a textului dvs. numeric 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.
Opțiuni Avansate Pentru Modulul Divi Circle Counter
Î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. Puteți aplica, de asemenea, 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ă.
