Elementor 2026 – jak vytvořit hlavičku a patičku webu

Chcete mít hlavičku a patičku stejnou na celém webu, bez zásahu do šablony WordPressu? V Elementoru se to řeší přes Theme Builder a staví se ideálně přes kontejnery (Flexbox). V tomhle návodu projdeme postup od nuly, včetně sticky headeru, podmínek zobrazení a mobilního nastavení.

Co potřebujete, aby to fungovalo

Pro vlastní hlavičku a patičku přes Theme Builder je potřeba Elementor Pro . V Elementoru to najdete v: Šablony → Theme Builder → Header /

Rychlý postup (hotovo do 10 minut)

1. WP administrace → Šablony → Theme Builder
2. Header → Add New → pojmenujte → vytvořte šablonu
3. Navrhněte layout (logo + menu + tlačítko)
4. Publish → nastavte Display Conditions na Entire Site
5. Stejně udělejte Footer

Jak vytvořit hlavičku v Elementoru – krok za krokem

Krok 1: Vytvořte header šablonu

• WP → Šablony → Theme Builder → Header → Add New
• Vyberte „Header“, pojmenujte (např. Header – hlavní) a vytvoř.

Krok 2: Postavte layout přes kontejnery (Flexbox)

Doporučená struktura headeru (jednoduchá a funkční):

• Parent container (row): šířka Full / nebo Boxed podle designu
• 2–3 child kontejnery:
  • vlevo Logo
  • uprostřed Menu
  • vpravo CTA tlačítko / telefon

Praktické tipy:

• Logo nastavte jako odkaz na homepage (ideálně /).
• Menu: držte se 1 řádku a nepřehánteěj počet položek (UX + mobil).
• CTA: „Nezávazná poptávka“ / „Kontakt“ / „Objednat konzultaci“.

Krok 3: Nastavte výšky a odsazení (aby header nevypadal “nahodile”)

• Parent container: padding top/bottom (např. 10–18px)
• Align items: center
• Pokud máte boxed web: nastav max width přes Site Settings / šablonu a header sjednoťte.

Jak vytvořit patičku (Footer) – doporučená struktura

Footer většinou funguje nejlépe ve 2 patrech:

1. Obsahové patro: 2–4 sloupce (kontakt, odkazy, služby, sociální sítě)
2. Spodní lišta: copyright, IČO, právní odkazy

Výhoda Theme Builderu je, že to máte jednou a platí to pro celý web.

Co dát do footeru skoro vždy:

• Kontakt, IČO/DIČ, odkazy „Ochrana osobních údajů“, „Smluvní podmínky“
• Pokud sbíráš leady: mini CTA („Chcete konzultaci?“)
• Pokud máte blog: odkazy na nejdůležitější články / kategorie (SEO interní prolinkování)

Display Conditions: kde se má hlavička/patička zobrazit

Po kliknutí Publish nastavíte podmínky zobrazení:

• Entire Site (nejčastější)
• nebo jen konkrétní sekce (např. jen blog, jen e-shop, jen landing pages)
• můžete použít i Exclude (např. „nezobrazovat na checkoutu“)

Elementor má detailní přehled typů podmínek (archivy, 404, WooCommerce, autor…) Pro každou skupinu lze vytvořit jinou hlavičku a patičku, můžete vyčlenit samostatný vzhled i pro jednotlivé stránky. Doporučení – nepřehánějte to.

Mobilní hlavička (nejčastější scénář)

Cíl: na mobilu mít

• vlevo logo
• vpravo hamburger menu (a případně telefon)

Jak na to:

• Udělejte mobilní variantu přímo v jednom headeru: na desktop zobraz menu, na mobilu schovej menu a zobraz burger – toto je v nastavení přímo ve widgetu pro Menu.
• U kontejnerů nastavte „wrap“/směr a šířky prvků podle breakpointů. (Kontejnery jsou na tohle přirozeně lepší.)

Nejčastější chyby (a rychlé opravy)

1. Header se nezobrazuje → zkontroluj Display Conditions (Entire Site / Include).
2. Menu padá na 2 řádky → zmenši font / mezery / počet položek, nebo přejdi na CTA + burger na tabletu.
3. Sticky překrývá obsah → přidej top spacing nebo uprav z-index / výšku headeru.
4. Web je těžký/pomalý → omez animace v headeru, minimalizuj počet widgetů, optimalizuj obrázky/loga.

Přečtěte si celý Elementor návod

Starší verze článku 2019

Možná už jste si chtěli vytvořit hlavičku / menu a patičku vašeho webu a nevěděli jste si rady. Vývojáři Elementoru je ukryly do záložky Šablony a sekce Theme Builder. Otevře se vám Tvůrce motivů, kde uvidíte přehled všech šablon nebo si je dohledáte v jednotlivých záložkách. Kromě nastavení Archive (blogu či přehledu příspěvků) Single (vzhled jednotlivých příspěvků) a vlastní 404 stránky zde najdete i nastavení vzhledu hlavičky a patičky.

V záložce Header už bude vytvořená první Hlavička nebo se ji teprve chystáte vytvořit. Pokud je vytvořená, stačí ji Upravit s Elementorem. Otevře se klasická editační stránka Elementoru a další nastavení už je zcela na vás.

Malá rada – pokud do hlavičky umísťujete logo jako obrázek, vždy obrázku vytvořte odkaz, kterému zadáte parametr / . Tak návštěvníky webu vždy bezpečně dovedete na homepage.

Pokud chcete, aby se hlavička zjevovala i po posunu stránkou směrem dolů, nastavte si u celé Sekce v záložce Pokročilý pohybový efekt Sticky na parametr Top. Pokud chcete také měnit vzhled hlavičky po posunutí stránky, zapněte si funkci Sticky Header Effects. Můžete zde např. změnit barvu pozadí, zmenšení sekce atp.

Stejně jako hlavičku v záložky Header je tady také záložka Footer. Tam najdete připravenou patičku stránky.

Pokud si chcete vytvořit zcela nové, případně si vybrat některou ze šablon Elementoru nebo Envato, musíte nahoře kliknout na tlačítko Nahrát soubor. Trochu nelogický název, ale otevře se vám okno, kde si vyberete jako šablonu chcete vytvořit a pojmenujete si ji.V dalším kroku se otevřou připravené šablony pro daný prvek. Buďto si nějakou vyberete, nebo okno zavřete a vše si vytvoříte sami podle libosti.

Na závěr určíte, kde se má daná šablona zobrazovat. Vlevo dole se vám zjevuje zelené tlačítko Aktualizovat. Šipkou vedle něj si otevřete menu a v něm najdete Display conditions. Entire site zobrazí šablonu napříč celým webem. Můžete také zadat výjimky, kde nechcete šablonu použít Exclude, případně zadat stránky, na kterých ano – Include. Pokud použijete Include, mějte vytvořenou jinou hlavičku / patičku, která pokryje všechny zbývající stránky, které jste nevyjmenovali v Include seznamu.

Snad z toho nebudete na hlavičku. Hodně zdaru.