Vytváření atraktivních webových stránek je v dnešní digitální krajině nezbytné. Elementor, široce používaný Page-Builder pro WordPress, nabízí různé widgety k vytváření atraktivních designů. Jedním z užitečných nástrojů je Icon-Box, který vám umožňuje vizuálně strukturovat obsah. V této příručce se podrobně ponoříme do funkcí Icon-Box a ukážeme vám krok za krokem, jak ji efektivně používat ve vašich projektech.
Nejdůležitější poznatky
- Icon-Box používá ikony místo obrázků, ale nabízí méně možností úprav.
- V textových polích může být použit HTML k umožnění speciálních formátování.
- Barva a velikost ikon jsou upravitelné, stejně jako jejich zarovnání a efekty při najetí myší.
Postupný návod k použití Icon-Box
1. Výběr Icon-Boxu
Nejprve otevřete svůj Elementor-editor. Chcete-li použít Icon-Box, jednoduše ji přetáhněte z nabídky widgetů na svůj design. Tuto možnost najdete v menu Elementor na levé straně. Icon-Box je obvykle k dispozici v sekci „Prvky”.
2. Porozumění základům Icon-Boxu
Icon-Box se skládá ze dvou hlavních prvků: ikony a textu. Na rozdíl od obrázku, kde máte více možností úprav, jsou možnosti ikon trochu omezenější. Ikona je zobrazena uprostřed a pod ní se nachází nadpis a popisný text.
3. Výběr ikony a úprava textu
Po vložení Icon-Boxu vyberte požadovanou ikonu. Klikněte na pole ikony a prohlédněte si dostupné ikony. Například vyberte ikonu vlaku, abyste přidali tématický prvek do vašeho designu.
Následně přidejte požadovaný nadpis a popisný text. Zde může být užitečné použití HTML, například k zahájení nového řádku po textovém bloku vložením tagů
.
4. Úpravy nastavení
Icon-Box nabízí některé možnosti úprav, včetně velikosti a barvy ikon. V nastavení můžete určit, jak je ikona zarovnána ve vztahu k textu: vlevo, uprostřed nebo vpravo. Experimentujte s mezerami, aby text vypadal dobře a přehledně.
Máte také možnost definovat efekty při najetí myší pro ikonu. Například můžete změnit barvu při najetí myší, abyste získali zajímavou vizuální zpětnou vazbu.
5. Typografie a barvy
K zlepšení čitelnosti můžete upravit typografii textu. Změňte velikost písma, písmo a barvu pro nadpis a popisný text. Dbejte na to, aby barvy ladily s celkovým vzhledem vašich webových stránek. To zajistí kohérentní design.
Barvy nejsou jediné možnosti úprav; můžete také ovládat mezery mezi ikonou, nadpisem a popisným textem. Optimalizujte tyto mezery, aby se zvýšila čitelnost a vizuální rovnováha boxu.
6. Uložení a náhled
Pokud jste spokojeni se svým designem, uložte své změny. Chcete-li zkontrolovat, zda vše vypadá tak, jak si přejete, klikněte na náhled. Zde můžete vidět, jak je Icon-Box zobrazen na vašich webových stránkách.
S posledním pohledem na váš design uvidíte, zda vypadá zarovnaně, s mezerami a s efekty při hoveru. V případě potřeby upravte drobnosti, než webovou stránku zveřejníte.
Závěr
Icon-Box v Elementoru představuje skvělý způsob, jak vizuálně prezentovat informace. Seznamte se s výběrem ikon, úpravou textu a úpravou zobrazení. S vhodnými nastaveními můžete svou webovou stránku nejen funkční, ale i esteticky přitažlivou.
Často kladené otázky
Jak vyberu ikonu?Klikni na políčko ikony v poli ikony a prohlédni si dostupné ikony.
Mohu vložit HTML do popisných částí pole ikony?Ano, můžeš použít HTML k tomu, abys mohl například vložit nové řádky nebo odkazy.
Jsou nastavení pole ikony upravitelná?Ano, můžeš upravit velikost, barvu, mezery a zarovnání ikony i textu.
Jak mohu nastavit efekt chování myší pro ikonu?V nastavení pole ikony můžeš definovat barvy pro pohyb myši.
