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.

cirkulárny príklad divi.png

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.

použite divi builder

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.

protikruh divi.png

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 .

príklad modul kruh divi animation.gif

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.

konfigurácia konfigurácie kruhu divi.png

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

animácia divi vytvorenie kruhu s grafickým divi.png

Uložte nastavenia

Teraz duplikujte modul počítadla kruhu a každú kópiu presuňte do druhého a tretieho stĺpca riadka.

skopírujte kruhový modul meter divi.png

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.

design counter divi builder.png

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.

kruhový modul content.png

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.

voľba kruhového počítadla divi.png

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.

číslo text divi builder circular counter.png

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.

písmená textu písmená divi.png

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.

pokročilé počítadlo divi.png

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.