Animované počítadlá predstavujú zábavný a efektívny spôsob zobrazenia štatistika tvojmu Návštevníci. Animáciu spúšťa lenivé načítanie, aby bola navigácia po stránke skutočne zaujímavá. Do tohto modulu môžete umiestniť toľko počítadiel, koľko chcete.
Ako pridať modul počítadla barov na svoju stránku
Skôr ako budete môcť na svoju stránku pridať modul počítadla barov, musíte najskôr vstúpiť do Divi Builder. Raz Divi téma nainštalovaný na vašom webe, všimnete si tlačidlo Použite nástroj Divi Builder nad vydavateľom pri každom vytvorení novej stránky.
Kliknutím na toto tlačidlo môžete aktivovať program Divi Builder, ktorý vám umožní prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime.
Môžete tiež kliknúť na tlačidlo Použite Visual Builder pri prehliadaní webových stránok v klientskom rozhraní, ak ste pripojení k dashboardu WordPress.
Po zadaní do programu Visual Builder môžete kliknutím na sivé tlačidlo plus pridať nový modul na svoju stránku. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite na svoju stránku najskôr pridať riadok. .
Vyhľadajte modul počítadla tyčí v zozname modulov a kliknutím na neho ho pridajte na svoju stránku. Zoznam modulov je prehľadávateľný, čo znamená, že môžete tiež napísať slovo „Barový pult“ a potom kliknúť na Enter, aby ste automaticky vyhľadali a pridali modul barového pultu!
Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .
Prípad použitia na zobrazenie cieľov projektu v prípadovej štúdii
Jedným z najlepších spôsobov použitia modulu Bar Counters je ilustrovať štatistika pre prípadové štúdie. Jednoducho označte každú lištu špecifickou funkciou projektu alebo účelom, aby používateľ vedel, aké služby sú zahrnuté v projekte. V tomto príklade používam modul bar na zobrazenie troch cieľov projektu.
Ako vidíte, horná časť stránky obsahuje tri ciele projektu pomocou modulu „Bar Counter“ a dolná časť stránky obsahuje výsledky prípadovej štúdie s použitím modulu „Counter“. Číslo “.
Začnime.
Pomocou vizuálneho nástroja na pridanie štandardnej sekcie s rozložením na celú šírku (1 stĺpec). Potom do riadku pridajte modul počítadla tyčí.
Aktualizujte parametre počítadiel čiar takto:
Možnosti obsahu
Percento použitia: ZAPNUTÉ
Farba pozadia: #dddddd
Farba pozadia pruhu: # e07a5e
Možnosti návrhu
Farba textu: tmavá
Písmo názvu: predvolené
Veľkosť písma titulu: 20px
Názov textu Farba: # 405c60
Výška riadku nadpisu: 2em
Percentuálne písmo: predvolené
Percento Veľkosť písma: 16px
Percento Farba textu: #ffffff
Percento výšky linky: 2.5em
Teraz sa vráťte na kartu Obsah a vyberte + Pridať novú položku pridajte prvý čítač stĺpikov k modulu.
Aktualizujte nastavenia jednotlivých modulov takto:
Karta Obsah
Názov: Môj titul
Percentuálny podiel: 80
Uložte nastavenia
Pridajte k modulu ďalšie dva počítadlá barov a každému z nich zadajte názov a percento.
A je to!
Možnosti obsahu počítadla barov
Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo Vo vašom module sa vždy zobrazí táto karta.
Percentá použitia
V predvolenom nastavení sú percentá zobrazené na počítadle farebných pruhov. Tento text je možné vypnúť pomocou tohto nastavenia, ktoré umožňuje vizuálnemu stĺpcovému grafu hovoriť za všetko.
Farba pozadia
Táto možnosť vám umožňuje upraviť farbu pozadia každého počítadla pruhov. Toto nastavenie sa vzťahuje na negatívny priestor za farbou vyplneného pruhu.
Farba pozadia pruhu
Táto možnosť vám umožňuje upraviť farbu pozadia vyplneného pruhu. Táto farba pozadia sa prekrýva s predchádzajúcim nastavením farby pozadia.
Administračný štítok
Toto zmení štítok modulu v generátore pre ľahšiu identifikáciu. Pri použití pohľadu WireFrame vo Visual Builderi sa tieto štítky zobrazia v modulovom bloku rozhrania Divi Builder.
Možnosti návrhu čítačky čiar
Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Táto karta umožňuje upraviť vzhľad vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete vyladiť takmer čokoľvek.
Farba textu
Tu si môžete zvoliť, či bude váš text svetlý alebo tmavý. Ak pracujete na tmavom pozadí, text by mal byť svetlý. Ak je vaše pozadie svetlé, text by mal byť čierny. Farbu textu môžete ďalej prispôsobiť pomocou ďalších možností farieb textu, ktoré nasledujú.
Písmo názvu
Písmo svojho textu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami úžasných typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné, kurzíva, veľké písmená a podčiarknutie.
Veľkosť písma titulu
Tu môžete upraviť veľkosť textu nadpisu. Posunutím posúvača intervalu môžete zväčšiť alebo zmenšiť veľkosť textu alebo môžete priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa napravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od svojej veľkosti.
Farba textu titulu
V predvolenom nastavení sú všetky farby textu v Divi zobrazené v bielej alebo tmavošedej farbe. Ak chcete zmeniť farbu textu svojho nadpisu, vyberte pomocou tejto možnosti preferovanú farbu vo výbere farieb.
Rozmiestnenie hlavných písmen
Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami textu nadpisu, upravte medzeru pomocou posúvača intervalu alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od svojej veľkosti.
Výška riadku názvu
Výška riadku ovplyvňuje medzeru medzi každým riadkom textu nadpisu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača intervalu alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od svojej veľkosti.
Percento textu
Písmo svojho textu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami úžasných typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučného písma, kurzívy, veľkých písmen a podčiarknutia.
Percentuálna veľkosť písma
Tu môžete upraviť veľkosť textu v percentách. Posunutím posúvača intervalu môžete zväčšiť alebo zmenšiť veľkosť textu alebo môžete priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa napravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od svojej veľkosti.
Percento farby textu
V predvolenom nastavení sú všetky farby textu v Divi zobrazené v bielej alebo tmavošedej farbe. Ak chcete zmeniť farbu textu v percentách, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.
Percentuálne rozmiestnenie písmen
Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi každým písmenom textu v percentách, pomocou posuvníka intervalu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od svojej veľkosti.
Výška percentuálnej línie
Výška riadku ovplyvňuje percento medzi každým riadkom textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača intervalu alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od svojej veľkosti.
Polomer okrajov
Použitie polomeru ohraničenia zaoblí rohy pruhu v počítadle pruhov. Čím väčší je polomer hranice, tým sú rohy zaoblenejšie.
Použite okraj
Povolenie tejto možnosti umiestni orámovanie okolo vášho modulu. Túto hranicu je možné prispôsobiť pomocou nasledujúcich podmienených parametrov.
Farba hranice
Táto možnosť ovplyvňuje farbu vášho orámovania. Vyberte vlastnú farbu z výberu farieb a použite ju na svoje orámovanie.
Šírka hranice
V predvolenom nastavení sú hranice široké 1 pixel. Túto hodnotu môžete zvýšiť presunutím jazdca rozsahu alebo zadaním vlastnej hodnoty do vstupného poľa vpravo od jazdca. Podporované vlastné jednotky merania, čo znamená, že môžete zmeniť predvolenú jednotku z „px“ na inú, napr. Em, vh, vw atď.
Štýl hraníc
Okraje podporujú osem rôznych štýlov vrátane: plný, bodkovaný, bodkovaný, dvojitý, drážka, hrebeň, vložka a štart. Z rozbaľovacej ponuky vyberte požadovaný štýl a aplikujte ho na svoje orámovanie.
Vycpávka baru
Výplň je priestor pridaný do vášho modulu medzi okrajom modulu a jeho vnútornými prvkami. Tu môžete do modulu tyče pridať vlastné horné a spodné polstrovanie.
Rozšírené možnosti počítadla čiar
Na karte Pokročilé nájdete možnosti, ktoré sa môžu hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.
CSS ID
Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.
Triedu CSS
Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžu byť použité vo vašej podradenej téme Divi alebo vo vlastných CSS, ktoré pridáte na svoju stránku alebo web pomocou možností témy Divi alebo nastavenia stránky Divi Builder.
Vlastné CSS
Vlastné CSS možno použiť aj na modul a na ktorékoľvek z vnútorných prvkov modulu. V sekcii Vlastné CSS nájdete textové pole, kde môžete pridať CSS priamo ku každému prvku. Položky CSS v týchto nastaveniach sú už vložené so značkami štýlov. Musíte teda iba zadať pravidlá CSS oddelené bodkočiarkami.
viditeľnosť
Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.
To je pre tento návod všetko.
