Elementor návod (2026): Jak začít tvořit web ve WordPressu krok za krokem

Chcete konečně upravit svůj WordPress web bez programátora? S Elementorem zvládnete poskládat stránky metodou „chyť a pusť“, nastavit si jednotný design a u verze Elementor Pro navíc vytvořit i vlastní hlavičku, patičku, šablony článků, 404 stránku nebo formuláře. Elementor návod je pro každého, kdo s tímto editorem začíná.

Pokud máte WordPress už připravený a k tomu Elementor Pro, jste v ideální pozici: stačí udělat pár správných kroků na začátku a ušetříte si desítky hodin oprav a „ladění vzhledu“ později.

Než začnete: 10min checklist (ať si nerozhodíte web)

1) Udělejte zálohu (a ideálně staging)

Než začnete cokoliv přestavovat, udělejte zálohu. Je to nejrychlejší pojištění proti tomu, že si omylem „rozbijete“ layout. Pokud začínáte s prázdným webem, v případě problémů vám web obnovíme.

2) Aktualizujte WordPress + Elementor + Elementor Pro

Aktuální verze = méně problémů s kompatibilitou a lepší editor. (Zvlášť pokud přecházíte na moderní způsob skládání layoutu přes kontejnery.)

3) Zkontrolujte šablonu (theme), ať se s Elementorem „nepere“

Uživatelsky nejpříjemnější je, když theme nepřepisuje typografii a spacingy. Elementor pak drží jednotný design přes globální nastavení. Ideální pro práci s Elementorem je jeho vlastní šablona Hello. V naší administraci ji máte připravenou

4) Ujasněte si strukturu webu dřív, než začnete klikáním

Stačí jednoduchý plán:

• Home
• Služby / Produkty
• O mně / O nás
• Reference
• Kontakt
• Blog (volitelné)

Základní nastavení vzhledu v Elementoru (nejdůležitější část)

Nejčastější důvod, proč web vypadá „nesourodě“: začnete skládat stránku dřív, než nastavíte globální styly. Udělejte si to hned na začátku — a pak už jen vybíráte barvy a fonty z připravené sady.

1) Nastavte globální barvy (Global Colors)

V Elementoru otevřete Site Settings a nastavte si základní paletu.

Doporučená sada:

• Primary (primární / brand) – hlavní barva značky
• Secondary (sekundární) – doplňková barva
• Accent (CTA) – tlačítka, odkazy, důležité prvky
• Text – barva textu
• Background – pozadí

Doporučení z praxe: pojmenujte barvy jasně („Primary / Accent“), ne „Modrá1“. Později změníte celý web na 2 kliknutí.

2) Nastavte globální typografii (Global Fonts)

Stejně v Site Settings nastavte fonty pro:

• Headings (nadpisy)
• Body (běžný text)

Doporučená rychlá škála (můžete upravit podle designu):

• Body: 16–18 px
• H3: 24–30 px
• H2: 32–40 px
• H1: 42–56 px

3) Nastavte šířku obsahu a „systém rozestupů“

Ať stránky drží jednotný rytmus:

• Content width: typicky 1140–1280 px
• Padding sekcí: např. 80 px desktop / 40 px mobil
• Gap mezi prvky: např. 16–24 px

Tohle vám ušetří tunu času při responzivitě.

Jak se s Elementorem pracuje: kontejnery, mřížka, sekce a widgety

Co je „widget“

Widget (prvek) je konkrétní obsah: nadpis, text, obrázek, tlačítko, ikona, formulář…

Co je „kontejner“ (Container) a proč je lepší než staré sekce/sloupce

Dnes je nejpraktičtější skládat stránky přes kontejnery (Flexbox):

• přehlednější struktura,
• snadnější responzivita,
• čistší layout.

Flexbox v praxi (nejčastější nastavení)

U kontejneru budete nejččastěji řešit:

• Direction: row / column (řada / sloupec)
• Justify content: zarovnání na osu (např. space-between)
• Align items: svislé zarovnání
• Gap: mezery mezi prvky
• Wrap: zalamování prvků na menších šířkách

Kdy použít mřížku (Grid)

Grid se hodí, když potřebujete řídit řádky i sloupce současně (typicky galerie, přehled karet služeb, katalog). Na běžné layouty (hero, dvě kolony, CTA pruh) stačí Flexbox kontejnery.

Praktický návod: vytvořte první stránku (Home) krok za krokem

Tady je postup, který funguje pro 90 % webů.

Krok 1: Založte stránku a otevřete Elementor

WordPress → Stránky → Přidat novou → Upravit v Elementoru

Krok 2: Nastavte základ stránky (šířka / šablona)

U stránky zvolte rozložení:

• chcete-li hlavičku a patičku z theme: „Full Width“
• chcete-li čisté plátno bez theme: „Canvas“

Krok 3: Nejprve postavte strukturu (wireframe) — bez barev a efektů

Doporučený wireframe homepage:

1. Hero: H1 + 1–2 věty + CTA tlačítko + obrázek
2. Výhody: 3–6 karet s ikonou
3. Služby/produkty: přehled (karty)
4. Reference / ukázky
5. FAQ
6. Závěrečné CTA + kontakt

