Kruhové počítadlo umožňuje zobraziť jednu štatistiku esteticky príjemným spôsobom. Pri posúvaní nadol sa číslo odpočítava a koláčový graf sa postupne naplní tak, aby zodpovedal percentuálnej hodnote. Skúste skombinovať viacero modulov počítadla kruhov na jednej stránke Návštevníci zábavný spôsob, ako sa dozvedieť o svojich obchodných alebo osobných zručnostiach.
Ako pridať modul kruhového metra na svoju stránku
Skôr ako budete môcť na svoju stránku pridať modul počítadla kruhov, 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, ak ste prihlásení na informačný panel 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 kruhového metra v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname modulov je možné vyhľadávať, čo znamená, že môžete tiež napísať slovo „počítadlo kruhov“ a potom kliknúť na kláves Enter, aby ste automaticky vyhľadali a pridali modul počítadla kruhov!
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 počítadiel kruhov je ilustrácia štatistika pre prípadové štúdie alebo položky portfólia.
Jednoducho identifikujte každý kruhový meter s konkrétnou funkciou alebo cieľom projektu, aby používateľ vedel, ktoré služby sú v projekte zahrnuté. V tomto príklade použijem modul „počítadlo kruhov“ na zobrazenie troch cieľov projektu.
Ako môžete vidieť na obrázku nižšie, 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 Number .
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 kruhov.
Aktualizujte nastavenia počítadla kruhu takto:
Možnosti obsahu
Názov: Animácia
Číslo: 80
Znamenie%: Áno
Bar pozadia baru: # e07a5e
Možnosti návrhu
Farba kruhu: # e07a5e
Farba textu: tmavá
Písmo názvu: Predvolené
Veľkosť písma titulu: 26px
Názov textu Farba: #405c60
Číslo písma: Predvolené
Veľkosť písma veľkosti: 46px
Farba textu čísla: #405c60
Uložte nastavenia
Teraz duplikujte modul počítadla kruhu a každú kópiu presuňte do druhého a tretieho stĺpca riadka.
Pretože vaše konštrukčné prvky boli prenesené do duplikovaných modulov, musíte aktualizovať iba názov a číslo kruhového merača.
A je to!
Navštívte stránku.
Možnosti obsahu kruhového počítadla
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.
Názov
Zadajte názov počítadla kruhu. Toto je zvyčajne slovo, ktoré predstavuje štatistiku, ktorú si prezeráte. Bude sa zobrazovať pod číslom v koláčovom grafe.
názov
Nastavte číslo pre kruhové počítadlo. Výberom čísla menšieho ako 100 sa kruhový graf vyplní na percentuálny podiel rovný číslu, ktoré ste zadali. Napríklad zadanie čísla 20 vyplní kruh 20% farbou zvýraznenia.
Znak percenta
Tu si môžete zvoliť, či sa má znak percenta pridať za vyššie definované číslo.
Farba pozadia pruhu
Týmto sa zmení farba výplne pruhu. Množstvo farby výplne sa riadi vyššie vybraným „číslom“. Ak vyberiete číslo 50 a modrú farbu, váš kruh vyplní 50% modrou farbou.
Štítok správy
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 kruhového počítadla
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 kruhu
Toto je farba, ktorá sa použije pre nevyplnenú časť kruhu (negatívny priestor, ktorý nie je vyplnený farbou pozadia pruhu definovaného na karte Obsah).
Nepriehľadnosť farby kruhu
Týmto nastavením môžete znížiť nepriehľadnosť vyplnenej časti kruhu.
Farba textu
Tu môžete zvoliť, či má byť 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.
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.
Policajné číslo
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
Tu môžete upraviť veľkosť očíslovaného textu. 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 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.
Farba textu čísla
V predvolenom nastavení sú všetky farby textu v Divi zobrazené v bielej alebo tmavošedej farbe. Ak chcete zmeniť farbu textu, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.
Medzery číslovaný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, 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 číselnej čiary
Výška riadku ovplyvňuje medzeru medzi jednotlivými riadkami digitálneho textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, pomocou posúvača rozsahu upravte medzeru alebo zadajte veľkosť požadovaného priestoru 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.
Pokročilé možnosti kruhového počítadla
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 možno použiť triedu CSS. Môžete pridať viacero tried oddelených medzerou. Tieto triedy môžu byť použité vo vašom Divi téma Child alebo vo vlastnom CSS, ktoré pridáte na svoju stránku alebo web pomocou Divi Theme Options alebo Divi Builder Page Settings.
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.