Treci la conținutul principal

Cum se utilizează modulul de măsurare circulară pe divizoarele Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Contorul circular vă permite să afișați o statistică unică într-un mod estetic și convingător. Pe măsură ce derulați în jos, numărul se numără înapoi și graficul circular se umple treptat pentru a se potrivi cu valoarea procentuală. Încercați să combinați mai multe module de contoare de cercuri pe o singură pagină pentru a oferi vizitatorilor un mod distractiv de a afla despre afacerea dvs. sau despre abilitățile personale.

exemple de circulerire contra divi.png

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

Înainte de a putea adăuga un modul de contor de cercuri la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odată ce tema Divi este instalată pe site-ul dvs. web, 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.

utilizați divi builder

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.

contra cerc divi.png

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 modalități de a utiliza modulul contoare de cercuri este de a ilustra statistici pentru studii de caz sau elemente 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. .

exemplu modul cerc divi animation.gif

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.

Configurația contului de cerc divi.png

Actualizați setările contorului de cerc după cum urmează:

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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

animație divi crearea unui cerc cu un divi grafic.png

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.

copiați un modul circular divi.png

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.

design divi builder.png

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ă.

cerc de conținut module.png

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ă.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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.

opțiune circulară divi.png

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.

numar text divi builder circular cont.png

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.

literele de spațiere a textului de text divi.png

Î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.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

avansat contor divi.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 Divi Child sau în CSS personalizate pe care le adăugați la pagina sau site-ul dvs. web 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.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
11 acțiuni
acțiune6
tweet2
Registru3