Animirani brojači zabavan su i učinkovit način prikaza statistika vašem posjetitelji. Animacija se pokreće odgođenim učitavanjem kako bi navigacija stranicom bila stvarno zanimljiva. Unutar ovog modula možete postaviti onoliko brojača koliko želite.
Kako dodati modul brojača trake na svoju stranicu
Prije nego što dodate modul šanka na svoju stranicu, prvo ćete morati 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 stranicu sučelja, ako ste povezani 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 brojača traka 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č "Bar brojač", a zatim kliknuti enter za automatsko pretraživanje i dodavanje modula brojača šankova!
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 za korištenje modula Bar Counters je ilustriranje statistika za studije slučaja. Jednostavno označite svaku traku specifičnom projektnom funkcijom ili svrhom kako bi korisnik znao koje su usluge uključene u projekt. U ovom primjeru koristim modul trake za prikaz tri cilja projekta.
Kao što vidite, 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" Broj ”.
Počnimo.
Upotrijebite vizualni graditelj za dodavanje standardnog odjeljka s rasporedom pune širine (1 stupac). Zatim u red dodajte modul brojača šankova.
Ažurirajte parametre šankova na sljedeći način:
Opcije sadržaja
Postoci upotrebe: UKLJ
Boja pozadine: #dddddd
Boja pozadine trake: # e07a5e
Mogućnosti dizajna
Boja teksta: tamna
Font naslova: zadano
Veličina slova naslova: 20px
Tekst teksta u tekstu: # 405c60
Visina retka naslova: 2em
Font postotaka: zadano
Postotak veličine fonta: 16px
Postotak Boja teksta: #ffffff
Postotak visine linije: 2.5em
Sada se vratite na karticu Sadržaj i odaberite + Dodaj novu stavku za dodavanje prvog šanka brojača modulu.
Ažurirajte postavke pojedinačnog modula na sljedeći način:
Kartica Sadržaj
Naslov: Moj naslov
Postotak: 80
Spremite postavke
Dodajte dva dodatna brojača traka u modul i svakom dodajte naslov i postotak.
To je sve!
Opcije sadržaja barskih brojeva
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.
Postoci upotrebe
Prema zadanim postavkama postoci se prikazuju na brojaču traka u boji. Pomoću ove postavke ovaj se tekst može isključiti, omogućujući vizualni trakasti grafikon da govori sam za sebe.
Boja pozadine
Ova vam opcija omogućuje podešavanje boje pozadine svakog brojača traka. Ova se postavka odnosi na negativni prostor iza boje ispunjene trake.
Boja pozadine trake
Ova vam opcija omogućuje podešavanje boje pozadine ispunjene trake. Ova se boja pozadine preklapa s prethodnom postavkom boje pozadine.
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.
Bar Counter Design Mogućnosti
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 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. Možete dodatno prilagoditi boju teksta pomoću dodatnih opcija boja teksta koje slijede.
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".
Postotak teksta
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.
Postotak veličine fonta
Ovdje možete prilagoditi veličinu teksta u postocima. 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".
Postotak boje teksta
Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta u postocima, odaberite ovu boju u alatu za odabir boja pomoću ove opcije.
Postotak razmaka slova
Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova teksta kao postotak, upotrijebite klizač intervala za podešavanje prostora ili unesite veličinu prostora koji želite 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 postotka
Visina retka utječe na razmak između svakog retka teksta kao postotak. Ako želite povećati razmak između svakog retka, upotrijebite klizač intervala za podešavanje prostora ili unesite željenu veličinu 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".
Granični polumjer
Primjenom radijusa obruba zaokružit će kutove šipke na šanku. Što je veći radijus obruba, to su kutovi zaobljeniji.
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, npr. Em, vh, vw itd.
Granični stil
Granice podržavaju osam različitih stilova, uključujući: pune, točkaste, točkaste, dvostruke, žlijeb, greben, umetak i početak. Na padajućem izborniku odaberite stil koji želite primijeniti na vašu granicu.
Popunjavanje trake
Padding je prostor dodan unutar vašeg modula, između ruba modula i njegovih unutarnjih elemenata. Ovdje možete dodati prilagođene gornje i donje obloge na šipkasti modul.
Napredne mogućnosti brojača traka
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 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 razrede mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS-u 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 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č.
