Modulul contor de numere de pe WordPress temă Divi este o modalitate excelentă de a afișa numere într-un mod distractiv și captivant. Acest modul este folosit în mod obișnuit pentru afișare statistică despre tine sau despre afacerea ta. De exemplu, afișarea numărului dvs. de clienți sau urmăritori pe Facebook este o modalitate excelentă de a prezenta dovezi sociale.

numărul de afișare divi wordpress.png

Cum se adaugă numărul de contor al modulului Divi

Înainte de a putea adăuga un modul de contor la pagina dvs., trebuie 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 postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa 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 face clic pe buton Utilizați Visual Builder când îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.

divi builder

Odată ce ați intrat î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.

divi.png numărul contorului

Găsiți modulul numărătorului de numere î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, de asemenea, să tastați cuvântul „contor de numere” și apoi să faceți clic pe „Enter” pentru a găsi și adăuga automat modulul de numărare a numerelor! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: Utilizarea modulului de contor digital pentru a afișa rezultatele unui proiect

O modalitate excelentă de a utiliza modulul contor de numere este de a ilustra statistică pentru studiile de caz. Doar etichetați fiecare contor cu un număr, astfel încât utilizatorul să poată vedea cu ușurință succesul proiectului. În acest exemplu, folosesc modulul contor digital pentru a afișa patru rezultate ale proiectului.

După cum puteți vedea, partea de sus a paginii include cele trei obiective ale proiectului folosind modulul " Bar counter Și partea de jos a paginii include rezultatele studiului de caz folosind modulele de contor digital.

exemplu compteur.gif

Secțiunea paginii care prezintă rezultatele studiului de caz utilizând modulele digitale necesită utilizarea unei secțiuni specializate. Folosind Visual Builder, adăugați o secțiune specializată la pagină și selectați următoarea structură:

secțiune personalizată divi.png

Selectați un aspect cu 1 coloană pentru partea dreaptă a secțiunii și introduceți titlul și textul necesare pentru rezultatele studiului de caz.

interval de inserție divi.png

Introduceți un aspect al coloanelor 2 direct sub aspectul coloanei 1 din partea dreaptă a secțiunii.

împărțit coloana divi.png

Acum adăugați primul modul de contorizare a numerelor în coloana din stânga.

adăugați o secțiune divi.png

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

Opțiuni de conținut

Titlu: Vizitatori noi
Număr: 54210
Semnal procentaj: OPRIT

Opțiuni de proiectare

Culoarea textului: Întunecat
Font al titlului: implicit
Dimensiune font Titlu: 20px
Titlu Culoare text: # 405c60
Înălțimea liniei de titlu: 1em
Număr de caractere: implicit, îndrăzneț
Număr de caractere: 60px
Număr Culoare text: # e07a5e
Numărul înălțimii liniei: 72px

conținutul secțiunii divi.png

Salvați setările

Duplică modulul Numărătoare de numere și trage-l în coloana din dreapta adiacentă și actualizează opțiunile Titlu și Număr.

contor număr construcție.png

Duplică linia care conține cele două module de contor de numere, astfel încât mai jos sunt afișate alte două contoare de numere.

dublură dublă digitală divi.png

Apoi actualizați opțiunile Titlu și Număr pentru acestea. Acum aveți toate cele patru contoare de număr complet.

Nu uitați să adăugați imaginea de 667 x 320 în coloana / partea stângă a secțiunii specializate.

A terminat! Combinația de contoare de numere și contoare de bare pe această pagină de studiu de caz face ca conținutul să fie captivant.

Modul de realizare finală accountur.png

Opțiuni conținut digital contor

Î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 găsit în această filă.

conținut de zonă selectat wordpress divi.png

Titlu

Introduceți un titlu pentru contor. Acesta va fi afișat sub numărul în text mai mic.

nume

Acesta este numărul pe care îl va conta contorul. Când derulați pagina în jos și ajungeți la contor, numărul se numără rapid de la 0 până când ajunge la numărul setat aici. Aici pot fi plasate numai valori numerice.

Semnul procentual

Aici puteți alege dacă semnul procentual trebuie adăugat după numărul definit mai sus.

Culoarea de fundal

Definiți o culoare de fundal personalizată pentru modulul dvs. sau lăsați necompletat pentru a utiliza culoarea implicită.

Imagine de fundal

Dacă este setată, această imagine va fi folosită ca fundal pentru acest modul. Pentru a elimina o imagine de fundal, trebuie doar să eliminați adresa URL din câmpul de setări. Imaginile de fundal vor apărea deasupra culorilor de fundal, ceea ce înseamnă că culoarea de fundal nu va fi vizibilă atunci când se aplică o imagine de fundal.

Admin Label

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare (stil) a contorului digital

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

zone design counter divi.png

Culoarea textului

Aici puteți alege dacă textul titlului dvs. trebuie să fie deschis sau întunecat. Dacă lucrați pe un fundal întunecat, textul dvs. ar trebui să fie ușor. Dacă fundalul dvs. este deschis, textul dvs. ar trebui să fie întunecat.

Titlul fontului

Puteți modifica fontul textului titlului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave 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, cu majuscule și cu subliniere.

Dimensiunea fontului titlului

Aici puteți regla dimensiunea textului din titlu. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți 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 valoarea mărimii 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 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 valoarea mărimii 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 dvs. 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țiu dorită în câmpul de introducere situat în dreapta cursorului. 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 valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Fonturi ale numărului

Puteți modifica fontul textului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave 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, cu majuscule și cu subliniere.

Dimensiunea fontului numărului

Aici puteți regla dimensiunea textului dvs. digital. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți 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 valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului digital

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

Spațiuarea literelor digitale

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

Înălțimea liniei numărului

Înălțimea liniei afectează spațiul dintre fiecare linie a textului 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 situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsurare, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

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ăsură personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită din „px” în altceva precum em, vh, vw etc.

Stilul de frontieră

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

Căptușeală personalizată

Completarea este spațiul adăugat în interiorul modulului dvs., între marginea modulului și elementele sale interne. Puteți adăuga valori de umplere personalizate la oricare dintre cele patru laturi ale modulului. Pentru a elimina marja personalizată, eliminați valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de intrare.

Opțiuni avansate de contorizare a numărului

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

digital counter section.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 utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o 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, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile 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 de pe pagină.

[vc_row center_row = "da"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi