Izrada veb-sajta je nekada delovala kao projekat za koji morate angažovati nekoga. Više nije tako.
Koristim Hostinger Website Builder, i u ovom vodiču ću vas provesti kroz ceo proces, korak po korak, od trenutka kada se prijavite do trenutka kada vaš sajt postane dostupan.
Hajde da počnemo.
Šta je Hostinger Website Builder?
Hostinger Website Builder je graditelj sajtova pokretan veštačkom inteligencijom zasnovan na prevlačenju i ispuštanju, ugrađen direktno u vaš Hostinger nalog.
Ne morate ništa da instalirate, ne morate znati kako da kodirate i ne trebate dizajnersko predznanje. Vi opišete šta želite, AI napravi kompletan veb-sajt za vas, a zatim ga prilagodite svom brendu.
Ovo je jedan od najbržih načina da od nule dođete do potpuno aktivnog, profesionalno izgledajućeg veb-sajta.
Korak 1: Prijavite se i idite do graditelja
Kada se prijavite na svoj Hostinger nalog, dospete na hPanel. To je glavni kontrolni panel Hostinger-a i tu upravljate svime, uključujući svoje veb-sajtove, domene, imejl adrese i naplatu.
U levom bočnom meniju videćete listu navigacionih opcija. Kliknite na Websites. Ispod će se pojaviti mali padajući meni sa dve opcije: Websites list i Migrations. Kliknite na Websites list.
Sada ste na stranici Websites list, koja prikazuje sve veb-sajtove povezane sa vašim nalogom.
U gornjem desnom uglu stranice videćete ljubičasto dugme + Add website. Kliknite na njega.
Pojavljuje se mali padajući meni sa četiri opcije:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- I Custom PHP/HTML veb-sajt
Treba da kliknete na Hostinger Website Builder, koji je opisan kao „AI-pokretan graditelj sajtova zasnovan na prevlačenju i ispuštanju”.
Korak 2: Opišite svoj sajt AI-ju
Nakon što odaberete Hostinger Website Builder, bićete preusmereni na ekran za podešavanje sa naslovom “Let AI create your online presence.”
Ovde kažete AI-ju kakav sajt želite da napravite.
Videćete veliki tekstualni okvir sa placeholder tekstom „Describe your website or business.” Ovo je vaš prompt, i ono što ovde unesete određuje sve što AI generiše za vas. Što više detalja date, to će rezultat biti bolji.
Ispod tekstualnog okvira primetićete i niz predloga za brzi početak. Oni uključuju opcije kao što su „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 prompt koji zatim možete uređivati i proširiti.
Na samom dnu ekrana videćete još dva linka: Pre-made templates i Link in bio website.
Ako više volite da preskočite AI i pregledate postojeće dizajne, kliknite na Pre-made templates.
Ako vam treba jednostavan jednostranični sajt za vaše profile na društvenim mrežama, opcija Link in bio je vredna razmatranja.
Za većinu korisnika koji prave pravi veb-sajt, AI prompt je pravi izbor za početak.
Kako napisati dobar AI prompt
Ovo je najvažniji deo čitavog procesa. Smatrajte AI prompt kao brief koji dajete dizajneru. Što jasnije komunicirate svoju viziju, rezultat će biti bliži onome što zapravo želite.
Evo prompta koji sam koristio za ovaj vodič. Pravim veb-sajt za kreativnu agenciju:
“Napravite moderan, profesionalan veb-sajt za kreativnu agenciju koja nudi usluge brendiranja, grafičkog dizajna, web dizajna i digitalnog marketinga. Sajt treba da odiše kreativnošću, hrabrošću i pouzdanošću, a istovremeno ostane čist i lak za navigaciju. Koristite moderan raspored sa upečatljivim vizuelnim elementima, dobrim razmacima i stilizovanom tipografijom. Uključite sledeće stranice: Home, About, Services, Portfolio, Blog i Contact. Na Home stranici dodajte hero sekciju sa moćnim naslovom, kratkim opisom usmerenim na vrednost i jasnim pozivom na akciju poput ‚Start Your Project‘ ili ‚Get a Quote‘. Napišite jednostavan, ubedljiv tekst koji objašnjava šta radimo, kome pomažemo i rezultate koje postižemo. Učinite veb-sajt prilagođenim mobilnim uređajima, brzo učitavajućim i optimizovanim za osnovni SEO”
Primetite koliko je detaljno. Obuhvata industriju, ton, stil rasporeda, potrebne stranice, strukturu početne stranice i ciljeve sadržaja. Taj nivo detalja daje AI čvrstu osnovu za rad.
Kada unesete svoj opis, primetićete da se u gornjem desnom uglu tekstualnog okvira pojavljuje dugme “Improve description”.
Preporučujem da na to kliknete pre slanja. AI će proširiti i izbrusiti vaš prompt, često uključujući stvari koje niste mislili da navedete.
Kada ste spremni, kliknite na ljubičasto dugme sa strelicom (ikonica za slanje) u donjem desnom uglu tekstualnog okvira da pošaljete svoj prompt i pokrenete generisanje.
Korak 3: Sačekajte da AI izgradi vaš sajt
Nakon što pošaljete svoj prompt, Hostinger-ov AI odmah počinje sa radom. Videćete animaciju učitavanja preko celog ekrana na tamnoljubičastoj pozadini sa porukom “Looking for matching pictures…” i traku napretka koja pokazuje koliko je proces daleko.
Ovaj korak obično traje između 30 i 60 sekundi. Tokom tog vremena, AI radi mnogo toga: generiše raspored stranica, piše sadržaj sajta, bira odgovarajuće slike iz stock biblioteke, kreira navigaciju i strukturira ceo vaš sajt na osnovu unetog prompta.
Ne zatvarajte karticu dok se učitava. Samo sačekajte i pustite da proces traje.
Korak 4: Pregledajte šta je AI izgradio
Kada AI završi, prikazaće vam se pregled vašeg novog veb-sajta. Ovo je ekran sa rezultatom i zaista je uzbudljivo videti šta je generisano.
Leva strana ekrana prikazuje live preview generisanog sajta. Desna strana prikazuje panel nazvan “Your idea summary,” koji prikazuje rezime prompta koji ste poslali i dugme “Edit idea” ako želite da se vratite i regenerišete sa drugačijim ili izmenjenim promptom.
U mom slučaju, AI je nazvao sajt „BoldCraft Studio” i generisao početnu stranicu sa naslovom „Crafting Bold Brands That Shine”, pratećim opisom i dva dugmeta za poziv na akciju: „Start Now” i „Get Quote”.
Navigacioni meni je uključivao svih šest stranica koje sam tražio: Home, About, Services, Portfolio, Blog i Contact.
U gornjem levom uglu ekrana pregleda takođe ćete videti dva dugmeta: Previous versions, koje vam omogućava da se vratite na alternativne dizajne koje je AI razmatrao, i Rate site, koje vam omogućava da date povratnu informaciju o rezultatu.
U gornjem desnom uglu pregleda videćete ikone za prebacivanje između desktop i mobilnog prikaza. Koristite ih da proverite kako vaš sajt izgleda na telefonu pre nego što nastavite. To je dobra navika koju je poželjno usvojiti što ranije.
Ako ste zadovoljni opštim pravcem, kliknite na ljubičasto Continue dugme na desnom panelu. Time ulazite u kompletan editor gde se obavljaju prava prilagođavanja.
Ako niste zadovoljni rezultatom, kliknite na Edit idea, izmenite svoj prompt i regenerišite. To možete uraditi onoliko puta koliko je potrebno.
Korak 5: Upoznajte se sa editorom
U editoru ćete provesti većinu vremena. Kada prvi put stignete ovde, odvojite trenutak da razumete raspored pre nego što počnete da klikćete.
Editor ima dve glavne oblasti.
- Velika centralna oblast je platno vašeg sajta, gde možete videti i interagovati sa sajtom u realnom vremenu.
- Uski vertikalni bočni panel sa leve strane je vaš kontrolni panel i sadrži sve što vam je potrebno.
Evo šta svaka stavka u bočnom panelu radi:
- Setup omogućava pristup osnovnim podešavanjima sajta, povezanom domenu i informacijama o planu.
- Elements otvara panel za prevlačenje i ispuštanje gde možete dodati nove blokove sadržaja na bilo koju stranicu. O ovom ću detaljnije govoriti uskoro.
- Pages prikazuje sve vaše stranice na jednom mestu. Možete se prebacivati između stranica, dodavati nove, preimenovati postojeće, menjati njihov redosled ili brisati one koje ne trebate.
- Styles kontroliše globalni dizajn sajta. Ovde podešavate fontove, paletu boja i stilove dugmadi. Sve izmene koje ovde napravite primenjuju se na ceo sajt, pa je ovo pravo mesto za opsežne dizajnerske odluke umesto menjanja svake sekcije pojedinačno.
- AI tools daje pristup Hostinger-ovom AI za pisanje i sadržaj. Možete ga koristiti za prepisivanje delova teksta, generisanje novog sadržaja i više.
- Blog je mesto gde kreirate i upravljate blog postovima ako vaš sajt ima blog.
- Store je mesto gde postavljate svoju online prodavnicu ako prodajete proizvode. Imajte na umu da eCommerce funkcije zahtevaju viši plan.
- SEO otvara ugrađeni SEO menadžer gde možete podesiti meta naslove, opise i druge detalje za optimizaciju pretrage za svaku stranicu.
- More proširuje se u drugi meni sa dodatnim alatima uključujući Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress i Help and Resources.
Na vrhu editora takođe ćete naći glavnu alatnu traku. Sa leve na desnu stranu sadrži: prekidač za desktop i mobilni pregled, dugmad za poništi i ponovi, dugme Connect domain, dugme Preview i zeleno dugme Go live.
Korak 6: Uredite svoj sadržaj
Sada dolazi deo gde svoj sajt prilagodite. Kliknite bilo gde na platnu sajta da započnete uređivanje.
Kada pređete mišem preko bilo koje sekcije stranice, pojaviće se plavi label u gornjem levom uglu te sekcije koji prikazuje tip elementa, na primer „Section“ ili „Header“. Istovremeno, iznad sekcije pojaviće se mala plutajuća alatna traka sa opcijama za uređivanje.
Alatna traka sekcije pruža sledeće kontrole s leva na desno: Edit section otvara panel podešavanja sekcije gde možete promeniti pozadinsku sliku ili boju, prilagoditi margine i izmeniti opcije rasporeda.
Pored toga je Generate image, što otvara AI generator slika.
Zatim sledi ikona Duplicate, prekidač Hide/Show, ikona Delete, strelice Move up i Move down za promenu redosleda sekcija, i meni sa tri tačke More options.
Da biste uredili bilo koji tekst na stranici, jednostavno kliknite direktno na njega i počnite da kucate. Tekstualni element postaće izmenjiv, i pojaviće se kontrole za formatiranje. Možete promeniti veličinu fonta, debljinu, poravnanje i boju direktno iz ovih kontrola.
Da promenite sliku, kliknite na nju. Videćete opcije da je zamenite fotografijom iz svojih fajlova, pretražite Hostinger-ovu stock biblioteku slika ili generišete novu pomoću AI.
Prvo uredite početnu stranicu, zatim koristite panel Pages da se prebacujete na svaku dodatnu stranicu i uredite ih jednu po jednu.
Korak 7: Koristite AI generator slika
Jedna funkcija na kojoj vredi zastati je AI image generator, jer je izuzetno koristan ako nemate profesionalne fotografije.
Da biste mu pristupili, pređite mišem preko bilo koje sekcije na stranici i kliknite na Generate image u plutajućoj alatnoj traci sekcije. Panel će se pojaviti sa desne strane ekrana.
U panelu ćete videti tekstualni okvir „Image description“. Unesite opis slike koju želite da kreirate.
Što je vaš opis specifičniji i vizuelniji, to će biti bolji rezultat. Panel prikazuje ograničenje od 3.000 karaktera i indikator kvaliteta u realnom vremenu koji vam govori da li je vaš opis dovoljno jak.
Na primer, kada sam uneo „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 je prikazao „Great description!“ sa potpuno popunjenim trakama kvaliteta.
Kada ste zadovoljni opisom, kliknite na dugme Create images. AI će generisati set slika među kojima možete da birate.
Vredno je napomenuti: AI generator slika zahteva Business plan ili viši. Ako ste na Premium planu, pojaviće se prompt za nadogradnju na dnu panela.
Korak 8: Dodajte nove elemente na bilo koju stranicu
Ako želite da dodate blok sadržaja koji već nije na vašoj stranici, kliknite na Elements u levom bočnom panelu. Ovo otvara panel „Add elements“.
Videćete mrežu svih dostupnih elemenata, uključujući Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed i Contact form. Da biste bilo koji od njih dodali na svoju stranicu, prevucite ga iz panela i ispustite na platno na željenoj lokaciji.
Kada ga postavite, kliknite na element da biste pristupili njegovim individualnim podešavanjima i opcijama stilizovanja.
Ovaj pristup prevlačenja i ispuštanja znači da nikada niste zaglavljeni u rasporedu koji je AI generisao. Možete slobodno dodavati, uklanjati i premeštati elemente.
Korak 9: Upravljajte svojim stranicama
Kliknite na Pages u levom bočnom panelu da vidite sve svoje stranice na jednom mestu. Možete kliknuti na naziv bilo koje stranice da odmah pređete na uređivanje te stranice.
Da dodate novu stranicu, koristite dugme plus. Da promenite redosled pojavljivanja stranica u navigaciji, prevucite ih naviše ili naniže na listi.
Ako imate stranice koje je AI generisao, a koje ne trebate, možete ih ovde obrisati. Isto tako, ako vam je potrebna stranica koju AI nije uključio, kao što su Testimonials ili Pricing, možete je ovde dodati, a zatim je izgraditi koristeći Elements panel.
Korak 10: Podesite svoj SEO
Pre nego što objavite, morate da podesite SEO. Ovo je korak koji mnogi ljudi preskoče, a to je greška.
Ulaganje 15 minuta u pravilno popunjavanje SEO podešavanja može napraviti značajnu razliku u tome da li ljudi pronađu vaš sajt preko Google-a.
Kliknite na SEO u levom bočnom panelu da otvorite SEO panel, nazvan “Let’s be found on Google (SEO).”
Panel je podeljen na dva dela. S leva videćete listu svih svojih stranica. S desna ćete videti Website overview, koji prikazuje naziv vašeg biznisa i jezik sajta. Kliknite na Edit da ih ažurirate ako nisu tačni.
Ispod informacija o sajtu videćete sekciju nazvanu “Some pages require your attention.”
Svaka stranica kojoj je potrebno uređivanje označena je narandžastom ikonicom upozorenja. Kliknite na bilo koju stranicu u levom panelu da otvorite njena pojedinačna SEO podešavanja, gde možete uneti meta naslov i meta opis za tu stranicu.
Prođite kroz svaku stranicu sa liste. Dobar meta naslov je jasan, sadrži vašu glavnu ključnu reč i ima manje od 60 karaktera. Dobar meta opis sažima o čemu je stranica i ima manje od 160 karaktera. Ovo su isječci koji se pojavljuju u Google rezultatima pretrage, pa vredi provesti nekoliko minuta na svaku stranicu.
Korak 11: Povežite svoj domen
Ako još niste povezali sopstveni domen sa sajtom, sada je pravo vreme. Kliknite na dugme Connect domain u gornjoj alatnoj traci editora.
Imate dve opcije. Ako već posedujete domen, možete ga povezati ažuriranjem DNS postavki da upućuju na Hostinger-ove servere. Ako još nemate domen, možete ga kupiti direktno od Hostinger-a na istom ekranu.
Dok ne povežete domen, vaš sajt biće dostupan preko privremene Hostinger subdome, poput yoursite.builder-preview.com. To je u redu za testiranje, ali preporučuje se pravi domen pre nego što sajt delite javno.
Korak 12: Pregledajte svoj sajt i objavite ga
Gotovi ste skoro. Pre nego što objavite, kliknite na dugme Preview u gornjem desnom uglu alatne trake.
Ovo otvara pregled preko celog ekrana koji prikazuje tačno kako će vaš sajt izgledati posetiocima. Prebacujte se između desktop i mobilnog prikaza pomoću ikona na vrhu ekrana pregleda i proverite da li sve izgleda ispravno na oba prikaza.
Obratite posebnu pažnju na to kako hero sekcija početne stranice izgleda na mobilnom, kako se navigacija sklopi i da li se neke slike režu na nepredviđeni način.
Kada ste zadovoljni sa svime, vratite se u editor i kliknite na zeleno Go live dugme u gornjem desnom uglu. Vaš sajt je sada objavljen i dostupan na internetu.
Korak 13: Istražite integracije
Kada je vaš sajt uživo, vredi istražiti integracije koje su vam na raspolaganju. Idite na More > Integrations u levom bočnom panelu.
Panel Integrations vam omogućava da povežete svoj veb-sajt sa eksternim alatima i servisima. Trenutne opcije uključuju Shippo za generisanje nalepnica za isporuku i upravljanje realizacijom porudžbina, Printful za kreiranje i prodaju proizvoda na zahtev, Hostinger Reach za email marketing i slanje newslettera pretplatnicima, Google Ads za vođenje plaćenih reklamnih kampanja, i Custom code ako želite da dodate svoj HTML, CSS ili JavaScript kako biste proširili funkcionalnost sajta.
Da biste aktivirali bilo koju integraciju, kliknite na Get started pored nje, pratite korake povezivanja, a zatim ažurirajte svoj sajt ponovnim objavljivanjem.
Saveti kako maksimalno iskoristiti Hostinger Website Builder
Budite obimni u svom AI promptu. Prompt od dve rečenice daće vam generički rezultat. Detaljan, specifičan prompt koji obuhvata vašu industriju, publiku, dizajnerske preferencije, strukturu stranica i ton glasa daće vam mnogo bliže ono što zaista želite. Uložite pet minuta u pisanje dobrog briefa i to će vam uštedeti sate uređivanja kasnije.
Koristite dugme Improve description svaki put. Lako ga je prevideti, ali je zaista koristan. AI često primeti stavke koje ste ostavili nejasnim i pretvori ih u konkretna dizajnerska i sadržajna uputstva.
Pažljivo uredite svoj tekst. AI piše pristojan privremeni tekst, ali ne poznaje vaš biznis kao vi. Prođite kroz svaku stranicu i prepišite tekst kako bi odražavao vaše stvarne usluge, pravu vrednost i vaš autentični glas.
Proverite mobilni prikaz pre objavljivanja. Hostinger automatski čini vaš sajt responzivnim, ali slike i razmaci ponekad zahtevaju manje prilagođavanje na manjim ekranima. Uvek pregledajte na mobilnom pre objavljivanja.
Popunite SEO za svaku stranicu. Ne samo za početnu. Svaka stranica na vašem sajtu zaslužuje odgovarajući meta naslov i opis. Potrebno je nekoliko minuta po stranici i to je jedna od najjednostavnijih stvari koje možete uraditi da poboljšate vidljivost u rezultatima pretrage.
Koristite Media library da ostanete organizovani. U odeljku More > Media library možete učitati i upravljati svim slikama na jednom mestu. Ovo olakšava ponovnu upotrebu slika na više stranica i održavanje doslednosti sajta.
Vraćajte se i unapređujte sa vremenom. Objavljivanje sajta nije kraj procesa, već početak. Redovno se vraćajte da ažurirate sadržaj, dodajete nove blog postove i usavršavate stranice kako vaš biznis raste.
Hostinger Website Builder uklanja gotovo sve barijere koje su nekada stajale između vas i profesionalnog sajta. AI obavlja težak posao dizajna i sadržaja, editor čini prilagođavanje jednostavnim, a ugrađeni SEO i alati za integracije znače da imate sve što vam je potrebno na jednom mestu.
Pratite korake iz ovog vodiča i realno možete imati uživo, dotjeran veb-sajt pokrenut za manje od sat vremena.
