Kružni brojač omogućuje vam prikaz jedne statistike na estetski ugodan način. Dok se pomičete prema dolje, broj se odbrojava i tortni grafikon se postupno popunjava kako bi odgovarao postotnoj vrijednosti. Pokušajte kombinirati više modula brojača krugova na jednoj stranici kako biste dali svoje posjetitelji zabavan način da naučite više o svom poslu ili osobnim vještinama.
Kako dodati modul kružnog metra na svoju stranicu
Prije nego što dodate modul brojača krugova na svoju stranicu, prvo morate pristupiti Divi Builderu. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad izdavača svaki put kada stvorite novu stranicu.
Klikom na ovaj gumb možete aktivirati Divi Builder, koji će vam omogućiti pristup svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu rada.
Možete kliknuti i na gumb Koristite Visual Builder kada pregledavate web mjesto ako ste prijavljeni na svoju WordPress nadzornu ploču.
Jednom ušli u Visual Builder, možete kliknuti sivi gumb plus da biste dodali novi modul na svoju stranicu. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.
Pronađite modul kružnog brojila 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č krugova", a zatim pritisnuti enter za automatsko pretraživanje i dodavanje modula brojača krugova!
Nakon dodavanja modula, pozdravit će vas popis mogućnosti modula. Te su mogućnosti podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .
Koristite slučaj za prikaz ciljeva projekta u studiji slučaja
Jedan od najboljih načina korištenja modula brojača krugova je ilustracija statistika za studije slučaja ili stavke portfelja.
Jednostavno identificirajte svaki kružni mjerač s određenom projektnom funkcijom ili ciljem, tako da korisnik zna koje su usluge uključene u projekt. U ovom primjeru koristit ću modul "brojač krugova" za prikaz tri projektna cilja.
Kao što možete vidjeti na donjoj slici, vrh stranice uključuje tri cilja projekta pomoću modula Bar Counter, a dno stranice uključuje rezultate studije slučaja pomoću modula Counter Number .
Počnimo.
Upotrijebite vizualni graditelj za dodavanje standardnog odjeljka s rasporedom pune širine (1 stupac). Zatim u red dodajte modul brojača krugova.
Ažurirajte postavke brojača kruga na sljedeći način:
Opcije sadržaja
Naslov: Animacija
Broj: 80
% Znak: Da
Boja pozadine boja: #e07a5e
Mogućnosti dizajna
Boja kruga: #e07a5e
Boja teksta: tamno
Font naslova: Zadano
Veličina slova naslova: 26px
Boja teksta naslova: #405c60
Broj fonta: zadano
Veličina veličine slova: 46px
Boja teksta broja: #405c60
Spremite postavke
Sada duplicirajte modul brojača kruga dva puta i povucite svaku kopiju u drugi i treći stupac retka.
Budući da su vaši dizajnerski elementi preneseni u duplicirane module, trebate samo ažurirati naslov i broj kružnog brojila.
To je sve!
Posjetite stranicu.
Opcije sadržaja kružnog broja
Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, poput teksta, slika i ikona. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će biti na ovoj kartici.
Naslov
Unesite naslov brojača krugova. To je obično riječ koja predstavlja statistiku koju gledate. Bit će prikazan pod brojem u tortnom grafikonu.
ime
Postavite broj za kružni brojač. Odabirom broja manjeg od 100, grafikon kruga popunit će se do postotka jednakog broju koji ste unijeli. Na primjer, unos broja 20 ispunit će krug 20% vašom bojom naglaska.
Postotak znaka
Ovdje možete odabrati želite li dodati znak postotka nakon gore definiranog broja.
Boja pozadine trake
Ovo će promijeniti boju ispune trake. Količina boje ispune kontrolira se gore odabranim "brojem". Ako odaberete broj 50 i plavu boju, vaš će krug ispuniti 50% plavom bojom.
Oznaka uprave
Ovo će promijeniti oznaku modula u generatoru radi lakše identifikacije. Kada se koristi prikaz WireFrame u Visual Builderu, ove će se oznake pojaviti u bloku modula sučelja Divi Builder.
Opcije oblikovanja kružnih brojeva
Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ova kartica omogućuje vam izmjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete prilagoditi gotovo sve.
Boja kruga
Ovo je boja koja će se koristiti za nepopunjeni dio kruga (negativni prostor koji nije ispunjen bojom pozadine trake definiranom na kartici Sadržaj).
Neprozirnost boje kruga
Pomoću ove postavke možete smanjiti neprozirnost ispunjenog dijela kruga.
Boja teksta
Ovdje možete odabrati hoće li vaš tekst biti svijetli ili tamni. Ako radite s tamnom pozadinom, tekst bi trebao biti svijetli. Ako je vaša pozadina svijetla, tekst bi trebao biti crne boje.
Font naslova
Font teksta možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih 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 podebljane, kurzivne, velike i podcrtane opcije.
Veličina slova naslova
Ovdje možete prilagoditi veličinu teksta naslova. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti željenu vrijednost 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 ovu 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 teksta naslova, upotrijebite klizač intervala za podešavanje razmaka 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".
Visina naslovnice
Visina retka utječe na razmak između svakog retka teksta naslova. Ako želite povećati razmak između svakog retka, pomoću klizača intervala 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".
Policijski broj
Font teksta možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih 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 podebljane, kurzivne, velike i podcrtane opcije.
Veličina fonta broja
Ovdje možete prilagoditi veličinu svog numeriranog teksta. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti željenu vrijednost 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 broja
Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta, odaberite ovu boju iz alata za odabir boja pomoću ove opcije.
Razmak numeriranih slova
Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova teksta, pomoću klizača intervala 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".
Visina crte broja
Visina retka utječe na razmak između svakog retka digitalnog teksta. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite veličinu željenog prostora 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".
Napredne mogućnosti kružnog brojača
Na kartici Napredno 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. Također možete primijeniti prilagođene CSS klase i ID-ove na modul, 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 izborne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za stvaranje prilagođenog CSS stila. Možete dodati više klasa, odvojenih razmakom. Ovi razredi se mogu koristiti u vašem Divi tema Podređeni ili u prilagođenom CSS-u koji dodajete na svoju stranicu ili web mjesto pomoću Divi Theme Options ili Divi Builder Postavke stranice.
Prilagođeni CSS
Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih elemenata modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati CSS izravno u svaki element. CSS unosi u ovim postavkama već su ugrađeni sa stilskim oznakama. Dakle, morate unijeti 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 mobilni dizajn uklanjanjem nekih elemenata sa stranice.
To je sve za ovaj vodič.
