Vytváření webu se dříve zdálo jako projekt, na který jste museli najmout někoho jiného. Už ne.
Používám Hostinger Website Builder a v této příručce vás provedu celým procesem krok za krokem – od chvíle, kdy se přihlásíte, až po okamžik, kdy bude váš web zveřejněn.
Pojďme na to.
Co je Hostinger Website Builder?
Hostinger Website Builder je AI-poháněný drag-and-drop nástroj pro tvorbu webových stránek, integrovaný přímo do vašeho účtu Hostinger.
Nemusíte nic instalovat, nemusíte umět kódovat ani mít designové vzdělání. Popíšete, co chcete, AI pro vás vytvoří celý web a vy jej pak přizpůsobíte své značce.
Je to jeden z nejrychlejších způsobů, jak vytvořit od nuly plně funkční a profesionálně vypadající web.
Krok 1: Přihlaste se a přejděte do editoru
Když se přihlásíte do svého účtu Hostinger, ocitnete se v hPanelu. To je hlavní řídicí panel Hostingeru, kde spravujete vše, včetně svých webových stránek, domén, e-mailů a plateb.
Na levém postranním panelu uvidíte seznam navigačních možností. Klikněte na Webové stránky. Pod tím se objeví malé rozbalovací menu se dvěma položkami: Seznam webů a Migrace. Klikněte na Seznam webů.
Nyní jste na stránce Seznam webů, kde jsou zobrazeny všechny weby připojené k vašemu účtu.
V pravém horním rohu stránky uvidíte fialové tlačítko + Přidat web. Klikněte na něj.
Zobrazí se malé rozbalovací menu se čtyřmi možnostmi:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- A vlastní PHP/HTML web
Klikněte na Hostinger Website Builder, který je popsán jako „AI-poháněný drag-and-drop nástroj pro tvorbu webu“.
Krok 2: Popište svůj web AI
Po výběru Hostinger Website Builder se dostanete na úvodní obrazovku s nadpisem “Nechte AI vytvořit vaši online prezentaci.”
Zde sdělíte AI, jaký typ webu chcete vytvořit.
Uvidíte velké textové pole s výchozím textem „Popište svůj web nebo podnik“. Toto je vaše pole pro zadávání promptu a to, co sem napíšete, určuje vše, co pro vás AI vygeneruje. Čím podrobnější popis poskytujete, tím lepší bude výsledek.
Pod textovým polem si všimnete také řady návrhů pro rychlý start. Patří sem možnosti jako „Vytvořit firemní web“, „Vytvořit online obchod“, „Navrhnout portfolio“, „Spustit web pro rezervace“, „Založit blog“, „Spustit web restaurace“ a „Vytvořit jednostránkový web“.
Kliknutím na některý z nich se vyplní výchozí prompt, který můžete dále upravit a rozšířit.
V samotném dolní části obrazovky uvidíte dva odkazy: Předpřipravené šablony a Link in bio. Pokud raději přeskočíte AI a prohlédnete si existující návrhy, klikněte na Předpřipravené šablony.
Pokud potřebujete jednoduchou jednostránkovou stránku pro své profily na sociálních sítích, možnost Link in bio stojí za to vyzkoušet.
Pro většinu lidí, kteří si chtějí postavit „skutečný“ web, je však správným místem právě toto pole pro prompt AI.
Jak napsat dobrý AI prompt
Toto je nejdůležitější část celého procesu. Vnímejte prompt pro AI jako zadání, které byste poskytli designérovi. Čím jasněji vyjádříte svou vizi, tím bližší bude výsledek tomu, co opravdu chcete.
Zde je prompt, který jsem použil pro tuto příručku. Vytvářel jsem web pro kreativní agenturu:
“Vytvořte moderní, profesionální web pro kreativní agenturu, která nabízí brandingu, grafický design, webdesign a služby digitálního marketingu. Web by měl působit kreativně, odvážně a důvěryhodně, přitom zůstat čistý a snadno ovladatelný. Použijte moderní rozvržení s výraznými vizuály, dostatečnými mezerami a stylovou typografií. Zahrňte následující stránky: Domů, O nás, Služby, Portfolio, Blog a Kontakt. Na úvodní stránce přidejte hero sekci s výrazným nadpisem, krátkým popisem zaměřeným na hodnotu a jasným tlačítkem výzvy k akci, například ‘Zahajte projekt’ nebo ‘Získejte nabídku’. Napište jednoduché, přesvědčivé texty, které vysvětlí, co děláme, komu pomáháme a jaké výsledky přinášíme. Zajistěte, aby byl web responzivní, rychle se načítal a byl optimalizován pro základní SEO.”
Všimněte si, jak je to konkrétní. Prompt pokrývá odvětví, tón, styl rozvržení, požadované stránky, strukturu domovské stránky a cíle obsahu. Tato úroveň detailu dává AI pevný základ pro práci.
Jakmile zadáte svůj popis, v pravém horním rohu textového pole se objeví tlačítko “Vylepšit popis”.
Doporučuji na něj kliknout před odesláním. AI váš prompt rozšíří a zpřesní, často přidá detaily, na které byste sami nemuseli myslet.
Až budete připraveni, klikněte na fialové tlačítko se šipkou (ikona odeslání) v pravém dolním rohu textového pole, čímž prompt odešlete a spustíte generování.
Krok 3: Počkejte, až AI vytvoří váš web
Poté, co svůj prompt odešlete, se AI Hostingeru pustí do práce okamžitě. Uvidíte animaci načítání na celou obrazovku na tmavě fialovém pozadí se zprávou “Hledání odpovídajících obrázků…” a ukazatelem postupu, který ukazuje, jak daleko je proces.
Tato fáze obvykle trvá 30 až 60 sekund. Během ní AI generuje rozvržení stránek, píše texty webu, vybírá odpovídající obrázky ze stock knihovny, vytváří navigaci a strukturuje celý web podle vašeho promptu.
Nezavírejte kartu během načítání. Počkejte, až proces doběhne do konce.
Krok 4: Prohlédněte si výsledek AI
Jakmile AI dokončí, uvidíte náhled vašeho nového webu. Jde o obrazovku s výsledkem a je opravdu vzrušující vidět, co bylo vygenerováno.
Na levé straně obrazovky se zobrazuje živý náhled vašeho vygenerovaného webu. Na pravé straně je panel nazvaný “Shrnutí vašeho nápadu”, který zobrazuje souhrn vámi zadaného promptu a tlačítko “Upravit nápad”, pokud se chcete vrátit a znovu vygenerovat s jiným nebo aktualizovaným promptem.
V mém případě AI pojmenovala web „BoldCraft Studio“ a vygenerovala úvodní stránku s titulkem „Tvoříme odvážné značky, které září“, doplňujícím popisem a dvěma tlačítky výzvy k akci: „Začněte nyní“ a „Získejte nabídku“.
Navigační lišta zahrnovala všech šest požadovaných stránek: Domů, O nás, Služby, Portfolio, Blog a Kontakt.
V levém horním rohu náhledu také uvidíte dvě tlačítka: Předchozí verze, které umožňuje procházet alternativní návrhy od AI, a Ohodnotit web, kde můžete poskytnout zpětnou vazbu k výsledku.
V pravém horním rohu náhledu uvidíte ikony pro přepínání zobrazení na ploše a na mobilu. Použijte je k ověření, jak váš web vypadá na telefonu, ještě před tím, než budete pokračovat. Je dobrý zvyk to udělat včas.
Pokud jste s celkovým směrem spokojeni, klikněte v pravém panelu na fialové tlačítko Pokračovat. Tím vstoupíte do plného editoru, kde probíhá skutečná přizpůsobení.
Pokud nejste s výsledkem spokojeni, klikněte na Upravit nápad, upravte prompt a znovu vygenerujte. Můžete to opakovat tolikrát, kolikrát potřebujete.
Krok 5: Seznamte se s editorem
Editor je místo, kde strávíte většinu času. Když sem vstoupíte poprvé, věnujte chvíli tomu, abyste si prohlédli rozvržení, než začnete klikat.
Editor má dvě hlavní oblasti.
- Velká středová oblast je plátno vašeho webu, kde můžete svůj web v reálném čase vidět a ovládat.
- Úzký svislý postranní panel vlevo je váš ovládací panel a obsahuje vše, co potřebujete.
Zde jsou jednotlivé položky v postranním panelu a jejich funkce:
- Nastavení vám umožňuje přístup k základnímu nastavení vašeho webu, připojené doméně a informacím o plánu.
- Prvky otevírá drag-and-drop panel, kde můžete přidávat nové bloky obsahu na jakoukoli stránku. Toto podrobněji pokryji za chvíli.
- Stránky zobrazuje všechny vaše stránky na jednom místě. Můžete mezi nimi přepínat, přidávat nové, přejmenovávat existující, měnit jejich pořadí nebo mazat ty, které nepotřebujete.
- Styly řídí globální design vašeho webu. Zde nastavíte písma, barevnou paletu a styl tlačítek. Jakékoli změny provedené zde se aplikují na celý web, takže je to správné místo pro rozsáhlá designová rozhodnutí, namísto úprav jednotlivých sekcí.
- Nástroje AI poskytují přístup k AI Hostingeru pro psaní a tvorbu obsahu. Můžete je použít k přepsání částí textu, generování nových textů a dalším úpravám.
- Blog je místo, kde vytváříte a spravujete blogové příspěvky, pokud váš web má blog.
- Obchod je místo, kde nastavíte e-shop, pokud prodáváte produkty. Funkce eCommerce vyžadují vyšší tarif.
- SEO otevírá vestavěný SEO manažer, kde můžete nastavit meta titulky, popisy a další prvky optimalizace pro vyhledávače pro každou stránku.
- Další rozbalí druhé menu s doplňkovými nástroji: Rezervace, Obecné nastavení, Integrace, Odeslané formuláře, Analytika, Knihovna médií, Vícejazyčná podpora, Správa záloh, Export obsahu do WordPressu a Nápověda a zdroje.
V horní části editoru najdete hlavní panel nástrojů. Zleva doprava obsahuje: přepínače zobrazení na desktopu a mobilu, tlačítka zpět a znovu, tlačítko Připojit doménu, tlačítko Náhled a zelené tlačítko Publikovat.
Krok 6: Upravte svůj obsah
Teď přichází fáze, kdy si web přizpůsobíte. Klikněte kamkoli na plátno vašeho webu a začněte upravovat.
Když najedete myší na jakoukoli část stránky, vlevo nahoře v ní se objeví modrá etiketa s typem prvku, například „Sekce“ nebo „Záhlaví“. Současně se nad sekcí zobrazí malé plovoucí menu s možnostmi úprav.
Panel nástrojů sekce nabízí zleva doprava tyto ovládací prvky:
- Upravit sekci: otevře panel nastavení sekce, kde můžete změnit obrázkové nebo barevné pozadí, upravit odsazení a nastavit možnosti rozvržení.
- Generovat obrázek: otevře AI generátor obrázků.
- Ikona Duplikovat, přepínač Skrýt/Zobrazit, ikona Odstranit, šipky pro posun nahoru a dolů pro změnu pořadí sekcí a menu Více možností (tři tečky).
Chcete-li upravit jakýkoli text na stránce, stačí na něj kliknout a začít psát. Textový prvek se stane editovatelným a zobrazí se ovládací prvky pro formátování. Pomocí nich můžete měnit velikost písma, řez, zarovnání a barvu.
Chcete-li změnit obrázek, klikněte na něj. Zobrazí se možnosti jej nahradit fotografií z vašich souborů, procházet stock knihovnu Hostingeru nebo vygenerovat nový pomocí AI.
Nejprve si upravte domovskou stránku, pak pomocí panelu Stránky přepněte na jednotlivé stránky a upravujte je postupně.
Krok 7: Využijte AI generátor obrázků
Jedna funkce, na kterou stojí za to se podívat, je AI generátor obrázků. Je opravdu užitečný, pokud nemáte vlastní profesionální fotografie.
Chcete-li k němu přistoupit, najedete myší na jakoukoli sekci stránky a v plovoucím panelu sekce kliknete na Generovat obrázek. Z pravé strany se vysune panel.
V panelu uvidíte textové pole “Popis obrázku”. Napište popis obrázku, který chcete vytvořit. Čím konkrétnější a vizuálnější popis zadáte, tím lepší bude výsledek. Panel ukazuje limit 3000 znaků a v reálném čase indikátor kvality, který vám řekne, zda je váš popis dostatečně vyčerpávající.
Například když jsem zadal „Moderní pracovní prostor kreativní agentury s designéry spolupracujícími u notebooků a velkých obrazovek zobrazujících návrhy brandingu, webové makety a digitální umění. Světlá, čistá a stylová kancelář.“, panel ukázal “Skvělý popis!” se zcela vyplněnými ukazateli kvality.
Když budete s popisem spokojeni, klikněte na Vytvořit obrázky. AI vygeneruje sadu obrázků, ze kterých si můžete vybrat.
Je třeba mít na paměti, že AI generátor obrázků vyžaduje tarif Business nebo vyšší. Pokud používáte tarif Premium, v dolní části panelu se zobrazí výzva k upgradu.
Krok 8: Přidání nových prvků na libovolnou stránku
Pokud chcete přidat obsahový blok, který na stránce ještě není, klikněte na Prvky v levém postranním panelu. Tím se otevře panel „Přidat prvky“.
Uvidíte seznam všech dostupných prvků ve formě mřížky, včetně Text, Tlačítko, Affiliate odkaz, Přidat do košíku, Obrázek, Galerie, Video, Tvar, Karta, Mapa, Instagram feed a Kontaktní formulář. Pro přidání na stránku prvku ho přetáhněte z panelu a upusťte na plátno na požadovaném místě.
Po umístění na plátno na prvek klikněte a zobrazíte jeho individuální nastavení a možnosti stylování.
Tento přístup drag-and-drop znamená, že nejste nikdy svázáni rozvržením, které vytvořila AI. Můžete prvky libovolně přidávat, odstraňovat a přemisťovat.
Krok 9: Správa stránek
Klikněte na Stránky v levém postranním panelu a zobrazí se seznam všech vašich stránek na jednom místě. Kliknutím na název stránky přejdete k její úpravě.
Pro přidání nové stránky použijte tlačítko plus. Pro změnu pořadí, v jakém se stránky zobrazují v navigaci, je přetáhněte nahoru či dolů v seznamu.
Pokud AI vygenerovala stránky, které nepotřebujete, můžete je odsud smazat. Stejně tak, pokud potřebujete stránku, kterou AI nezahrnula (například Stránku s referencemi nebo Ceník), můžete ji zde přidat a následně ji vyplnit pomocí panelu Prvky.
Krok 10: Nastavte SEO svého webu
Před publikací musíte nastavit SEO. Mnoho lidí tento krok přeskočí, což je chyba.
Když na správné vyplnění SEO nastavení věnujete patnáct minut, může to mít skutečně velký vliv na to, zda váš web lidé najdou na Googlu.
Klikněte v levém panelu na SEO, čímž otevřete SEO panel s názvem “Buďme nalezeni na Googlu (SEO)”.
Panel je rozdělený na dvě části. Vlevo uvidíte seznam všech svých stránek. Vpravo je Přehled webu, který ukazuje název vaší firmy a jazyk webu. Klikněte na Upravit, chcete-li je upravit, pokud nejsou správné.
Pod informacemi o webu najdete sekci s názvem “Některé stránky vyžadují vaši pozornost”. Každá stránka, která potřebuje úpravu, je označena oranžovou ikonou varování. Klikněte na jakoukoli stránku v levém panelu a otevřete její jednotlivá SEO nastavení, kde můžete pro danou stránku napsat meta titulek a meta popis.
Projděte každou položku v seznamu. Dobrý meta titulek je jasný, obsahuje hlavní klíčové slovo a má méně než 60 znaků. Dobrý meta popis shrnuje obsah stránky a má méně než 160 znaků. Právě tyto úryvky se zobrazují ve výsledcích vyhledávání na Google, proto se vyplatí na každý z nich věnovat pár minut.
Krok 11: Připojte vlastní doménu
Pokud jste ještě k webu nepřipojili vlastní doménu, je nejvyšší čas to udělat. Klikněte v horním panelu editoru na tlačítko Připojit doménu.
Máte dvě možnosti. Pokud už doménu vlastníte, můžete ji připojit aktualizací DNS záznamů na servery Hostingeru. Pokud doménu zatím nemáte, můžete si ji na této obrazovce zakoupit přímo u Hostingeru.
Dokud doménu nepřipojíte, bude váš web dostupný přes dočasnou subdoménu Hostingeru, např. vasweb.builder-preview.com. To je v pořádku pro testování, ale před veřejným sdílením si pořiďte vlastní doménu.
Krok 12: Náhled a publikace webu
Jste téměř u cíle. Než kliknete na publikovat, v pravém horním panelu klikněte na Náhled.
Otevře se náhled na celou obrazovku, který ukazuje, jak web uvidí návštěvníci. Pomocí ikon nahoře přepínejte mezi desktopovým a mobilním režimem a zkontrolujte, že vše vypadá správně na obou zařízeních.
Věnujte zvláštní pozornost tomu, jak se hero sekce úvodní stránky zobrazuje na mobilu, jak se sbaluje navigace a zda se nějaké obrázky nezkracují nežádoucím způsobem.
Až budete se vším spokojeni, vraťte se do editoru a v pravém horním rohu klikněte na zelené tlačítko Publikovat. Váš web je nyní publikovaný a online.
Krok 13: Prozkoumejte integrace
Jakmile je váš web live, stojí za to prozkoumat dostupné integrace. V levém panelu přejděte na Další > Integrace.
Panel Integrace vám umožňuje propojit váš web s externími nástroji a službami. Mezi dostupné možnosti patří Shippo pro generování přepravních štítků a správu objednávek, Printful pro tvorbu a prodej produktů na vyžádání, Hostinger Reach pro e-mailový marketing a zasílání newsletterů odběratelům, Google Ads pro provozování placených reklamních kampaní a Vlastní kód, pokud chcete přidat vlastní HTML, CSS nebo JavaScript a rozšířit funkce webu.
Pro aktivaci integrace klikněte u dané položky na Zahájit, postupujte podle kroků propojení a poté aktualizujte web opětovným publikováním.
Tipy, jak co nejlépe využít Hostinger Website Builder
Buďte štědří při zadávání promptu AI. Krátký prompt o dvou větách vám dá obecný výsledek. Podrobný a specifický prompt, který pokrývá vaše oborové zaměření, cílovou skupinu, designové preference, strukturu stránek a tón hlasu, vám poskytne mnohem bližší výsledek tomu, co skutečně chcete. Strávením pěti minut napsáním kvalitního zadání si ušetříte hodiny úprav.
Používejte tlačítko Vylepšit popis vždy. Je snadné ho přehlédnout, ale je skutečně užitečné. AI často zachytí nejasnosti, které jste opomněli, a přetvoří je na konkrétní pokyny pro design a obsah.
Upravujte texty pečlivě. AI sice napíše slušné zástupné texty, ale nezná vaše podnikání tak jako vy. Projděte každou stránku a přepište text tak, aby odrážel vaše skutečné služby, skutečnou hodnotu a váš osobní styl.
Zkontrolujte mobilní zobrazení před publikací. Hostinger váš web automaticky přizpůsobí mobilním zařízením, ale obrázky a rozestupy občas chtějí drobné úpravy na menších obrazovkách. Vždy si před zveřejněním udělejte náhled mobilního zobrazení.
Vyplňte SEO pro každou jednotlivou stránku. Nejen pro domovskou. Každá stránka vašeho webu si zaslouží správný meta titulek a popis. Zabere to pár minut na stránku a je to jedna z nejjednodušších cest, jak zlepšit viditelnost ve vyhledávání.
Použijte Knihovnu médií pro přehlednost. Pod Další > Knihovna médií můžete nahrávat a spravovat všechny své obrázky na jednom místě. Díky tomu je mnohem snazší znovu používat obrázky na různých stránkách a udržet vzhled webu konzistentní.
Vracejte se a časem web vylepšujte. Zveřejnění stránek není konec, ale začátek. Pravidelně se vraťte, aktualizujte obsah, přidávejte nové příspěvky na blog a dolaďujte stránky podle vývoje vašeho podnikání.
Hostinger Website Builder odstraňuje téměř všechny překážky, které vás dříve dělily od profesionálního webu. AI odvádí hlavní práci na designu a textech, editor usnadňuje přizpůsobení a vestavěné nástroje pro SEO a integrace znamenají, že máte vše potřebné na jednom místě.
Postupujte podle kroků v tomto průvodci a realisticky můžete mít během hodiny živý, vyladěný web.
