Elementor je jedným z najintuitívnejších nástrojov na tvorbu webových stránok vo WordPresse. Aby ste ho mohli efektívne využívať, musíte pochopiť jeho základnú štruktúru. Každá stránka, ktorú vytvoríte, sa skladá z troch kľúčových stavebných prvkov: sekcií, stĺpcov a widgetov. Spoločne tvoria základ, na ktorom môžete postaviť ľubovoľný dizajn – od jednoduchej prezentačnej stránky až po komplexný e-shop.
Všetky weby, ktoré tvoríme na webka.net, majú nainštalovaný Elementor PRO, takže naši klienti môžu ľahko upravovať sekcie, stĺpce aj widgety bez nutnosti zásahu do kódu.
1. Štruktúra stránky v Elementore
Každá stránka vytvorená pomocou Elementoru má hierarchickú štruktúru:
- Sekcia – najväčší blok, ktorý určuje horizontálne usporiadanie a celkový rámec danej časti stránky.
- Stĺpce – rozdeľujú sekciu na jednotlivé vertikálne časti. Každý stĺpec môže obsahovať vlastný obsah a štýly.
- Widgety – konkrétne prvky, ktoré tvoria obsah – nadpisy, texty, obrázky, tlačidlá, videá a podobne.
Pri práci s týmito prvkami si treba zapamätať jedno pravidlo: widget vždy patrí do stĺpca a stĺpec do sekcie.
2. Práca so sekciami
Každá stránka sa začína vytvorením sekcie. Sekcia predstavuje horizontálny blok, ktorý sa tiahne cez šírku stránky. Slúži ako kontajner pre ďalšie prvky a pomáha logicky rozdeliť stránku na časti, napríklad:
- hlavička s názvom stránky,
- sekcia „O nás“,
- sekcia s referenciami,
- sekcia s kontaktmi.
Vytvorenie sekcie
- Kliknite na tlačidlo + v hlavnej oblasti editora.
- Vyberte si rozloženie – napríklad jeden stĺpec alebo viacero vedľa seba.
Po pridaní sekcie sa zobrazí jej modrý rámik. Po kliknutí na ikonu šiestich bodiek (🟦) otvoríte nastavenia sekcie v ľavom paneli. Tu môžete upraviť:
- šírku sekcie (plná šírka, pevná šírka, vlastná hodnota),
- zarovnanie obsahu (hore, v strede, dole),
- výšku sekcie (automatická, minimálna, vlastná),
- pozadie, okraje, vnútorné odsadenie (padding),
- prípadne pridať animáciu alebo pozadie pri posúvaní (parallax efekt).
Pomocou sekcií viete rozdeliť obsah tak, aby bol prehľadný a dizajnovo príjemný. Každú sekciu môžete mať vizuálne inak – napríklad s inou farbou pozadia alebo obrázkom.
3. Práca so stĺpcami
Stĺpce slúžia na rozdelenie sekcie do menších častí. Napríklad, ak chcete mať obrázok vľavo a text vpravo, vytvorte sekciu s dvoma stĺpcami. Každý z nich potom naplníte obsahom podľa potreby.
Vytvorenie a úprava stĺpcov
- Pri vytváraní sekcie vyberte rozloženie so 2, 3 alebo viac stĺpcami.
- Do každého stĺpca vložte widget – napríklad nadpis alebo obrázok.
- Kliknite na ikonu stĺpca (📏) – v ľavom paneli sa zobrazia jeho nastavenia.
V nastaveniach stĺpca môžete meniť:
- šírku stĺpca (v %),
- zarovnanie obsahu,
- odsadenie a okraje,
- pozadie (napr. farebný blok alebo obrázok),
- vertikálne zarovnanie (hore, stred, dole).
Ak používate Elementor PRO, môžete aj animovať vstup stĺpcov alebo použiť efekt prechodu medzi nimi – ideálne na tvorbu moderných layoutov.
4. Widgety – základné stavebné prvky
Widgety sú „stavebné kocky“ každého webu v Elementore. Z panelu vľavo ich jednoducho pretiahnete do stĺpca alebo sekcie. Každý widget má tri karty nastavení:
- Obsah – tu upravujete text, odkazy, zarovnanie, ikony, obrázky atď.
- Štýl – farby, písmo, rámčeky, tiene, pozadia.
- Pokročilé – odsadenia, animácie, responzívne nastavenia, vlastné CSS (PRO).
Najpoužívanejšie widgety
- Nadpis (Heading) – hlavný textový prvok stránky, ktorý zaujme.
- Textový editor – na písanie odsekov, popisov a obsahu.
- Obrázok – jednoduché pridanie obrázkov s možnosťou odkazu.
- Tlačidlo – výzva na akciu (Call to Action), napríklad „Objednať teraz“.
- Ikony a ikonové boxy – vizuálne doplnky, ktoré zlepšujú čitateľnosť.
- Formuláre (PRO) – vytváranie kontaktných alebo prihlasovacích formulárov bez kódu.
Každý widget môžete duplikovať, kopírovať štýl alebo uložiť ako šablónu pre ďalšie použitie – ideálne na tvorbu jednotného dizajnu.
5. Praktický príklad – vytvorenie sekcie „O nás“
- Vytvorte sekciu s dvoma stĺpcami.
- Do ľavého stĺpca vložte widget Obrázok (napr. tímová fotografia).
- Do pravého stĺpca vložte Nadpis a Textový editor s krátkym popisom vašej firmy.
- Pod text pridajte Tlačidlo s odkazom na stránku „Kontakt“.
- V sekcii nastavte svetlé pozadie a jemné vnútorné odsadenie (padding 60px).
Takto jednoducho si vytvoríte profesionálne vyzerajúci blok bez potreby grafika alebo programátora.
6. Pokročilé nastavenia (Elementor PRO)
V platených verziách Elementoru môžete jednotlivým sekciám, stĺpcom a widgetom pridávať:
- animácie pri načítaní,
- interaktívne efekty (napr. pohyb pozadia),
- vlastné CSS priamo v editore,
- podmienky zobrazenia (napr. zobraz iba na domovskej stránke).
To všetko robí z Elementoru nástroj, ktorý zvládne aj veľmi komplexné weby bez nutnosti písať kód.
Záver
Ak pochopíte princíp sekcií, stĺpcov a widgetov, pochopíte celý Elementor. Práve tieto tri prvky tvoria základ každého dizajnu. Ich kombináciou môžete vytvoriť moderné, responzívne a vizuálne atraktívne webové stránky, ktoré sa prispôsobia každému zariadeniu. A najlepšie na tom je, že to zvládne aj úplný začiatočník.
Ak sa chcete naučiť viac, pozrite si aj článok Elementor: Prvé kroky – vytvorenie jednoduchej stránky.
