Menu a patička: kompletní návod pro živnostníky

Poznámka ke screenshotům. Červená čísla u obrázků ukazují, kam přesně kliknout nebo co si všimnout — čtěte je v pořadí 1, 2, 3…

1. K čemu to je a jak vám to pomůže

Menu a patička jsou dvě věci, které vidí úplně každý návštěvník vašeho webu — na rozdíl od zbytku stránky, kterou si prohlédne jen ten, kdo se doscrolluje. Menu rozhoduje o tom, jestli se zákazník na webu zorientuje za tři vteřiny, nebo odejde. Patička zase nese to, co lidé hledají skoro pokaždé: kontakt, sociální sítě a fakturační údaje.

Na Živnowebu se obojí nastavuje na jednom místě — v sekci Stránky → Menu. Tenhle návod vás provede úplně vším, co tam najdete:

• jak přidat a upravit položku v hlavním menu,

• jak funguje Mega Menu — rozbalovací panel s obrázky a popisky pod položkou (třeba pod "Služby"),

• jak nastavit čtyři různé části patičky — odkazy, sociální sítě i firemní údaje,

• a jak menu vizuálně doladit (typ zobrazení, logo).

2. Rychlý přehled — z čeho se to skládá

V administraci otevřete Stránky → Menu. Nahoře jsou tři záložky a pod nimi dalších pět — je snadné se v tom na první pohled ztratit, takže tady je mentální mapa:

Tip. Hlavní menu a obě patičkové sekce (Levá/Pravá) fungují úplně stejně — stejná pole, stejný postup přidání položky. Jediný rozdíl: Mega Menu je jen v Hlavním menu.

📷 [OBRÁZEK 1 — Orientace v sekci Menu — vložte soubor 01-menu-uvod.png]

1. Menu v levém postranním panelu — sem se dostanete odkudkoli.

2. Tři horní záložky: Položky menu / Vzhled & Logo / Languages.

3. Pět sub-záložek se seznamy odkazů — aktivní je Hlavní menu.

4. Tlačítko Nová položka — přidá další odkaz do právě otevřeného seznamu.

5. Tužka u řádku — otevře editaci dané položky.

3. Jak přidat a upravit položku v Hlavním menu

Klikněte na tužku u existující položky, nebo na Nová položka. Otevře se stejný formulář v obou případech — jen v prvním případě už je vyplněný.

Postup krok za krokem

1. Název (desktop) a Název (mobil) — dvě oddělená pole. Mobilní verze může být kratší.

2. URL — buď cesta na stránku (např. /kontakt), nebo kotva na místo v rámci jedné stránky ve formátu #nazev.

3. Otevřít v — Stejné okno, nebo Nové okno.

4. Ikona (mobil) — vyberte z tematických ikon nebo z Obecných ikon. Zobrazí se jen na mobilu.

5. Desktop / Mobil — dva checkboxy pro viditelnost zvlášť pro každé zařízení.

6. CTA tlačítko — zaškrtněte, pokud chcete zvýrazněné tlačítko místo obyčejného odkazu. Odemkne pole Varianta: Plná barva pro hlavní akci, Obrys pro doplňkovou.

📷 [OBRÁZEK 2 — Formulář Upravit položku — vložte soubor 02-upravit-polozku.png]

1. Název (desktop) — text v menu na počítači.

2. Název (mobil) — kratší varianta pro mobil.

3. URL — cesta na stránku nebo kotva.

4. Otevřít v — stejné, nebo nové okno.

5. Ikona (mobil) — ikona jen pro mobilní menu.

6. Desktop / Mobil / CTA tlačítko — viditelnost a styl.

7. Mega Menu — rozbalovací sekce popsaná v další kapitole.

Nakonec klikněte na Uložit a stránku obnovte (Ctrl+R), aby se změna projevila v náhledu.

Tip. Název tlačítka v menu se nemusí shodovat s názvem stránky — používejte to, co zákazník hned pochopí.

4. Mega Menu — rozbalovací panel pod položkou

Mega Menu je funkce, o které málokdo ví, přitom umí hodně: místo obyčejného odkazu se po najetí na položku (třeba "Služby") rozbalí celý panel s vlastními kartami — každá s ikonou, obrázkem, krátkým popisem a vlastním tlačítkem.

Kdy se Mega Menu hodí

• Máte 3 a víc služeb nebo kategorií a chcete je vypsat přehledně.

• Chcete u položky menu rovnou ukázat fotku nebo cenu (rozložení "Pricing").

• Web má rozcestník služeb a chcete ho "předvídat" už v menu.

