📷 Poznámka k obrázkům: Červená čísla ve screenshotech ukazují přesně, kam kliknout — vysvětlení každého čísla najdeš v popisku pod obrázkem. Osobní údaje na screenshotech jsou začerněné.
Co v článku najdeš
Co dostaneš po registraci — tvoje šablona
Základní orientace v administraci
Z čeho je stránka tvořená — koncept bloků
Podrobný průchod jednotlivými typy bloků
Jak kontrolovat změny na webu
Vkládání fotek — Stránky / Média
Menu a patička — základ
Otevírací doba na webu
Nastavení rezervací — základ
Checklist na závěr
1. Co dostaneš po registraci — tvoje šablona
Hned po registraci na Živnowebu nezačínáš od prázdné stránky. V administraci máš automaticky vytvořenou úvodní stránku Homepage, předvyplněnou šablonou podle oboru, který sis při registraci zvolil/a (kadeřnictví, fotograf, zahradník, masér a další). Šablona má už nastavenou strukturu, ukázkové texty, obrázky i ceník — je to živá, publikovaná stránka, kterou od první chvíle můžeš postupně přepisovat na vlastní.
Tenhle návod ti ukáže, jak si tuhle šablonu vzít za svou: jak najít, kde co je, a jak upravit texty, fotky, ceník, kontakty i menu tak, aby stránka mluvila o tobě a tvém podnikání.
📷 [OBRÁZEK 01 — Seznam stránek v Page builderu se stránkou Homepage — vložte soubor 01-vase-sablona-homepage.png]
Popisek: 1 — v menu vlevo najdeš sekci Stránky → Page builder. 2 — tvoje úvodní stránka se jmenuje Homepage. 3 — stav Publikováno znamená, že stránka běží naživo. 4 — tlačítkem Upravit se dostaneš do editoru obsahu.
Tip. Stránku nikdy nezačínáš stavět od nuly — jen postupně nahrazuješ ukázkový obsah tím svým. Nemusíš to zvládnout na jedno posezení, změny se ukládají průběžně.
2. Základní orientace v administraci
Levé menu administrace je rozdělené do čtyř hlavních skupin. Než se pustíš do úprav stránky, je dobré vědět, co kde najdeš:
Skupina v menu | K čemu slouží |
|---|---|
Zakázky | Zákazníci, zprávy (Pošta), rezervace a jejich nastavení, propojení s externími aplikacemi. |
Galerie | Klientské fotogalerie — pokud fotíš a chceš klientům posílat výběr fotek. |
Stránky | Tady se odehrává tenhle návod. Obsah tvého webu: Page builder, Blog, Služby, Média, Portfolio, Menu a nastavení webu. |
E-shop | Objednávky, produkty, dárkové poukazy a další věci spojené s prodejem online. |
Tenhle návod se soustředí výhradně na sekci Stránky — tam totiž upravuješ obsah své stránky. Ostatní sekce (Zakázky, Galerie, E-shop) mají vlastní logiku a zaslouží si samostatné návody.
📷 [OBRÁZEK 02 — Levé menu administrace se čtyřmi skupinami — vložte soubor 02-orientace-leve-menu.png]
Popisek: 1 — Zakázky: zákazníci, zprávy, rezervace. 2 — Galerie: klientské fotogalerie. 3 — Stránky: obsah webu — tady budeš trávit nejvíc času. 4 — E-shop: prodej produktů a poukazů online.
3. Z čeho je stránka tvořená — koncept bloků
Každá stránka v Živnowebu je poskládaná z bloků — samostatných úseků obsahu, které jdou pod sebou. Jeden blok může být úvodní fotka s nadpisem, další ceník služeb, další fotogalerie, další kontaktní formulář. Bloky si představ jako stavební kostky: přidáváš je, mažeš, přesouváš tažením nahoru/dolů, duplikuješ nebo dočasně skrýváš — beze změny kódu.
Do editoru se dostaneš přes Stránky → Page builder → Upravit u tvé stránky. Otevře se Přehled stránky — seznam všech bloků shora dolů přesně tak, jak jdou na webu za sebou.
📷 [OBRÁZEK 03 — Přehled stránky se seznamem bloků shora dolů — vložte soubor 03-prehled-bloku-stranky.png]
Popisek: 1 — každý řádek je jeden blok, seřazený přesně tak, jak jde na webu za sebou. 2 — ikona vlevo napovídá typ bloku. 3 — kliknutím na řádek otevřeš nastavení daného bloku vpravo. 4 — ikonky u řádku: oko (skrýt/zobrazit), duplikovat, smazat, úchyt vlevo (přetáhnout jinam).
Ať klikneš na jakýkoli blok, jeho nastavení má vždy podobnou stavbu:
Obsah — texty, nadpisy, obrázky, konkrétní pro daný typ bloku.
Viditelnost — zaškrtávátka Desktop / Mobil, kterými blok schováš jen na jednom typu zařízení.
Nastavení — zbylé volby specifické pro typ bloku (barvy, odsazení, opakující se položky…).
Poznámka. Jakmile pochopíš tuhle stavbu jednou, poznáš se v ní u každého bloku — mění se jen obsah polí, ne způsob, jak s nimi pracovat.
4. Podrobný průchod jednotlivými typy bloků
V knihovně bloků najdeš desítky variant (hlavně v kategorii Hero), ale princip editace je u příbuzných bloků stejný. Proto tu projdeme jeden reprezentativní příklad ke každému typu bloku, který se v tvé šabloně skutečně používá.
4.1 Hero blok (úvodní banner s fotkou)
Hero blok je velká úvodní sekce s fotkou, nadpisem a tlačítky — typicky úplně nahoře stránky. V knihovně bloků najdeš víc variant (Hero Split, Hero Carousel, Hero Bento, Hero Fullscreen…), pole se ale opakují: liší se hlavně v tom, kolik fotek se najednou zobrazuje.
📷 [OBRÁZEK 04 — Editace Hero bloku — vložte soubor 04-hero-blok-editace.png]
Popisek: 1 — Nadpis (prázdné pole nahoře) a pod ním Úroveň nadpisu (H1–H6, ovlivňuje SEO). 2 — Podnadpis — delší doplňující text s vlastní formátovací lištou. 3 — v jednom řádku: Zarovnání celé sekce, Obrázek vlevo a Viditelnost. 4 — Obrázek — nahrání nebo výběr fotky z knihovny Média. O kousek níž najdeš i Tlačítka — primární a sekundární CTA s textem, odkazem a barvami.
4.2 Textový blok
Univerzální blok na volný text — odstavce, zvýraznění, odkazy. Umí i víc sloupců vedle sebe (tlačítkem „+ Přidat Sloupce obsahu"), takže jde vytvořit třeba dvousloupcový text.
📷 [OBRÁZEK 05 — Editace textového bloku — vložte soubor 05-textovy-blok-editace.png]
Popisek: 1 — formátovací lišta: tučné, kurzíva, barva textu, zarovnání, odkaz. 2 — samotný text sloupce, který upravuješ přímo na místě. 3 — odsazení sloupce (nahoře/dole/vlevo/vpravo v px). 4 — tlačítko pro přidání dalšího sloupce vedle stávajícího textu.
4.3 Ceník služeb
Opakující se seznam položek — ideální na přehled služeb s cenami. Ke každé položce nastavíš ikonu, název, krátký popis a cenu; položky přidáváš, přesouváš i mažeš tlačítky u každého řádku.
📷 [OBRÁZEK 06 — Editace bloku Ceník služeb — vložte soubor 06-cenik-sluzeb-editace.png]
Popisek: 1 — výběr ikony z knihovny symbolů pro danou službu. 2 — Název služby. 3 — Krátký popis a Cena (např. „od 650 Kč"). 4 — šipky/kopie/koš u položky — přesun, duplikace a mazání jedné položky ceníku.
4.4 Obrázek
Samostatný jeden obrázek — třeba fotka provozovny nebo detail práce. Kromě nahrání fotky má i pole pro SEO a volitelný proklik.
📷 [OBRÁZEK 07 — Editace bloku Obrázek — vložte soubor 07-obrazek-editace.png]
Popisek: 1 — nahrání/výměna obrázku. 2 — Alt text (SEO) a Popisek pod obrázkem (stejný řádek). 3 — Velikost, vlastní šířka, zarovnání a zakulacení rohů. 4 — volitelný Odkaz (URL) — obrázek se pak dá proklikem stát tlačítkem.
4.5 Feature karty
Podobné ceníku, ale obecnější — sada karet s ikonou, titulkem a textem. Hodí se na výhody, vlastnosti nebo cokoli, co chceš vypíchnout ve třech až čtyřech bodech.
📷 [OBRÁZEK 08 — Editace bloku Feature karty — vložte soubor 08-feature-karty-editace.png]
Popisek: 1 — nadpis a podnadpis celé sekce karet. 2 — ikona jednotlivé karty. 3 — titulek karty a jeho velikost. 4 — stejně jako u ceníku: karty přidáváš, přesouváš a mažeš jednotlivě.
4.6 Reference slider
Karusel recenzí od spokojených klientů. Ke každé referenci vyplníš text, jméno autora, případně roli/firmu a nepovinný avatar.
📷 [OBRÁZEK 09 — Editace bloku Reference slider — vložte soubor 09-reference-slider-editace.png]
Popisek: 1 — Text reference — přesná citace klienta. 2 — Jméno autora reference. 3 — nepovinná Role / Firma. 4 — nepovinný Avatar — fotka autora reference.
4.7 Galerie (mřížka)
Mřížka fotek — ideální na ukázky práce. Fotky přidáváš tlačítkem přímo v mřížce, ke každé jde vyplnit alt text a popisek, pořadí měníš přetažením.
📷 [OBRÁZEK 10 — Editace galerie (mřížky) — vložte soubor 10-galerie-mrizka-editace.png]
Popisek: 1 — dlaždice Přidat obrázek. 2 — u každé fotky pole Alt text. 3 — a pod ním Popisek. 4 — ikonky u fotky po najetí myší: přesun, duplikace, smazání. Úplně nahoře nad mřížkou je ještě nepovinný Nadpis sekce.
4.8 Kontaktní formulář
Vloží na stránku formulář, kterým ti mohou lidé napsat přímo z webu. Konkrétní formulář — jeho pole a nastavení — se spravuje jinde (Zakázky → Nastavení → Formuláře), v bloku ho jen vybereš ze seznamu a doladíš vzhled nadpisu.
📷 [OBRÁZEK 11 — Editace bloku Kontaktní formulář — vložte soubor 11-kontaktni-formular-editace.png]
Popisek: 1 — Nadpis formuláře. 2 — Úroveň nadpisu (H1–H6). 3 — Formulář z CMS — výběr, který konkrétní formulář se má na stránce zobrazit. 4 — Typografie nadpisu — velikost, tloušťka, barva.
4.9 Menu tlačítka
Řádek jednoduchých tlačítek — typicky rychlé kontakty jako „Zavolat" nebo „Napsat e-mail". Ke každému tlačítku nastavíš text, odkaz, ikonu a vizuální styl.
📷 [OBRÁZEK 12 — Editace bloku Menu tlačítka — vložte soubor 12-menu-tlacitka-editace.png]
Popisek: 1 — Text tlačítka, např. „Telefon". 2 — Odkaz — kam tlačítko vede. 3 — výběr ikony. 4 — vizuální styl tlačítka.
4.10 Kotva (Anchor)
Neviditelný blok, který na webu nikdo nevidí — slouží jen jako „záložka" v textu stránky. Díky němu po kliknutí na položku menu stránka plynule sjede přesně na správné místo.
📷 [OBRÁZEK 13 — Editace bloku Kotva — vložte soubor 13-kotva-editace.png]
Popisek: 1 — ID kotvy (bez #) — jednoduché jméno, na které se pak menu odkazuje. 2 — Odsazení od vrchu (px), aby po sjetí nezůstal nadpis schovaný pod horní lištou.
5. Jak kontrolovat změny na webu
V horní liště editoru máš vždy po ruce nástroje, kterými změny zkontroluješ dřív, než je uvidí návštěvníci.
📷 [OBRÁZEK 14 — Horní lišta editoru — vložte soubor 14-kontrola-zmen-lista.png]
Popisek: 1 — ikony mobil / desktop — přepnou náhled editoru na zvolenou velikost obrazovky. 2 — ikona oko — otevře živý náhled stránky. 3 — stav stránky (Published/Draft) a indikátor Uloženo vpravo. 4 — tlačítko Přístup — nastavení, jestli je stránka veřejná, nebo jen pro přihlášené.
Kompletní postup, jak si ověřit vzhled na počítači i na mobilu krok za krokem, najdeš v samostatném návodu Jak kontrolovat změny na webu (desktop a mobil).
6. Vkládání fotek — Stránky / Média
Všechny fotky, které používáš v blocích, se ukládají do centrální knihovny Stránky → Média. Vyplatí se je organizovat do složek podle typu (logo, provozovna, ukázky práce…) — stejnou fotku pak snadno najdeš a použiješ znovu v jiném bloku, aniž bys ji musel/a nahrávat podruhé.
📷 [OBRÁZEK 15 — Knihovna Média se složkami fotek — vložte soubor 15-media-slozky.png]
Popisek: 1 — tlačítko Nahrát — nahraje nové fotky z počítače. 2 — tlačítko Nová složka — pro roztřídění fotek podle typu. 3 — podporované formáty jsou JPG a WebP, maximálně 2560 px na delší straně. 4 — kliknutím na složku se do ní ponoříš.
📷 [OBRÁZEK 16 — Nahrávání fotek do složky — vložte soubor 16-media-nahrani-fotek.png]
Popisek: 1 — šipka O úroveň výše tě vrátí zpátky do kořenové knihovny. 2 — fotky přetáhneš myší přímo do plochy, nebo použiješ tlačítko Nahrát.
Tip. Fotku nemusíš hledat v Médiích předem — u kteréhokoli bloku s obrázkem klikneš rovnou na „Vybrat obrázek" a knihovna Média se otevře uvnitř bloku.
7. Menu a patička — základ
Navigaci webu spravuješ v Stránky → Menu. Najdeš tam pět samostatných menu: Hlavní menu (navigace nahoře), Patička — Levá, Patička — Pravá, Sociální patička (odkazy na sociální sítě) a Patička — Info. U každé položky nastavíš název, kam vede (URL nebo kotva na stránce z předchozí kapitoly) a jestli se má zobrazovat na desktopu, mobilu, nebo obojím.
📷 [OBRÁZEK 17 — Správa menu — vložte soubor 17-menu-a-paticka-prehled.png]
Popisek: 1 — záložky nahoře přepínají mezi Hlavním menu a jednotlivými částmi patičky. 2 — každá položka menu vede buď na samostatnou stránku, nebo na kotvu. 3 — ikonky viditelnosti u položky — desktop / mobil zvlášť. 4 — tlačítko Nová položka přidá další odkaz do menu.
Tohle je jen základ pro rychlou orientaci. Menu a patička mají dost možností na to, aby si zasloužily vlastní podrobný návod — ten najdeš v článku Menu a patička: kompletní návod pro živnostníky.
8. Otevírací doba na webu
Otevírací dobu, kterou vidí návštěvníci na stránce, nastavuješ přímo v bloku Otevírací doba v Page builderu. Ke každému dni v týdnu vyplníš čas Od–Do, případně den označíš jako Zavřeno, nebo přidáš polední pauzu.
📷 [OBRÁZEK 18 — Editace bloku Otevírací doba — vložte soubor 18-oteviraci-doba-editace.png]
Popisek: 1 — Den — výběr konkrétního dne v týdnu. 2 — čas Od a Do pro daný den. 3 — přepínač Zavřeno. 4 — přepínač Polední pauza s vlastním časem Od–Do.
Pozor, časté nedorozumění. Tenhle blok jen zobrazuje otevírací dobu na webu — nijak neovlivňuje, kdy si k tobě klienti mohou objednat rezervaci. Pracovní dobu pro rezervace nastavuješ samostatně, viz další kapitola.
9. Nastavení rezervací — základ
Rezervace spravuješ v Zakázky → Rezervace, kde vidíš kalendář po týdnech nebo měsících. Přes tlačítko Nastavení rezervací se dostaneš k záložkám Typy rezervací, Kalendáře a Obecné.
📷 [OBRÁZEK 19 — Kalendář rezervací — vložte soubor 19-rezervace-kalendar.png]
Popisek: 1 — přepínač Týdenní / Měsíční zobrazení kalendáře. 2 — tlačítko Nastavení rezervací — typy služeb, kalendáře, pracovní doba.
📷 [OBRÁZEK 20 — Nastavení rezervací, režim kalendáře — vložte soubor 20-rezervace-nastaveni.png]
Popisek: 1 — Pevné sloty — ručně vytvořené termíny (výchozí režim). 2 — Časové sloty — přepnutím sem nastavíš pracovní dobu a pauzy, ze kterých se termíny počítají automaticky. Kalendářů (pro víc pracovníků nebo poboček) můžeš mít víc — vytvoříš je tlačítkem „+ Nový kalendář" na záložce Kalendáře.
Rezervační systém má dost nastavení na samostatný podrobný návod — ten najdeš v článku Nastavení rezervací na Živnowebu.
10. Checklist na závěr
Vím, že po registraci mám hotovou šablonu Homepage podle svého oboru a postupně ji přepisuji na vlastní.
V levém menu se orientuji ve čtyřech skupinách — Zakázky, Galerie, Stránky, E-shop.
Vím, že stránka je poskládaná z bloků, které upravuji, přesouvám, duplikuji a mažu.
Umím otevřít a upravit obsah, viditelnost i nastavení jednotlivého bloku.
Než uložím, zkontroluji náhled pro desktop i mobil.
Fotky nahrávám a třídím do složek v Stránky → Média.
Vím, kde upravit hlavní menu a jednotlivé části patičky.
Rozumím rozdílu mezi zobrazovanou otevírací dobou a pracovní dobou pro rezervace.
Vím, kde najdu Typy rezervací a Kalendáře, pokud budu chtít přijímat objednávky online.