Generátor webových stránek bez kódování — od prázdného formuláře k hotovému, nahranému webu.
WEBZENith je editor, ve kterém web skládáš přes formulář: vlevo vyplňuješ obsah a nastavení, vpravo hned vidíš živý náhled. Nic se neprogramuje — appka na konci vygeneruje hotové, funkční soubory (HTML, případně manifest.json a sw.js pro PWA, sitemap.xml a robots.txt), které stačí nahrát na hosting. Tento manuál popisuje appku sekci po sekci, přesně v pořadí, v jakém jdou nastavení v levém panelu appky za sebou.
Úplně nahoře v panelu appky vyplníš základ, ze kterého vychází zbytek webu:
| Pole | K čemu slouží |
|---|---|
| Název webu / značka | Zobrazuje se jako název v levém menu webu a v patičce (©). |
| Titulek stránky (<title>) | Text v záložce prohlížeče a hlavní nadpis ve výsledcích vyhledávání. |
| Meta popis (SEO) | Krátký popis pod odkazem ve výsledcích vyhledávání, cca 150 znaků. |
| Doména (pro canonical / OG) | Skutečná adresa, na které web poběží — použije se pro odkazy pro vyhledávače a sociální sítě (og:url, canonical). Vyplň ji, až budeš znát finální doménu. |
V sekci Favicon nahraješ ikonku do záložky prohlížeče — buď jako čtvercový obrázek ze zařízení (appka ho vloží přímo do exportovaného HTML jako base64, takže funguje bez dalšího nahrávání), nebo zadáš URL už existujícího favicon souboru. Pokud nevyplníš nic, v HTML zůstane jen odkaz na favicon.ico a soubor musíš na hosting nahrát ručně pod tímto názvem.
Hero sekce je první věc, kterou návštěvník na webu uvidí. Vyplníš:
Tip: nadpis by měl být konkrétní, ne chytrý — návštěvník má na pochopení jen pár vteřin. Podnadpis by měl přidávat nový detail, ne opakovat nadpis jinými slovy.
Pod hero text můžeš přidat jedno nebo víc tlačítek. Každé tlačítko může vést na sekci webu (Hero, Funkce, FAQ), na vlastní URL, na konkrétní vlastní stránku, nebo přímo do FAQ. U každého nastavíš, jestli je hlavní (výrazné, plná barva) nebo doplňkové (obrysové), a jestli se má otevírat v nové záložce.
Do hero sekce lze volitelně vložit obrázek — nahráním ze zařízení (base64 přímo v HTML) nebo vložením URL. K obrázku doplň alternativní text (alt) — pomáhá SEO i návštěvníkům používajícím čtečku obrazovky.
Nepovinná sekce „Video / Audio" přidá na hlavní stránku (hned za karty/funkce) přehrávatelné video a/nebo zvukovou nahrávku.
Nejjednodušší je vložit běžný odkaz na YouTube nebo Vimeo (např. přímo z adresního řádku prohlížeče) — appka ho sama převede na vložené (embed) video. Alternativně můžeš nahrát vlastní soubor (.mp4, .webm) ze zařízení nebo zadat jeho URL. Pokud vyplníš oboje, přednost má URL.
Funguje stejně jako video — nahraný soubor (.mp3, .wav), nebo URL (URL má opět přednost). Zobrazí se jako přehrávač se standardními ovládacími prvky.
Kdy nahrát soubor a kdy použít URL: nahraný soubor se uloží přímo do exportovaného HTML a funguje i bez dalšího hostování, ale u videa to výrazně zvětší výsledný soubor. Pro delší video nebo audio je praktičtější mít ho nahrané jinde (YouTube, vlastní úložiště) a sem vložit jen odkaz.
K videu i audiu můžeš přidat volitelný krátký popisek (nadpis) nad přehrávačem.
Nejrychlejší cesta ke vzhledu je sekce „Grafický styl webu" s 16 hotovými předvolbami (barvy + písmo dohromady). Výsledek pak můžeš doladit ručně:
Tip na kontrast: text musí být dobře čitelný na pozadí. Pokud si nejsi jistý/á kombinací barev, zvol raději výraznější kontrast než ten, který se zdá „stylový", ale špatně se čte.
V sekci „Rozvržení webu" voleno samotné uspořádání prvků, ne barvy:
V sekci Navigace zapneš/vypneš a přejmenuješ odkazy na Hero, Funkce a FAQ v levém menu webu. Přepínač „Zobrazovat vlastní stránky v menu" určuje, jestli se vlastní stránky (viz níže) automaticky přidávají do menu na každé stránce, nebo jestli je propojíš jen ručně přes tlačítka a karty.
Ve stejné sekci dole můžeš přidat ikony sociálních sítí (Instagram, Facebook, TikTok, YouTube, e-mail…) — zobrazí se jako spodní řádek levého menu na každé stránce webu.
V sekci „Vlastní stránky" přidáváš libovolný počet podstránek webu. Každá se exportuje jako svůj vlastní samostatný .html soubor (název podle textu v menu, např. o-nas.html) s vlastní URL, titulkem, meta popisem i canonical/OG tagy — lepší pro SEO a sdílení odkazů než schované sekce v jednom souboru.
U každé stránky vybereš typ:
Pokud je zapnuté zobrazování v menu, stránka se automaticky objeví jako položka v levém menu; jinak na ni musíš odkázat ručně (CTA tlačítka i klikatelné karty umí mířit i na konkrétní vlastní stránku). Sitemap.xml pak automaticky obsahuje URL všech vlastních stránek.
V sekci Karty / funkce popíšeš jednotlivé výhody nebo služby — ikona, nadpis, text. Rozvržení karet (mřížka, seznam, kroky, minimalistické) se volí v sekci Rozvržení webu (viz výše).
V sekci FAQ přidáš časté otázky a odpovědi. Appka z nich automaticky vygeneruje i strukturovaná data pro Google (FAQPage), díky kterým se otázky mohou zobrazit přímo ve výsledcích vyhledávání jako rozbalovací seznam.
Tip: používej otázky, které lidé opravdu pokládají (e-mail, telefon, sociální sítě), ne vymyšlené. Odpověď by měla přijít hned v první větě, podrobnosti až za ní.
Volitelná sekce „Kontaktní formulář" přidá na hlavní stránku (za FAQ) formulář s volbou, kam se má odesílat:
Jde přidat i volitelné pole Telefon a povinný souhlas se zpracováním osobních údajů s vlastním textem. Formulář má vestavěnou ochranu proti spamu (honeypot pole neviditelné pro lidské návštěvníky).
V Patičce nastavíš, jestli se má zobrazit „© rok značka", volitelný vlastní text (např. IČO, adresa) a odkazy (obchodní podmínky, kontakt, zásady ochrany osobních údajů apod.).
V pokročilých volbách appka umí vygenerovat:
Tyto soubory se stahují zvlášť tlačítky a po exportu je nahraješ vedle hlavního HTML souboru. Vygenerovaný sw.js automaticky počítá s hlavní stránkou pod jejím skutečným staženým názvem i pod index.html, takže offline cache funguje bez ohledu na to, jak si hlavní stránku na hostingu přejmenuješ.
Nezapomeň doplnit obrázky ikon — favicon, apple-touch-icon, ikony 192×192 a 512×512, og-image. Appka je sama negeneruje, jen na ně odkazuje.
Sekce „Stránka 404" vygeneruje samostatný soubor 404.html, který většina hostingů (Netlify, GitHub Pages, Vercel…) automaticky zobrazí místo chybové hlášky prohlížeče při neexistující adrese. Stahuje se zvlášť tlačítkem a do vyhledávačů se schválně neindexuje (meta robots „noindex").
„Cookie lišta" zobrazí jednorázové upozornění dole na stránce — zapamatuje se v prohlížeči návštěvníka a příště se už nezobrazí. Pokud v Patičce máš odkaz s popiskem obsahujícím „ochrana", „osobní", „gdpr" nebo „privacy", lišta na něj automaticky odkáže.
V sekci „GDPR / Zásady ochrany osobních údajů" necháš vygenerovat stránku privacy.html, jejíž text se sám přizpůsobí tomu, jestli a jakou službu používá kontaktní formulář. Jde o obecnou šablonu, ne o právní poradenství — podle povahy webu ji může být potřeba doplnit nebo nechat zkontrolovat právníkem.
Sekce „Vlastní kód" umožňuje vložit vlastní CSS, kód do <head> (např. ověřovací kódy, vlastní fonty) a kód před </body> (např. skript chatu nebo sledovací kód). Vloží se na hlavní stránku, všechny vlastní podstránky i na stránku 404, takže stačí vyplnit jednou.
Pozor: cokoli sem napíšeš, se do webu vloží přesně tak, jak je, bez kontroly — chyba v kódu může stránku rozbít.
V pravé části appky přepínáš náhled mezi Desktop a Mobil, ať vidíš, jak bude web vypadat na telefonu. Pokud appku upravuješ přímo z mobilního zařízení, nahoře se objeví přepínač „Upravit obsah / Náhled webu" pro pohodlnější práci na malé obrazovce.
Appka průběžně automaticky ukládá rozpracovaný projekt do localStorage tvého prohlížeče (lokálně, ne na server) — při zavření karty se nic neztratí. Navíc:
Tlačítko „↓ Stáhnout" vpravo nahoře rozbalí nabídku:
Všechny stažené soubory nahraješ vedle sebe na jakýkoli hosting pro statické stránky (např. GitHub Pages, Netlify, nebo běžný webhosting). Hlavní stránku můžeš nechat pod staženým názvem, nebo ji přejmenovat na index.html, pokud chceš, aby se web načítal na holé doméně bez názvu souboru v adrese — PWA offline cache funguje automaticky v obou případech. Pokud používáš i PWA, sitemapu/robots.txt, stránku 404 nebo GDPR stránku, stáhni jejich soubory zvlášť tlačítky v příslušných sekcích a nahraj je vedle ostatních.
Titulek stránky by měl obsahovat název webu i klíčové slovo, které vystihuje nabídku (např. „Kadeřnictví Praha 5 — objednávky online"). Meta popis funguje jako krátká reklama ve výsledcích vyhledávání — ideálně do 150–160 znaků.
Pokud web řeší víc témat, je pro SEO lepší mít je jako samostatné vlastní stránky s vlastní adresou, titulkem a popisem, než je schovávat jako kotvy na jedné dlouhé stránce.
Pro fotografie použij JPEG nebo WebP, pro loga a ikony s průhledností PNG nebo SVG. Před nahráním obrázek zmenši na skutečnou zobrazovanou velikost — zbytečně velké soubory web jen zpomalují. Vždy doplň alternativní text (alt).
Většina návštěvníků přijde na web přes mobil — zkontroluj web nejdřív na malé obrazovce, ne až po dokončení na počítači.
| Situace | Co s tím |
|---|---|
| Náhled webu je prázdný / nereaguje | Zkus obnovit stránku appky (data se díky autosave neztratí) a případně appku otevřít v aktuálním prohlížeči (Chrome, Firefox, Safari, Edge). |
| Nahraný obrázek/video zvětšil export | Nahrané soubory se ukládají přímo do HTML jako base64. Pro velké soubory (hlavně video) použij radši URL na externí hosting. |
| Web po nahrání na hosting nefunguje | Zkontroluj, že jsi nahrál/a všechny stažené soubory (HTML, manifest.json, sw.js, případné vlastní stránky) do stejné složky a že cesty k obrázkům odpovídají tomu, kam jsi je uložil/a. |
| Cookie lišta neodkazuje na zásady ochrany os. údajů | Zkontroluj, že odkaz v Patičce má v popisku slovo „ochrana", „osobní", „gdpr" nebo „privacy" — jinak ho appka nedokáže automaticky spárovat. |
| Ztratil/a jsem rozpracovaný projekt | Appka ho ukládá do localStorage prohlížeče — pokud jsi ho nesmazal/a v nastavení prohlížeče, měl by se po znovuotevření appky obnovit sám. Pravidelně používej i „Uložit projekt" jako zálohu. |