Ak ste si práve nainštalovali Elementor (alebo ešte lepšie Elementor PRO), pravdepodobne sa tešíte, že konečne uvidíte, ako sa dá web tvoriť bez programovania. Aby ste sa však v editore nestratili, je dobré poznať jeho rozhranie, základné tlačidlá a hlavné funkcie, ktoré budete používať každý deň.
V tomto článku si vysvetlíme, ako sa v Elementore orientovať, ktoré časti editora sú najdôležitejšie a ako si prispôsobiť prostredie podľa svojich potrieb. Cieľom je, aby ste sa v ňom cítili rovnako pohodlne ako v textovom editore – ale s omnoho väčšími možnosťami.
Poznámka: Všetky weby, ktoré tvoríme na webka.net, obsahujú v základe nainštalovaný Elementor PRO. Vďaka tomu môžete po odovzdaní webu sami upravovať texty, sekcie a bloky bez programovania.
Úvod do prostredia Elementoru
Keď otvoríte ľubovoľnú stránku vo WordPresse a kliknete na tlačidlo „Upraviť v Elementore“, načíta sa vizuálny editor. Uvidíte dve hlavné časti:
- Ľavý panel (Sidebar) – tu sa nachádzajú všetky nástroje, widgety, nastavenia a ovládacie prvky.
- Hlavná pracovná plocha (Canvas) – zobrazí vašu stránku tak, ako ju uvidia návštevníci. Tu prebieha samotná tvorba obsahu pomocou „ťahaj a pusti“ (drag & drop) metódy.
Pri prvom spustení vás rozhranie možno trochu zaskočí množstvom možností, no po pár minútach pochopíte logiku a práca sa stane veľmi intuitívnou.
Rozloženie editora – čo kde nájdete
1. Ľavý panel s nástrojmi
V tomto paneli nájdete všetky widgety, nastavenia sekcií, stĺpcov aj jednotlivých prvkov. Rozdelený je do viacerých častí:
- Panel widgetov – tu si vyberáte prvky, ktoré chcete vložiť na stránku (nadpis, text, obrázok, video, tlačidlo, ikonku, formulár, galériu, atď.).
- Karta „Obsah“ – tu upravujete text, obrázky a odkazy v rámci konkrétneho prvku.
- Karta „Štýl“ – nastavujete vzhľad: farby, písmo, okraje, pozadie, zarovnanie a pod.
- Karta „Rozloženie“ (Advanced) – pokročilé nastavenia ako vnútorné odsadenie (padding), vonkajšie okraje (margin), animácie, responzívne zobrazenie či vlastné CSS.
Tip: Každý prvok v Elementore sa skladá z týchto troch vrstiev – obsah, štýl a rozloženie. Po chvíli zistíte, že táto logika sa opakuje a práca je potom veľmi rýchla.
2. Hlavná pracovná plocha
Tu sa odohráva hlavná tvorba. Na prázdnu stránku môžete pridať sekciu, ktorá predstavuje horizontálny blok (napr. obrázok, textovú sekciu, galériu…). Každá sekcia môže obsahovať stĺpce a tie zase widgety.
Jednotlivé prvky môžete chytiť myšou, presunúť kamkoľvek a Elementor automaticky naznačí, kde sa dajú umiestniť. Výsledok vidíte okamžite.
3. Panel nastavení stránky
V ľavom dolnom rohu kliknite na ikonu ozubeného kolieska ⚙️ – otvorí sa vám panel s nastaveniami konkrétnej stránky:
- názov stránky,
- typ šablóny (napr. Elementor Canvas – stránka bez hlavičky a pätičky),
- nastavenie štýlov (pozadie, farby, typografia),
- nastavenia responzívneho zobrazenia.
Základné pojmy, ktoré musíte poznať
Ak chcete Elementoru rýchlo porozumieť, je dobré naučiť sa niekoľko základných pojmov, ktoré sa v prostredí často používajú:
- Sekcia (Section) – najväčší stavebný prvok. Každá sekcia môže mať jedno alebo viac stĺpcov.
- Stĺpec (Column) – rozdeľuje sekciu na časti. Môžete mať napríklad 2 alebo 3 stĺpce vedľa seba.
- Widget – konkrétny prvok, ako nadpis, text, tlačidlo, obrázok alebo formulár.
Takto sa dá web logicky rozčleniť. Sekcia = veľký blok, stĺpec = rozdelenie priestoru, widget = obsah. Keď túto hierarchiu pochopíte, tvorba sa stane prirodzená.
Responzívny dizajn – ako sa pozrieť na mobilnú verziu
V spodnej časti ľavého panelu je ikona monitora 📱. Po kliknutí na ňu môžete prepínať medzi zobrazením pre počítač, tablet a mobil. Každé zobrazenie si môžete prispôsobiť samostatne – napríklad zmenšiť písmo, upraviť odsadenia alebo skryť niektoré sekcie na mobile.
Toto je jedna z najsilnejších funkcií Elementoru, pretože umožňuje optimalizovať obsah pre všetky zariadenia bez nutnosti duplikovať stránky.
Globálne nastavenia – jednotný vzhľad pre celý web
Ak používate Elementor PRO, máte k dispozícii Site Settings – centrálnu sekciu, kde môžete nastaviť:
- globálne farby (napr. primárna, sekundárna, textová farba),
- globálnu typografiu (fonty pre nadpisy, texty, tlačidlá),
- štýly odkazov, pozadia, tlačidiel, sekcií a ďalších prvkov,
- vzhľad formulárov, pop-upov a hlavičiek.
Vďaka tomu udržíte celý web vizuálne jednotný. Ak napríklad zmeníte farbu značky v globálnych nastaveniach, automaticky sa aktualizuje na celom webe.
Temné a svetlé rozhranie editora
Elementor umožňuje prepínať medzi Light (svetlým) a Dark (tmavým) režimom editora. Toto nastavenie zmeníte kliknutím na tri vodorovné čiary v ľavom hornom rohu → User Preferences → Theme.
Je to len vizuálna pomôcka – obsah webu sa tým nijako nemení, ale pri dlhšej práci v noci určite oceníte tmavý režim.
História a vrátenie zmien
Elementor si automaticky pamätá všetky vaše kroky. Ak urobíte chybu, môžete sa vrátiť späť kliknutím na ikonu histórie (⌛) v spodnej časti panelu. Vidíte tam zoznam posledných akcií – od pridania widgetu po úpravu textu. Kedykoľvek sa môžete vrátiť k predchádzajúcemu stavu stránky.
Ukladanie a publikovanie
Po dokončení úprav kliknite na zelené tlačidlo Aktualizovať (Update) v ľavom dolnom rohu. Elementor stránku uloží a zmeny sa ihneď prejavia na webe. Ak stránku ešte len pripravujete, môžete ju uložiť ako Koncept (Draft) alebo Šablónu pre neskoršie použitie.
Tipy pre efektívnejšiu prácu
- Používajte pravé kliknutie – otvára kontextové menu s možnosťami kopírovať, duplikovať, uložiť ako šablónu a pod.
- Stláčajte CTRL + Z pre rýchle vrátenie zmien (funguje ako v textovom editore).
- Skúšajte globálne šablóny – napríklad hlavičku si vytvoríte raz a použijete ju na všetkých stránkach.
- Nezabúdajte priebežne ukladať prácu – najmä ak testujete animácie alebo kód.
Záver
Rozhranie Elementoru je intuitívne, no zároveň veľmi komplexné. Keď pochopíte základnú štruktúru (sekcie – stĺpce – widgety) a naučíte sa využívať ľavý panel, budete schopní tvoriť profesionálne webstránky rýchlo a efektívne. Najlepšie na tom je, že všetko robíte vizuálne – vidíte presne to, čo vaši návštevníci.
Ak chcete mať Elementor PRO už predinštalovaný, optimalizovaný a pripravený na používanie, môžete si objednať web priamo u nás – v rámci služby Tvorba webstránok. O všetky technické detaily sa postaráme za vás.
