Skapa hemsida

Välkommen till del 3 av vår Starta Eget Kurs! I den här delen går vi igenom hur du skapar en hemsida i 10 enkla steg i Wordspress – en komplett steg för steg guide för dig som är total nybörjare inom webbdesign. Börja med att se instruktionsvideon. I nedanstående artikel hittar du alla arbetsmoment beskrivna med text och bilder. 

StartaEget.info rekommenderar

Innehållsförteckning

Skapa hemsida i 10 enkla steg

Det har blivit så enkelt att bygga en hemsida så att alla kan göra det! Förr i tiden var man tvungen att kunna koda för att skapa en hemsida, men de dagarna är förbi. Vi kommer att skapa en riktigt snygg och säljande hemsida i WordPress i 10 enkla steg, där allt arbete med designen av hemsidan görs med hjälp av en så kallad ”Drag & Drop Pagebuilder” som heter Elementor.

Genom att vi använder oss av en färdigbyggd mall går det snabbt och enkelt att skapa en riktigt snygg hemsida anpassad efter din specifika affärsidé – det tar ofta inte mer än ett par timmar att få till en proffsig sida som matchar din verksamhet till fullo! Att inte behöva skapa en hemsida helt från scratch innebär att du sparar mängder av dyrbar tid som du istället kan lägga på att finslipa din företagssida in i minsta lilla detalj. 

Då kör vi igång med bygget av vår nya hemsida!

1. Skaffa webbhotell

Första steget i processen om att skapa en hemsida är att skaffa ett webbhotell. Det är ditt webbhotell som i sin tur agerar som ”bostad” för din hemsida, vilket är något som krävs för alla webbplatser. Vi föredrar Loopia när det kommer till att välja webbhotell – hos Loopia kan du hitta billiga webbhotell för alla olika behov och budgetar, perfekt för dig som nybliven entreprenör med begränsad budget. 

Skapa hemsida

Ta dig in på Loopia.se och klicka sedan vidare på ”webbhotell” följt av ”våra webbhotelspaket”. Där kan du sedan välja mellan tre olika alternativ; PrivatFöretag och Företag Plus. För din nystartade hemsida är paketet Privat passande. För att beställa det paketet klickar du på ”beställ” en bit ner på sidan – priset för det är 80kr/ mån exklusive moms. 

Skaffa Webbhotell Steg 2

När du har klickat på beställ kommer du till steg nummer 2 i beställningsprocessen. Där kan du bocka i ”Jag vill inte ha något domännamn just nu” – detta fixar vi senare! Klicka sedan på ”Hoppa över detta steg”. Steg 3 och 4 i processen innebär att du ska välja betalsätt (kort eller faktura), fylla i dina ägaruppgifter, bocka i avtalsvillkoren, och tryck slutligen på knappen ”Beställ”. 

Skaffa Webbhotell Steg 3

När din beställning har gått igenom får du ett bekräftelsemail från Loopia till den e-post du angett – där står information om din beställning, samt Användarnamn och Lösenord för att logga in i ditt webbhotell. Nu vidare till steg 2!

2. Registrera domännamn

Efter att du skaffat ett webbhotell och loggat in på Loopia.se är det dags att registrera ett domännamn. Domännamnet är det som utgör adressen för din hemsida, det vill säga den plats som dina kunder och intressenter använder för att hitta till dig. 

Du kan själva välja vilken domänändelse du vill ha på ditt domännamn, såsom .se, .nu, .net eller .info – detta är helt upp till dig och vad som passar ditt företag! Ska du exempelvis starta en internationell sida kan det vara lämpligt att välja .com, medan du som skapar en svensk sida (eller en sida i något annat land) bör välja den specifika ändelsen för landet.

Registrera domännamn steg 1

För att registrera ett domännamn börjar du med att logga in hos Loopia (se föregående bild). Första sidan du får upp efter att du loggat in ser ut som på bilden ovan. Där kan du sedan klicka på ”Köpa eller lägga till domännamn”, följt av ”Köp nytt domännamn” på följande sida.

Registrera domännamn steg 2

