Jak začít na Živnowebu: kompletní návod (i pro úplné začátečníky)

📷 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 ti Živnoweb přináší

Než se pustíš do úprav, je dobré vědět, co všechno pod webem máš. Živnoweb totiž není jen „webová stránka“ — je to celá digitální kancelář v jednom, za jednu cenu. To, co by jinde znamenalo platit a propojovat pět různých aplikací, tady máš pohromadě od prvního dne:

Tenhle návod tě provede tou úplně první věcí ze seznamu — webem a administrací. Ostatní moduly (rezervace, platby, mailing…) mají vlastní podrobné návody, na které cestou odkážeme.

Co v článku najdeš

1. Co dostaneš po registraci — tvoje šablona

2. Základní orientace v administraci

3. Z čeho je stránka tvořená — koncept bloků

4. Podrobný průchod jednotlivými typy bloků

5. Jak kontrolovat změny na webu

6. Vkládání fotek — Stránky / Média

7. Menu a patička — základ

8. Otevírací doba na webu

9. Nastavení rezervací — základ

10. 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í.

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š:

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.

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.

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.

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.

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.

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.

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 na proklik funguje stejně jako tlačítko.

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.

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 klientů. Ke každé referenci vyplníš text, jméno autora, případně roli/firmu a nepovinný avatar.

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.

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.

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.

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.

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.

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é.

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říš.

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.

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.

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.

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é.

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.

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á hodně nastavení - samostatný podrobný návod 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.