Mega Menu funguje pouze v Hlavním menu — v patičce tuhle možnost nenajdete.

Krok 1 — Nastavíte trigger (spouštěč)

V editaci položky rozbalte sekci Mega Menu a zaškrtněte Aktivovat mega menu panel. V poli Rodičovská položka nechte volbu "— Hlavní úroveň (trigger) —" — tím se upravovaná položka stává spouštěčem panelu:

• Velikost — S / M / L / XL.

• Sloupce — 1 až 3.

• Rozložení — Karty, Řádky, nebo Pricing.

• Oddělovací čára mezi sloupci — volitelná.

📷 [OBRÁZEK 3 — Aktivace triggeru — vložte soubor 03-mega-menu-aktivace.png]

1. Aktivovat mega menu panel — hlavní vypínač funkce.

2. Rodičovská položka — necháte na "Hlavní úroveň (trigger)".

3. Velikost / Sloupce / Rozložení — jak bude panel vypadat.

4. Oddělovací čára mezi sloupci — volitelné oddělení.

Pod tím vyplníte volitelný obsah triggeru samotného:

• Popis v mega panelu — krátký úvodní text.

• Ikona u odkazu — malá ikonka vedle textu v menu.

• Obrázek v panelu — velký obrázek v levém sloupci.

• CTA tlačítko — vlastní tlačítko v levém sloupci.

📷 [OBRÁZEK 4 — Obsah triggeru — vložte soubor 04-mega-menu-trigger-obsah.png]

1. Popis v mega panelu — text zobrazený v panelu.

2. Ikona u odkazu — malá ikona vedle textu v menu.

3. Obrázek v panelu — velký obrázek v levém sloupci.

4. CTA tlačítko — text a odkaz.

Krok 2 — Přidáte podpoložky do panelu

Otevřete editaci jiné, už existující položky menu a v Mega Menu nastavení u pole Rodičovská položka vyberte konkrétní položku, kterou jste nastavili jako trigger (např. "Služby"). Formulář se přepne do režimu podpoložky:

• Zobrazit ve sloupci — Sl. 1 / Sl. 2 / Sl. 3.

• Popis v mega panelu, Ikona, Obrázek, CTA tlačítko — stejná sada polí, ale platí jen pro tuhle kartu.

📷 [OBRÁZEK 5 — Podpoložka panelu — vložte soubor 05-mega-menu-podpolozka.png]

1. Rodičovská položka — vybraný trigger, pod který karta patří.

2. Zobrazit ve sloupci — který sloupec panelu.

3. Popis v mega panelu — text karty.

4. Ikona / Obrázek / CTA tlačítko — vlastní obsah karty.

Pozor. Dropdown "Rodičovská položka" nabízí všechny existující položky menu jako možný trigger — snadno se stane, že omylem zařadíte položku pod špatnou "rodičovskou" a nechtěně tím rozbijete strukturu hlavního menu. Před uložením vždy zkontrolujte náhled webu.

Vzorový příklad — Mega Menu pro kadeřnictví

Máte v Hlavním menu položku "Služby" a chcete pod ní rozbalovací panel se třemi kategoriemi:

1. V položce "Služby" aktivujete Mega Menu, necháte ji jako trigger, nastavíte Sloupce: 3, Rozložení: Karty.

2. Vytvoříte tři nové položky menu (viditelnost Desktop i Mobil můžete vypnout, zobrazí se jen v panelu):

   • "Střihy a styling" — Rodičovská položka: Služby, Sloupec 1, popis "Dámské, pánské i dětské stříhání.", ikona nůžky.

   • "Barvení a melír" — Rodičovská položka: Služby, Sloupec 2, popis "Od jednoduché barvy po náročné techniky.", ikona paleta.

   • "Péče o vlasy" — Rodičovská položka: Služby, Sloupec 3, popis "Regenerace, keratin, laminace.", ikona srdce.

3. Uložíte, obnovíte stránku a zkontrolujete v náhledu, že se panel rozbaluje se všemi třemi kartami vedle sebe.

5. Patička — čtyři samostatné bloky

Patička se skládá ze čtyř nezávislých částí. První dvě (Levá/Pravá) fungují úplně stejně jako Hlavní menu — jen bez Mega Menu.

Patička – Levá a Patička – Pravá

Typické rozdělení: do Levé patičky dáte hlavní stránky webu, do Pravé právní odkazy — Ochrana soukromí, Obchodní podmínky. Přidání položky je identické s postupem v kapitole 3.

📷 [OBRÁZEK 6 — Patička – Levá / Pravá — vložte soubor 06-paticka-leva-prava.png]

1. Patička – Levá — první sloupec odkazů v patičce.

