Elementor je dnes nejrozšířenější page builder pro WordPress. Používá ho přes 12 milionů webů po celém světě – a není divu. Díky Elementoru vytvoříte profesionálně vypadající stránky přetažením bloků na správné místo, bez jediného řádku kódu.

Přesto spousta začátečníků tápe. Elementor nabízí desítky možností a nastavení, a pokud nevíte kde začít, může se zdát složitý. Tento průvodce vás provede vším od instalace až po vytvoření první stránky – srozumitelně a krok za krokem.

Co je Elementor a jak funguje

Elementor je vizuální editor, který nahrazuje výchozí WordPress editor (Gutenberg). Funguje na principu drag & drop – bloky (widgety) přetahujete na stránku a okamžitě vidíte výsledek. Žádné přepínání mezi editorem a náhledem, žádné dohady o tom, jak stránka bude vypadat.

Elementor existuje ve dvou verzích:

Elementor Free – bezplatná verze s více než 40 widgety. Pro většinu jednoduchých webů plně dostačující. Obsahuje záhlaví, odstavce, obrázky, tlačítka, galerie, formuláře a desítky dalších bloků.

Elementor Pro – placená verze (od cca 59 USD/rok) s pokročilými funkcemi: vlastní záhlaví a patičky, popup builder, WooCommerce widgety, pokročilé animace a přes 100 widgetů navíc. Vyplatí se pro e-shopy a weby s pokročilejšími požadavky.

Pro začátek plně stačí free verze.

Krok 1: Instalace Elementoru

Instalace je stejná jako u každého WordPress pluginu:

1. Přejděte do administrace WordPressu → Pluginy → Přidat nový plugin
2. Do vyhledávacího pole zadejte „Elementor”
3. Klikněte na Nainstalovat u pluginu „Elementor Website Builder”
4. Po instalaci klikněte na Aktivovat

Po aktivaci vás Elementor provede krátkým průvodcem nastavení – zadáte typ webu a základní informace. Průvodce je volitelný, ale doporučuji ho projít, protože nastaví základní globální styly.

Kompatibilní šablony

Elementor funguje s většinou WordPress šablon, ale nejlépe se osvědčují šablony přímo navržené pro Elementor: Hello Elementor (oficiální šablona od tvůrců Elementoru, minimalistická a velmi rychlá), Astra, GeneratePress nebo OceanWP. Všechny jsou zdarma.

Krok 2: Globální nastavení – barvy a písma

Než začnete vytvářet stránky, nastavte globální styly – barvy a písma, které se použijí na celém webu. Ušetří vám to hodiny ruční práce.

Jak nastavit globální barvy

1. V administraci WordPressu přejděte do Elementor → Nastavení → Global Colors
2. Nastavte primární, sekundární, akcentní a neutrální barvu
3. Tyto barvy pak budete vybírat v celém editoru pod názvem „Primary”, „Secondary” atd.

Jak nastavit globální písma

1. Přejděte do Elementor → Global Fonts
2. Nastavte písmo pro nadpisy (Heading), podnadpisy (Secondary) a tělo textu (Body)
3. Elementor nabízí stovky Google Fonts přímo v editoru

Tip: Zvolte maximálně 2 různá písma – jedno pro nadpisy, jedno pro text. Více písem na jednom webu působí neprofesionálně a zpomaluje načítání.

Krok 3: Otevření Elementor editoru

Elementor editor otevřete dvěma způsoby:

Při vytváření nové stránky: Přejděte do Stránky → Přidat novou stránku, pojmenujte ji a klikněte na modré tlačítko Upravit pomocí Elementoru.

U existující stránky: Přejděte do Stránky → Všechny stránky, najeďte myší na název a klikněte na Upravit v Elementoru.

Editor se otevře jako fullscreen rozhraní se dvěma částmi: levý panel s widgety a nastavením, pravá plocha s náhledem stránky.

Krok 4: Struktura stránky – sekce, sloupce, widgety

Každá Elementor stránka je postavená na třech vrstvách:

Sekce (Section) – horizontální pás přes celou šířku stránky. Každá sekce může mít vlastní pozadí, barvu, obrázek nebo video.

Sloupce (Column) – uvnitř každé sekce jsou sloupce. Můžete mít jeden sloupec (celá šířka), dva (50/50), tři (33/33/33) nebo libovolné jiné rozdělení.

Widgety – jednotlivé prvky obsahu, které přetahujete do sloupců: texty, obrázky, tlačítka, videa, formuláře a desítky dalších.

Jak přidat novou sekci

1. Klikněte na modrou ikonu + na prázdné ploše stránky
2. Vyberte rozvržení sloupců (1, 2, 3 nebo více)
3. Sekce se přidá na stránku

Jak přidat widget

