Contorul circular vă permite să afișați o singură statistică într-un mod plăcut din punct de vedere estetic. Pe măsură ce derulați în jos, numărul numără invers și diagrama circulară se umple treptat pentru a se potrivi cu valoarea procentuală. Încercați să combinați mai multe module de contor cerc pe o singură pagină pentru a vă oferi vizitatori un mod distractiv de a învăța despre abilitățile tale de afaceri sau personale.
Cum să adăugați un modul de contor circular la pagina dvs.
Înainte de a putea adăuga un modul de contor de cerc pe pagina ta, trebuie să accesezi mai întâ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 navighezi pe site-ul tău dacă ești conectat la tabloul de bord WordPress.
Odată introdus în Visual Builder, puteți face clic pe butonul plus gri 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.
Localizați modulul contorului circular în lista de module și faceți clic pe el pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „contor cerc” și apoi să faceți clic pe Enter pentru a căuta și adăuga automat modulul contor cerc!
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 folosi modulul contoare de cerc este ilustrarea statistică pentru studii de caz sau articole de portofoliu.
Pur și simplu identificați fiecare contor circular cu o funcție sau obiectiv specific proiectului, astfel încât utilizatorul să știe ce servicii sunt incluse în proiect. În acest exemplu, voi folosi modulul „contor cerc” 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 utilizând modulul Contor de bare, iar partea de jos a paginii include rezultatele studiului de caz folosind modulul Număr de contor. .
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 cerc pe rând.
Actualizați setările contorului de cerc după cum urmează:
Opțiuni de conținut
Titlu: Animație
Număr: 80
% Sign: Da
Culoarea fundalului barului: #e07a5e
Opțiuni de proiectare
Culoarea cercului: #e07a5e
Culoarea textului: Întunecat
Titlul fontului: implicit
Dimensiune font Titlu: 26px
Titlu Culoare text: #405c60
Numărul fontului: implicit
Dimensiune font dimensiune: 46px
Număr Culoare text: #405c60
Salvați setările
Acum, dublați de două ori modulul contorului de cercuri și trageți fiecare copie în a doua și a treia coloană a liniei dvs.
Deoarece elementele de proiectare au fost transferate în module duplicate, trebuie doar să actualizați titlul și numărul contorului circular.
Asta este!
Vizitați pagina.
Circular Counter Content Options
Î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ă.
Titlu
Introduceți un titlu pentru contorul cercului. Acesta este de obicei un cuvânt care reprezintă statisticile pe care le vedeți. Acesta va fi afișat sub numărul din graficul circular.
nume
Setați un număr pentru contorul circular. Selectând un număr mai mic de 100, graficul cercului se va completa până la un procent egal cu numărul pe care l-ați introdus. De exemplu, introducerea numărului 20 va umple cercul cu 20% cu culoarea dvs. de accent.
Semnul procentual
Aici puteți alege dacă semnul procentual trebuie adăugat după numărul definit mai sus.
Culoarea fundalului barei
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 albastră, cercul dvs. va umple 50% cu o culoare albastră.
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.
Circular 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.
Culoarea cercului
Aceasta este culoarea care va fi utilizată pentru partea necompletată 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 dvs. trebuie să fie 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.
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.
Numărul poliției
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 numărului de font
Aici puteți regla dimensiunea textului numerotat. 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 numărului
În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.
Spațiuarea literelor numerotate
Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă a textului, 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 numerice
Înălțimea liniei afectează spațiul dintre fiecare linie a textului digital. Dacă doriți să măriți spațiul dintre fiecare rând, 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.
Opțiuni avansate de contor circulare
Î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.
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 stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în dvs Divi tema Copil sau în CSS personalizat pe care îl adăugați la pagina sau site-ul dvs. utilizând Opțiunile temei Divi sau Setările paginii Divi Builder.
CSS personalizate
CSS personalizat poate fi de asemenea aplicat 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.
