Animované počítadla představují zábavný a efektivní způsob zobrazení statistika tvému Návštěvníci. Animace se spouští líným načítáním, aby byla navigace po stránce opravdu zajímavá. Do tohoto modulu můžete umístit tolik žetonů, kolik chcete.
Jak přidat modul počítadla barů na vaši stránku
Než budete moci na svou stránku přidat modul počítadla barů, musíte nejprve otevřít Divi Builder. Jednou Divi téma nainstalované na vašem webu, všimnete si tlačítka Použijte nástroj Divi Builder nad vydavatelem pokaždé, když vytvoříte novou stránku.
Kliknutím na toto tlačítko budete moci aktivovat Divi Builder, který vám umožní přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru v vizuálním režimu.
Můžete také kliknout na tlačítko Použijte Visual Builder když procházíte svůj web na frontendu, pokud jste připojeni k dashboardu WordPress.
Po zadání do Visual Builderu můžete kliknutím na šedé tlačítko plus přidat na stránku nový modul. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek. .
Vyhledejte modul počítadla barů v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů je prohledávatelný, což znamená, že můžete také zadat slovo „Barový pult“ a poté kliknout na Enter pro automatické vyhledávání a přidání modulu barového pultu!
Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .
Použít případ k zobrazení cílů projektu v případové studii
Jedním z nejlepších způsobů použití modulu Bar Counters je ilustrovat statistika pro případové studie. Jednoduše označte každý pruh konkrétní funkcí projektu nebo účelem, aby uživatel věděl, jaké služby jsou v projektu zahrnuty. V tomto příkladu používám modul bar k zobrazení tří cílů projektu.
Jak vidíte, v horní části stránky jsou uvedeny tři cíle projektu využívající modul „Bar Counter“ a v dolní části stránky jsou výsledky případové studie využívající modul „Counter“ Číslo “.
Začněme.
Pomocí vizuálního nástroje přidejte standardní sekci s rozložením celé šířky (1 sloupec). Poté přidejte do řádku modul čítačů tyčí.
Aktualizujte parametry čítačů sloupců takto:
Možnosti obsahu
Procento použití: ZAPNUTO
Barva pozadí: #dddddd
Barva pozadí pruhu: # e07a5e
Možnosti návrhu
Barva textu: Tmavá
Písmo názvu: výchozí
Název písma: 20px
Název textu Barva: # 405c60
Výška řádku názvu: 2em
Procentní písmo: výchozí
Procentní velikost písma: 16px
Procento Barva textu: #ffffff
Výška procentuální čáry: 2.5em
Nyní se vraťte na kartu Obsah a vyberte + Přidat novou položku přidat prvního čítače čárových kódů k modulu.
Aktualizujte jednotlivá nastavení modulu následujícím způsobem:
Karta Obsah
Název: Můj titul
Procento: 80
Uložte nastavení
Přidejte do modulu další dva čítače sloupců a každému z nich dejte název a procento.
A je to!
Možnosti obsahu čítače lišty
Na kartě Obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co Ve vašem modulu se vždy zobrazí tato karta.
Procenta použití
Ve výchozím nastavení se procenta zobrazují na počítadle barevných pruhů. Tento text lze vypnout pomocí tohoto nastavení, což umožňuje vizuálnímu sloupcovému grafu mluvit za vše.
Barva pozadí
Tato možnost umožňuje upravit barvu pozadí každého počítadla pruhů. Toto nastavení se vztahuje na záporný prostor za barvou vyplněného pruhu.
Barva pozadí pruhu
Tato možnost umožňuje upravit barvu pozadí vyplněného pruhu. Tato barva pozadí se překrývá s předchozím nastavením barvy pozadí.
Administrační štítek
Tím se změní štítek modulu v generátoru pro snadnou identifikaci. Při použití pohledu WireFrame ve Visual Builderu se tyto štítky objeví v bloku modulu rozhraní Divi Builder.
Možnosti návrhu barového čítače
Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Tato karta umožňuje upravit vzhled vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, pomocí kterého můžete vyladit téměř cokoli.
Barva textu
Zde si můžete vybrat, zda bude váš text světlý nebo tmavý. Pokud pracujete s tmavým pozadím, měl by být váš text světlý. Pokud je pozadí světlé, měl by být text černý. Barvu textu můžete dále přizpůsobit pomocí dalších možností barev textu, které následují.
Font písma
Písmo textu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami úžasných písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Můžete také přizpůsobit styl textu pomocí možností tučně, kurzíva, velká a podtržená.
Velikost písma titulku
Zde můžete upravit velikost textu nadpisu. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu, nebo můžete přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.
Barva textu titulku
Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu nadpisu, vyberte pomocí této možnosti preferovanou barvu ve výběru barev.
Rozestup hlavních písmen
Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem textu nadpisu, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.
Výška řádku názvu
Výška řádku ovlivňuje mezeru mezi každým řádkem textu nadpisu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.
Procento textu
Písmo textu můžete změnit výběrem požadovaného písma z rozevírací nabídky. Divi přichází s desítkami úžasných písem využívajících písma Google. Ve výchozím nastavení používá Divi písmo Open Sans pro veškerý text na vaší stránce. Můžete také přizpůsobit styl textu pomocí možností tučně, kurzíva, velká a podtržená.
Procentní velikost písma
Zde můžete upravit velikost textu v procentech. Posunutím posuvníku intervalu můžete zvětšit nebo zmenšit velikost textu, nebo můžete přímo zadat požadovanou hodnotu velikosti textu do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.
Procento barvy textu
Ve výchozím nastavení se všechny barvy textu v souboru Divi zobrazují v bílé nebo tmavě šedé barvě. Pokud chcete změnit barvu textu v procentech, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.
Percento roztečení písmen
Mezery mezi písmeny ovlivňují mezeru mezi jednotlivými písmeny. Chcete-li zvětšit mezeru mezi každým písmenem textu v procentech, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.
Výška procentní čáry
Výška řádku ovlivňuje mezeru mezi jednotlivými řádky textu v procentech. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku intervalu nebo zadejte požadovanou velikost mezery do vstupního pole vpravo od posuvníku. Vstupní pole podporují různé měrné jednotky, což znamená, že můžete zadat „px“ nebo „em“ podle své velikosti a změnit typ jednotky.
Poloměr hranice
Použití poloměru ohraničení zaoblí rohy pruhu v počítadle pruhů. Čím větší je poloměr ohraničení, tím zaoblenější rohy.
Použijte okraj
Povolením této možnosti umístíte ohraničení kolem vašeho modulu. Toto ohraničení lze přizpůsobit pomocí následujících podmíněných parametrů.
Barva hranice
Tato možnost ovlivňuje barvu ohraničení. Vyberte vlastní barvu z výběru barev a použijte ji na svůj okraj.
Šířka hranice
Ve výchozím nastavení jsou ohraničení široká 1 pixel. Tuto hodnotu můžete zvýšit přetažením posuvníku rozsahu nebo zadáním vlastní hodnoty do vstupního pole vpravo od posuvníku. Podporované vlastní měrné jednotky, což znamená, že můžete změnit výchozí jednotku z „px“ na něco jiného, např. Em, vh, vw atd.
Styl okraje
Okraje podporují osm různých stylů, včetně: plný, tečkovaný, tečkovaný, dvojitý, drážka, hřeben, vložka a začátek. Z rozevírací nabídky vyberte požadovaný styl a použijte jej na svůj okraj.
Padání baru
Výplň je prostor přidaný uvnitř vašeho modulu mezi okraj modulu a jeho vnitřní prvky. Zde můžete do modulu tyče přidat vlastní horní a dolní polstrování.
Rozšířené možnosti čítače lišty
Na kartě Upřesnit najdete možnosti, které mohou zkušenější weboví designéři považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.
CSS ID
Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.
CSS třídy
Zadejte volitelné třídy CSS, které chcete pro tento modul použít. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastních CSS, které přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení stránky Divi Builder.
Vlastní CSS
Vlastní CSS lze také použít na modul a kterýkoli z interních prvků modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již vloženy do značek stylů. Musíte tedy zadat pravidla CSS oddělená středníky.
viditelnost
Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé moduly na různých zařízeních nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.
To je pro tento tutoriál vše.
