SYNTHLUCIDAWEBZENith — Tvorba webu snadno a rychle — bez kódování a ZDARMA.
🏠 Domů
Návod
📖 Tady je stručný přehled hlavních funkcí. Kompletní podrobný manuál najdeš na synthlucida.com/webzen-manual.html.

SYNTHLUCIDA WEBZENith je jednoduchý generátor webů — od jednostránkové prezentace až po web s více podstránkami. Vlevo vyplňuješ formulář, vpravo hned vidíš živý náhled. Nic se neprogramuje — na konci si stáhneš hotový, funkční HTML soubor (nebo víc souborů, pokud máš i vlastní podstránky), který stačí nahrát na hosting. Hodí se na osobní web, prezentaci produktu, službu nebo landing page.

Jak začít

Nahoře vyplň Název webu, Doménu (použije se v odkazech pro vyhledávače a sociální sítě) a Titulek + Popis stránky pro SEO. V sekci Ikony webu nahraj jeden obrázek (logo nebo ikonku) — appka z něj sama vygeneruje favicon, apple-touch-icon i obě PWA ikony, stačí doladit výřez posuvníky a kliknout na „Použít výřez a vygenerovat ikony". Pak nastav Hero sekci — hlavní nadpis a podnadpis, které návštěvník uvidí jako první.

CTA tlačítka a vizuál

Pod hero textem můžeš přidat jedno nebo víc tlačítek — každé může vést na sekci webu, na vlastní URL, nebo do FAQ. U každého jde nastavit, jestli je hlavní (výrazné) nebo doplňkové, a jestli se otevírá v nové záložce. Do hero sekce lze volitelně vložit i obrázek — buď nahráním ze zařízení, nebo vložením URL — a je dobré k němu doplnit alternativní text (pomáhá SEO i přístupnosti).

Video a audio

Nepovinná sekce „Video / Audio" přidá na hlavní stránku (za Karty/funkce) přehrávatelné video a/nebo zvukovou nahrávku. U videa vybereš buď odkaz na YouTube/Vimeo (automaticky se převede na vložené video), nebo vlastní soubor/URL (.mp4, .webm). Audio se stejně tak nahraje jako soubor nebo se vloží URL (.mp3, .wav). K oběma jde přidat nepovinný popisek nad přehrávačem.

Vzhled — grafický styl, barvy, písmo a rozvržení

Grafický styl (barvy + písmo dohromady) nastavíš nejrychleji přes hotové předvolby v sekci „Grafický styl webu" a pak si výsledek ještě doladíš ručně v sekcích Barvy (accent, glow a dvě barvy pozadí) a Písmo (zvlášť pro nadpisy a pro běžný text). V sekci „Rozvržení webu" pak volíš samotné uspořádání, ne barvy — pro hero sekci vystředěné, dvousloupcové (obrázek vlevo/vpravo), zarovnané vlevo, obrázek na pozadí nebo orámovaný box (text i obrázek v kartě se stínem uprostřed); pro karty/funkce mřížku, seznam, číslované kroky nebo minimalistický styl bez rámečků.

Navigace

V sekci Navigace zapneš/vypneš a přejmenuješ odkazy na Hero, Funkce a FAQ v levém menu webu. Volba „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 webu, nebo jestli je propojíš jen ručně přes tlačítka a karty. Dole ve stejné sekci 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.

Vlastní stránky

V sekci „Vlastní stránky" přidáváš další podstránky 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, <title>, meta description i canonical/OG tagy, takže je to lepší pro SEO i sdílení odkazů než schované sekce v jednom souboru. U každé stránky vybereš typ: Prostá (nadpis + text, volitelně obrázek — jako dřív) nebo Landing (vlastní hero, podnadpis, volitelné tlačítko a karty funkcí). Pokud je zapnuté zobrazování v menu, objeví se stránka automaticky jako položka v levém menu na každé stránce webu; 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.

Karty, FAQ, kontaktní formulář a patička

V sekci Karty / funkce popíšeš jednotlivé výhody nebo služby (ikona, nadpis, text). V sekci FAQ přidáš časté otázky a odpovědi — automaticky se z nich vygeneruje i strukturovaná data pro Google. Volitelná sekce „Kontaktní formulář" přidá na hlavní stránku (za FAQ) formulář s volbou, kam se má odesílat — Formspree, Web3Forms, Netlify Forms (funguje jen při hostování na Netlify), nebo prosté „mailto" bez cizí služby; jde přidat i volitelné pole Telefon a povinný souhlas se zpracováním osobních údajů s vlastním textem. V Patičce nastavíš, jestli se má zobrazit „© rok značka", volitelný vlastní text (např. IČO, adresa) a odkazy (obchodní podmínky, kontakt apod.).

PWA, sitemapa a robots.txt

Dole najdeš pokročilé volby: vygenerování manifest.json a sw.js, díky kterým si návštěvníci mohou web „nainstalovat" jako appku (PWA); dále sitemap.xml a robots.txt pro vyhledávače. Tyto soubory se dají stáhnout i zvlášť tlačítky, ale hlavně jsou teď součástí "Stáhnout celý web" v menu, takže je není potřeba řešit ručně. 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" a stejně tak i s manifestem a ikonami zadanými výše, takže offline cache funguje bez ohledu na to, jestli si hlavní stránku na hostingu přejmenuješ. Samotné obrázky ikon (favicon, apple-touch-icon, 192×192, 512×512, OG obrázek) si necháš vygenerovat v sekci „Ikony webu" — stačí nahrát jeden obrázek a doladit výřez, appka z něj připraví všechny velikosti i názvy souborů sama.

