Det å bygge et nettsted føltes før ut som et prosjekt du måtte hyre inn noen for. Ikke lenger.
Jeg har brukt Hostinger Website Builder, og i denne guiden vil jeg lede deg gjennom hele prosessen, trinn for trinn, fra øyeblikket du logger inn til ditt nettsted er live.
La oss sette i gang.
Hva er Hostinger Website Builder?
Hostinger Website Builder er en AI-drevet dra-og-slipp-nettsidebygger som er bygget direkte inn i Hostinger-kontoen din.
Du trenger ikke å installere noe, du trenger ikke å kunne kode, og du trenger ikke bakgrunn innen design. Du beskriver hva du ønsker, AI-en bygger et komplett nettsted for deg, og deretter tilpasser du det for å matche merkevaren din.
Det er en av de raskeste måtene å gå fra ingenting til et fullt live, profesjonelt nettsted.
Steg 1: Logg inn og naviger til byggeverktøyet
Når du logger inn på Hostinger-kontoen din, havner du på hPanel. Dette er Hostingers hoveddashboard, og det er her du administrerer alt, inkludert nettsidene dine, domener, e-poster og fakturering.
På venstre sidefelt ser du en liste med navigasjonsalternativer. Klikk på Websites. En liten rullegardinmeny vises under den med to alternativer: Websites list og Migrations. Klikk på Websites list.
Du er nå på siden Websites list, som viser alle nettstedene tilknyttet kontoen din.
Øverst til høyre på siden ser du en lilla + Add website-knapp. Klikk på den.
En liten rullegardinmeny vises med fire alternativer:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Egendefinert PHP/HTML-nettsted
Du vil klikke på Hostinger Website Builder, som beskrives som den «AI-drevne dra-og-slipp-nettsidebyggeren».
Steg 2: Beskriv nettstedet ditt for AI-en
Etter å ha valgt Hostinger Website Builder, blir du tatt til en oppsettsskjerm med overskriften «Let AI create your online presence.»
Her forteller du AI-en hva slags nettsted du ønsker å bygge.
Du vil se en stor tekstboks med plassholderteksten «Describe your website or business.» Dette er prompt-boksen din, og det du skriver her bestemmer alt AI-en genererer for deg. Jo mer detaljer du gir den, desto bedre blir resultatet.
Under tekstboksen vil du også legge merke til en rad med hurtigvalg-suggesjonsknapper. Disse inkluderer alternativer som «Create a business website», «Create an online store», «Design a portfolio», «Launch an appointments website», «Start a blog», «Launch a restaurant website», og «Create a one pager website».
Å klikke på noen av disse fyller inn en startprompt som du deretter kan redigere og utvide.
Lengst ned på skjermen ser du to ekstra lenker: Pre-made templates og Link in bio website.
Hvis du foretrekker å hoppe over AI-en og bla gjennom eksisterende design, klikk på Pre-made templates.
Hvis du bare trenger en enkel enkeltside for sosiale medieprofiler, er Link in bio-alternativet verdt å sjekke ut.
For de fleste som bygger et ekte nettsted, er AI-promptboksen imidlertid det riktige stedet å starte.
Hvordan skrive en god AI-prompt
Dette er den viktigste delen av hele prosessen. Tenk på AI-prompten som en brief du gir til en designer. Jo tydeligere du kommuniserer visjonen din, desto nærmere blir resultatet det du faktisk ønsker.
Her er prompten jeg brukte for denne guiden. Jeg bygde et nettsted for et kreativt byrå:
“Bygg et moderne, profesjonelt nettsted for et kreativt byrå som tilbyr merkevarebygging, grafisk design, nettdesign og digital markedsføringstjenester. Nettstedet skal føles kreativt, dristig og troverdig samtidig som det er rent og lett å navigere. Bruk et moderne oppsett med sterke visuelle elementer, god luft og stilig typografi. Inkluder følgende sider: Hjem, Om oss, Tjenester, Portefølje, Blogg og Kontakt. På Hjem-siden, legg til en hero-seksjon med en kraftfull overskrift, kort verdifokusert beskrivelse og en tydelig handlingsknapp som ‘Start prosjektet ditt’ eller ‘Be om et tilbud’. Skriv enkel, overbevisende tekst som forklarer hva vi gjør, hvem vi hjelper, og resultatene vi leverer. Gjør nettstedet mobilvennlig, raskt lastende og optimalisert for grunnleggende SEO.”
Legg merke til hvor spesifikt det er. Det dekker bransjen, tonen, layoutstil, nødvendige sider, hjemmesidestruktur og innholdsmål. Det detaljerte grunnlaget gir AI-en et solid utgangspunkt.
Når du har skrevet inn beskrivelsen, vil du se en knapp merket «Improve description» vises øverst til høyre i tekstboksen.
Jeg anbefaler å klikke på denne før du sender. AI-en vil utvide og forbedre prompten din, og tar ofte med ting du ikke tenkte på å inkludere.
Når du er klar, klikk på den lilla pilknappen (send-ikonet) nederst til høyre i tekstboksen for å sende prompten din og starte genereringen.
Steg 3: Vent på at AI-en bygger nettstedet ditt
Etter at du har sendt prompten, starter Hostingers AI umiddelbart å jobbe. Du vil se en fullskjerms lastingsanimasjon på dyp lilla bakgrunn med meldingen «Looking for matching pictures…» og en fremdriftsindikator som viser hvor langt prosessen er kommet.
Denne fasen tar vanligvis mellom 30 og 60 sekunder. I løpet av denne tiden gjør AI-en mye: genererer sideoppsettet ditt, skriver nettstedsteksten din, velger matchende bilder fra et arkivbibliotek, bygger navigasjonen din og strukturerer hele nettstedet basert på prompten.
Ikke lukk fanen mens den laster. Bare vent og la den kjøre.
Steg 4: Gå gjennom det AI-en har bygget
Når AI-en er ferdig, blir du vist en forhåndsvisning av det nye nettstedet ditt. Dette er resultatskjermen, og det er virkelig spennende å se hva som har blitt generert.
Venstre side av skjermen viser en direktesendt forhåndsvisning av nettstedet AI-en genererte. Høyre side viser et panel kalt «Your idea summary,» som viser en oppsummering av prompten du sendte inn og en «Edit idea»-knapp hvis du vil gå tilbake og regenerere med en annen eller oppdatert prompt.
I mitt tilfelle navnga AI-en nettstedet «BoldCraft Studio» og genererte en hjemmeside med overskriften «Crafting Bold Brands That Shine», en understøttende beskrivelse og to handlingsknapper: «Start Now» og «Get Quote».
Navigasjonslinjen inkluderte alle de seks sidene jeg ba om: Home, About, Services, Portfolio, Blog og Contact.
Øverst til venstre på forhåndsvisningsskjermen vil du også se to knapper: Previous versions, som lar deg bla tilbake gjennom alternative design AI-en vurderte, og Rate site, som lar deg gi tilbakemelding på resultatet.
Øverst til høyre i forhåndsvisningen ser du ikoner for å veksle mellom skrivebord og mobil. Bruk disse for å sjekke hvordan nettstedet ditt ser ut på en telefon før du går videre. Det er en god vane å gjøre dette tidlig.
Hvis du er fornøyd med den overordnede retningen, klikker du på den lilla Continue-knappen i høyre panel. Dette tar deg til den fullstendige redigereren hvor den virkelige tilpasningen skjer.
Hvis du ikke er fornøyd med resultatet, klikk på Edit idea, revider prompten din, og regenerer. Du kan gjøre dette så mange ganger du trenger.
Steg 5: Bli kjent med redigereren
Redigereren er hvor du vil bruke mesteparten av tiden din. Når du først kommer hit, ta et øyeblikk til å forstå oppsettet før du begynner å klikke rundt.
Redigereren har to hovedområder.
- Setup gir deg tilgang til nettstedets grunnleggende innstillinger, tilknyttet domene og planinformasjon.
- Elements åpner dra-og-slipp-panelet der du kan legge til nye innholdsblokker på en hvilken som helst side. Jeg vil dekke dette mer detaljert om litt.
- Pages viser alle sidene dine på ett sted. Du kan bytte mellom sider, legge til nye, gi nytt navn til eksisterende, endre rekkefølgen eller slette dem du ikke trenger.
- Styles styrer det globale designet på nettstedet ditt. Her setter du skrifttyper, fargepalett og knappestiler. Alle endringer du gjør her gjelder for hele nettstedet, så dette er stedet for gjennomgripende designvalg istedenfor å endre ting én seksjon om gangen.
- AI tools gir deg tilgang til Hostingers skrive- og innholds-AI. Du kan bruke det til å omskrive seksjoner av tekst, generere ny tekst og mer.
- Blog er hvor du oppretter og administrerer blogginnlegg hvis nettstedet ditt har en blogg.
- Store er hvor du setter opp nettbutikken hvis du selger produkter. Merk at e-handelsfunksjoner krever en plan på et høyere nivå.
- SEO åpner den innebygde SEO-behandleren der du kan sette metatitler, beskrivelser og andre søkeoptimaliseringsdetaljer for hver side.
- More utvider til en sekundær meny med flere verktøy, inkludert Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, og Help and Resources.
Øverst i redigereren finner du også hovedverktøylinjen. Fra venstre til høyre inneholder den: en bryter for forhåndsvisning på skrivebord og mobil, Angre- og Gjør om-knapper, en Connect domain-knapp, en Preview-knapp, og den grønne Go live-knappen.
Steg 6: Rediger innholdet ditt
Nå kommer delen der du gjør nettstedet til ditt eget. Klikk hvor som helst på nettstedets lerret for å begynne redigeringen.
Når du holder musepekeren over en hvilken som helst seksjon på siden, vil du se en blå etikett øverst til venstre i den seksjonen som viser hvilken type element det er, for eksempel «Section» eller «Header». Samtidig vises en liten flytende verktøylinje over seksjonen med redigeringsalternativene dine.
Seksjonsverktøylinjen gir deg følgende kontroller fra venstre til høyre: Edit section åpner innstillingspanelet for seksjonen, hvor du kan endre bakgrunnsbilde eller farge, justere avstand og endre layoutalternativer.
Ved siden av er Generate image, som åpner AI-bildegeneratoren.
Deretter har du et Dupliser-ikon, en Vis/Skjul-bryter, et Slett-ikon, Flytt opp og Flytt ned-piler for å endre rekkefølgen på seksjoner, og en treprikkers Flere alternativer-meny.
For å redigere hvilken som helst tekst på siden, klikk bare direkte på den og begynn å skrive. Tekstelementet blir redigerbart, og du vil se formateringskontroller dukke opp. Du kan endre skriftstørrelse, vekt, justering og farge direkte fra disse kontrollene.
For å endre et bilde, klikk på det. Du vil se alternativer for å erstatte det med et bilde fra dine egne filer, bla i Hostingers arkivbibliotek, eller generere et nytt med AI.
Arbeid gjennom startsiden din først, og bruk deretter Pages-panelet for å bytte til hver ekstra side og redigere dem etter tur.
Steg 7: Bruk AI-bildegeneratoren
Én funksjon du bør stanse opp ved er AI image generator, fordi den er virkelig nyttig hvis du ikke har egne profesjonelle bilder.
For å få tilgang til den, hold musepekeren over en hvilken som helst seksjon på siden din og klikk Generate image i den flytende seksjonsverktøylinjen. Et panel vil skyves inn fra høyre side av skjermen.
Inne i panelet vil du se en tekstboks merket «Image description». Skriv inn en beskrivelse av bildet du vil lage.
Jo mer spesifikk og visuell beskrivelsen din er, desto bedre blir resultatet. Panelet viser en tegnbegrensning på 3000 og en kvalitetsindikator i sanntid som forteller deg om beskrivelsen din er god nok.
For eksempel, når jeg skrev «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», viste panelet «Great description!» med fullutfylte kvalitetsstolper.
Når du er fornøyd med beskrivelsen, klikk på Create images-knappen. AI-en vil generere et sett med bilder du kan velge fra.
Én ting å være klar over: AI-bildegeneratoren krever Business-planen eller høyere. Hvis du er på Premium-planen, vil du se en oppgraderingshenvisning nederst i panelet.
Steg 8: Legg til nye elementer på hvilken som helst side
Hvis du vil legge til en innholdsblokk som ikke allerede finnes på siden din, klikk på Elements i venstre sidefelt. Dette åpner panelet «Add elements».
Du vil se et rutenett med alle tilgjengelige elementer, inkludert Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed og Contact form. For å legge til noen av disse på siden din, dra det fra panelet og slipp det på lerretet der du vil at det skal vises.
Når det er plassert, klikker du på elementet for å få tilgang til dets individuelle innstillinger og stilalternativer.
Denne dra-og-slipp-tilnærmingen betyr at du aldri er låst til layouten AI-en genererte. Du kan legge til, fjerne og omorganisere elementer fritt.
Steg 9: Administrer sidene dine
Klikk på Pages i venstre sidefelt for å se alle sidene dine listet på ett sted. Du kan klikke på et hvilket som helst sidens navn for å hoppe til redigering av den siden.
For å legge til en ny side, bruk plussknappen. For å endre rekkefølgen sidene vises i navigasjonen, dra dem opp eller ned i listen.
Hvis du har sider AI-en genererte som du ikke trenger, kan du slette dem herfra. Tilsvarende, hvis du trenger en side AI-en ikke inkluderte, som en Testimonials-side eller en Pricing-side, kan du legge den til her og deretter bygge den ut ved hjelp av Elements-panelet.
Steg 10: Sett opp SEO-en din
Før du publiserer, må du sette opp SEO-en din. Dette er et skritt mange hopper over, og det er en feil.
Å bruke 15 minutter på å fylle inn SEO-innstillingene dine ordentlig kan utgjøre en reell forskjell for om folk finner nettstedet ditt gjennom Google.
Klikk på SEO i venstre sidefelt for å åpne SEO-panelet med tittelen «Let’s be found on Google (SEO).»
Panelet er delt inn i to seksjoner. Til venstre ser du en liste over alle sidene dine. Til høyre ser du Website overview, som viser firmanavnet ditt og nettstedets språk. Klikk på Edit for å oppdatere disse hvis de ikke er korrekte.
Under nettstedinformasjonen ser du en seksjon kalt «Some pages require your attention.»
Hver side som trenger arbeid er merket med et oransje varselikon. Klikk på en hvilken som helst side i venstre panel for å åpne dens individuelle SEO-innstillinger, der du kan skrive en metatittel og metabeskrivelse for den spesifikke siden.
Arbeid deg gjennom hver side på listen. En god metatittel er tydelig, inneholder hovedsøkeordet ditt, og er under 60 tegn. En god metabeskrivelse oppsummerer hva siden handler om og er under 160 tegn. Disse er utdragene som vises i Google-søk, så det er verdt å bruke noen minutter på hver enkelt.
Steg 11: Koble til domenet ditt
Hvis du ennå ikke har koblet et egendefinert domene til nettstedet ditt, er nå tiden inne. Klikk på Connect domain-knappen i verktøylinjen øverst i redigereren.
Du har to alternativer. Hvis du allerede eier et domene, kan du koble det til ved å oppdatere DNS-innstillingene slik at de peker til Hostingers servere. Hvis du ennå ikke eier et domene, kan du kjøpe et direkte fra Hostinger på denne samme skjermen.
Frem til du kobler til et domene, vil nettstedet ditt være tilgjengelig via et midlertidig Hostinger-underdomene, for eksempel yoursite.builder-preview.com. Det er greit for testformål, men du ønsker et ordentlig domene før du begynner å dele nettstedet ditt offentlig.
Steg 12: Forhåndsvis nettstedet ditt og gå live
Du er nesten i mål. Før du publiserer, klikk på Preview-knappen i verktøylinjen øverst til høyre.
Dette åpner en fullskjerms forhåndsvisning av nøyaktig hvordan nettstedet ditt vil se ut for besøkende. Veksle mellom skrivebords- og mobilvisning ved hjelp av ikonene øverst i forhåndsvisningsskjermen, og sjekk at alt ser riktig ut på begge.
Vær spesielt oppmerksom på hvordan hero-seksjonen på startsiden din ser ut på mobil, hvordan navigasjonen kollapser, og om noen bilder blir beskjært på en måte du ikke hadde tenkt.
Når du er fornøyd med alt, gå tilbake til redigereren og klikk på den grønne Go live-knappen øverst til høyre. Nettstedet ditt er nå publisert og live på internett.
Steg 13: Utforsk integrasjoner
Når nettstedet ditt er live, er det verdt å utforske tilgjengelige integrasjoner. Gå til More > Integrations i venstre sidefelt.
Integrasjons-panelet lar deg koble nettstedet ditt til eksterne verktøy og tjenester. De nåværende alternativene inkluderer Shippo for å generere fraktetiketter og administrere ordreoppfyllelse, Printful for å lage og selge print-on-demand-produkter, Hostinger Reach for e-postmarkedsføring og utsending av nyhetsbrev til abonnentene dine, Google Ads for å kjøre betalte annonseringskampanjer, og Custom code hvis du vil legge til din egen HTML, CSS eller JavaScript for å utvide nettstedets funksjonalitet.
For å aktivere en integrasjon, klikk på Get started ved siden av den, følg tilkoblingsstegene, og oppdater deretter nettstedet ved å publisere på nytt.
Tips for å få mest mulig ut av Hostinger Website Builder
Vær raus med AI-prompten din. En tosetningsprompt vil gi et generisk resultat. En detaljert, spesifikk prompt som dekker bransjen, målgruppen, designpreferanser, sidestruktur og tone, vil gi noe mye nærmere det du faktisk ønsker. Bruk fem minutter på å skrive en skikkelig brief, og det vil spare deg for timer med redigering senere.
Bruk Improve description-knappen hver gang. Det er lett å overse, men det er virkelig hjelpsomt. AI-en fanger ofte opp ting du har latt være vage og gjør dem om til konkrete design- og innholdsinstruksjoner.
Rediger teksten nøye. AI-en skriver anstendig plassholdertekst, men den kjenner ikke virksomheten din slik du gjør. Gå gjennom hver side og omskriv teksten for å reflektere dine faktiske tjenester, din reelle verdi og din genuine stemme.
Sjekk mobilvisningen før du publiserer. Hostinger gjør nettstedet ditt automatisk responsivt, men bilder og avstander kan noen ganger trenge mindre justeringer på mindre skjermer. Forhåndsvis alltid i mobil før du går live.
Fyll inn SEO for hver enkelt side. Ikke bare startsiden. Hver side på nettstedet ditt fortjener en ordentlig metatittel og beskrivelse. Det tar noen minutter per side, og det er en av de enkleste tingene du kan gjøre for å forbedre synligheten din i søkeresultater.
Bruk Media library for å holde orden. Under More > Media library kan du laste opp og administrere alle bildene dine på ett sentralt sted. Dette gjør det mye enklere å gjenbruke bilder på flere sider og holde nettstedet ditt konsistent.
Kom tilbake og forbedre over tid. Det å publisere nettstedet ditt er ikke slutten av prosessen, det er begynnelsen. Kom tilbake jevnlig for å oppdatere innholdet, legge til nye blogginnlegg og finpusse sidene etter hvert som virksomheten din utvikler seg.
Hostinger Website Builder fjerner nesten alle barrierer som før sto mellom deg og et profesjonelt nettsted. AI-en tar seg av det meste når det kommer til design og tekst, redigereren gjør tilpasningen enkel, og de innebygde SEO- og integrasjonsverktøyene betyr at du har alt du trenger på ett sted.
Følg trinnene i denne guiden, og du kan realistisk få et live, polert nettsted opp og kjøre på under en time.
