Ak ste si práve nainštalovali Elementor alebo Elementor PRO a chcete sa naučiť vytvoriť svoju prvú stránku, ste na správnom mieste. Tento článok vás krok za krokom prevedie procesom tvorby jednoduchej, no elegantnej webovej stránky – od prázdnej šablóny až po publikovanie. Nepotrebujete žiadne skúsenosti s programovaním, stačí chuť tvoriť a trochu trpezlivosti.
Poznámka: Všetky weby, ktoré tvoríme na webka.net, majú v základe nainštalovaný Elementor PRO. To znamená, že všetky tieto kroky môžete vykonať aj sami – bez kódu, rýchlo a jednoducho.
1. Otvorenie novej stránky vo WordPresse
Začneme úplne od začiatku. V administrácii WordPressu kliknite v ľavom menu na:
- Stránky → Pridať novú
- Zadajte názov vašej stránky, napríklad Domov alebo O mne.
- V pravej časti kliknite na modré tlačidlo Upraviť v Elementore.
Po chvíli sa otvorí rozhranie Elementoru, kde budete stránku tvoriť vizuálne – všetko uvidíte presne tak, ako to uvidia aj návštevníci vášho webu.
2. Základy práce so sekciami, stĺpcami a widgetmi
Elementor funguje na princípe troch hlavných stavebných prvkov:
- Sekcia – hlavný blok, ktorý obsahuje obsahové prvky (napr. úvod, kontaktnú časť, galériu).
- Stĺpec – rozdeľuje sekciu na menšie časti, napríklad dve časti vedľa seba.
- Widget – konkrétny prvok, napríklad nadpis, obrázok, tlačidlo alebo formulár.
Na úvod pridajte sekciu kliknutím na tlačidlo + a vyberte rozloženie – odporúčame jeden stĺpec. Potom z ľavého panelu presuňte widget Nadpis do sekcie. Napíšte napríklad: „Vitajte na mojej stránke!“
3. Pridanie textu a obrázka
Pod nadpis pridajte nový widget – Textový editor. Stačí ho pretiahnuť z panelu na stránku a vložiť svoj text. Vpravo v editore môžete meniť zarovnanie, veľkosť písma či farbu.
Potom pridajte Obrázok – z panelu vyberte widget „Obrázok“ a vložte ho pod text. Obrázok môžete nahrať z počítača alebo vybrať z knižnice médií.
Ak chcete, aby nadpis a obrázok boli vedľa seba, pridajte sekciu s dvoma stĺpcami – do ľavého vložte obrázok a do pravého text. Takto si vytvoríte pekný úvodný blok.
4. Pridanie tlačidla s odkazom
Tlačidlá sú dôležité pre navigáciu používateľov. Do sekcie pridajte widget Tlačidlo a nastavte:
- Text tlačidla: napr. Kontaktujte ma
- Odkaz: napr. /kontakt
- Farbu pozadia, písmo a zaoblenie rohov v karte Štýl
Ak máte Elementor PRO, môžete tlačidlu pridať aj efekt pri prechode myšou, napríklad zmenu farby alebo tieň.
5. Nastavenie pozadia sekcie
Každú sekciu môžete vizuálne zvýrazniť – kliknite na sekciu (modrá rámiková oblasť) a v ľavom paneli vyberte kartu Štýl. Tu môžete nastaviť:
- Farbu pozadia (napr. svetlosivú alebo firemnú farbu)
- Obrázkové pozadie – napríklad textúru alebo fotografiu
- Prekrytie pozadia (overlay) pre jemný vizuálny efekt
Pomocou týchto možností môžete vytvoriť kontrast medzi jednotlivými sekciami a web bude prehľadnejší.
6. Ukladanie a publikovanie stránky
Keď máte obsah hotový, kliknite na zelené tlačidlo Aktualizovať v ľavom dolnom rohu. Ak stránku ešte len testujete, môžete ju uložiť ako koncept kliknutím na šípku vedľa tlačidla a zvoliť Uložiť koncept.
Stránka je teraz dostupná na adrese, ktorú vidíte v hornom paneli (napr. https://vasweb.sk/o-mne).
7. Pridanie hlavičky a pätičky (Elementor PRO)
Ak máte Elementor PRO, môžete si vytvoriť aj vlastnú hlavičku a pätičku, ktoré sa zobrazia na každej stránke.
- V menu WordPressu kliknite na Templates → Theme Builder.
- Zvoľte „Header“ a vytvorte novú šablónu hlavičky.
- Do hlavičky pridajte logo, menu a tlačidlo Kontakt.
- Publikujte a zvoľte, kde sa má zobrazovať (napr. na všetkých stránkach).
Rovnakým spôsobom môžete pridať aj pätičku, napríklad s autorskými právami alebo odkazmi na sociálne siete.
8. Náhľad a testovanie na mobilných zariadeniach
Elementor umožňuje priamo v editore pozrieť, ako stránka vyzerá na mobile. V spodnom paneli kliknite na ikonu monitora 📱 a prepínajte medzi zobrazeniami – desktop, tablet a mobil. Každé zobrazenie si môžete prispôsobiť samostatne.
Odporúčame testovať, aby sa nadpisy neprekrývali, obrázky neboli príliš veľké a tlačidlá boli dostatočne veľké na kliknutie.
9. Uloženie ako šablóna pre ďalšie použitie
Ak sa vám stránka podarila a chcete ju použiť ako základ pre ďalšie podstránky, kliknite na šípku vedľa tlačidla Aktualizovať a vyberte Uložiť ako šablónu. Pomenujte ju napríklad „Základná stránka“ a neskôr ju načítate jedným kliknutím cez knižnicu Elementoru.
10. Tip na záver: Kombinácia s Astra PRO
Ak používate tému Astra, v kombinácii s Elementorom dosiahnete vynikajúci výsledok. Astra poskytuje predpripravené rozloženia, ktoré sú plne kompatibilné s Elementorom. Navyše, vďaka Astra PRO môžete ovládať rozloženie hlavičky, pätičky a šírku stránky ešte detailnejšie.
Podrobnosti nájdete v článku Ako používať Astra PRO s Elementorom.
Záver
Prvá stránka v Elementore je hotová! 🚀 Ak ste sa dostali až sem, už viete, ako funguje pridávanie sekcií, widgetov, tlačidiel aj obrázkov. Každá ďalšia stránka pôjde rýchlejšie, pretože pochopíte logiku systému. Ak by ste však chceli mať web nastavený profesionálne, radi vám pomôžeme – v rámci služby správa webstránok sa staráme aj o optimalizáciu, bezpečnosť a pravidelné aktualizácie.