1. V levém panelu přejděte na záložku Widgety
2. Najděte widget nebo ho vyhledejte
3. Přetáhněte ho do připraveného sloupce

Krok 5: Práce s widgety – nejdůležitější nastavení

Každý widget má tři záložky nastavení po kliknutí na něj:

Content (Obsah) – samotný obsah widgetu: text, obrázek, odkaz na tlačítku.

Style (Styl) – vizuální nastavení: barvy, velikost písma, okraje, zarovnání, stíny, pozadí.

Advanced (Pokročilé) – odsazení (margin a padding), animace, CSS třídy a podmínky zobrazení.

Nejpoužívanější widgety

Heading – pro nadpisy H1–H6. Vždy nastavte správnou úroveň nadpisu, je to důležité pro SEO.

Text Editor – pro delší odstavce textu. Funguje jako klasický textový editor.

Image – nahrání fotky z knihovny médií. Vždy vyplňte alt text pro SEO.

Button – tlačítko s odkazem. Nastavte text, URL a hover efekt.

Image Box – kombinace obrázku, nadpisu a textu. Skvělé pro karty služeb.

Icon List – seznam s ikonami místo teček. Ideální pro výčet výhod.

Krok 6: Nastavení sekce – pozadí a rozestupy

V záložce Style sekce nastavte barvu pozadí, obrázek nebo přechod (gradient). V záložce Advanced nastavte padding – vnitřní odsazení sekce. Doporučené hodnoty pro desktop: 60–80 px nahoře i dole. Pro mobil: 30–40 px.

Krok 7: Responzivní design – jak web vypadá na mobilu

V horní části editoru jsou tři ikony – počítač, tablet, mobil. Po kliknutí na ikonu mobilu přepnete do mobilního zobrazení. Každá změna v mobilním zobrazení ovlivní pouze mobil, ne desktop.

Nejčastější mobilní úpravy: zmenšení velikosti nadpisů (z 48 px na 28–36 px), zmenšení paddingu sekcí a skrytí dekorativních prvků přes Advanced → Responsive → Hide on Mobile.

Krok 8: Uložení a publikování

Elementor ukládá průběžně jako automatický draft. Pro ruční uložení použijte šipku vedle zeleného tlačítka → Uložit jako draft. Zelené tlačítko Publikovat stránku zpřístupní veřejnosti. Historii verzí otevřete kliknutím na ikonu hodin v levém dolním panelu.

Krok 9: Šablony – rychlý start bez návrhu od nuly

Klikněte na ikonu složky v editoru a vyberte záložku Pages pro celé stránky nebo Blocks pro jednotlivé sekce. Stovky šablon zdarma – vyberte, vložte a upravte texty a obrázky podle svých potřeb.

Krok 10: SEO v Elementoru

Elementor sám SEO neřeší – k tomu potřebujete Rank Math nebo Yoast SEO. V Elementoru ale dbejte na:

Nadpis H1: Na každé stránce musí být právě jeden widget Heading nastavený jako H1 s hlavním klíčovým slovem.

Alt texty obrázků: U každého Image widgetu vyplňte alt text – krátký popis s klíčovým slovem.

Rychlost: Zapněte „Improved Asset Loading” v Elementor → Nastavení → Experimentální funkce. Nainstalujte caching plugin (WP Rocket nebo LiteSpeed Cache).

Nejčastější chyby začátečníků

• Příliš mnoho fontů a barev – nastavte globální styly a držte se jich
• Ignorování mobilního zobrazení – vždy zkontrolujte před publikováním
• Překomplikovaný layout – čím jednodušší, tím lépe
• Chybějící alt texty u obrázků
• Nepoužívání šablon – ušetří hodiny práce
• Zapomínání na caching plugin – Elementor může web zpomalit

Shrnutí: Elementor krok za krokem

• ✅ Nainstalujte Elementor (Free verze stačí pro začátek)
• ✅ Vyberte kompatibilní šablonu (Hello Elementor, Astra)
• ✅ Nastavte globální barvy a písma
• ✅ Vytvořte strukturu stránky (sekce → sloupce → widgety)
• ✅ Přidejte obsah pomocí widgetů
• ✅ Nastavte padding a zkontrolujte mobilní zobrazení
• ✅ Vyplňte H1 nadpis a alt texty obrázků
• ✅ Publikujte a zkontrolujte výsledek v prohlížeči

Elementor je jeden z nejsilnějších nástrojů pro tvorbu WordPress webů. Chce trochu praxe, ale jakmile pochopíte logiku sekcí, sloupců a widgetů, stránky vám půjdou od ruky.

Potřebujete pomoct s nastavením Elementoru nebo tvorbou webu na WordPressu? Rád se na to podívám – napište mi.