Kruhové počítadlo umožňuje zobrazit jednu statistiku esteticky příjemným způsobem. Při posouvání dolů se číslo odpočítává a výsečový graf se postupně plní, aby odpovídal procentuální hodnotě. Zkuste zkombinovat více modulů počítadla kruhů na jedné stránce, abyste získali svůj Návštěvníci zábavný způsob, jak se dozvědět o svém podnikání nebo osobních dovednostech.
Jak přidat modul kruhového měřiče na vaši stránku
Než budete moci přidat modul čítače kruhů na svou stránku, 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, pokud jste přihlášeni k ovládacímu panelu 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 kruhový měřicí modul v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů lze prohledávat, což znamená, že můžete také zadat slovo „počitadlo kruhů“ a poté kliknout na Enter pro automatické vyhledávání a přidání modulu počítadla kruhů!
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 počítadel kruhů je ilustrovat statistika pro případové studie nebo položky portfolia.
Jednoduše identifikujte každý kruhový měřič s konkrétní funkcí nebo cílem projektu, aby uživatel věděl, jaké služby jsou v projektu zahrnuty. V tomto příkladu použiji modul „počítadlo kruhů“ k zobrazení tří cílů projektu.
Jak můžete vidět na obrázku níže, v horní části stránky jsou uvedeny tři cíle projektu pomocí modulu Bar Counter a v dolní části stránky jsou výsledky případové studie s použitím modulu Counter Number .
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 počítadla kruhů.
Aktualizujte nastavení počítadla kruhů následovně:
Možnosti obsahu
Název: Animace
Číslo: 80
% Znamení: Ano
Bar pozadí baru: #e07a5e
Možnosti návrhu
Barva kruhu: #e07a5e
Barva textu: Tmavá
Písmo názvu: Výchozí
Název písma: 26px
Název textu Barva: #405c60
Číslo písma: výchozí
Velikost písma: 46px
Barva textu čísla: #405c60
Uložte nastavení
Nyní duplikujte modul počítadla kruhů a každou kopii přetáhněte do druhého a třetího sloupce řádku.
Protože byly vaše konstrukční prvky převedeny na duplicitní moduly, musíte pouze aktualizovat název a číslo kruhového měřiče.
A je to!
Navštivte stránku.
Kruhové volby obsahu čítače
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.
Titul
Zadejte název počítadla kruhů. Toto je obvykle slovo, které představuje statistiku, kterou prohlížíte. Zobrazí se pod číslem v koláčovém grafu.
název
Nastavte číslo pro kruhové počítadlo. Výběr čísla menšího než 100 vyplní kruhový graf v procentech rovných číslu, které jste zadali. Například zadání čísla 20 vyplní kruh 20% vaší akcentní barvou.
Znak procenta
Zde si můžete zvolit, zda se má znak procenta přidat za výše definované číslo.
Barva pozadí pruhu
Tím se změní barva výplně pruhu. Množství barvy výplně je řízeno výše uvedeným „číslem“. Pokud vyberete číslo 50 a modrou barvu, váš kruh vyplní 50% modrou barvou.
Štítek správy
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 kruhové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 kruhu
Toto je barva, která bude použita pro nevyplněnou část kruhu (negativní prostor, který není vyplněn barvou pozadí pruhu definovaného na kartě Obsah).
Neprůhlednost barvy kruhu
Pomocí tohoto nastavení můžete snížit neprůhlednost vyplněné části kruhu.
Barva textu
Zde můžete zvolit, zda má být 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ý.
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.
Policejní číslo
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
Zde můžete upravit velikost očíslovaného textu. 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 čísla
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, vyberte pomocí této možnosti požadovanou barvu ve výběru barev.
Mezery číslovaný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, 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 číselné řady
Výška řádku ovlivňuje mezeru mezi jednotlivými řádky digitálního textu. Chcete-li zvětšit mezeru mezi jednotlivými řádky, upravte mezeru pomocí posuvníku rozsahu nebo zadejte velikost požadovaného prostoru do vstupního pole napravo 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.
Pokročilé možnosti kruhového čítače
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ích stylů CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem Divi téma Child nebo ve vlastním CSS, které přidáte na svou stránku nebo web pomocí Divi Theme Options nebo Divi Builder Page Settings.
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.
