Verkkosivun rakentaminen tuntui ennen projektilta, jota varten piti palkata joku. Ei enää.
Olen käyttänyt Hostinger Website Builder -työkalua, ja tässä oppaassa käyn läpi koko prosessin vaihe vaiheelta, kirjautumishetkestä aina sivustosi julkaisuun asti.
Aloitetaan.
Mikä on Hostinger Website Builder?
Hostinger Website Builder on AI-pohjainen, vedä-ja-pudota -verkkosivueditori, joka on sisäänrakennettuna Hostinger-tiliisi.
Et tarvitse asennuksia, koodausosaamista tai suunnittelutaustaa. Kerrot AI:lle mitä haluat, se luo täyden verkkosivuston puolestasi, ja sitten voit mukauttaa sitä brändisi mukaiseksi.
Se on yksi nopeimmista tavoista päästä tyhjästä ammattimaisen näköiseen, julkaisukelpoiseen sivustoon.
Vaihe 1: Kirjaudu sisään ja siirry editoriin
Kun kirjaudut Hostinger-tilillesi, päädyt hPaneliin. Täällä hallinnoit kaikkea: verkkosivujasi, domainejasi, sähköposteja ja laskutusta.
Vasemman reunan valikossa näet listan navigointivaihtoehdoista. Klikkaa Websites. Sen alle avautuu ponnahdusvalikko, jossa on kaksi vaihtoehtoa: Websites list ja Migrations. Valitse Websites list.
Olet nyt Websites list -sivulla, jossa näet kaikki tiliisi liitetyt verkkosivustot.
Sivun oikeassa yläkulmassa on violetti + Add website -painike. Klikkaa sitä.
Valitse neljästä vaihtoehdosta:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
Klikkaa Hostinger Website Builder, eli AI-pohjaista vedä-ja-pudota -työkalua.
Vaihe 2: Kuvaile sivustoasi AI:lle
Valittuasi Hostinger Website Builder -editorin, sinut ohjataan ruudulle, jossa lukee “Let AI create your online presence.”
Täällä kerrot AI:lle, millaisen sivuston haluat rakentaa.
Näet suuren tekstikentän, jonka paikkateksti on “Describe your website or business.” Tämä on kehotekenttäsi—mitä yksityiskohtaisemmin kerrot, sitä parempi lopputulos.
Kentän alapuolella on nopeasti valittavia ehdotuksia, kuten “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”. Klikkaamalla saat valmiin aloituskehotteen, jota voit muokata.
Alaruudussa on myös Pre-made templates ja Link in bio website -linkit. Jos haluat ohittaa AI:n ja selailla valmiita malleja, valitse Pre-made templates. Yksisivuista “link in bio” -sivua varten kannattaa valita Link in bio website.
Useimmille oikean verkkosivun rakentajille AI-kehotekenttä on kuitenkin lähtökohta.
Hyvän AI-kehotteen kirjoittaminen
Tämä on koko prosessin tärkein vaihe. Ajattele kehotetta kuin suunnittelijalle annettavaa briiffiä. Mitä selkeämmin kuvailet visiosi, sitä lähemmäs haluamaasi lopputulosta pääset.
Tässä on kehotteeni, jota käytin esimerkkitoimistolle:
“Luo moderni, ammattimainen verkkosivusto luovalle toimistolle, joka tarjoaa brändäystä, graafista suunnittelua, verkkosuunnittelua ja digimarkkinointipalveluita. Sivuston tulisi olla luova, rohkea ja luotettava mutta samalla selkeä ja helppokäyttöinen. Käytä modernia asettelua vahvoilla visuaalisilla elementeillä, riittävällä väljyydellä ja tyylikkäällä typografialla. Mukaan seuraavat sivut: Etusivu, Meistä, Palvelut, Portfolio, Blogi ja Ota yhteyttä. Etusivulle lisää hero-osio, jossa on tehokas iskulause, lyhyt arvoon keskittyvä kuvaus ja selkeä toimintakehote kuten ‘Aloita projekti’ tai ‘Pyydä tarjous’. Kirjoita yksinkertaista, vakuuttavaa tekstiä, joka selittää, mitä teemme, kenelle autamme ja mitä tuloksia saavutamme. Tee sivustosta mobiiliystävällinen, nopea ja perus-SEO-optimoitu.”
Kehotteessa on tarkkuutta: toimiala, sävy, asettelu, tarvittavat sivut, etusivun rakenne ja sisältötavoitteet. Tällainen yksityiskohtaisuus antaa AI:lle hyvän pohjan.
Kun olet kirjoittanut kehotteen, huomaat tekstikentän oikeassa yläkulmassa “Improve description” -painikkeen. Suosittelen klikkaamaan sen ennen lähettämistä—AI täydentää ja hioo kehotetta usein kiristäen aukkoja, joita et itse huomannut.
Kun olet valmis, klikkaa violettia nuolipainiketta (lähetä-kuvake) tekstikentän oikeassa alakulmassa.
Vaihe 3: Odota AI:n työskentelyä
Kun lähetät kehotteen, Hostingerin AI ryhtyy heti töihin. Näet koko ruudun täyttävän latausanimaation tumman violetilla taustalla tekstillä “Looking for matching pictures…” ja edistymispalkin.
Tämä vaihe kestää yleensä 30–60 sekuntia. AI luo asettelut, kirjoittaa tekstit, valitsee sopivia kuvia varastokirjastosta, rakentaa navigoinnin ja strukturoi koko sivuston kehotteesi perusteella.
Älä sulje välilehteä latautuessa—odota kärsivällisesti.
Vaihe 4: Tarkastele AI:n tuottamaa
Kun AI on valmis, näet esikatselun uudesta sivustostasi. Tämä tulosruutu on aidosti innostava.
Vasemmalta löydät live-esikatselun, ja oikealla on paneeli “Your idea summary”, jossa näytetään lähettämäsi kehotteen tiivistelmä sekä “Edit idea” -nappi, jos haluat muokata tai toistaa kehotteen.
Omassa esimerkissäni AI nimesi sivuston “BoldCraft Studio” ja loi etusivun otsikolla “Crafting Bold Brands That Shine”, tukevalla kuvauksella ja kahdella toimintanapilla: “Start Now” ja “Get Quote”. Navigaatiossa oli kaikki pyytämäni sivut: Etusivu, Meistä, Palvelut, Portfolio, Blogi ja Ota yhteyttä.
Esikatselun yläkulmassa on myös napit Previous versions (vaihtoehtoiset mallit) ja Rate site (arvioi tulos).
Oikeassa yläkulmassa on työpöytä- ja mobiilinäkymän vaihtopainikkeet—tarkista sivuston toimivuus puhelimella heti.
Jos olet tyytyväinen, klikkaa violettia Continue ja siirry muokkaustilaan. Jos et, valitse Edit idea, muokkaa kehotetta ja generoi uudelleen niin monta kertaa kuin tarvitaan.
Vaihe 5: Tutustu editoriin
Muokkaustilassa vietät suurimman osan ajasta. Aluksi kannattaa tutustua käyttöliittymään.
Editorissa on kaksi pääaluetta:
- Suuri keskeinen alue on sivustokangas, jossa näet ja muokkaat sivustoa reaaliajassa.
- Kapea vasen sivupalkki on ohjauspaneeli, jossa on kaikki työkalut.
Sivupalkin kohteet:
- Setup: Perusasetukset, yhdistetty domain ja tilitiedot.
- Elements: Vedä-ja-pudota -paneeli uusille sisällöille.
- Pages: Kaikki sivut yhtenä listana—vaihda, lisää, nimeä uudelleen, järjestä tai poista.
- Styles: Globaalit teema-asetukset—fontit, värit, painikkeet.
- AI tools: Hostingerin sisällöntuotannon AI apu.
- Blog: Blogikirjoitusten hallinta, jos sivustollasi on blogi.
- Store: Verkkokaupan asetukset (vaatii Business-tason tai korkeamman).
- SEO: Metaotsikot, kuvaukset ja muut hakukoneoptimoinnin asetukset.
- More: Lisätyökalut kuten Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language, Manage backups, Export to WordPress sekä Help & Resources.
Editorin yläreunassa on työkalurivi, jossa vasemmalta oikealle: työpöytä- ja mobiilinäkymän vaihto, kumoa ja tee uudelleen -painikkeet, Connect domain, Preview ja vihreä Go live.
Vaihe 6: Muokkaa sisältöäsi
Nyt teet sivustosta oman näköisesi. Klikkaa mitä tahansa kangaspinta-aluetta muokataksesi.
Kun viet hiiren osion päälle, näet sinisen tunnisteen osion tyypistä (esim. “Section” tai “Header”) ja pienen työkalupalkin sen yläpuolella.
Osion työkalupalkissa vasemmalta oikealle: Edit section (osion asetukset—tausta, täytteet, asettelu), Generate image (AI-kuvageneraattori), Duplikaatti, Näytä/Piilota, Poista, Siirrä ylös ja alas sekä Lisää-valikko.
Muokataksesi tekstiä, klikkaa sitä ja ala kirjoittaa. Muotoilutyökalut ilmestyvät automaattisesti.
Kuvan vaihtamiseksi klikkaa sitä. Voit ladata oman tiedoston, selata Hostingerin varastokuvia tai generoi AI-kuva.
Työstä ensin etusivu, sitten vaihda Pages-paneelista muihin sivuihisi ja muokkaa niitä.
Vaihe 7: Käytä AI-kuvageneraattoria
Erityisen hyödyllinen ominaisuus on AI-kuvageneraattori, jos sinulla ei ole omia valokuvia.
Viemällä hiiren osion päälle ja klikkaamalla Generate image avautuu paneeli oikealle.
Paneelissa on “Image description” -kenttä. Kirjoita kuvaileva teksti haluamastasi kuvasta—yksityiskohtia, tunnelmaa, värejä. Paneeli näyttää 3 000 merkin rajan ja laadun indikaattorin.
Esimerkki: “Moderni luovan toimiston työtila, jossa suunnittelijat työskentelevät kannettavien ja isojen näyttöjen ääressä, esillä brändäysprojekteja, verkkosivumalleja ja digitaalisia kuvituksia. Kirkas, selkeä ja tyylikäs toimisto.” Kun laatupalkit täyttyvät, napauta Create images. AI luo joukon vaihtoehtoja.
Huomaa: AI-kuvageneraattori vaatii Business-tason tai korkeamman. Premium-käyttäjille näkyy päivityskehote.
Vaihe 8: Lisää elementtejä mille tahansa sivulle
Jos haluat lisätä puuttuvan sisältölohkon, klikkaa Elements vasemmassa sivupalkissa. Avautuu “Add elements” -paneeli.
Paneelissa on Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed, Contact form ja muita. Vedä haluttu elementti sivustokankaalle.
Kun elementti on paikallaan, klikkaa sitä muokataksesi asetuksia ja tyyliä.
Vaihe 9: Hallinnoi sivujasi
Klikkaa Pages vasemmassa sivupalkissa nähdäksesi kaikki sivut. Vaihda sivujen välillä, lisää uusi plus-painikkeella ja järjestä vetämällä.
Voit poistaa tarpeettomat AI:n luomat sivut ja lisätä puuttuvia, kuten Asiakaspalautteet tai Hinnoittelu, Elements-paneelista.
Vaihe 10: Määritä SEO
Ennen julkaisua täytä SEO-asetukset. Moni ohittaa tämän, mutta 15 minuutin työ voi merkittävästi parantaa löydettävyyttä.
Klikkaa SEO vasemmassa sivupalkissa. Aukeaa paneeli nimeltä “Let’s be found on Google (SEO)”.
Vasemmalta löydät listan sivuistasi ja oikealla on Website overview, jossa on yrityksesi nimi ja kieliasetus—klikkaa Edit tarvittaessa.
Osiossa “Some pages require your attention” ne sivut, jotka vaativat metaotsikoita ja kuvauksia, on merkitty varoitusikonilla. Klikkaa sivua ja kirjoita alle 60 merkin metaotsikko ja alle 160 merkin metaikuvaus.
Käy kaikki sivut läpi—selkeä avainsanan sisältävä otsikko ja ytimekäs kuvaus parantavat hakutuloksia.
Vaihe 11: Liitä oma domain
Jos et ole vielä liittänyt omaa domainia, klikkaa yläreunan Connect domain -painiketta.
Voit yhdistää jo omistamasi domainin päivittämällä DNS-asetukset tai ostaa uuden domainin suoraan Hostingerin kautta saman ruudun kautta.
Ilman kustomoitua domainia sivusto näkyy väliaikaisella Hostinger-alidomainilla (esim. yoursite.builder-preview.com), mikä sopii testeihin, mutta jaa julkisesti oikealla domainilla.
Vaihe 12: Esikatsele ja julkaise
Olet melkein valmis. Ennen julkaisua klikkaa yläreunan Preview.
Tämä avaa täysikokoisen esikatselun, jossa näet sivuston täsmälleen kuten vierailijat. Vaihda työpöydän ja mobiilinäkymän välillä ja tarkista, että kaikki on kunnossa.
Kiinnitä huomiota etusivun hero-osioon mobiilissa, navigaation toimivuuteen ja kuvien leikkauksiin.
Kun olet tyytyväinen, palaa editoriin ja klikkaa vihreää Go live. Sivustosi on nyt julkaistu ja näkyvissä verkossa.
Vaihe 13: Tutustu integraatioihin
Sivuston julkaisun jälkeen kannattaa tutkia integraatiot. Valitse vasemmalta More > Integrations.
Integrations-paneelissa voit yhdistää sivustosi ulkoisiin palveluihin kuten Shippo (lähetysten hallinta), Printful (print-on-demand-tuotteet), Hostinger Reach (sähköpostimarkkinointi), Google Ads (mainoskampanjat) ja Custom code (oma HTML/CSS/JS).
Aktivoi integrointi klikkaamalla Get started, seuraa ohjeita ja julkaise sivu uudelleen.
Vinkkejä Hostinger Website Builderin hyödyntämiseen
Ole tarkka AI-kehotteessasi. Yksirivinen kehotus tuottaa geneerisen lopputuloksen. Yksityiskohtainen briiffi toimialasta, kohderyhmästä, suunnittelutoiveista, sivurakenteesta ja sävystä säästää sinulta tunteja muokkauksissa.
Käytä Improve description -painiketta aina. Se napakkaan kehotteeseen, ja AI tiivistää usein epäselvät kohdat konkreettisiksi ohjeiksi.
Muokkaa tekstejä huolellisesti. AI luo hyviä paikkatekstejä, mutta se ei tunne liiketoimintaasi kuten sinä. Läpi kaikki sivut ja kirjoita tekstit yrityksesi todellisilla arvoilla ja tone of voicella.
Tarkista mobiilinäkymä ennen julkaisua. Hostinger tekee sivustostasi responsiivisen, mutta kuvat ja välit saattavat vaatia hienosäätöä.
Täytä SEO jokaiselle sivulle. Älä tyydy etusivuun—metaotsikko ja -kuvaus parantavat löydettävyyttä ja vievät vain hetken per sivu.
Käytä Media librarya järjestykseen. More > Media library -kohdassa hallinnoit kuvia keskitetysti ja varmistat sivustosi yhtenäisyyden.
Palaa ja kehitä ajan mittaan. Julkaisu on vasta alkua. Päivitä sisältöä, lisää blogipostauksia ja hiovi sivuja liiketoimintasi kehittyessä.
Hostinger Website Builder poistaa lähes kaikki esteet ammattilaistason verkkosivuston rakentamisen tieltä. AI hoitaa suunnittelun ja sisällön, editori tekee mukauttamisesta helppoa, ja SEO- sekä integraatiotyökalut ovat valmiina samassa paikassa.
Seuraa oppaan vaiheita, ja saat realistisesti julkaisukelpoisen, viimeistellyn sivuston valmiiksi alle tunnissa.