2. Patička – Pravá — druhý sloupec, typicky právní odkazy.

3. Dokud v sekci nic není, systém zobrazí hlášku "V tomto menu nejsou žádné položky" a tlačítko Nová položka.

Sociální patička

Tahle sekce má jeden rozdíl oproti ostatním: místo obecného výběru ikon nabízí picker přímo pro sociální sítě — Facebook, Instagram, X/Twitter, LinkedIn, YouTube, TikTok a obecnou ikonu "odkaz".

📷 [OBRÁZEK 7 — Nová položka v Sociální patičce — vložte soubor 07-socialni-paticka.png]

1. Název — např. "Instagram".

2. URL — celý odkaz na váš profil.

3. Sociální sítě — picker s ikonami konkrétních platforem.

4. Desktop / Mobil / CTA tlačítko — viditelnost stejná jako u ostatních položek.

Patička – Info

Jediná záložka, která není seznam odkazů, ale jeden formulář s údaji, které se zobrazí v patičce webu.

📷 [OBRÁZEK 8 — Formulář Patička – Info — vložte soubor 08-paticka-info.png]

1. Jméno v patičce — název, který se zobrazí v patičce webu.

2. Krátký popis — pár slov o firmě pod jménem.

3. Company name — plný právní název firmy.

4. IČO / Tax ID (DIČ) — fakturační identifikátory.

5. Adresa — sídlo firmy.

6. Právní doložka — text o zápisu v rejstříku.

7. E-mail / Telefon — kontaktní údaje v patičce.

8. Website URL — odkaz na web.

9. Footer column headings — popisky sloupců patičky (Menu, Informace, Kontakt, IČ, DIČ, Sídlo).

10. Uložit informace — samostatné tlačítko, jiné než "Uložit" u položek.

Poznámka. Šablony mailů, hromadné rozesílání ani žádné notifikace tahle záložka nezajišťuje — je to čistě zobrazovací formulář pro patičku webu.

6. Kotvy — propojení tlačítka s místem na stránce

Kotva umožní, aby tlačítko v menu po kliknutí přeskrolovalo na konkrétní místo stránky:

1. Tlačítku nastavíte odkaz ve formátu #nazev.

2. Na místo, kam má tlačítko skočit, vložíte v Page builderu blok Kotva se stejným názvem bez křížku.

3. Po kliknutí systém najde kotvu se stejným názvem a přeskroluje na ni.

Kompletní návod na kotvy najdete v samostatném článku Menu a kotvy – jak nastavit navigaci na webu.

7. Vzhled & Logo — co běžně měnit

Typ menu

• Desktop — 4 varianty: Classic (logo vlevo, menu uprostřed, CTA vpravo — výchozí), Na střed, Rozdělené, Minimální.

• Mobil — 2 varianty: Spodní lišta, nebo Hamburger.

Logo

Nahrajete obrázek loga a doladíte Šířku (zvlášť pro desktop a mobil) a Posun Y/X v pixelech. Název (záložní) je text zobrazený, kdyby se logo nenačetlo, Favicon je ikonka v záložce prohlížeče.

📷 [OBRÁZEK 9 — Záložka Vzhled & Logo — vložte soubor 09-vzhled-typ-menu-logo.png]

1. Typ menu (desktop) — 4 varianty rozložení.

2. Typ menu (mobil) — Spodní lišta, nebo Hamburger.

3. Logo — nahrání, šířka, posun, záložní název, favicon.

4. Typografie — písmo, velikost, tučnost a efekty (Sticky, Glass, Oddělovače).

Tip. Typografie a stylování CTA tlačítek jsou jemné doladění na úrovni CSS — výchozí hodnoty už vypadají dobře. Měňte je jen tehdy, když přesně víte, co chcete změnit.

8. Vícejazyčný web

V záložce Languages můžete webu přidat jazykové mutace. Pro naprostou většinu jednojazyčných živnostenských webů to nepotřebujete.

9. Rychlý checklist

• Vím, jaký je rozdíl mezi Hlavním menu a oběma patičkami (Mega Menu jen v Hlavním menu).

• Každá položka má vyplněný Název (desktop i mobil) a správnou URL.

• Pokud používám Mega Menu, mám nastavený přesně jeden trigger a podpoložky mají správně vybranou rodičovskou položku a sloupec.

• V Sociální patičce mám aktuální odkazy na profily.

• V Patička – Info mám vyplněné aktuální kontaktní a fakturační údaje.

• Po každé úpravě jsem obnovil/a stránku (Ctrl+R) a zkontroloval/a náhled na desktopu i mobilu.