Du får upp en sida där du kan söka efter mängder av olika domännamn som kan tänkas fungera för din nya hemsida eller webbutik. För att det ska bli så enkelt som möjligt att hitta till din sida, och för att det ska bli så enkelt som möjligt att marknadsföra din affärsidé, rekommenderar vi att du väljer ett relativt kort domännamn. Vill du dessutom synas på YouTube med din hemsida har du möjlighet att inkludera domännamnet i såväl i kanal-bannern som i kanalbeskrivningen. 

Registrera domännamn steg 3

För att se vilka tillgängliga alternativ som finns söker du på ett namn du kan tänka dig att använda. Du får sedan upp vilka domännamn som finns tillgängliga, det vill säga vilka domänändelser som inte redan är upptagna med det namnet. De som finns tillgängliga visas som gröna, och redan upptagna med ett rött kryss. Bredvid står också vad domännamnet kostar. Sök dig fram bland olika domännamn tills du hittar något som du gillar och som finns tillgängligt!  

TIPS! Tänk på att ditt domännamn på något sätt bör representera ditt företag och liknar det du döpt din affärsidé till – återigen är detta helt upp till dig! Vi rekommenderar också att du väljer ett domännamn som inte inkluderar bokstäverna å, ä eller ö då det kan skapa problem framöver. 

Registrera domännamn steg 4

När du hittat ett domännamn som passar din affärsidé, som du gillar och som finns tillgängligt bockar du i den lilla rutan till höger om namnet. Vill du köpa flera varianter av ditt domännamn bockar du i den lilla rutan på samtliga av de domänändelser du vill ha. Scrolla sedan ner på sidan tills kommer till betalningsinformationen. Klicka på ”Beställ och betala med ett separat kort” (se bild nedan). Nu över till steg 3!

Registrera domännamn steg 5

3. Installera WordPress

Steg 3 går ut på att du ska installera WordPress så att du kan börja skapa din hemsida! Börja då med att logga in på Loopia.se med de inloggsningsuppgifter du fått skickat på din mail.

Installera WordPress steg 1

Klicka på ”Starta en hemsida, blogg eller webbutik”. På nästa sida väljer du ”Starta en hemsida eller blogg (WordPress)” under Starta en hemsida eller blogg. Fyll i informationen om din webbsida, det vill säga hemsidans namn, ditt användarnamn, lösenord och e-postadress.

Installera WordPress steg 2

Innan du går vidare till nästa steg ska du även välja installationsplats för din hemsida. Det gör du genom att bocka i rutan för ”Befintlig domän / subdomän”, för att sedan välja det domännamn som du nyligen köpte. Skulle det vara så att du har flera domäner registrerade hos Loopia kommer du få upp dessa i en lista – markera den du vill skapa en hemsida för. Klicka på den blå knappen ”Installera”.

Installera WordPress steg 3

Grattis, nu har du installerat WordPress på din webbplats! Efter att du fått det bekräftat klickar du på ”Besök hemsidan/ bloggen”. Gör du detta direkt efter din beställning kommer du mest troligt att mötas av texten ”Parkerad hos Loopia”, vilket innebär att Loopia ännu inte hunnit bearbeta din beställning av installation. Avvakta 20-30 minuter innan du försöker igen. 

Installera WordPress steg 4

För att se efter om din sida hunnit bli registrerad och installerad av Loopia skriver du in ditt domännamn följt av ”/wp-admin”. Därefter kommer du till en sida där du loggar in på din WordPress hemsida – fyll i det användarnamn och lösenord som du angav då du skaffade ditt domännamn, och logga in! Väl inne på adminsidan hos WordPress är det dags att börja skapa din hemsida, vilket innebär att det är dags för steg 4. 

4. Installera Astra-tema

Nu ska vi äntligen gå in på hur du går tillväga för att skapa din hemsida! För att göra det börjar du med att installera ett Astra- tema.

Installera Astra-tema

För att göra det håller du över ”Utseende” i adminpanelen, följt av ”Teman” under fliken. Klicka sedan på ”Lägg till nytt”. När du kommit till sidan för att lägga till teman kan du välja att söka på olika teman. I sökrutan fyller du i ”astra”, och så väljer du det temat som heter Astra. 

