Vroeger voelde het bouwen van een website als een project waarvoor je iemand moest inhuren. Dat hoeft nu niet meer.
Ik gebruik Hostinger Website Builder, en in deze gids neem ik je stap voor stap mee door het hele proces, vanaf het moment dat je inlogt tot het moment dat je site live gaat.
Laten we beginnen.
Wat is Hostinger Website Builder?
Hostinger Website Builder is een door AI aangedreven, drag-and-drop websitebouwer die direct in je Hostinger-account is geïntegreerd.
Je hoeft niets te installeren, je hoeft niet te kunnen coderen en je hebt geen ontwerpochting nodig. Je beschrijft wat je wilt, de AI bouwt een volledige website voor je en daarna pas je deze aan zodat hij bij je merk past.
Het is een van de snelste manieren om van niets naar een volledig live, professioneel ogende website te gaan.
Stap 1: Inloggen en naar de Builder navigeren
Als je inlogt op je Hostinger-account, kom je in het hPanel terecht. Dit is het hoofd-dashboard van Hostinger, en hier beheer je alles, inclusief je websites, domeinen, e-mails en facturering.
In de linkerkolom zie je een lijst met navigatie-opties. Klik op Websites. Er verschijnt een klein dropdownmenu eronder met twee opties: Websiteslijst en Migraties. Klik op Websiteslijst.
Je bent nu op de pagina Websiteslijst, waar alle aan je account gekoppelde websites worden weergegeven.
In de rechterbovenhoek van de pagina zie je een paarse + Website toevoegen-knop. Klik erop.
Er verschijnt een klein dropdownmenu met vier opties:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- En aangepaste PHP/HTML-website
Je wilt klikken op Hostinger Website Builder, dat wordt beschreven als de “door AI aangedreven drag-and-drop websitebouwer.”
Stap 2: Beschrijf je website aan de AI
Nadat je Hostinger Website Builder hebt geselecteerd, kom je op een setupscherm met de kop “Laat de AI je online aanwezigheid creëren.”
Hier vertel je de AI wat voor soort website je wilt bouwen.
Je ziet een groot tekstvak met de placeholdertekst “Beschrijf je website of bedrijf.” Dit is je promptvak, en wat je hier typt bepaalt alles wat de AI voor je genereert. Hoe meer details je geeft, hoe beter het resultaat zal zijn.
Onder het tekstvak zie je ook een rij quick-start suggesties, zoals “Maak een zakelijke website”, “Maak een online winkel”, “Ontwerp een portfolio”, “Start een afsprakenwebsite”, “Begin een blog”, “Start een restaurantwebsite” en “Maak een one-pager website.”
Door op een suggestie te klikken, vul je een startprompt in die je vervolgens kunt bewerken en uitbreiden.
Onderaan het scherm zie je twee extra links: Vooraf gemaakte sjablonen en Link in bio website.
Als je de AI wilt overslaan en bestaande ontwerpen wilt bekijken, klik je op Vooraf gemaakte sjablonen.
Als je alleen een eenvoudige single-page site nodig hebt voor je socialmediaprofielen, is de Link in bio-optie het bekijken waard.
Voor de meeste mensen die een echte website bouwen, is het AI-promptvak echter de juiste plek om te beginnen.
Hoe schrijf je een goede AI-prompt
Dit is het belangrijkste onderdeel van het hele proces. Zie de AI-prompt als een briefing voor een ontwerper. Hoe duidelijker je je visie communiceert, hoe dichter het resultaat bij wat je echt wilt komt.
Dit is de prompt die ik voor deze gids heb gebruikt. Ik bouwde een website voor een creatief bureau:
“Bouw een moderne, professionele website voor een creatief bureau dat branding, grafisch ontwerp, webdesign en digitale marketingdiensten aanbiedt. De website moet creatief, gedurfd en betrouwbaar aanvoelen, terwijl hij toch schoon en overzichtelijk blijft. Gebruik een modern layout met sterke visuals, goede witruimte en stijlvolle typografie. Voeg de volgende pagina’s toe: Home, Over ons, Diensten, Portfolio, Blog en Contact. Voeg op de Home-pagina een hero-sectie toe met een krachtige kop, korte waardegerichte beschrijving en een duidelijke call-to-action-knop zoals ‘Start je project’ of ‘Vraag een offerte aan’. Schrijf eenvoudige, overtuigende tekst die uitlegt wat we doen, wie we helpen en welke resultaten we leveren. Maak de website mobielvriendelijk, snel ladend en geoptimaliseerd voor basis-SEO.”
Merk op hoe specifiek dat is. Het behandelt de branche, toon, stijlen, benodigde pagina’s, structuur van de homepage en contentdoelen. Dat niveau van detail geeft de AI een solide basis om mee te werken.
Zodra je je beschrijving hebt getypt, verschijnt er rechtsboven in het tekstvak een “Verbeter beschrijving”-knop.
Ik raad aan hier op te klikken voordat je je prompt verzendt. De AI zal je prompt uitbreiden en verfijnen, en vaak dingen oppikken die je zelf niet had bedacht.
Als je klaar bent, klik je op de paarse pijlknop (het verzend-icoon) rechtsonder in het tekstvak om je prompt in te dienen en de generatie te starten.
Stap 3: Wacht tot de AI je site bouwt
Nadat je je prompt hebt ingediend, begint de AI van Hostinger meteen met werken. Je ziet een volledig scherm laadanimatie op een dieppaarse achtergrond met de melding “Zoeken naar bijpassende afbeeldingen…” en een voortgangsbalk die aangeeft hoever het proces is.
Deze fase duurt meestal tussen de 30 en 60 seconden. In deze tijd doet de AI veel: het genereert je paginalay-outs, schrijft je websiteteksten, selecteert bijpassende afbeeldingen uit een stockbibliotheek, bouwt je navigatie en structureert je hele site op basis van je prompt.
Sluit de tab niet tijdens het laden. Wacht rustig af.
Stap 4: Bekijk wat de AI heeft gemaakt
Wanneer de AI klaar is, krijg je een voorbeeld te zien van je nieuwe website. Dit is het resultaat-scherm en het is echt spannend om te zien wat er is gegenereerd.
Aan de linkerkant van het scherm zie je een live voorbeeld van je gegenereerde website. Aan de rechterkant zie je een paneel met de titel “Samenvatting van je idee,” waarin je prompt wordt samengevat en een “Idee bewerken”-knop staat als je je prompt wilt aanpassen en opnieuw wilt genereren.
In mijn geval noemde de AI de site “BoldCraft Studio” en genereerde een homepage met de kop “Crafting Bold Brands That Shine”, een ondersteunende beschrijving en twee call-to-action-knoppen: “Start Now” en “Get Quote”.
De navigatiebalk bevatte alle zes pagina’s die ik had gevraagd: Home, Over ons, Diensten, Portfolio, Blog en Contact.
Linksboven in het voorbeeldscherm zie je ook twee knoppen: Vorige versies, waarmee je door alternatieve ontwerpen kunt bladeren, en Beoordeel site, waarmee je feedback kunt geven op het resultaat.
Rechtsboven in het voorbeeld zie je pictogrammen voor desktop en mobiel. Gebruik deze om te controleren hoe je site op een telefoon wordt weergegeven voordat je verdergaat. Het is een goede gewoonte om dit vroeg te doen.
Als je tevreden bent met de algemene richting, klik je op de paarse Doorgaan-knop in het rechterpaneel. Dit brengt je naar de volledige editor waar de echte aanpassingen plaatsvinden.
Als je niet tevreden bent met het resultaat, klik je op Idee bewerken, wijzig je je prompt en genereer je opnieuw. Dit kun je zo vaak doen als nodig.
Stap 5: Maak jezelf vertrouwd met de editor
De editor is waar je het grootste deel van je tijd zult doorbrengen. Wanneer je hier voor het eerst komt, neem dan even de tijd om de indeling te begrijpen voordat je begint te klikken.
De editor heeft twee hoofdgebieden.
- Het grote centrale gebied is je websitecanvas, waar je je site in realtime kunt zien en bewerken.
- De smalle verticale zijbalk links is je bedieningspaneel, en hier vind je alles wat je nodig hebt.
Dit doet elk item in de zijbalk:
- Instellingen geeft je toegang tot de basisinstellingen van je site, het gekoppelde domein en planinformatie.
- Elementen opent het drag-and-drop paneel waar je nieuwe contentblokken aan elke pagina kunt toevoegen. Hier kom ik zo op terug.
- Pagina’s toont al je pagina’s in één overzicht. Je kunt tussen pagina’s wisselen, nieuwe toevoegen, bestaande hernoemen, de volgorde wijzigen of pagina’s verwijderen die je niet nodig hebt.
- Stijlen beheert je globale ontwerp. Hier stel je je lettertypen, kleurenpalet en knopstijlen in. Wijzigingen die je hier aanbrengt, gelden voor je hele site, dus dit is de juiste plek voor ingrijpende ontwerpsbeslissingen in plaats van alles sectie voor sectie aan te passen.
- AI-tools geeft je toegang tot de schrijf- en content-AI van Hostinger. Je kunt het gebruiken om tekstsecties te herschrijven, nieuwe teksten te genereren en meer.
- Blog is waar je blogposts aanmaakt en beheert als je site een blog heeft.
- Winkel is waar je je online winkel instelt als je producten verkoopt. Let op: e-commercefuncties vereisen een plan op een hoger niveau.
- SEO opent de ingebouwde SEO-manager waar je meta-titels, beschrijvingen en andere zoekoptimalisatiegegevens voor elke pagina kunt instellen.
- Meer vouwt uit tot een tweede menu met extra tools zoals Afspraken, Algemene instellingen, Integraties, Formulierinzendingen, Analytics, Mediabibliotheek, Meertalige ondersteuning, Back-ups beheren, Inhoud exporteren naar WordPress en Help en bronnen.
Bovenin de editor vind je ook de hoofdwerkbalk. Van links naar rechts bevat deze: een desktop- en mobielvoorbeeld-toggle, de knoppen Ongedaan maken en Opnieuw doen, een Domein koppelen-knop, een Voorbeeld-knop en de groene Live zetten-knop.
Stap 6: Bewerk je content
Nu komt het gedeelte waar je de site eigen maakt. Klik ergens op je websitecanvas om te beginnen met bewerken.
Wanneer je met je muis over een sectie van de pagina gaat, zie je linksboven in die sectie een blauwe label verschijnen met het type element, bijvoorbeeld “Sectie” of “Header.” Tegelijkertijd verschijnt er een kleine zwevende werkbalk boven de sectie met je bewerkingsopties.
De sectiewerkbalk geeft je de volgende bedieningselementen van links naar rechts: Sectie bewerken opent het sectie-instellingenpaneel, waar je de achtergrondafbeelding of -kleur kunt wijzigen, de opvulling kunt aanpassen en lay-outopties kunt wijzigen.
Daarnaast vind je Afbeelding genereren, waarmee je de AI-afbeeldingsgenerator opent.
Daarna heb je een Dupliceer-icoon, een Verberg/Toon-schakelaar, een Verwijder-icoon, pijlen Omhoog verplaatsen en Omlaag verplaatsen om secties te herschikken, en een drie-punts Meer opties-menu.
Om tekst op de pagina te bewerken, klik je er gewoon op en begin je met typen. Het tekstvak wordt bewerkbaar en er verschijnen opmaakopties. Je kunt via deze opties het lettertype, de grootte, de uitlijning en de kleur wijzigen.
Om een afbeelding te wijzigen, klik je erop. Je ziet opties om deze te vervangen door een foto uit je eigen bestanden, te bladeren door Hostinger’s stockbibliotheek of een nieuwe te genereren met AI.
Werk eerst je homepage af en gebruik vervolgens het Pagina’s-paneel om naar elke extra pagina te schakelen en deze op dezelfde manier te bewerken.
Stap 7: Gebruik de AI-afbeeldingsgenerator
Een functie die de moeite waard is om even bij stil te staan, is de AI-afbeeldingsgenerator, omdat deze erg handig is als je zelf geen professionele foto’s hebt.
Om deze te gebruiken, ga je met de muis over een sectie op je pagina en klik je op Afbeelding genereren in de zwevende sectiewerkbalk. Er schuift een paneel binnen vanaf de rechterkant van het scherm.
In het paneel zie je een tekstvak “Afbeeldingsbeschrijving”. Typ een beschrijving van de afbeelding die je wilt maken.
Hoe specifieker en beeldender je beschrijving, hoe beter de output. Het paneel geeft een limiet van 3.000 tekens weer en een real-time kwaliteitsindicator die aangeeft of je beschrijving sterk genoeg is.
Bijvoorbeeld, toen ik typte “Een moderne creatieve kantoorruimte waar ontwerpers samen werken rond laptops en grote schermen met brandingontwerpen, website-ontwerpen en digitale kunstwerken. Helder, strak en stijlvol kantoor”, toonde het paneel “Geweldige beschrijving!” met volledig gevulde kwaliteitsbalken.
Als je tevreden bent met je beschrijving, klik je op de Afbeeldingen maken-knop. De AI genereert dan een reeks afbeeldingen waaruit je kunt kiezen.
Let op: de AI-afbeeldingsgenerator vereist het Business-plan of hoger. Als je het Premium-plan hebt, zie je onderaan het paneel een prompt om te upgraden.
Stap 8: Voeg nieuwe elementen aan een pagina toe
Als je een contentblok wilt toevoegen dat nog niet op je pagina staat, klik je op Elementen in de linkerbalk. Hiermee open je het paneel “Elementen toevoegen”.
Je ziet een overzicht van alle beschikbare elementen, inclusief Tekst, Knop, Affiliate link, Voeg toe aan winkelwagen, Afbeelding, Galerij, Video, Vorm, Kaart, Instagram-feed en Contactformulier. Sleep elk element uit het paneel naar je canvas om het op de gewenste plaats te zetten.
Eenmaal geplaatst, klik je op het element om de individuele instellingen en stijlopties te openen.
Met deze drag-and-drop-aanpak zit je nooit vast aan de lay-out die de AI heeft gegenereerd. Je kunt elementen toevoegen, verwijderen en vrij herschikken.
Stap 9: Beheer je pagina’s
Klik op Pagina’s in de linkerbalk om al je pagina’s in een lijst te zien. Je kunt op elke paginanaam klikken om die pagina te bewerken.
Om een nieuwe pagina toe te voegen, gebruik je de plusknop. Om de volgorde van de pagina’s in je navigatie te wijzigen, sleep je ze in de lijst omhoog of omlaag.
Als er pagina’s zijn die de AI heeft toegevoegd maar die je niet nodig hebt, kun je ze hier verwijderen. Evenzo kun je hier een ontbrekende pagina toevoegen, zoals een Testimonials- of Prijs-pagina, en deze vervolgens opbouwen met behulp van het Elementen-paneel.
Stap 10: Stel je SEO in
Voordat je publiceert, moet je je SEO instellen. Dit is een stap die veel mensen overslaan, maar dat is een fout.
Tien minuten investeren in het goed invullen van je SEO-instellingen kan echt verschil maken of mensen je site via Google vinden.
Klik op SEO in de linkerbalk om het SEO-paneel te openen, met de titel “Laten we gevonden worden op Google (SEO).”
Het paneel is opgesplitst in twee delen. Aan de linkerkant zie je een lijst met al je pagina’s. Aan de rechterkant zie je het Website-overzicht, waar je de naam van je bedrijf en de taal van je website ziet. Klik op Bewerken om deze bij te werken als ze niet kloppen.
Daaronder staat een sectie met de titel “Sommige pagina’s hebben je aandacht nodig.”
Elke pagina die nog werk nodig heeft, is gemarkeerd met een oranje waarschuwingsicoon. Klik op een pagina in het linker paneel om de individuele SEO-instellingen voor die pagina te openen en schrijf daar een meta-titel en metabeschrijving.
Werk alle pagina’s in de lijst af. Een goede meta-titel is duidelijk, bevat je belangrijkste zoekwoord en is korter dan 60 tekens. Een goede metabeschrijving vat samen waar de pagina over gaat en is onder de 160 tekens. Dit zijn de fragmenten die in Google-resultaten worden weergegeven, dus het is de moeite waard er een paar minuten aan te besteden.
Stap 11: Koppel je domein
Als je nog geen aangepast domein aan je site hebt gekoppeld, is nu het moment. Klik op de Domein koppelen-knop in de bovenste werkbalk van de editor.
Je hebt twee opties. Als je al een domein bezit, kun je dit koppelen door je DNS-instellingen bij te werken zodat ze naar Hostinger’s servers verwijzen. Als je nog geen domein hebt, kun je er op dit scherm een aanschaffen via Hostinger.
Zonder gekoppeld domein is je site alleen toegankelijk via een tijdelijke subdomein zoals jouwsite.builder-preview.com. Dat is prima voor testen, maar je wilt een eigen domein voordat je de site publiek deelt.
Stap 12: Bekijk je site in voorbeeld en ga live
Je bent bijna klaar. Voordat je publiceert, klik je op de Voorbeeld-knop in de rechterbovenhoek van de werkbalk.
Dit opent een schermvullend voorbeeld van hoe je site er voor bezoekers uitziet. Schakel bovenaan het voorbeeldscherm tussen desktop- en mobielweergave en controleer of alles er op beide goed uitziet.
Let vooral op hoe je homepage-hero eruitziet op mobiel, hoe je navigatie inklapt en of afbeeldingen op ongewenste wijze worden bijgesneden.
Als je tevreden bent, ga je terug naar de editor en klik je op de groene Live zetten-knop rechtsboven. Je site is nu gepubliceerd en live op internet.
Stap 13: Ontdek integraties
Als je site live is, is het de moeite waard de beschikbare integraties te verkennen. Ga naar Meer > Integraties in de linkerbalk.
Het integratiepaneel laat je je website koppelen aan externe tools en diensten. De huidige opties zijn Shippo voor het genereren van verzendetiketten en orderafhandeling, Printful voor print-on-demand producten, Hostinger Reach voor e-mailmarketing en nieuwsbrieven, Google Ads voor betaalde advertentiecampagnes en Aangepaste code als je je eigen HTML, CSS of JavaScript wilt toevoegen om de functionaliteit uit te breiden.
Om een integratie te activeren, klik je op Aan de slag naast de betreffende optie, volg je de stappen en publiceer je je site opnieuw.
Tips om het meeste uit Hostinger Website Builder te halen
Wees royaal met je AI-prompt. Een prompt van twee zinnen geeft een generiek resultaat. Een gedetailleerde prompt waarin je je branche, doelgroep, ontwerpvoorkeuren, paginavoorziening en tone of voice beschrijft, levert iets veel dichter bij je wensen op. Besteed vijf minuten aan een goede briefing en bespaar daar later uren bewerkingstijd mee.
Gebruik altijd de knop Verbeter beschrijving. Het is makkelijk te missen, maar het is echt nuttig. De AI pikt vaak vage punten op en maakt er concrete ontwerp- en contentinstructies van.
Bewerk je teksten zorgvuldig. De AI schrijft redelijke placeholder-teksten, maar het kent je bedrijf niet zoals jij dat doet. Loop alle pagina’s door en herschrijf de teksten zodat ze je werkelijke diensten, echte meerwaarde en eigen stem weerspiegelen.
Controleer de mobiele weergave voordat je publiceert. Hostinger maakt je site automatisch responsive, maar afbeeldingen en witruimte hebben soms kleine aanpassingen nodig op kleinere schermen. Bekijk altijd eerst de mobiele weergave.
Vul SEO in voor elke pagina. Niet alleen de homepage. Iedere pagina op je site verdient een goede meta-titel en beschrijving. Het kost per pagina een paar minuten en is een van de eenvoudigste manieren om je vindbaarheid te verbeteren.
Gebruik de Mediabibliotheek om georganiseerd te blijven. Onder Meer > Mediabibliotheek kun je al je afbeeldingen op één plek uploaden en beheren. Zo kun je afbeeldingen makkelijk hergebruiken en houd je je site consistent.
Kom regelmatig terug en verbeter. Je site publiceren is niet het einde, maar het begin. Kom regelmatig terug om je content bij te werken, nieuwe blogposts toe te voegen en pagina’s te verfijnen naarmate je bedrijf groeit.
Hostinger Website Builder haalt bijna alle barrières weg die je vroeger tegenhielden om een professionele website te maken. De AI doet het grootste deel van het ontwerp en de copywriting, de editor maakt aanpassingen eenvoudig en de ingebouwde SEO- en integratietools betekenen dat je alles wat je nodig hebt op één plek hebt.
Volg de stappen in deze gids en je kunt realistisch gezien binnen een uur een gepolijste website live hebben staan.
