Pruh vývoja je účinným prvkom vo webovom dizajne, ktorý na atraktívny spôsob informuje návštevníkov o pokroku projektu alebo cieľa. Elementor, ako jeden z najpopulárnejších pluginov na tvorbu stránok pre WordPress, ti poskytuje možnosť jednoducho integrovať pruh vývoja do svojich webových stránok. Táto príručka ťa prevedie jednotlivými krokmi, ako vytvoriť a nastaviť pruh vývoja v Elementore.
Najdôležitejšie poznatky
- Pruhy vývoja ponúkajú vizuálnu reprezentáciu pokroku a cieľov.
- Môžeš individuálne prispôsobiť nadpisy, hodnoty a farby.
- Text vnútri môže byť voliteľne zobrazený alebo skrytý.
- Sú k dispozícii rôzne štýly a možnosti prispôsobenia, aby sa pruh zladiť s tvojím dizajnom.
Postup krok za krokom
Najskôr otvor svoju stránku WordPress a prejdi do editoru Elementor. Tam môžeš pridať nový prvek a vybrať si pruh vývoja.
Teraz si pripravený zadať nadpis svojho pruhu vývoja. Premysli si vhodný nadpis, ako napríklad "Cieľ tržieb". Týmto už návštevníkom poskytuješ prvú informáciu o tom, o čo ide.
V ďalšom kroku musíš nastaviť cieľ alebo oznámenie o úspechu. Premysli si, čo presne chceš zobraziť a napíš to do určeného poľa. Týmto krokom pomáhaš urobiť pruh vývoja pre používateľov zrozumiteľným.
Teraz môžeš nastaviť farbu pruhu vývoja. To nie je povinné, ale je to dobrá príležitosť prispôsobiť dizajn. Môžeš si vybrať odtieň, ktorý bude ladí s celkovým dizajnom tvojej webovej stránky.
Potom prejdi k percentuálnym údajom. Tu môžeš nastaviť svoj pokrok, napríklad na 40%. Pamätaj si, že maximálna hodnota môže byť 100% a minimálna hodnota 0%. Táto spätná väzba pomôže tvojim návštevníkom rýchlo pochopiť pokrok.
Percentuálne číslo môže byť zobrazené alebo skryté. Často to vyzerá lepšie, ak text skryješ, najmä ak preferuješ čistý dizajn. Premysli, ktorá možnosť je pre tvoj projekt najvhodnejšia.
Ak chceš, môžeš pridať aj vnútorný text obsahujúci percentá. Táto funkcia je užitočná, keď chceš okamžite ukázať pokrok. Ak sa rozhodneš proti vnútornému textu, môžeš tu aj číslo skryť.
Teraz prichádza na rad štýl pruhu vývoja. Môžeš si farbu pruhu, pozadie pre nenaplnenú oblasť a výšku pruhu individuálne prispôsobiť. Vyber tmavo zelený odtieň pre naplnenú oblasť a neutrálne pozadie pre prehľadný vzhľad.
Môžeš aj zaobliť rohy pruhu vývoja, takže bude mať pruh príťažlivejšiu formu. Pamätaj, že rohy môžu byť zaoblené len vpredu, kým pokrok nedosiahne 100 %.
Ak chceš prispôsobiť vnútorný text, môžeš tu tiež zmeniť farbu a typografiu. Možno sa rozhodneš vypnúť písmo, aby bol dôraz na pokrok.
Nakoniec prichádzaš k rozšíreným nastaveniam, kde môžeš prispôsobiť farbu textu a štýl textu pre nadpis. Čierny tučný nadpis s voliteľným tieňom zabezpečí, že tvoj nadpis pritiahne pozornosť.
Ak si uložil svoje zmeny, prejdi na svoju stránku, aby si videl výsledok. Možno sa rozhodneš zobraziť percentuálnu hodnotu. Ak nie, pruh vývoja sa stále zobrazí atraktívne.
Teraz tvoj pruh vývoja zobrazuje stanovenú hodnotu, bez toho aby sa animoval z nuly nahor. Namiesto toho sa pokrok okamžite vizualizuje.
Ak používaš profesionálnu verziu Elementoru, budeš mať k dispozícii aj dynamické atribúty. Táto funkcia je špeciálne užitočná pre prispôsobenie pruhov vývoja na základe externých údajov alebo dokonca hodnôt z databázy.
Zhrnutie
V tejto príručke si sa naučil, ako vytvoriť a prispôsobiť pruh vývoja v Elementore. Môžeš nastaviť nadpisy a pokrok, vybrať farby a vykonať rôzne úpravy, aby si integroval atraktívny a efektívny pruh vývoja.
Často kladené otázky
Ako vytvorím pruh vývoja v Elementore?V Elementore vyber pruh vývoja a pridaj svoj nadpis a hodnoty vývoja.
Môžem zmeniť farby pruhu vývoja?Áno, môžeš individuálne prispôsobiť farbu pruhu vývoja a pozadia.
Aký je prospech vnútorného textu v pruhu vývoja?Vnútorný text jasnejšie zobrazuje pokrok a pomáha pochopiť informácie na prvý pohľad.
Ako uložím zmeny, ktoré som urobil?Keď urobíš všetky úpravy, ulož ich, aby boli viditeľné na tvojej webovej stránke.
Sú v profesionálnej verzii Elementoru špeciálne funkcie?Áno, profesionálna verzia ponúka rozšírené možnosti ako dynamické atribúty, ktoré môžeš využiť na ďalšie prispôsobenie pruhov vývoja.