[OBRÁZEK] Jednoduchý wireframe screenshot (může být i ručně načrtnutý)
ALT: Wireframe homepage v Elementoru (struktura)

Krok 4: Až potom doplňte obsah (texty, fotky, CTA)

• H1 jen jednou na stránce
• CTA tlačítko jasně: „Kontaktovat“, „Zjistit cenu“, „Objednat“

Krok 5: Styling přes globální nastavení (rychlejší a čistší)

Místo toho, abyste každé tlačítko ladili zvlášť:

• používejte Global Colors
• držte jednotné fonty
• sjednoťte paddingy sekcí

Krok 6: Responzivita (Desktop → Tablet → Mobil)

Na mobilu nejčastěji:

• přepnout kontejner z row na column,
• zmenšit padding,
• zmenšit H1/H2,
• doladit mezery (gap).

[VIDEO] 2–4 min video: „Responzivita v Elementoru: 5 nejčastějších úprav“
Scénář videa: přepnutí breakpoints, Direction, padding, typografie, skrytí prvku

Šablony: Elementor knihovna vs Envato (a jak z toho vytěžit maximum)

Chcete web rychleji? Šablony jsou ideální — ale jen když je použijete chytře.

Varianta A: Elementor Library / Template Kits

Výhody:

• rychlý start,
• konzistentní design,
• snadná úprava bloků.

Jak postupovat:

1. otevřete knihovnu šablon,
2. vyberte stránku nebo blok (hero, ceník, reference),
3. vložte a upravte texty + barvy přes Global Colors.

[GIF] „Otevření knihovny → vložení bloku → úprava textu“
ALT: Elementor knihovna šablon vložení bloku

Varianta B: Envato Elementor šablony (Template Kits)

Výhody:

• obrovský výběr hotových webů pro Elementor, které máte u nás zdarma
• často perfektní pro obory (beauty, hotel, realitka…).

Pozor na:

• „přezdobenost“ (animace, velké obrázky),
• import zbytečností (načtete 30 stránek, použijete 3).

Pravidlo: importujte jen to, co opravdu použijete.

Elementor Pro: 3 věci, které se vyplatí udělat hned

Pokud máte Elementor Pro, největší „game changer“ je, že nejste závislí na šabloně WordPressu.

1) Udělejte vlastní hlavičku a patičku (Theme Builder)

V Elementoru: Šablony → Theme Builder → Header / Footer
A nastavte zobrazení pro celý web.

Interní odkaz na váš návod:
https://ziveweby.cz/elementor-jak-vytvorit-hlavicku-a-paticku-webu/

[VIDEO] 3–6 min: „Header + Footer v Elementor Pro: od nuly po publikování“
Scénář: vytvoření headeru, menu, sticky volitelně, publish → Entire Site

2) Vytvořte šablonu pro články a archiv blogu (pokud blogujete)

Jakmile máte jednotnou šablonu článku, zlepšíte:

• čitelnost,
• konzistenci,
• rychlost tvorby nových článků.

3) Vytvořte si vlastní 404 stránku (lepší UX + „profesionální dojem“)

Interní odkaz:
https://www.ziveweby.cz/jak-si-nastavit-vlastni-404-stranku/

Nejčastější chyby v Elementoru (a jak se jim vyhnout)

• Začnete stavět stránku bez Global Colors/Fonts → každý blok vypadá jinak.
• Každá sekce má jiné odsazení → web je „rozházený“.
• Importujete šablonu a necháte tam nepotřebné sekce → zpomalení a chaos.
• Obrázky nahráváte v plné velikosti → web je pomalý.
• Na mobilu jen „zmenšíte text“, ale neřešíte layout (Direction, Wrap).

Mini SEO pro stránky vytvořené v Elementoru (rychlé a funkční)

Na stránce používejte jen jedno H1.

• Nadpisy skládejte logicky (H2 → H3).
• Obrázky: popisný název souboru + ALT (ne „IMG_1234“).
• U CTA používejte konkrétní text (ne „Klikněte zde“).
• Nepřehánějte animace (rychlost + UX).

Pokud řešíte SSL a „smíšený obsah“, máme k tomu vlastní návod:
Interní odkaz: https://ziveweby.cz/smiseny-obsah-nezobrazuje-se-ssl-certifikat/

Doporučené interní odkazy

• Elementor Pro v ceně hostingu: https://ziveweby.cz/wordpress-s-elementor-pro-zdarma/
• Landing Elementor Pro: https://ziveweby.cz/pluginy/elementor-pro/
• Hlavička a patička: https://ziveweby.cz/elementor-jak-vytvorit-hlavicku-a-paticku-webu/
• Vlastní 404: https://www.ziveweby.cz/jak-si-nastavit-vlastni-404-stranku/
• Web zdarma (silné CTA / rozcestník): https://ziveweby.cz/web-zdarma/
• Webhosting s WordPressem: /webhosting-pro-wordpress-weby/
• Návod na web zdarma – krok 1 (pokud chcete řetězit návody): https://ziveweby.cz/navod-na-web-zdarma-1/

Často kladené dotazy (FAQ)