För att installera ditt Astra-tema håller du musen över temat och klickar sen på ”Installera”. Vi rekommenderar också att du tar bort det gamla, förinstallerade temat genom att klicka dig in på det och klicka på ”Ta bort”. Nu dags för steg 5!

5. Installera tillägg

Nu ska vi installera en handfull tillägg, även kallade Plugins, till vår webbplats. 

Installera tillägg

För att göra det håller du över ”Tillägg” i adminpanelen, följt av ”Lägg till nytt” under fliken. Sök efter ”astra sites” i sökrutan och aktivera det första tillägget som kommer upp (det heter Starter Templates). Klicka sedan återigen på ”Lägg till nytt” och sök på ”elementor”. Klicka på ”installera nu” på det tillägg som heter Elementor Page Builder, följt av att aktivera tilläggetDet är dessa två Plugins som krävs för att du ska kunna komma igång med att bygga din hemsida. Nu över till steg 6!

6. Välja startmall

Efter att du installerat Astra-tema och diverse nödvändiga tillägg är nästa steg att välja en startmall.

Välja startmall

För att göra det håller du än en gång på ”Utseende”, men väljer istället ”Starter Templates”. Välj sedan Elementor – där kommer du få upp en mängd olika startmallar som du sedan kan använda för att bygga, skapa och strukturera din hemsida. Det är denna del som underlättar när du inte vill behöva skapa en hemsida helt från scratch, utan istället kan du utgå från en redan färdig startmall. Det går både snabbt, enkelt och ger bra resultat.

Gratismallar vs mallar som kostar

På sidan för de olika startmallarna finns det både gratisalternativ och de som kostar pengar. De som kostar har en blå markering där det står ”Agency”. Många av de gratisalternativ som finns är bra, men skulle det visa sig att du verkligen vill ha en mall märkt med Agency är köpprocessen enkel.

Gratismallar vs mallar som kostar

Klicka dig in på mallen följt av ”Get Agency Bundle” – Välj passande paket och klicka på ”Get Started”. 

Vill du istället välja en gratis startmall går det också bra. För att hitta en variant som passar din affärsidé och den hemsida du ska skapa kan du bläddra dig fram bland de som finns på sidan för att få inspiration.

Astra Startes Sites

Vill du kan du också söka dig fram efter olika ord relaterade till ämnet, branschen eller den idé du har. Ska du exempelvis starta en hemsida om djurvård kan du förslagsvis söka på ”Pet Care” (mallarna är döpta på engelska), medan du för en hemsida om produkter kan söka på ”Products” eller liknande. Välj sedan en startmall du gillar och klicka dig in på den!

Hemsida för webbyrå

Väl inne i den valda mallen kan du se en överblick över de olika sidor som mallen inkluderar. Du kan även scrolla på de olika sidorna för att få en bild av struktur, upplägg och utseende överlag – texter, bilder, färger osv. Alla dessa kan du sedan byta ut och anpassa efter din egna affärsidé. Känns mallen bra klickar du på ”Import Complete Site”. Se till att bocka i ”Delete Previously Imported Site” innan du väljer ”Import” för att få bort eventuellt material som sparats sedan tidigare på din webbplats. När processen gått igenom är nästa steg att börja anpassa din hemsida!

7. Anpassa ”Hem”

Samtliga steg i processen har hittills beskrivit övergripande och grundläggande steg som berör alla som ska skapa en egen hemsida. Från och med nu ser det hela lite annorlunda ut – att anpassa och designa en hemsida är något som kan se olika ut för alla. 

Det innebär att det som visas här om att anpassa ”hem” och designa en hemsida kanske inte alls kommer se likadant ut för dig och din skapandeprocess. Vi alla har olika idéer, tankar, smak och tycke om hur en hemsida ska se ut för att representera företaget i fråga, vilket i sin tur kräver olika processer. Med andra ord kan ni se följande steg som inspiration/ vägledning för hur ni kan göra, men sedan applicera det på ert eget sätt!

Anpassa Hem

