Ak chcete, aby váš web pôsobil profesionálne, jednotne a vizuálne prepracovane, musíte mať nastavené globálne štýly. Tie určujú, ako sa budú zobrazovať všetky texty, tlačidlá, odkazy a farby naprieč celým webom. Namiesto ručného nastavovania každého prvku zvlášť vám Elementor umožňuje spravovať dizajn centrálne – na jednom mieste. Tento článok vám krok za krokom ukáže, ako globálne štýly fungujú a ako ich využiť naplno.
Všetky weby, ktoré tvoríme na webka.net, sú postavené na Elementor PRO. Klienti si vďaka tomu môžu ľahko meniť farby, písma či štýly na celom webe jediným kliknutím – bez nutnosti zasahovať do kódu.
1. Čo sú globálne štýly v Elementore
Globálne štýly predstavujú centrálny systém dizajnových pravidiel, ktoré ovplyvňujú vzhľad všetkých prvkov na stránke. Namiesto úprav jednotlivých tlačidiel, nadpisov alebo farieb môžete všetko nastaviť raz – a Elementor tieto štýly automaticky aplikuje na celý web.
Medzi globálne štýly patria:
- Globálne farby – definujú farebnú paletu webu (hlavná, doplnková, textová a zvýrazňujúca farba).
- Globálna typografia – určuje písmo, veľkosť, hrúbku a štýl pre nadpisy a texty.
- Globálne štýly tlačidiel – rovnaký dizajn všetkých CTA prvkov (farba, okraje, efekty).
- Téma štýlu (Theme Style) – pokročilé nastavenia vzhľadu, ktoré sa aplikujú na celý web (napr. odkazy, formuláre, farby pozadia).
2. Kde nájdete nastavenia globálnych štýlov
Otvorte ľubovoľnú stránku v Elementore a kliknite na ikonu ☰ (hamburger menu) v ľavom hornom rohu. Potom vyberte položku Webové nastavenia (Site Settings). Tu nájdete všetky kategórie globálnych štýlov:
- Globálne farby (Global Colors)
- Globálna typografia (Global Fonts)
- Štýl (Theme Style)
- Tlačidlá (Buttons)
- Formuláre (Form Fields)
Všetky tieto možnosti sú dostupné aj v bezplatnej verzii Elementoru, ale Elementor PRO ich rozširuje o dynamické štýly, podmienky a integráciu s Theme Builderom.
3. Nastavenie globálnych farieb
Farby sú základom každej vizuálnej identity. V Elementore môžete nastaviť vlastnú paletu farieb, ktorú potom použijete na celom webe.
Postup:
- V Site Settings kliknite na Globálne farby.
- Uvidíte štyri základné kategórie:
- Primary – hlavná farba webu (napr. farba tlačidiel, ikon, odkazov).
- Secondary – doplnková farba (napr. pre pozadie sekcií).
- Text – farba textu a nadpisov.
- Accent – zvýrazňujúca farba (napr. pri hover efektoch).
- Farbu môžete zmeniť kliknutím na farebný štvorček alebo pridať novú vlastnú farbu kliknutím na „+ Pridať novú“.
Ak používate na webe viac stránok, globálne farby udržiavajú jednotnosť. Ak sa rozhodnete zmeniť farbu značky, stačí upraviť len jednu hodnotu – Elementor ju automaticky aplikuje všade.
4. Nastavenie globálnej typografie
Podobne ako farby, aj písmo by malo byť jednotné. Elementor vám umožňuje definovať globálne písmo pre všetky nadpisy a odseky.
Postup:
- V Site Settings kliknite na Globálna typografia.
- Definujte štýl pre:
- Primary – hlavné písmo (napr. pre texty a odseky).
- Secondary – doplnkové písmo (napr. pre nadpisy alebo podnadpisy).
- Text – všeobecné písmo pre bežné widgety.
- Accent – zvýrazňujúce písmo (napr. pre CTA prvky).
- Vyberte typ písma, veľkosť, hrúbku, výšku riadku a transformáciu (napr. veľké písmená).
Všetky nové prvky (nadpisy, texty, tlačidlá) budú automaticky používať túto typografiu. Ak zmeníte písmo neskôr, Elementor upraví celý web bez nutnosti zasahovať do jednotlivých stránok.
5. Globálne štýly tlačidiel
Tlačidlá sú často najdôležitejším prvkom na stránke – vedú používateľa k akcii (kontakt, nákup, registrácia). Preto je dôležité, aby mali jednotný štýl. V Site Settings kliknite na Tlačidlá (Buttons) a nastavte:
- Farbu pozadia a textu,
- Veľkosť a písmo,
- Zaoblenie rohov (border radius),
- Tieň alebo rámček,
- Efekt pri prechode myšou (hover).
Ak používate globálne farby, môžete jednoducho prepojiť farbu tlačidla s farbou značky – Elementor sa postará o všetko ostatné.
6. Theme Style – štýl celej témy
Theme Style (v Elementore PRO) je najvyššia úroveň správy štýlov. Tu môžete definovať, ako bude vyzerať celý web vrátane hlavičiek, pätičiek, formulárov a archívnych stránok. V Theme Style môžete nastaviť:
- farby odkazov a hover efektov,
- štýl formulárov,
- vzhľad zoznamov, citácií, odrážok,
- globálne odsadenia a výšku riadkov,
- nastavenie veľkosti tlačidiel pre rôzne zariadenia.
Ak vytvárate viacero webov, Theme Style je skvelý nástroj, ako si zachovať rovnaký vizuálny jazyk naprieč projektmi.
7. Prepojenie globálnych štýlov s Astra PRO
Ak používate tému Astra PRO v kombinácii s Elementorom, získate ešte väčšiu kontrolu nad dizajnom. Astra umožňuje definovať svoje farby a písma, ktoré sa automaticky zosynchronizujú s Elementorom. To znamená, že váš web bude vyzerať konzistentne aj mimo Elementoru – napríklad na blogových stránkach alebo v navigačnom menu.
Viac o tejto integrácii nájdete v článku Ako používať Astra PRO s Elementorom.
Záver
Globálne štýly v Elementore sú jedným z najdôležitejších nástrojov pre tvorcov webov. Umožňujú vám dosiahnuť jednotný a profesionálny vzhľad bez potreby manuálne nastavovať každý prvok. Ak sa naučíte s nimi pracovať, ušetríte desiatky hodín práce a zároveň získate možnosť spravovať dizajn svojho webu centrálne.
Či už používate bezplatný Elementor alebo verziu PRO, globálne štýly by mali byť vždy vaším východiskovým bodom pri tvorbe webu. Ak potrebujete s ich nastavením pomôcť, môžete sa spoľahnúť na tím webka.net.
