Izrada web stranice prije se činila kao projekt za koji morate unajmiti nekoga. Više nije tako.
Koristim Hostinger Website Builder, i u ovom vodiču ću vas korak po korak provesti kroz cijeli proces, od trenutka kad se prijavite do trenutka kad je vaša stranica uživo.
Krenimo.
Što je Hostinger Website Builder?
Hostinger Website Builder je AI-pokretan, drag-and-drop tvorac web stranica ugrađen izravno u vaš Hostinger račun.
Ne trebate ništa instalirati, ne morate znati programirati i ne trebate dizajnersku pozadinu. Opširite što želite, AI izgradi cijelu web stranicu za vas, a zatim je prilagodite svom brendu.
To je jedan od najbržih načina da od nule dođete do profesionalne web stranice.
KORAK 1: Prijavite se i prijeđite na Builder
Kad se prijavite u svoj Hostinger račun, dolazite na hPanel. Ovo je glavna nadzorna ploča Hostinger-a, gdje upravljate svojim web stranicama, domenama, e-poštom i naplatom.
Na lijevoj bočnoj traci vidjet ćete navigacijske opcije. Kliknite Websites. Ispod će se pojaviti padajući izbornik s dvije opcije: Websites list i Migrations. Kliknite Websites list.
Sada ste na stranici Websites list, koja prikazuje sve web stranice povezane s vašim računom.
U gornjem desnom kutu stranice vidjet ćete ljubičastu + Add website tipku. Kliknite je.
Pojavit će se padajući izbornik s četiri opcije:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
Kliknite Hostinger Website Builder, opisan kao “AI-pokretan drag-and-drop tvorac web stranica.”
KORAK 2: Opširite AI-u svoju web stranicu
Nakon odabira Hostinger Website Builder, doći ćete na zaslon za postavljanje s naslovom “Let AI create your online presence.”
Ovdje kažete AI-u koju vrstu web stranice želite izgraditi.
Vidjet ćete veliko tekstualno polje s tekstom za obilježavanje “Describe your website or business.” To je polje za upit, i ono što upišete ovdje određuje sve što AI generira. Što detaljniji budete, bolje će biti rezultate.
Ispod polja nalaze se brzi prijedlozi poput “Create a business website,” “Create an online store,” “Design a portfolio,” “Launch an appointments website,” “Start a blog,” “Launch a restaurant website,” i “Create a one pager website.”
Klikom na bilo koji od njih popunjava se početni upit koji potom možete uređivati i proširiti.
Na dnu ekrana vidite poveznice: Pre-made templates i Link in bio website. Ako želite preskočiti AI i pregledati gotove dizajne, kliknite Pre-made templates. Ako trebate jednostavnu jednolistnu stranicu za društvene mreže, Link in bio je dobra opcija.
Za većinu korisnika, AI upit je pravi početak.
Kako pisati dobar AI upit
Ovo je najvažniji dio cijelog procesa. Promatrajte AI upit kao uputu dizajneru. Što jasnije prenesete viziju, to će rezultat više nalikovati na ono što želite.
Evo upita koji sam koristio za ovaj vodič. Izgradio sam web stranicu za kreativnu agenciju:
“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.”
Primijetite koliko je specifičan. Obuhvaća industriju, ton, stil rasporeda, potrebne stranice, strukturu početne stranice i ciljeve sadržaja. Takva razina detalja daje AI-u čvrst temelj.
Kad upišete svoj opis, pojavit će se “Improve description” gumb u gornjem desnom kutu tekstualnog polja. Preporučujem da kliknete na njega prije slanja. AI će proširiti i poboljšati vaš upit, često ukloneći nedoumice.
Kad ste spremni, kliknite ljubičastu strelicu (ikona za slanje) u donjem desnom kutu polja da pošaljete upit i započnete generiranje.
KORAK 3: Pričekajte da AI izgradi vašu stranicu
Nakon slanja upita, Hostinger AI odmah počinje raditi. Vidjet ćete animaciju punjenja na tamnoljubičastoj pozadini s porukom “Looking for matching pictures…” i traku napretka.
Ova faza obično traje između 30 i 60 sekundi. AI generira rasporede, piše kopiju, bira slike iz knjižnice, gradi navigaciju i strukturira stranicu prema vašem upitu.
Ne zatvarajte karticu dok traje učitavanje.
KORAK 4: Pregledajte što je AI izgradio
Kad AI završi, prikazat će vam rezultat u pretpregledu vaše nove web stranice. Izgled je uzbudljiv.
S lijeve strane vidite živi pretpregled, a s desne panela pod nazivom “Your idea summary,” koja prikazuje sažetak vašeg upita i gumb “Edit idea” za izmjene.
U mom slučaju, AI je nazvao stranicu “BoldCraft Studio” i generirao početnu stranicu s naslovom “Crafting Bold Brands That Shine”, opisom i gumbima “Start Now” i “Get Quote.”
Navigacija je uključivala sve tražene stranice: Home, About, Services, Portfolio, Blog i Contact.
U gornjem lijevom kutu pretpregleda su gumbi Previous versions i Rate site. U gornjem desnom kutu su ikone za desktop i mobilni prikaz.
Ako ste zadovoljni, kliknite ljubičasti Continue za ulazak u editor.
Ako niste, kliknite Edit idea, prilagodite upit i regenerirajte.
KORAK 5: Upoznajte editor
Editor je mjesto gdje ćete provesti većinu vremena. Kad uđete, odvojite trenutak za upoznavanje sučelja.
Editor ima dva glavna dijela:
- Središnji dio je platno vaše stranice s pretpregledom u stvarnom vremenu.
- Lijeva bočna traka je kontrolni panel s svim alatima.
Evo što svaka stavka u bočnoj traci radi:
- Setup – osnovne postavke stranice, domena i plan.
- Elements – panel za dodavanje sadržajnih blokova.
- Pages – upravljanje stranicama: prebacivanje, dodavanje, preimenovanje, redoslijed.
- Styles – globalni dizajn: fontovi, paleta boja, stilovi gumba.
- AI tools – Hostinger AI za pisanje i uređivanje teksta.
- Blog – kreiranje i upravljanje objavama na blogu.
- Store – postavke internetske trgovine (za viši plan).
- SEO – meta naslovi, opisi i optimizacija svake stranice.
- More – dodatni alati: Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, backups, Export to WordPress, Help i Resources.
Na vrhu editora je glavna alatna traka s: desktop/mobilni prikaz, undo/redo, Connect domain, Preview i zeleni Go live gumb.
KORAK 6: Uredite svoj sadržaj
Sada dolazi dio gdje stranicu prilagođavate. Kliknite bilo gdje na platnu da započnete uređivanje.
Kad pređete mišem preko sekcije, pojavljuje se plavi naziv sekcije i plutajući alatni bar s opcijama.
Alatni bar sekcije nudi: Edit section za postavke pozadine, padding i layout.
Zatim Generate image otvara AI generator slika.
Slijede Duplicate, Hide/Show, Delete, Move up/down i izbornik More.
Za uređivanje teksta kliknite na njega i počnite tipkati. Pojavit će se kontrole za font, veličinu, poravnavanje i boju.
Za zamjenu slike kliknite na nju i odaberite vlastitu, stock iz knjižnice ili AI generiranu.
Prvo uredite početnu stranicu, zatim preko Pages panela prebacite na ostale i uredite ih.
KORAK 7: Koristite AI generator slika
AI generator slika je koristan ako nemate vlastite profesionalne fotografije.
Pređite mišem preko sekcije i kliknite Generate image. Otvorit će se panel s text boxom “Image description”.
Upišite detaljan opis slike (do 3.000 znakova). Panel prikazuje indikator kvalitete u stvarnom vremenu.
Na primjer: “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 će pokazati “Great description!”.
Kliknite Create images i AI će generirati set slika.
AI generator slika zahtijeva Business plan ili viši. Na Premium planu vidjet ćete poziv na nadogradnju.
KORAK 8: Dodajte nove elemente na bilo koju stranicu
Kliknite Elements u lijevoj bočnoj traci za otvaranje panela “Add elements”.
Vidjet ćete sve elemente: Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed, Contact form. Povucite i ispustite element na platno gdje želite.
Nakon postavljanja, kliknite element za njegove postavke i stil.
KORAK 9: Upravljajte stranicama
Kliknite Pages u bočnoj traci za popis svih stranica. Kliknite naziv stranice za uređivanje.
Za dodavanje stranice koristite gumb plus. Za promjenu redoslijeda, povucite stranice gore ili dolje.
Stranice koje ne trebate možete izbrisati, a nove poput Testimonials ili Pricing dodati ovdje i izgraditi ih pomoću Elements panela.
KORAK 10: Postavite SEO
Prije objave postavite SEO. Mnogi preskoče ovaj korak, ali vrijedi svake minute.
Kliknite SEO u lijevoj bočnoj traci, pod naslovom “Let’s be found on Google (SEO).”
Panel je podijeljen na dvije sekcije. S lijeve strane je popis stranica. S desne Website overview s nazivom tvrtke i jezikom. Kliknite Edit za promjenu.
Ispod je odjeljak “Some pages require your attention.” Svaka stranica kojoj treba rad ima narančasti ikon. Kliknite stranicu i unesite meta naslov (do 60 znakova) i meta opis (do 160 znakova).
Radite kroz svaku stranicu – to su isječci koji se pojavljuju u Google rezultatima.
KORAK 11: Povežite svoju domenu
Ako još niste povezali vlastitu domenu, učinite to sada. Kliknite Connect domain u gornjoj alatnoj traci editora.
Imate dvije opcije. Ako već imate domenu, povežite je ažuriranjem DNS postavki na Hostinger servere. Ako je nemate, možete je kupiti izravno ovdje.
Dok ne povežete domenu, stranica će biti dostupna na privremenoj Hostinger poddomeni kao yoursite.builder-preview.com. Dobra je za testiranje, ali za javno dijeljenje koristite pravu domenu.
KORAK 12: Pregledajte stranicu i objavite
Skoro ste gotovi. Prije objave kliknite Preview u gornjoj alatnoj traci.
Otvorit će se cijeli ekran pretpregleda kako će stranica izgledati posjetiteljima. Prebacujte se između desktop i mobilnog prikaza i provjerite sve detalje.
Provjerite hero sekciju na mobilnom, izbornik i rezanje slika.
Kada ste sigurni, vratite se u editor i kliknite zeleni Go live gumb. Vaša stranica je sada objavljena.
KORAK 13: Istražite integracije
Nakon objave istražite integracije. Idite na More > Integrations u lijevoj bočnoj traci.
Integrations panel omogućuje povezivanje s vanjskim alatima: Shippo, Printful, Hostinger Reach, Google Ads i Custom code za HTML, CSS ili JavaScript.
Za aktivaciju kliknite Get started pored integracije, slijedite upute i ponovno objavite stranicu.
Savjeti za najbolje korištenje Hostinger Website Buildera
Budite detaljni u AI upitu. Dvodijelni upit daje generički rezultat. Temeljit, specifičan upit štedi sate uređivanja.
Koristite gumb Improve description svaki put. AI često popunjava nedoumice i precizira upute.
Pažljivo uredite kopiju. AI piše pristojne privremene tekstove, ali ne poznaje vaše poslovanje. Prilagodite kopiju svom glasu i vrijednosti.
Provjerite mobilni prikaz prije objave. Hostinger automatski prilagođava responzivnost, ali slike i razmaci mogu trebati sitna podešavanja.
Popunite SEO za svaku stranicu. Ne samo početnu. Svaka stranica zaslužuje meta naslov i opis – to je jednostavan način za poboljšanje vidljivosti.
Koristite Media library za organizaciju. U More > Media library možete upravljati svim slikama i lakše ih ponovno koristiti.
Vraćajte se i poboljšavajte. Objavljivanje nije kraj, već početak. Redovito ažurirajte sadržaj, dodajte blog i prilagođavajte stranicu kako vaše poslovanje raste.
Hostinger Website Builder uklanja gotovo svaku prepreku između vas i profesionalne web stranice. AI radi dizajn i kopiju, editor omogućuje jednostavne prilagodbe, a ugrađeni SEO i integracije daju sve što trebate na jednom mjestu.
Slijedite ove korake i možete imati poliranu web stranicu uživo za manje od sat vremena.
