Att bygga en webbplats kändes tidigare som ett projekt som krävde att man tog in någon. Inte längre.
Jag har använt Hostinger Website Builder, och i den här guiden kommer jag att leda dig genom hela processen, steg för steg, från det ögonblick du loggar in till dess att din webbplats är live.
Nu kör vi.
Vad är Hostinger Website Builder?
Hostinger Website Builder är en AI-driven dra-och-släpp-webbplatsbyggare som är inbyggd direkt i ditt Hostinger-konto.
Du behöver inte installera något, du behöver inte kunna koda, och du behöver ingen designbakgrund. Du beskriver vad du vill ha, AI:n bygger en komplett webbplats åt dig, och sedan anpassar du den efter ditt varumärke.
Det är ett av de snabbaste sätten att gå från ingenting till en fullt publicerad, proffsigt utseende webbplats.
Steg 1: Logga in och navigera till byggaren
När du loggar in på ditt Hostinger-konto kommer du till hPanel. Detta är Hostingers huvudkontrollpanel, och det är där du hanterar allt, inklusive dina webbplatser, domäner, e-post och fakturering.
I vänstra sidofältet ser du en lista med navigeringsalternativ. Klicka på Websites. En liten dropdown visas under detta med två alternativ: Websites list och Migrations. Klicka på Websites list.
Du är nu på sidan Websites list, som visar alla webbplatser kopplade till ditt konto.
Uppe till höger på sidan ser du en lila + Add website-knapp. Klicka på den.
En liten dropdown-meny visas med fyra alternativ:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Och anpassad PHP/HTML-webbplats
Du vill klicka på Hostinger Website Builder, som beskrivs som “AI-driven dra-och-släpp-webbplatsbyggare”.
Steg 2: Beskriv din webbplats för AI:n
Efter att ha valt Hostinger Website Builder tas du till en inställningsskärm med rubriken “Låt AI skapa din online-närvaro.”
Här talar du om för AI:n vilken typ av webbplats du vill skapa.
Du kommer att se en stor textruta med platshållartexten “Describe your website or business.” Det här är din promptruta, och det du skriver här avgör allt AI:n genererar åt dig. Ju mer detaljerad du är, desto bättre blir resultatet.
Under textrutan ser du även en rad med snabbstartsförslag. Dessa inkluderar alternativ som “Skapa en företagswebbplats”, “Skapa en webbutik”, “Designa en portfolio”, “Lansera en bokningswebbplats”, “Starta en blogg”, “Lansera en restaurangwebbplats” och “Skapa en en-sidig webbplats”.
När du klickar på något av dessa fylls en startprompt i som du sedan kan redigera och utöka.
Längst ned på skärmen ser du två ytterligare länkar: Pre-made templates och Link in bio website.
Om du föredrar att hoppa över AI:n och bläddra bland befintliga designer, klicka på Pre-made templates.
Om du bara behöver en enkel en-sidig sajt för dina sociala medieprofiler är Link in bio-alternativet värt att kolla upp.
För de flesta som vill bygga en riktig webbplats är dock AI-prompt-rutan rätt plats att börja.
Hur du skriver en bra AI-prompt
Detta är den viktigaste delen av hela processen. Tänk på AI-prompten som en brief du ger till en designer. Ju tydligare du kommunicerar din vision, desto närmare blir resultatet det du faktiskt vill ha.
Här är prompten jag använde för den här guiden. Jag byggde en webbplats för en kreativ byrå:
“Bygg en modern, professionell webbplats för en kreativ byrå som erbjuder varumärkesutveckling, grafisk design, webbdesign och digitala marknadsföringstjänster. Webbplatsen bör kännas kreativ, djärv och pålitlig samtidigt som den håller sig ren och lättnavigerad. Använd en modern layout med starka visuella element, bra luft och stilfull typografi. Inkludera följande sidor: Hem, Om oss, Tjänster, Portfolio, Blogg och Kontakt. På hemsidan, lägg till en hero-sektion med en kraftfull huvudrubrik, kort värdefokuserad beskrivning och en tydlig call-to-action-knapp som ‘Starta ditt projekt’ eller ‘Begär en offert’. Skriv enkel, övertygande text som förklarar vad vi gör, vem vi hjälper och vilka resultat vi levererar. Gör webbplatsen mobilvänlig, snabb att ladda och optimerad för grundläggande SEO.”
Notera hur specifikt det är. Det täcker bransch, ton, layoutstil, nödvändiga sidor, hemsidans struktur och innehållsmål. Den detaljnivån ger AI:n en gedigen grund att utgå ifrån.
När du har skrivit din beskrivning kommer du att se att en “Improve description”-knapp dyker upp i det övre högra hörnet av textrutan.
Jag rekommenderar att du klickar på denna innan du skickar. AI:n kommer att utöka och förfina din prompt, och fånga saker du kanske inte tänkt på att inkludera.
När du är redo, klicka på den lila pilknappen (skicka-ikonen) i det nedre högra hörnet av textrutan för att skicka din prompt och starta genereringen.
Steg 3: Vänta på att AI:n bygger din sajt
När du har skickat din prompt börjar Hostingers AI arbeta omedelbart. Du kommer att se en helskärmsanimering för uppladdning på en mörklila bakgrund med meddelandet “Looking for matching pictures…” och en förloppsindikator som visar hur långt processen har kommit.
Det här steget tar vanligtvis mellan 30 and 60 sekunder. Under denna tid gör AI:n mycket: genererar dina sidlayouter, skriver din webbplatstext, väljer matchande bilder från ett stockbibliotek, bygger din navigering och strukturerar hela din sajt utifrån din prompt.
Stäng inte fliken medan det laddar. Vänta bara och låt det köras klart.
Steg 4: Granska vad AI:n har byggt
När AI:n är klar får du en förhandsvisning av din nya webbplats. Det här är resultatskärmen, och det är riktigt spännande att se vad som har genererats.
Vänster sida av skärmen visar en liveförhandsvisning av din genererade webbplats. Höger sida visar en panel kallad “Sammanfattning av din idé” som visar en sammanfattning av den prompt du skickade in och en “Redigera idé”-knapp om du vill gå tillbaka och generera på nytt med en annan eller uppdaterad prompt.
I mitt fall döpte AI:n sajten till “BoldCraft Studio” och genererade en startsida med huvudrubriken “Crafting Bold Brands That Shine”, en stödjande beskrivning och två call-to-action-knappar: “Start Now” och “Get Quote”.
Navigeringsfältet inkluderade alla sex sidor jag bad om: Hem, Om oss, Tjänster, Portfolio, Blogg och Kontakt.
Uppe till vänster på förhandsvisningsskärmen ser du också två knappar: Tidigare versioner, som låter dig bläddra igenom alternativa designer som AI:n övervägde, och Betygsätt sajt, som låter dig ge feedback på resultatet.
Uppe till höger i förhandsvisningen ser du ikoner för skrivbords- och mobilvyer. Använd dessa för att kontrollera hur din sajt ser ut på en telefon innan du går vidare. Det är en god vana att göra detta tidigt.
Om du är nöjd med helhetsintrycket klickar du på den lila Fortsätt-knappen i högra panelen. Detta tar dig till fullständiga editorn där den riktiga anpassningen sker.
Om du inte är nöjd med resultatet klickar du på Redigera idé, justerar din prompt och genererar på nytt. Du kan göra detta så många gånger du behöver.
Steg 5: Bekanta dig med editorn
Editorn är där du kommer att spendera större delen av din tid. När du först kommer hit, ta en stund att förstå upplägget innan du börjar klicka runt.
Editorn har två huvudområden.
- Det stora centrala området är din webbplatsarbetsyta, där du kan se och interagera med din sajt i realtid.
- Det smala vertikala sidofältet till vänster är din kontrollpanel, och det innehåller allt du behöver.
Så här fungerar varje objekt i sidofältet:
- Inställningar ger dig åtkomst till webbplatsens grundläggande inställningar, ansluten domän och planinformation.
- Element öppnar dra-och-släpppanelen där du kan lägga till nya innehållsblock på vilken sida som helst. Jag kommer att gå igenom detta mer detaljerat snart.
- Sidor visar alla dina sidor på ett ställe. Du kan byta sida, lägga till nya, byta namn på befintliga, ändra deras ordning eller ta bort dem du inte behöver.
- Stilar styr din webbplats globala design. Här ställer du in typsnitt, färgpalett och knappstilar. Alla ändringar här tillämpas över hela sajten, så det är rätt ställe att göra omfattande designbeslut istället för att ändra saker sektion för sektion.
- AI-verktyg ger dig tillgång till Hostingers skriv- och innehålls-AI. Du kan använda det för att skriva om sektioner av text, generera ny text och mer.
- Blogg är där du skapar och hanterar blogginlägg om din sajt har en blogg.
- Butik är där du ställer in din webbutik om du säljer produkter. Observera att e-handelsfunktioner kräver en plan på en högre nivå.
- SEO öppnar den inbyggda SEO-hanteraren där du kan ställa in metatitlar, beskrivningar och andra sökoptimeringsdetaljer för varje sida.
- Mer expanderar till en andra meny med ytterligare verktyg inklusive Avtalade tider, Allmänna inställningar, Integrationer, Formulärinlämningar, Analys, Mediabibliotek, Fler språk, Hantera säkerhetskopior, Exportera innehåll till WordPress och Hjälp och resurser.
Längst upp i editorn hittar du även huvudverktygsfältet. Från vänster till höger innehåller det: en växlingsknapp för skrivbords- och mobilförhandsvisning, ångra- och göra om-knappar, en Anslut domän-knapp, en Förhandsgranska-knapp och den gröna Publicera-knappen.
Steg 6: Redigera ditt innehåll
Nu kommer delen där du gör sajten till din egen. Klicka någonstans på din webbplatsarbetsyta för att börja redigera.
När du hovrar över någon sektion på sidan ser du en blå etikett dyka upp uppe till vänster i sektionen som visar vilken typ av element det är, till exempel “Sektion” eller “Sidhuvud”. Samtidigt visas en liten flytande verktygsrad ovanför sektionen med dina redigeringsalternativ.
Sektionens verktygsrad ger dig följande kontroller från vänster till höger: Redigera sektion öppnar sektionens inställningspanel, där du kan ändra bakgrundsbild eller färg, justera utfyllnad och modifiera layoutalternativ.
Bredvid finns Generera bild, som öppnar AI-bildgeneratorn.
Efter det har du en duplicera-ikon, en dolt/visa-växlare, en ta bort-ikon, upp- och ned-pilar för att omordna sektioner och en trepunktsmeny för fler alternativ.
För att redigera valfri text på sidan, klicka helt enkelt direkt på den och börja skriva. Textelementet blir redigerbart, och du kommer att se formateringskontroller dyka upp. Du kan ändra teckenstorlek, vikt, justering och färg direkt i dessa kontroller.
För att ändra en bild, klicka på den. Du får då alternativ att ersätta den med ett foto från dina egna filer, bläddra i Hostingers stockbildsbibliotek eller generera en ny med AI.
Redigera din startsida först, använd sedan panelen Sidor för att växla till varje annan sida och redigera dem i tur och ordning.
Steg 7: Använd AI-bildgeneratorn
En funktion värd att stanna upp vid är AI-bildgeneratorn, eftersom den är riktigt användbar om du inte har professionella bilder själv.
För att komma åt den, hovra över någon sektion på din sida och klicka på Generera bild i den flytande sektionens verktygsrad. En panel skjuts in från höger sida av skärmen.
Inne i panelen ser du en textruta med “Image description”. Skriv en beskrivning av bilden du vill skapa.
Ju mer specifik och visuell din beskrivning är, desto bättre blir resultatet. Panelen visar en teckenbegränsning på 3000 och en kvalitetsindikator i realtid som berättar om din beskrivning är tillräckligt bra.
Till exempel, när jag 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,” visade panelen “Great description!” med fullt ifyllda kvalitetsfält.
När du är nöjd med din beskrivning klickar du på Skapa bilder-knappen. AI:n genererar då en uppsättning bilder du kan välja mellan.
En sak att vara medveten om: AI-bildgeneratorn kräver Business-planen eller högre. Om du har Premium-planen kommer du att se en uppmaning om uppgradering längst ner i panelen.
Steg 8: Lägg till nya element på vilken sida som helst
Om du vill lägga till ett innehållsblock som inte redan finns på din sida, klicka på Element i vänstra sidofältet. Detta öppnar panelen “Lägg till element”.
Du kommer att se ett rutnät med alla tillgängliga element, inklusive Text, Knapp, Affiliate-länk, Lägg till i varukorgen, Bild, Galleri, Video, Form, Kort, Karta, Instagram-flöde och Kontaktformulär. För att lägga till något av dessa på din sida, dra det från panelen och släpp det på din arbetsyta där du vill att det ska visas.
När det är placerat klickar du på elementet för att komma åt dess individuella inställningar och stilmöjligheter.
Detta dra-och-släpp-förhållningssätt betyder att du aldrig är fast i den layout AI:n genererade. Du kan lägga till, ta bort och omordna element fritt.
Steg 9: Hantera dina sidor
Klicka på Sidor i vänstra sidofältet för att se alla dina sidor listade på ett ställe. Du kan klicka på valfri sidtitel för att hoppa till redigering av den sidan.
För att lägga till en ny sida, använd plusknappen. För att omordna i vilken ordning sidorna visas i menyn, dra dem upp eller ner i listan.
Om det finns sidor som AI:n genererade men som du inte behöver, kan du ta bort dem härifrån. På samma sätt, om du behöver en sida som AI:n inte inkluderade, till exempel en Recensioner-sida eller en Prissida, kan du lägga till den här och sedan bygga upp den med hjälp av panelen Element.
Steg 10: Ställ in din SEO
Innan du publicerar behöver du ställa in din SEO. Det här är ett steg som många hoppar över, och det är ett misstag.
Att lägga 15 minuter på att fylla i dina SEO-inställningar ordentligt kan göra stor skillnad för om folk hittar din sajt via Google.
Klicka på SEO i vänstra sidofältet för att öppna SEO-panelen, med titeln “Låt oss bli hittade på Google (SEO)”
Panelen är uppdelad i två delar. Till vänster ser du en lista över alla dina sidor. Till höger ser du Webbplatsöversikt, som visar ditt företagsnamn och webbplatsens språk. Klicka på Redigera för att uppdatera dessa om de inte är korrekta.
Under webbplatsinformationen ser du en sektion kallad “Vissa sidor kräver din uppmärksamhet”
Varje sida som behöver arbete är markerad med en orange varningsikon. Klicka på någon sida i vänstra panelen för att öppna dess individuella SEO-inställningar, där du kan skriva en metatitel och en metabeskrivning för den specifika sidan.
Gå igenom varje sida i listan. En bra metatitel är tydlig, innehåller ditt huvudnyckelord och är under 60 tecken. En bra metabeskrivning sammanfattar vad sidan handlar om och är under 160 tecken. Dessa är utdragen som visas i Googles sökresultat, så det är värt att lägga några minuter på varje sida.
Steg 11: Koppla din domän
Om du ännu inte har kopplat en egen domän till din sajt är det dags nu. Klicka på Anslut domän-knappen i verktygsfältet högst upp i editorn.
Du har två alternativ. Om du redan äger en domän kan du koppla den genom att uppdatera dina DNS-inställningar så att de pekar på Hostingers servrar. Om du ännu inte äger en domän kan du köpa en direkt från Hostinger på den här skärmen.
Tills du kopplar en domän blir din sajt tillgänglig via en tillfällig Hostinger-underdomän, till exempel yoursite.builder-preview.com. Det är okej för teständamål, men du vill ha en riktig domän innan du börjar dela din sajt offentligt.
Steg 12: Förhandsgranska din sajt och publicera
Du är nästan framme. Innan du publicerar klickar du på Förhandsgranska-knappen i verktygsfältet uppe till höger.
Detta öppnar en helskärmsförhandsvisning av exakt hur din sajt kommer att se ut för besökare. Växla mellan skrivbords- och mobilvyer med ikonerna högst upp i förhandsvisningen och kontrollera att allt ser rätt ut i båda lägena.
Var särskilt uppmärksam på hur startsidans hero-sektion ser ut på mobil, hur navigeringen kollapsar och om några bilder beskärs på ett sätt du inte avsåg.
När du är nöjd med allt, gå tillbaka till editorn och klicka på den gröna Publicera-knappen uppe till höger. Din sajt är nu publicerad och live på internet.
Steg 13: Utforska integrationer
När din sajt är live är det värt att utforska de integrationer som finns tillgängliga. Gå till Mer > Integrationer i vänstra sidofältet.
Panelen Integrationer låter dig koppla din webbplats till externa verktyg och tjänster. De nuvarande alternativen inkluderar Shippo för att skapa fraktsedlar och hantera orderhantering, Printful för att skapa och sälja print-on-demand-produkter, Hostinger Reach för e-postmarknadsföring och utskick av nyhetsbrev till dina prenumeranter, Google Ads för att köra betalda annonskampanjer och Egen kod om du vill lägga till egen HTML, CSS eller JavaScript för att utöka din sajts funktionalitet.
För att aktivera en integration klickar du på Kom igång bredvid den, följer anslutningsstegen och uppdaterar sedan din sajt genom att publicera på nytt.
Tips för att få ut det mesta av Hostinger Website Builder
Var generös med din AI-prompt. En prompt på två meningar ger ett generiskt resultat. En detaljerad och specifik prompt som täcker din bransch, målgrupp, designpreferenser, sidstruktur och tonläge ger dig något som ligger mycket närmare det du faktiskt vill ha. Lägg fem minuter på att skriva en ordentlig brief så sparar du timmar av redigering efteråt.
Använd knappen Improve description varje gång. Det är lätt att missa, men den är verkligen hjälpsam. AI:n fångar ofta upp saker du lämnat vaga och omvandlar dem till konkreta design- och innehållsinstruktioner.
Redigera din text noggrant. AI:n skriver lämplig platshållartext, men den känner inte ditt företag som du gör. Gå igenom varje sida och skriv om texten för att återspegla dina verkliga tjänster, ditt faktiska värde och din genuina röst.
Kontrollera mobilvyn innan du publicerar. Hostinger gör automatiskt din sajt responsiv, men bilder och avstånd kan ibland behöva mindre justeringar på mindre skärmar. Förhandsgranska alltid på mobil innan du går live.
Fyll i SEO för varje sida. Inte bara för startsidan. Varje sida på din sajt förtjänar en ordentlig metatitel och beskrivning. Det tar bara några minuter per sida och är en av de enklaste sakerna du kan göra för att förbättra din synlighet i sökresultat.
Använd mediabiblioteket för att hålla ordning. Under Mer > Mediabibliotek kan du ladda upp och hantera alla dina bilder på ett centralt ställe. Det gör det mycket enklare att återanvända bilder över flera sidor och hålla sajten konsekvent.
Återkom och förbättra över tid. Att publicera din sajt är inte slutet på processen, det är början. Återkom regelbundet för att uppdatera ditt innehåll, lägga till nya blogginlägg och finslipa dina sidor i takt med att ditt företag utvecklas.
Hostinger Website Builder tar bort nästan alla hinder som tidigare stod mellan dig och en professionell webbplats. AI:n gör det tunga arbetet med design och text, editorn gör anpassning enkel och de inbyggda verktygen för SEO och integrationer betyder att du har allt du behöver på ett och samma ställe.
Följ stegen i den här guiden så kan du realistiskt ha en live och polerad webbplats igång på under en timme.