Första steget för att designa din egen hemsida sätter du igång med genom att klicka på ”Anpassa” i menyn längst upp. Där kan du exempelvis byta logotyp, justera rubriker och ändra bakgrund genom att klicka på ”pennan”. Klicka sedan på ”Redigera med Elementor” för att redigera texter, färger och lägga in bilder. 

Tänk på att hemsidans förstasida är det första dina besökare ser – var extra noggrann med den!

8. Anpassa ”Om oss”

Efter att du färdigställt hemsidans förstasida, underrubriker och texter är det dags att gå vidare till att anpassa ”om oss”. Här gäller samma sak som för ”hem” – se detta som inspiration och vägledning för hur du kan göra för att få till en snygg och proffsig sida.

Anpassa Om oss

För att sätta igång med din ”om oss”-sida klickar du på ”About”, för att sedan gå vidare in på att redigera med Elementor. Tänk på att det här är en den sida som ska handla om dig och ditt företag, det vill säga ni som står bakom affärsidén och verksamheten ni sysslar med. Skriv in texter som passar för dig – det kan vara bra att lägga in passande keywords, samt att försöka fatta dig kort men samtidigt beskriva vad ni gör på ett involverande sätt. 

9. Anpassa ”Kontakt”

Sista steget med hemsidans anpassning är att justera ”kontakt”-sidan. Även detta gör du i Elementor. Precis som med förstasidan och ”Om oss”-sidan är det viktigt att du justerar det innehåll som redan finns i mallen, så att all information som visas på sidan gäller för just din verksamhet.

Anpassa Kontakta oss

Se till att gå igenom alla flikar, delar och områden för att lägga in sådant som passar din affärsidé och det du vill marknadsföra. Det viktigaste är att du fångar besökarna, och potentiella kunders ögon med det innehåll och den text du lägger upp. För en mer ingående beskrivning – kolla på videon om hur man skapar en egen hemsida högst upp på denna sida! 

I vissa fall kommer en färdig startmall med flera sidor än ”hem”, ”om oss” och ”kontakt”. Känner du att du vill ta bort en sida som inte passar för dig går du till adminpanelen i WordPress, håller över Sidor och klickar sedan på ”kasta i papperskorgen” på den sida du vill kasta. Vill du istället lägga till sidor gör du samma sak, men klickar istället på ”lägg till ny” under alla sidor.

10. Responsiv design

10:e steget innebär att vi är framme på slutstationen för den här guiden om att skapa en hemsida. Det absolut sista som är nödvändigt att göra för att garantera att din sida ser ut som du önskar för alla som besöker den är att se över dess responsiva design, det vill säga design för mobil och surfplatta. Designen du skapar för datorn ser inte alltid lika bra ut i andra format, något du inte vill missa att fixa till!

Responsiv hemsida

För att fixa till detta sista steg går du in för att redigera i Elementor ytterligare en gång. 

Mobilanpassad hemsida

Klicka på den symbol som ser ut som en mobil, dator eller läsplatta i menyn längst ner på sidan. Där kan du välja att granska formatet för de olika enheterna. På så sätt kan du se över hur din hemsida ser ut när dina besökare surfar in på din sida via en mobil eller läsplatta istället för en dator. 

Detta kan skilja sig en del beroende på hur du redigerat din sida. Men, tack vare att du designat din hemsida utifrån en redan färdigställd grundmall kommer det se bra ut i samtliga format då de redan är anpassade, det vill säga så länge du inte ändrat allt för mycket från mallens startläge. 

Dock kan det vara bra att bläddra igenom allt för att vara på den säkra sidan när det kommer till responsiv design. Vill du ändra något i ett visst format, så som textens storlek eller strukturen är det bara att du gör det med Elementor precis som vanligt. I och med det är vi färdiga här – vi hoppas att denna guide har hjälpt dig på vägen mot att skapa en egen hemsida. Ett stort lycka till med bygget av din nya hemsida! 

Hoppas att du hade nytta av denna del 3 av vår Starta Eget Kurs. Om du behöver hjälp med design av logotyp och visitkort, bygge av hemsida & webbutik, samt synlighet i Google med hjälp av sökmotoroptimering och Google Ads, tveka inte att kontakta oss. Vi ses i del 4 där vi designar ett visitkort till din affärsidé!