Stránka 404, cookie lišta a GDPR stránka

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. „Cookie lišta" zobrazí jednorázové upozornění dole na stránce (zapamatuje se v prohlížeči návštěvníka) — 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í, takže ji podle povahy webu může být potřeba doplnit nebo nechat zkontrolovat právníkem.

Vlastní kód (pokročilé)

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. Cokoli sem napíšeš, se do webu vloží přesně tak, jak je, bez kontroly, takže chyba v kódu může stránku rozbít.

Náhled na mobilu

V pravé části přepínáš náhled mezi Desktop a Mobil, ať vidíš, jak bude web vypadat na telefonu. Pokud upravuješ web 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.

Uložení rozpracované práce

Appka průběžně automaticky ukládá rozpracovaný projekt do prohlížeče (localStorage), takže se při zavření karty o nic nepřijde. Přes „💾 Uložit projekt" si navíc můžeš stáhnout .json soubor s celým rozpracovaným webem a později ho přes „📂 Načíst projekt" znovu otevřít — třeba na jiném počítači. Tlačítko „🗑️ Nový projekt" vše vrátí zpět na vzorové texty.

Export hotového webu

Tlačítko „↓ Stáhnout" vpravo nahoře rozbalí nabídku se dvěma volbami: „Stáhnout HTML" stáhne jen hlavní stránku jako jeden .html soubor, „Stáhnout celý web" stáhne hlavní stránku i všechny vlastní stránky najednou, každou jako samostatný soubor (postupně, jeden po druhém). Všechny stažené soubory pak nahraješ vedle sebe na jakýkoli hosting — 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.

🌿

Čas na pauzu

Tvoříš už chvíli web — dej si pauzu od tvorby webu a vyzkoušej Relax Player. Pár minut klidu neuškodí.

🎧 Otevřít Relax Player
Náhled:

PWA import appky

Jak na to
  1. Nahoře zadej plnou URL, na které appka poběží (např. https://synthlucida.com/neco.html nebo klidně adresu na úplně jiné doméně). Pokud název souboru končí jazykovou příponou -en, -sk, -de nebo -pl (např. neco-en.html), nástroj to pozná a v manifestu použije pro ikony 192×192 a 512×512 grafiku bez téhle přípony (sdílenou s výchozí/CZ verzí appky) — viz krok 7.
  2. Nahraj/vlož HTML appky (název titulku, popis a barvy si nástroj na začátek vezme přímo z něj).
  3. Pokud appka zůstává na synthlucida.com, nahraj/vlož i aktuální sw.js playeru — do jeho vylučovacího seznamu se doplní jen tahle nová appka, zbytek souboru zůstane netknutý. Jde-li appka jinam, toto pole klidně přeskoč (viz krok 5).
  4. Klikni na Vygenerovat — níž se objeví panel „Zkontroluj a uprav hlavní SEO údaje" s tím, co nástroj z appky vytáhl.
  5. V panelu podle potřeby uprav název, popis, jazyk a barvu motivu a vyber „Kam appka půjde?":
    • Zůstává na synthlucida.com — použije se sw.js vložený v kroku 3 (jen se doplní o vylučovací pravidlo).
    • Jde na vlastní/jinou doménu — vygeneruje se úplně samostatný sw.js jen pro tuhle appku a do HTML se (pokud tam ještě není) doplní i jeho registrace.
    Každá změna v panelu se hned promítne do výstupu dole, takže si to můžeš v klidu doladit před stažením.
  6. Stáhni si všechny tři soubory (HTML, manifest.json, sw.js) tlačítky u výstupu.
  7. Na server nahraj: opravené HTML appky a nový <slug>-manifest.json. U sw.js záleží na volbě z kroku 5 — buď jím přepiš starý sw.js playeru (sdílený), nebo ho nahraj jako nový samostatný sw.js vedle appky na její vlastní doméně.
  8. Ještě doplň obrázky ikon podle seznamu, který se objeví dole u výstupu (favicon, apple-touch-icon, 192×192, 512×512, og-image) — ty jediné se negenerují. U jazykové mutace (viz krok 1) se 192×192 a 512×512 v manifestu odkazují na sdílenou grafiku bez jazykové přípony, takže je stačí mít nahrané jednou (u výchozí/CZ verze) a pro mutaci už znovu nahrávat nemusíš — zbylé ikony (favicon, apple-touch-icon, og-image) ale per jazyk zvlášť potřeba jsou.
  9. Appka je hotová k publikaci — stačí na ni hodit odkaz.

Podle domény a názvu souboru v URL se dopočítá manifest, odkazy v hlavičce i unikátní id appky.

Do vylučovacího seznamu v sw.js se doplní jen slug této appky (odvozený z názvu souboru), zbytek souboru zůstane beze změny.

Zkontroluj a uprav hlavní SEO údaje

Běžné kódy: cs, en, sk, de, pl. Podle nich se dopočítá i og:locale (např. cs → cs_CZ).

Master sw.js výše se doplní o vylučovací pravidlo pro tuhle appku, zbytek zůstane netknutý.

Změny se hned promítnou do vygenerovaného HTML, manifestu i výstupu níž — nic se neztratí, dokud si soubory nestáhneš.

index.html
manifest.json
sw.js (sdílený pro doménu)
Úprava textu
Změny se ukládají rovnou. Zavřeš klávesou Esc, kliknutím mimo okno nebo tlačítkem Zavřít.