Tvorba webovej stránky sa kedysi zdala ako projekt, na ktorý ste si museli najať niekoho iného. Už nie.
Používam Hostinger Website Builder, a v tomto návode vás prevediem celým procesom krok za krokom, od momentu prihlásenia až po spustenie vašej stránky do ostrej prevádzky.
Poďme na to.
Čo je Hostinger Website Builder?
Hostinger Website Builder je AI-podporovaný nástroj na tvorbu webových stránok metódou drag-and-drop, zabudovaný priamo vo vašom Hostinger účte.
Nemusíte nič inštalovať, nemusíte vedieť kódovať a nemusíte mať žiadne dizajnérske znalosti. Opíšete, čo chcete, AI pre vás vytvorí kompletnú webovú stránku a vy ju potom prispôsobíte podľa svojej značky.
Je to jeden z najrýchlejších spôsobov, ako prejsť z ničoho na plne funkčný, profesionálne vyzerajúci web.
Krok 1: Prihláste sa a prejdite do nástroja na tvorbu
Keď sa prihlásite do svojho Hostinger účtu, ocitnete sa v hPaneli. Toto je hlavné ovládacie centrum Hostinger, kde spravujete všetko vrátane vašich webov, domén, e-mailov a fakturácie.
Na ľavom bočnom paneli uvidíte zoznam navigačných možností. Kliknite na Websites. Pod ním sa zobrazí malé rozbaľovacie menu so dvoma možnosťami: Websites list a Migrations. Kliknite na Websites list.
Teraz ste na stránke Websites list, ktorá zobrazuje všetky webové stránky pripojené k vášmu účtu.
V pravom hornom rohu stránky uvidíte fialové tlačidlo + Add website. Kliknite naň.
Zobrazí sa malé rozbaľovacie menu so štyrmi možnosťami:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
Kliknite na Hostinger Website Builder, ktorý je popísaný ako „AI-powered drag-and-drop website builder.“
Krok 2: Popíšte svoju webovú stránku AI
Po výbere Hostinger Website Builder sa dostanete na obrazovku nastavenia s nadpisom „Let AI create your online presence.“
Tu zadáte AI, aký typ stránky chcete vytvoriť.
Uvidíte veľké textové pole s placeholderom „Describe your website or business.“ Toto je vaše políčko pre prompt a to, čo sem napíšete, určuje všetko, čo AI pre vás vygeneruje. Čím viac detailov zadáte, tým lepší bude výsledok.
Pod textovým poľom nájdete riadok preddefinovaných návrhových čipov. Patrí sem napríklad „Create a business website,“ „Create an online store,“ „Design a portfolio,“ „Launch an appointments website,“ „Start a blog,“ „Launch a restaurant website,“ a „Create a one pager website.“
Kliknutím na ktorýkoľvek z nich sa doplní východzí prompt, ktorý môžete upraviť a rozšíriť.
Na spodku obrazovky sa nachádzajú ešte dve odkazy: Pre-made templates a Link in bio website. Ak chcete vynechať AI a prehliadať hotové dizajny, kliknite na Pre-made templates.
Ak potrebujete len jednoduchú jednopresmernú stránku pre vaše sociálne siete, oplatí sa pozrieť na možnosť Link in bio website.
Pre väčšinu ľudí, ktorí vytvárajú skutočný web, je však práve textové pole pre AI prompt tým správnym miestom na začiatok.
Ako napísať dobrý AI prompt
Toto je najdôležitejšia časť celého procesu. Predstavte si AI prompt ako zadanie dizajnérovi. Čím jasnejšie opíšete svoju víziu, tým bližšie bude výsledok tomu, čo naozaj chcete.
Toto je prompt, ktorý som použil v tomto návode. Staval som web pre kreatívnu agentúru:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
Všimnite si, aké je to detailné. Pokrýva odvetvie, tón, štýl rozloženia, požadované stránky, štruktúru domovskej stránky a cieľ obsahu. Takáto úroveň detailu dáva AI pevnú základňu, z ktorej môže vychádzať.
Keď napíšete svoj opis, v pravom hornom rohu textového poľa sa objaví tlačidlo “Improve description”. Odporúčam ho kliknúť pred odoslaním. AI rozšíri a vylepší váš prompt, často zachytí aj veci, na ktoré ste zabudli.
Keď budete pripravení, kliknite na fialové tlačidlo so šípkou (odoslať) v pravom dolnom rohu textového poľa, aby ste odoslali prompt a spustili generovanie.
Krok 3: Počkajte, kým AI vytvorí vašu stránku
Po odoslaní promptu AI okamžite začne pracovať. Zobrazí sa na celú obrazovku animácia načítania na tmavo fialovom pozadí s hlásením “Looking for matching pictures…” a indikátorom priebehu.
Táto fáza trvá zvyčajne 30 až 60 sekúnd. Počas nej AI vygeneruje rozloženie stránok, napíše texty, vyberie vhodné obrázky zo stock knižnice, zostaví navigáciu a štruktúru celého webu podľa vášho promptu.
Nezatvárajte kartu, kým sa načítava. Počkajte a nechajte proces bežať.
Krok 4: Skontrolujte, čo AI vytvorilo
Keď AI skončí, zobrazí sa vám náhľad vašej novej stránky. Je naozaj vzrušujúce vidieť, čo AI vygenerovalo.
Vľavo vidíte živý náhľad vygenerovanej stránky. Vpravo je panel s názvom “Your idea summary,” ktorý zobrazuje súhrn zadaného promptu a tlačidlo “Edit idea”, ak chcete prompt upraviť a vygenerovať stránku nanovo.
V mojom prípade AI pomenovalo stránku „BoldCraft Studio“ a vygenerovalo domovskú stránku s nadpisom „Crafting Bold Brands That Shine“, podporným popisom a dvoma výzvami k akcii: „Start Now“ a „Get Quote.“
Navigačný panel obsahoval všetkých šesť požadovaných stránok: Home, About, Services, Portfolio, Blog a Contact.
V ľavom hornom rohu náhľadu nájdete dva tlačidlá: Previous versions, ktoré umožňuje preklikať alternatívne dizajny, ktoré AI navrhlo, a Rate site, kde môžete ohodnotiť výsledok.
V pravom hornom rohu náhľadu sú ikony prepínania medzi desktop a mobilným náhľadom. Skontrolujte, ako vaša stránka vyzerá na telefóne, skôr než budete pokračovať. Je dobrým zvykom urobiť to čo najskôr.
Ak ste s výsledkom spokojní, kliknite na fialové tlačidlo Continue v pravom paneli. Otvorí sa vám plná úprava, kde môžete stránku detailne prispôsobiť.
Ak nie ste spokojní, kliknite na Edit idea, upravte prompt a vygenerujte stránku znova. Môžete to robiť koľkokrát potrebujete.
Krok 5: Zoznámte sa s editorom
Editor je miesto, kde strávite väčšinu času. Keď sa sem dostanete, chvíľu sa oboznámte s rozložením skôr, než začnete klikať.
Editor má dve hlavné časti:
- Veľká stredná časť je plátno vašej stránky, kde môžete vidieť a interagovať so stránkou v reálnom čase.
- Úzky vertikálny panel na ľavej strane je ovládací panel, ktorý obsahuje všetko, čo potrebujete.
Tu je, čo jednotlivé položky v bočnom paneli robia:
- Setup vám dá prístup k základným nastaveniam stránky, prepojenej doméne a informáciám o pláne.
- Elements otvára panel drag-and-drop, kde môžete pridávať nové obsahové bloky na akúkoľvek stránku. Podrobnejšie sa mu budem venovať neskôr.
- Pages zobrazuje všetky vaše stránky na jednom mieste. Môžete medzi nimi prepínať, pridávať nové, premenovať existujúce, meniť ich poradie alebo mazať tie, ktoré nepotrebujete.
- Styles kontroluje globálny dizajn vašej stránky. Tu nastavíte písmo, farebnú paletu a štýl tlačidiel. Zmeny aplikované tu sa premietnu naprieč celou stránkou, takže je to miesto na zásadné dizajnové úpravy, namiesto toho aby ste každú sekciu upravovali zvlášť.
- AI tools poskytuje prístup k písačkovým a obsahovým funkciám AI Hostinger. Môžete ich využiť na prepisovanie častí textov, generovanie nového obsahu a podobne.
- Blog je miesto, kde vytvárate a spravujete blogové príspevky, ak vaša stránka blog má.
- Store je sekcia pre nastavenie online obchodu, ak predávate produkty. eCommerce funkcie vyžadujú vyšší plán.
- SEO otvára vstavaný SEO manažér, kde môžete nastavovať meta nadpisy, popisy a ďalšie detaily optimalizácie pre vyhľadávače pre každú stránku.
- More rozbalí ďalšie nástroje vrátane Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress a Help and Resources.
V hornej časti editora nájdete hlavný panel nástrojov. Zľava doprava obsahuje prepínač desktop/mobilný náhľad, tlačidlá undo a redo, tlačidlo Connect domain, tlačidlo Preview a zelené tlačidlo Go live.
Krok 6: Upraviť obsah
Teraz prichádza čas, keď stránku prispôsobíte podľa seba. Kliknite kdekoľvek na plátno stránky, aby ste začali upravovať.
Keď presuniete myš nad akúkoľvek časť, zobrazí sa modré označenie vľavo hore so štítkom, napríklad „Section“ alebo „Header,“ a zároveň sa nad ňou objaví malý panel s možnosťami úprav.
Panel sekcie obsahuje tieto ovládacie prvky, zľava doprava: Edit section otvorí nastavenia sekcie, kde môžete zmeniť pozadie (obrázok alebo farbu), upraviť odsadenie a nastavenia rozloženia.
Vedľa je Generate image, ktoré otvára AI generátor obrázkov.
Potom nasledujú ikony Duplikovať, Zobraziť/Skrýť, Vymazať, šípky nahor a nadol na preusporiadanie sekcií a tri bodky pre ďalšie možnosti.
Ak chcete upraviť text, kliknite priamo naň a začnite písať. Textový prvok sa prepne do editačného režimu a zobrazia sa ovládacie prvky formátovania. Môžete meniť veľkosť písma, tučnosť, zarovnanie a farbu priamo tu.
Ak chcete zmeniť obrázok, kliknite naň. Zobrazia sa možnosti na nahratie vlastného súboru, prehliadanie stock knižnice Hostinger alebo generovanie nového obrázka pomocou AI.
Najprv upravte domovskú stránku a potom pomocou panela Pages prejdite na ďalšie stránky a upravte ich podobným spôsobom.
Krok 7: Využite AI generátor obrázkov
Jedna funkcia, ktorej sa oplatí venovať pozornosť, je AI image generator, pretože je skutočne užitočná, ak nemáte vlastné profesionálne fotografie.
Ak chcete generátor otvoriť, presuňte myš nad sekciu a kliknite na Generate image v plávajúcom paneli sekcie. Na pravej strane sa vám vysunie panel.
V paneli uvidíte textové pole „Image description“. Popíšte, aký obrázok chcete vytvoriť.
Čím konkrétnejší a vizuálnejší opis zadáte, tým lepší bude výsledok. Panel ukazuje limit 3 000 znakov a indikátor kvality, ktorý v reálnom čase ukazuje, či je váš opis dostatočne silný.
Napríklad keď som zadal „A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office,“ panel ukázal „Great description!“ s úplne vyplnenými ukazovateľmi kvality.
Keď ste spokojní, kliknite na Create images. AI vygeneruje sadu obrázkov, z ktorej si vyberiete.
Poznámka: AI image generator vyžaduje Business plán alebo vyšší. Ak máte Premium plán, v spodnej časti panela sa zobrazí výzva na upgrade.
Krok 8: Pridajte nové prvky na akúkoľvek stránku
Ak chcete na stránku pridať obsahový blok, ktorý tam ešte nie je, kliknite v ľavom bočnom paneli na Elements. Tým otvoríte panel Add elements.
Uvidíte mriežku dostupných prvkov vrátane Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed a Contact form. Každý z nich potiahnete myšou z panela na plátno a položíte tam, kam chcete.
Po umiestnení naň kliknite, aby ste mali prístup k jeho nastaveniam a možnostiam úprav.
Táto metóda drag-and-drop znamená, že nie ste viazaní na rozloženie, ktoré AI vygenerovalo. Môžete ľubovoľne pridávať, odoberať a presúvať prvky.
Krok 9: Spravujte svoje stránky
Kliknite na Pages v bočnom paneli, aby ste videli zoznam všetkých stránok. Kliknutím na názov stránky prejdete na jej úpravu.
Ak chcete pridať novú stránku, použite tlačidlo plus. Na prispôsobenie poradia stránok v navigácii ich potiahnite hore alebo dole v zozname.
Ak AI vygenerovalo stránky, ktoré nepotrebujete, môžete ich zrušiť. Rovnako, ak potrebujete nejakú stránku, ktorú AI nezahrnulo, napríklad Testimonials alebo Pricing, pridajte ju tu a potom ju vybudujte pomocou panela Elements.
Krok 10: Nastavte si SEO
Pred publikovaním je potrebné nastaviť SEO. Mnoho ľudí tento krok vynechá, a to je chyba.
Venovať 15 minút dôkladnému vyplneniu SEO nastavení môže skutočne ovplyvniť, či vás ľudia nájdu cez Google.
Kliknite na SEO v bočnom paneli, čím otvoríte panel s nadpisom „Let’s be found on Google (SEO).“
Panel je rozdelený na dve časti. Vľavo nájdete zoznam vašich stránok. Vpravo je Website overview, ktorý zobrazuje názov vašej firmy a jazyk stránky. Kliknite na Edit, ak to treba upraviť.
Pod prehľadom webu je sekcia „Some pages require your attention.“
Každá stránka, ktorá potrebuje úpravu, je označená oranžovým výkričníkom. Kliknutím na názov stránky v ľavom paneli otvoríte jej individuálne SEO nastavenia, kde môžete vyplniť meta nadpis a meta popis pre danú stránku.
Prejdite všetky stránky v zozname. Dobrý meta nadpis je stručný, obsahuje hlavné kľúčové slovo a má menej ako 60 znakov. Meta popis zhrnie, o čom stránka je, a má menej ako 160 znakov. Tieto texty sa zobrazujú vo výsledkoch vyhľadávania, takže sa oplatí venovať im pár minút.
Krok 11: Pripojte svoju doménu
Ak ste ešte nepripojili vlastnú doménu, teraz je ten správny čas. Kliknite na tlačidlo Connect domain v hornej lište editora.
Máte dve možnosti. Ak už doménu vlastníte, pripojíte ju aktualizáciou DNS záznamov na servery Hostinger. Ak doménu ešte nemáte, môžete si ju rovno kúpiť v Hostinger priamo tu.
Kým doménu nepripojíte, vaša stránka bude dostupná cez dočasnú Hostinger subdoménu, napríklad yoursite.builder-preview.com. To je v poriadku na testovanie, ale pre zdieľanie potrebujete vlastnú doménu.
Krok 12: Náhľad stránky a publikovanie
Už ste takmer pripravení. Pred publikovaním kliknite na tlačidlo Preview v hornej lište editora.
Otvorí sa vám celá obrazovka s náhľadom, ako vaša stránka vyzerá pre návštevníkov. Pomocou ikon v hornej časti prepínajte medzi desktop a mobilným náhľadom a skontrolujte, či všetko vyzerá správne na oboch.
Obzvlášť dajte pozor na to, ako vyzerá hero sekcia domovskej stránky na mobilnom zariadení, ako sa zobrazuje navigácia a či sa niektoré obrázky neorezávajú nevhodne.
Keď ste so všetkým spokojní, vráťte sa do editora a kliknite na zelené tlačidlo Go live. Vaša stránka je teraz publikovaná a online.
Krok 13: Preskúmajte integrácie
Keď je stránka online, oplatí sa preskúmať dostupné integrácie. Choďte na More > Integrations v bočnom paneli.
Panel Integrations vám umožňuje prepojiť web s externými nástrojmi a službami. Medzi aktuálne možnosti patrí Shippo na generovanie štítkov a správu odosielania, Printful na tvorbu a predaj print-on-demand produktov, Hostinger Reach na e-mailový marketing a odosielanie newsletterov, Google Ads na platené kampane a Custom code, ak chcete pridať vlastný HTML, CSS alebo JavaScript.
Ak chcete aktivovať ktorúkoľvek integráciu, kliknite na Get started vedľa nej, postupujte podľa krokov a potom stránku znovu publikujte.
Tipy, ako vyťažiť z Hostinger Website Builder maximum
Buďte pri AI prompte dôkladní. Dvojvetný prompt vám poskytne generický výsledok. Detailný a konkrétny prompt, ktorý pokrýva vaše odvetvie, cieľovú skupinu, dizajnové preferencie, štruktúru stránok a tón, vám prinesie oveľa bližší výsledok k tomu, čo naozaj chcete. Strávte päť minút písaním komplexného zadania a ušetríte hodiny úprav neskôr.
Používajte tlačidlo Improve description zakaždým. Je ľahké ho prehliadnuť, ale je skutočne užitočné. AI často zachytí nejasnosti a premení ich na konkrétne pokyny pre dizajn a obsah.
Dôkladne upravujte texty. AI napíše slušné dočasné texty, ale nepozná váš biznis tak dobre ako vy. Preverte každú stránku a preformulujte texty tak, aby odrážali vaše skutočné služby, hodnoty a váš hlas.
Skontrolujte mobilný náhľad pred publikovaním. Hostinger automaticky spraví váš web responzívnym, ale obrázky a odsadenia niekedy potrebujú malé úpravy na menších obrazovkách. Vždy si nájdite čas na kontrolu mobilného zobrazenia.
Vyplňte SEO pre každú stránku. Nielen pre domovskú stránku. Každá stránka si zaslúži správny meta nadpis a popis. Trvá to pár minút na stránku a je to jedna z najjednoduchších vecí, ktorou zvýšite svoju viditeľnosť vo vyhľadávaní.
Používajte Media library na prehľadnosť. Pod More > Media library môžete nahrávať a spravovať všetky obrázky na jednom mieste. Uľahčuje to opätovné použitie obrázkov na rôznych stránkach a udržiavanie jednotnej vizuálnej identity.
Vrátťe sa a vylepšujte priebežne. Publikovanie vašej stránky nie je koniec, ale začiatok. Pravidelne pridávajte nový obsah, blogové príspevky a dolaďujte stránky podľa vývoja vášho biznisu.
Hostinger Website Builder odstránil takmer všetky prekážky, ktoré kedysi stáli medzi vami a profesionálnou webovou stránkou. AI sa postará o dizajn a text, editor umožňuje jednoduché úpravy a vstavané SEO a integrácie vám dávajú všetko, čo potrebujete, na jednom mieste.
Ak budete postupovať podľa krokov v tomto návode, reálne môžete mať funkčnú a dotiahnutú stránku online za menej ako hodinu.
