Divi udžbenik: Kako koristiti brojčani brojač modul

Modul brojača brojeva na WordPress tema Divi je izvrstan način za prikaz brojeva na zabavan i privlačan način. Ovaj modul se obično koristi za prikaz statistika o vama ili vašem poslu. Na primjer, prikazivanje vašeg broja kupaca ili sljedbenika na Facebooku izvrstan je način za prikazivanje društvenog dokaza.

Kako dodati modul Brojač broja Divi

Prije nego što dodate modul brojača na svoju stranicu, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.

Pronađite modul brojača brojeva na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da možete upisati i riječ "brojač brojeva", a zatim kliknuti "Enter" za automatsko pronalaženje i dodavanje modula brojača brojeva! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer upotrebe: Korištenje modula digitalnog brojača za prikaz rezultata projekta

Sjajan način korištenja modula brojača brojeva je ilustracija statistika za studije slučaja. Samo označite svaki brojač brojem kako bi korisnik mogao lako vidjeti uspjeh projekta. U ovom primjeru koristim modul digitalnog brojača za prikaz četiri rezultata projekta.

Kao što vidite, vrh stranice uključuje tri cilja projekta pomoću modula " Bar brojač I na dnu stranice nalaze se rezultati studije slučaja pomoću modula digitalnog brojača.

Odjeljak stranice koji prikazuje rezultate studije slučaja pomoću digitalnih modula zahtijeva upotrebu specijaliziranog odjeljka. Koristeći Visual Builder, dodajte specijalizirani odjeljak na stranicu i odaberite sljedeći izgled:

Odaberite raspored s 1 stupcem s desne strane odjeljka i unesite naslov i tekst potrebni za rezultate studije slučaja.

Umetnite izgled stupaca 2 izravno ispod izgleda stupaca 1 na desnoj strani odjeljka.

Sada dodajte svoj prvi modul brojača u lijevi stupac.

Ažurirajte parametre brojila na sljedeći način:

Opcije sadržaja

Naslov: Novi posjetitelji
Broj: 54210
Postotak znaka: ISKLJ

Mogućnosti dizajna

Boja teksta: tamno
Font naslova: zadano
Veličina slova naslova: 20px
Tekst teksta u tekstu: # 405c60
Visina naslovnice: 1em
Broj znakova: Zadano, podebljano
Broj znakova: 60px
Broj boje teksta: # e07a5e
Broj visine linije: 72px

Spremite postavke

Umnožite broj modula Brojila i povucite ga u susjedni desni stupac i ažurirajte opcije naslova i broja.

Umnožite liniju koja sadrži dva modula brojača tako da su dolje prikazana još dva brojača broja.

Zatim ažurirajte opcije Naslov i Broj za njih. Sada imate sva četiri brojača punih brojeva.

Ne zaboravite dodati sliku 667 x 320 u lijevi stupac / bok specijaliziranog odjeljka.

Gotovo je! Kombinacija brojača brojeva i brojača traka na ovoj stranici studije slučaja stvarno čini sadržaj privlačnim.

Opcije sadržaja digitalnog brojača

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.

Naslov

Unesite naslov brojača. To će se prikazati ispod broja u manjem tekstu.

ime

Ovo je broj koji će brojač računati. Kad pomičete stranicu prema dolje i dođete do brojača, broj se brzo broji od 0 dok ne dosegne broj koji ste ovdje postavili. Ovdje se mogu postaviti samo numeričke vrijednosti.

Postotak znaka

Ovdje možete odabrati želite li dodati znak postotka nakon gore definiranog broja.

Boja pozadine

Definirajte prilagođenu boju pozadine za svoj modul ili ostavite prazno da biste koristili zadanu boju.

Pozadinska slika

Ako se postavi, ova će se slika koristiti kao pozadina ovog modula. Da biste uklonili pozadinsku sliku, samo uklonite URL iz polja postavki. Pozadinske slike pojavit će se na vrhu pozadinskih boja, što znači da boja pozadine neće biti vidljiva kada se primijeni pozadinska slika.

Administratorska oznaka

Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.

Opcije dizajna (Stil) digitalnog brojila

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete bilo što promijeniti.

Boja teksta

Ovdje možete odabrati hoće li vaš naslovni tekst biti svijetli ili tamni. Ako radite na tamnoj pozadini, vaš bi tekst trebao biti svijetli. Ako je vaša pozadina svijetla, tekst bi trebao biti taman.

Font slova

Možete promijeniti font naslova odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina slova naslova

Ovdje možete prilagoditi veličinu teksta naslova. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli vrijednost željene veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta naslova

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta u naslovu, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak naslovnih slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu naslova, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina naslovnice

Visina retka utječe na razmak između svakog retka teksta vašeg naslova. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Krstionica brojeva

Font teksta možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina slova broja

Ovdje možete prilagoditi veličinu digitalnog teksta. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli vrijednost željene veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja digitalnog teksta

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju digitalnog teksta, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak digitalnih slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u numeričkom tekstu, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina linije broja

Visina retka utječe na razmak između svakog retka vašeg numeričkog teksta Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Koristite granicu

Omogućivanjem ove opcije postavit ćete obrub oko vašeg modula. Ovu granicu možete prilagoditi pomoću sljedećih uvjetnih parametara.

Boja granice

Ova opcija utječe na boju vašeg obruba. Odaberite prilagođenu boju iz alata za odabir boja da biste je primijenili na vaš obrub.

Širina granice

Granice su prema zadanim postavkama široke 1 piksel. Ovu vrijednost možete povećati povlačenjem klizača raspona ili unosom prilagođene vrijednosti u polje za unos s desne strane klizača. Podržane prilagođene jedinice mjere, što znači da možete promijeniti zadanu jedinicu iz "px" u nešto drugo poput em, vh, vw itd.

Granični stil

Granice podržavaju osam različitih stilova: puni, točkasti, točkasti, dvostruki, žlijeb, greben, sloj i početak. Na padajućem izborniku odaberite svoj željeni stil da biste ga primijenili na vašu granicu.

Custom padding

Ispunjavanje je prostor dodan unutar vašeg modula, između ruba modula i njegovih unutarnjih elemenata. Možete dodati prilagođene vrijednosti popunjavanja na bilo koju od četiri strane modula. Da biste uklonili prilagođenu marginu, uklonite dodanu vrijednost iz polja za unos. Te se vrijednosti prema zadanim postavkama mjere u pikselima, ali u polja za unos možete unijeti prilagođene mjerne jedinice.

Napredne mogućnosti brojača broja

Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se klase mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcija teme Divi ili postavki stranice Divi Builder.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

vidljivost

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.

[vc_row center_row = "yes"] [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"] PREUZMITE DIVI TEMU [/ vcex_button] [/colu [m»n_colum] » 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 =" ravno "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] ATE DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]