Veebisaidi loomine tundus varem projektina, mille jaoks pidid palgama kedagi. Nüüd enam mitte.
Olen kasutanud Hostinger Website Builder’i ja selles juhendis juhatan sind läbi kogu protsessi samm-sammult alates sisselogimisest kuni saidi avaldamiseni.
Alustame.
Mis on Hostinger Website Builder?
Hostinger Website Builder on tehisintellektiga võimendatud lohistatav veebilehtede ehitaja, mis on integreeritud otse sinu Hostingeri kontosse.
Sul ei ole vaja midagi installida, sul ei pea olema programmeerimisoskust ega disainitausta. Kirjeldad, mida soovid, tehisintellekt ehitab sulle täisfunktsionaalse veebisaidi ja seejärel saad seda kohandada vastavalt oma brändile.
See on üks kiirimaid viise alustada nullist ja jõuda täisfunktsionaalse, professionaalse ilmega veebisaidini.
Samm 1: Logi sisse ja liigu ehitajasse
Kui logid sisse oma Hostingeri kontole, jõuad hPaneli. See on Hostingeri põhijuhtpaneel, kus haldad kõike alates veebisaitidest ja domeenidest kuni e-kirjade ja arveldamiseni.
Vasakul küljeribal näed navigeerimisvalikute loendit. Klõpsa Websites. Selle all avaneb väike rippmenüü kahe valikuga: Websites list ja Migrations. Klõpsa Websites list.
Nüüd oled ‘Websites list’ lehel, kus on loetletud kõik sinu kontoga seotud veebisaidid.
Lehe paremas ülanurgas näed lilla + Add website nuppu. Klõpsa sellel.
Ilmub väike rippmenüü nelja valikuga:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
Sul on vaja klõpsata Hostinger Website Builder, mida kirjeldatakse kui “AI-powered drag-and-drop website builder.”
Samm 2: Kirjelda oma veebisaiti tehisintellektile
Pärast Hostinger Website Builder valimist saadetakse sind seadistuskuvale pealkirjaga “Let AI create your online presence.”
Siin ütled tehisintellektile, millist veebisaiti soovid luua.
Näed suurt tekstivälja kohatäitjaga “Describe your website or business.” See on sinu prompti kast ja see, mida siia sisestad, määrab ära kõik, mida tehisintellekt sinu jaoks genereerib. Mida rohkem detaili annad, seda parem on tulemus.
Tekstikasti all on rida kiirstardivalikuid, nt “Create a business website”, “Create an online store”, “Design a portfolio”, “Launch an appointments website”, “Start a blog”, “Launch a restaurant website” ja “Create a one pager website”.
Millelegi neist klõpsamine täidab algse prompti, mida saad seejärel redigeerida ja täiendada.
Ekraani allosas näed kahte täiendavat linki: Pre-made templates ja Link in bio website. Kui soovid AI sammu vahele jätta ja sirvida olemasolevaid kujundusi, klõpsa Pre-made templates.
Kui vajad lihtsat ühe lehe saidi oma sotsiaalmeedia profiilide jaoks, tasub proovida Link in bio valikut.
Enamiku jaoks, kes ehitavad tõelist veebisaiti, on aga õige koht AI prompti kast.
Kuidas kirjutada head AI prompti
See on kogu protsessi kõige olulisem osa. Mõtle AI promptile nagu disainerile antavale lühiloole. Mida selgemalt oma visiooni kommunikeerid, seda lähemal on tulemus sellele, mida tegelikult tahad.
Siin on prompt, mida kasutasin selle juhendi jaoks. Ehitasin veebisaiti loomeagentuurile:
Ehita moodne, professionaalne veebisait loomeagentuurile, mis pakub brändinguteenuseid, graafilist disaini, veebidisaini ja digitaalse turunduse teenuseid. Veebisait peaks olema loov, jõuline ja usaldusväärne, samas puhas ning hõlpsalt navigeeritav. Kasuta modernset paigutust tugeva visuaaliga, hea ruumijaotusega ja stiilse tüpograafiaga. Lisa järgmised lehed: Esileht, Meist, Teenused, Portfoolio, Blogi ja Kontakt. Esilehel lisa hero-osa võimsa pealkirjaga, lühike väärtuspõhine kirjeldus ja selge tegevuskutse nupp, nt ‘Alusta projekti’ või ‘Küsi hinnapakkumist’. Kirjuta lihtne, veenev tekst, mis selgitab, mida me teeme, keda aitame ja milliseid tulemusi toome. Muuda veebisait mobiilisõbralikuks, kiirelaadivaks ja baasseo jaoks optimeerituks.
Näed, kui täpne see on. See katab tööstusharu, tooni, paigutusstiili, vajalikud lehed, avalehe struktuuri ja sisueesmärgid. Selline detailne kirjeldus annab AI-le kindla aluse tööd teha.
Kui oled oma kirjelduse sisestanud, märkad tekstikasti paremas ülanurgas nupu “Improve description”. Soovitan sellel enne esitust klõpsata. AI laiendab ja lihvib su prompti, sageli tabades asju, mida sa ei kujutanud ette lisada.
Kui oled valmis, klõpsa tekstikasti all paremas nurgas asuval lilla nooleikoonil (saada ikoon), et esitada oma prompt ja alustada genereerimist.
Samm 3: Oota, kuni AI sinu saiti ehitab
Pärast prompti esitamist hakkab Hostingeri AI kohe tööd tegema. Näed täisekraanilist laadimisanimatust tumelilla taustal sõnumiga “Looking for matching pictures…” ja edenemisriba, mis näitab, kui kaugele protsess on jõudnud.
See etapp võtab tavaliselt aega 30–60 sekundit. Selle aja jooksul genereerib AI sinu lehtede paigutused, kirjutab veebisaidi teksti, valib sobivad pildid varalugude hulgast, ehitab navigeerimise ja struktureerib kogu saidi vastavalt su promptile.
Ära sulge vahekaarti laadimise ajal. Lihtsalt oota ja lase AI-l tööd teha.
Samm 4: Vaata üle, mida AI ehitas
Kui AI lõpetab, näidatakse sulle sinu uue veebisaidi eelvaadet. See on tulemusteguvaade ja on tõeliselt põnev näha, mis on genereeritud.
Ekraani vasakul poolel on sinu genereeritud veebisaidi reaalajas eelvaade. Paremal pool on paneel nimega “Your idea summary,” kus on kokkuvõte sinu esitatud promptist ja nupp “Edit idea”, kui soovid tagasi minna ja genereerida uuesti uue või täiendatud promptiga.
Minu puhul nimetati sait “BoldCraft Studio” ja genereeriti avaleht pealkirjaga “Crafting Bold Brands That Shine”, toetava kirjeldusega ja kahe tegevuskutse nupuga: “Start Now” ja “Get Quote.”
Navigeerimisriba sisaldas kõiki kuut lehte, mida soovisin: Home, About, Services, Portfolio, Blog ja Contact.
Eelvaateekraani vasakus ülanurgas on veel kaks nuppu: Previous versions, mis lubab vaadata AI poolt arvesse võetud alternatiivseid kujundusi, ja Rate site, mille abil saad tulemust hinnata.
Eelvaate paremas ülanurgas on ikoonid töölaua- ja mobiilivaate vahetamiseks. Kasuta neid, et enne jätkamist kontrollida, kuidas su sait telefonis välja näeb. Seda on hea varakult teha.
Kui oled tulemusega rahul, klõpsa parempoolses paneelis lillat Continue nuppu. See viib sind täiseditorisse, kus toimub tõeline kohandamine.
Kui tulemus ei rahulda, klõpsa Edit idea, muuda oma prompti ja genereeri uuesti. Seda võid teha nii mitu korda, kui vaja.
Samm 5: Tutvu editoriga
Editor on koht, kus veedad enamiku ajast. Kui esimest korda siia jõuad, võta hetk, et paigutust mõista, enne kui hakatad klikkima.
Editoril on kaks peamist ala.
- Suur keskne ala on sinu veebisaidi lõuend, kus näed ja saad reaalajas saidiga suhelda.
- Kitsas vertikaalne küljeriba vasakul on sinu juhtpaneel, kus on kõik vajalik.
Siin on, mida iga küljeriba valik teeb:
- Setup annab juurdepääsu saidi põhisätetele, ühendatud domeenile ja plaaniteabele.
- Elements avab lohistava paneeli, kus saad igale lehele uusi sisulõike lisada. Siin teemale pöördume lähemalt veidi hiljem.
- Pages kuvab kõik sinu lehed ühes kohas. Saad lehtede vahel vahetada, uusi lisada, olemasolevaid ümber nimetada, nende järjekorda muuta või kustutada need, mida ei vaja.
- Styles juhib saidi üldist disaini. Siin seadistad fonte, värvipaleti ja nuppude stiilid. Kõik siin tehtud muudatused rakenduvad kogu saidile, seega on see koht suuremate disainiotsuste tegemiseks, mitte iga sektsiooni eraldi muutmiseks.
- AI tools annab juurdepääsu Hostingeri kirjutamis- ja sisutehisintellektile. Seda võid kasutada tekstilõikude ümberkirjutamiseks, uue teksti genereerimiseks jpm.
- Blog on koht, kus lood ja haldad blogipostitusi, kui su saidil on blogi.
- Store on koht, kus seadistad oma veebipoe, kui müüd tooteid. Pane tähele, et e-kaubanduse funktsioonid nõuavad kõrgema taseme plaani.
- SEO avab sisseehitatud SEO halduri, kus saad iga lehe jaoks määrata meta pealkirjad, kirjelduse ja muud otsingumootori optimeerimise sätted.
- More laiendab teise menüü, kus on veel tööriistu, sh Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress ja Help and Resources.
Editoris ülal on ka peamine tööriistariba. Vasakult paremale on siin töölaua- ja mobiilivaate lüliti, tagasi- ja edasi-nupud, Connect domain nupp, Preview nupp ja roheline Go live nupp.
Samm 6: Muuda oma sisu
Nüüd tuleb osa, kus teed saidi enda omaks. Klõpsa lõuendil suvalises kohas, et hakata redigeerima.
Kui viid kursoriga üle mistahes lehe sektsiooni, ilmub selle ülaserva vasakusse äärde sinine silt, mis näitab elemendi tüüpi, nt “Section” või “Header”. Samal ajal avaneb sektsiooni kohal väike ripptööriistariba redigeerimisvalikutega.
Sektsiooni tööriistariba pakub vasakult paremale järgmisi valikuid: Edit section avab sektsiooni seadistuspaneeli, kus saad muuta taustapilti või -värvi, kohandada täitevahekaugust ja paigutusvalikuid.
Järgmisena on Generate image, mis avab AI-pildigeneraatori.
Seejärel on Duplikaadi ikoon, Kuva/Peida lüliti, Kustuta ikoon, üles- ja alla-nooled sektsioonide järjestuse muutmiseks ning kolme punktiga More options menüü.
Teksti redigeerimiseks klõpsa lihtsalt sellel ja hakka tippima. Tekstielement muutub redigeeritavaks ja näed vormindusvalikuid. Nende abil saad muuta fondi suurust, kaalu, joondust ja värvi.
Pildi muutmiseks klõpsa sellel. Näed valikuid asendada see oma failidest pärit fotoga, sirvida Hostingeri varapildikogu või genereerida uus pild AI abil.
Töötle esmalt läbi oma esileht, seejärel kasuta Pages paneeli, et minna üle teistele lehtedele ja redigeerida neid järjest.
Samm 7: Kasuta AI-pildigeneraatorit
Üks funktsioon, millele tasub tähelepanu pöörata, on AI-pildigeneraator, mis on tõeliselt kasulik, kui sul puuduvad professionaalsed fotod.
Selle avamiseks viid kursoriga üle mis tahes sektsiooni ja klõpsad sektsiooni floatri tööriistaribal Generate image. Ekraani parempoolsest servast libiseb sisse paneel.
Paneelis näed tekstikasti “Image description”. Kirjuta sinna soovitud pildi kirjeldus. Mida täpsem ja visuaalsem on kirjeldus, seda parem on tulemus. Paneelil on 3000 tähemärgi piirang ja reaalajas kvaliteedimõõdik, mis näitab, kas kirjeldus on piisavalt tugev.
Näiteks kui kirjutasin “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”, näitas paneel “Great description!” koos täielikult täidetud kvaliteediribadega.
Kui kirjeldus sind rahuldab, klõpsa Create images nuppu. AI genereerib sulle valiku pilte, millest saad valida.
Üks oluline asi: AI-pildigeneraator nõuab Business plaani või kõrgemat taset. Kui kasutad Premium plaani, näed paneeli allosas täiendamise (upgrade) viipa.
Samm 8: Lisa uusi elemente igale lehele
Kui soovid lisada sisulõiku, mida su lehel veel ei ole, klõpsa vasakul küljeribal Elements. See avab paneeli “Add elements”.
Näed kõigi saadaolevate elementide võrgustikku, sealhulgas Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed ja Contact form. Nende lisamiseks lohista element paneelist lõuendile sinna, kuhu soovid.
Pärast paigutamist klõpsa elemendil, et avada selle individuaalsed sätted ja stiilivõimalused.
See lohista-ja-ule paneelile lähenemine tähendab, et sa ei ole kunagi AI genereeritud paigutusega lukus. Saad elemente vabas vormis lisada, eemaldada ja ümber korraldada.
Samm 9: Halda oma lehti
Klõpsa vasakul küljeribal Pages, et näha kõiki oma lehti ühes kohas. Klõpsa lehe nimel, et minna selle redigeerimise juurde. Uue lehe lisamiseks kasuta plussnuppu. Lehtede järjekorra muutmiseks navigeerimises lohista neid loendis üles või alla.
Kui AI on genereerinud lehti, mida sa ei vaja, saad need siit kustutada. Samamoodi, kui vajad lehte, mida AI ei lisanud, nagu Testimonials page või Pricing page, saad selle siit lisada ja seejärel Elements paneeli abil välja töötada.
Samm 10: Seadista oma SEO
Enne avaldamist tuleb seadistada SEO. See on samm, mida paljud vahele jätavad, mis on viga.
15 minuti kasutamine SEO sätete põhjalikuks täitmiseks võib märgatavalt mõjutada, kas inimesed sinu saiti Google’i kaudu leiavad.
Klõpsa vasakul küljeribal SEO, et avada SEO paneel pealkirjaga “Let’s be found on Google (SEO).”
Paneel on jaotatud kaheks sektsiooniks. Vasakul on nimekiri kõigist su lehtedest. Paremal on Website overview, kus on näha sinu ettevõtte nimi ja veebisaidi keel. Kui need ei ole õiged, klõpsa Edit, et neid värskendada.
Veebisaidi info all on sektsioon “Some pages require your attention.”
Iga töötlemist vajav leht on märgitud oranži hoiatusikooniga. Klõpsa vasakpoolses paneelis mis tahes lehel, et avada selle individuaalsed SEO sätted, kus saad kirjutada meta pealkirja ja meta kirjelduse.
Töötle läbi iga leht nimekirjas. Hea meta pealkiri on selge, sisaldab peamist märksõna ja on alla 60 tähemärgi. Hea meta kirjeldus võtab kokku lehe sisu ja on kuni 160 tähemärki. Need on tekstilõigud, mis ilmuvad Google’i otsingutulemustes, seega tasub igaühe peale paar minutit kulutada.
Samm 11: Ühenda oma domeen
Kui sa pole oma saidiga veel kohandatud domeeni ühendanud, on nüüd selleks õige aeg. Klõpsa editori tööriistaribalt Connect domain nuppu.
Sul on kaks võimalust. Kui sul on juba domeen, saad selle ühendada, uuendades DNS-sätteid nii, et need osutaksid Hostingeri serveritele. Kui sul domeeni veel ei ole, saad selle samal ekraanil otse Hostingerist osta.
Kuni domeeni ei ole ühendatud, on sinu sait ligipääsetav ajutise Hostingeri alamdomeeniga, näiteks yoursite.builder-preview.com. Testimiseks sobib see, kuid enne avalikku jagamist tahad siiski omada päris domeeni.
Samm 12: Vaata oma saidi eelvaadet ja avalda see
Oled peaaegu kohal. Enne avaldamisnupu vajutamist klõpsa paremas ülanurgas asuval Preview nupul.
See avab täisekraanilise eelvaate, kuidas sinu sait külastajatele välja näeb. Kasuta eelvaate ülaservas olevaid ikoone, et vahetada töölaua- ja mobiilivaate vahel, ja kontrolli, et kõik näeks mõlemas korras korrektne välja.
Pööra eriti tähelepanu sellele, kuidas esilehe hero-osa mobiilis välja näeb, kuidas navigeerimine kokkupaiskub ja kas mõni pilt kärbitakse viisil, mida sa ei oodanud.
Kui oled kõigega rahul, naase redaktorisse ja klõpsa paremas ülanurgas rohelist Go live nuppu. Sinu sait on nüüd avaldatud ja internetis kättesaadav.
Samm 13: Tutvu integratsioonidega
Kui sinu sait on avatud, tasub uurida olemasolevaid integratsioone. Mine vasakul küljeribal More > Integrations.
Integrations paneel võimaldab ühendada oma veebisaidi väliste tööriistade ja teenustega. Praegused valikud hõlmavad Shippo’d järelmaksuga saadetiste etikettide genereerimiseks ja tellimuste täitmise haldamiseks, Printfuli print-on-demand toodete loomiseks ja müümiseks, Hostinger Reachi e-posti turunduseks ja uudiskirjade saatmiseks tellijatele, Google Adsi tasuliste reklaamikampaaniate käivitamiseks ning Custom code’i, kui soovid saidile lisada enda HTML-, CSS- või JavaScript-koodi funktsionaalsuse laiendamiseks.
Iga integratsiooni aktiveerimiseks klõpsa selle kõrval Get started, järgi ühendamise samme ja uuenda oma saiti, avaldades selle uuesti.
Näpunäited, et Hostinger Website Builderist maksimaalselt kasu saada
Ole oma AI promptiga põhjalik. Kahe lausega prompt annab sulle üldise tulemuse. Detailne, konkreetne prompt, mis katab sinu tööstusharu, sihtrühma, disainieelistused, lehekülje struktuuri ja tooni, annab tulemuseks midagi palju lähedasemat sellele, mida tegelikult tahad. Pühenda viie minuti kirjutamisele ja see säästab tundide võrra redigeerimisaega hiljem.
Kasuta alati nuppu Improve description. Selle tähelepanuta jätmine on lihtne, kuid see on tõeliselt kasulik. AI märkab tihti nüansse, mida oled jätnud ebaselgeks, ja muudab need konkreetseteks disaini- ja sisujuhisteks.
Muuda tekste hoolikalt. AI kirjutab korralikku kohatäiteteksti, kuid ei tunne sinu ärimudelit nii hästi kui sina ise. Läbi iga lehekülje ja kirjuta tekstid ümber, et need kajastaksid sinu tegelikke teenuseid, päris väärtust ja autentset tooni.
Kontrolli mobiilivaadet enne avaldamist. Hostinger teeb saidi automaatselt reageerivaks, kuid piltide ja paigutuse väikekraanidel võib vaja minna kergeid kohandusi. Alati eelvaata mobiilis enne avaldamist.
Täida SEO iga lehe jaoks. Mitte ainult avaleht. Iga leht vajab korralikku meta pealkirja ja meta kirjeldust. Iga lehe käsitlemine võtab paar minutit ja on üks lihtsamaid viise oma nähtavuse parandamiseks otsingutulemustes.
Kasuta Media library’t, et pildid korras hoida. Menüüs More > Media library saad igal ajal üles laadida ja hallata kõiki pilte ühes kohas. See teeb piltide taaskasutamise erinevatel lehtedel ja saidi ühtlase välimuse säilitamise tunduvalt lihtsamaks.
Tule tagasi ja paranda aja jooksul. Saidile avaldamine ei ole protsessi lõpp, vaid algus. Tule regulaarselt tagasi sisu värskendamiseks, uute blogipostituste lisamiseks ja lehtede täiustamiseks vastavalt sinu ettevõtte arengule.
Hostinger Website Builder eemaldab peaaegu kõik barjäärid sinu ja professionaalse veebisaidi vahel. AI võtab enda kanda disaini ja teksti põhitöö, editor teeb kohandamise lihtsaks ning sisseehitatud SEO ja integratsioonitööriistad annavad sulle kõik vajalikud vahendid ühest kohast.
Järgides selle juhendi samme, saad realistlikult valmis, täisfunktsionaalse veebisaidi vähem kui tunniga.
