Wix-tutorial för nybörjare: Designa en egen hemsida En steg för steg-guide om hur du kan göra en enkel portfoliosida med hemsideverktyget Wix.

wix-tutorial design nybörjare

Att designa en hemsida är inte så lätt om man inte kan koda. Då är det tur att det idag finns många tjänster som erbjuder grafiska klicka-och-dra verktyg för hemsidebygge – ett sådant verktyg är Wix.com som jag ser dyka upp mer och mer.

I samarbete med dem har jag gjort denna Wix-tutorial där jag steg-för-steg går igenom hur du kan skapa en snygg och proffsig portoliosida. Självklart kan du även använda denna tutorial för att hitta inspiration till en helt egen design.

I dag ska vi lära oss att göra den här hemsidan – för det påhittade grafisk design-företaget Banana design.

wix-tutorial design portfolio

Alla illustrationerna på sidan är gjorda av den eminenta grafiska designern och illustratören Ebba Sääf – tack för att jag fick låna dina bilder 💖

Nu sätter vi igång:

Wix-tutorial: Förberedelser

wix-tutorial design nybörjare

Skissa, sitemap och grafisk profil

Börja med att med penna och papper skissa hur du tänker dig att din hemsida ska se ut ungefär så kommer det bli enklare i val av tema och designprocessen inuti Wix kommer gå snabbare.

Gör en sitemap där du listar vilka sidor och eventuella undersidor som din hemsida behöver ha. Jag tänker ha en Portfolio som förstasida med sju undersidor för de olika projekten jag ska visa upp samt en sida för About och en för Contact.

Om du inte redan har en grafisk profil så har jag en guide här om vad det är, varför du behöver en och vad den bör innehålla. För det här projektet har jag gjort en grafisk profil som ser ut så här:

wix-tutorial grafisk profil

Samla ihop material och innehåll

Samla ihop alla bilder och fundera på vilka texter (t.ex. om dig och din hemsida) som kommer behövas till sidan och försök ha dessa klara innan du börjar designa, då går det lite snabbare och du kan se hur hemsidan kommer se ut med det material som ska finnas på den.

Registrera dig på Wix

Nu när du har allting förberett och en hyfsat tydlig bild av hur din hemsida ska se ut och vad den ska innehålla så är det dags att registrera dig på wix.com.

Det kostar ingenting och du behöver inte ange något kreditkort eller så för att komma igång.

wix-tutorial gratis

Nu trycker vi bara på den stora blå knappen där så är vi igång med denna Wix-tutorial:

Tema och struktur

Välj tema

Det första vi sak göra nu är att välja en tema som kommer utgöra den grundläggande strukturen och designen för vår hemsida. Jag har använt temat Sasha Blake som du hittar om du söker på ”Grafisk formgivning” i sökfältet.

wix-tutorial välja tema

Klicka på temat och välj ”Redigera tema”.

Spara och välj namn

För att vara på den säkra sidan börjar vi med att spara, sidan kommer inte publiceras utan vi sparar den bara på vår profil på Wix. Tryck på Spara och välj ett namn för din sida – för mitt exempel väljer jag ”bananadesign”.

wix-tutorialwix-tutorial

Ladda upp allt bildmaterial

Eftersom vi redan förberett allt material så kan vi spara tid genom att ladda upp allt som ska vara på sidan på en gång. Bara klicka i den vänstra sidomenyn på:

Mina uppladdningar > Bilder

wix-tutorial wix-tutorial

Klicka på den oranga ”Ladda upp bilder” för att välja bilder på datorn eller bara markera, dra och släpp alla bilder du vill ladda upp.

wix-tutorial ladda upp bilder

Ordna din sidstruktur efter din sitemap

Nu ska vi ordna så att vi har dem sidorna vi vill ha på just vår hemsida och ta bort de sidorna som temat lägger till som vi inte ska använda oss av.

Klicka på Sidor och håll över knappen med tre prickar bredvid de sidor du vill byta namn på eller ta bort. Du kan även lägga till fler sidor med den blå knappen ”Lägg till sida” och ändra ordningen på dem genom att klicka och dra.

wix-tutorial-11wix-tutorial-12

Wix-tutorial: Design

Nu ska vi ordna designen på sidan så som vi vill ha den och vi börjar med sidhuvudet som kommer vara samman på alla sidorna. I min skiss har jag ritat att jag vill ha en logobild i sidhuvudet samt en menyrad.

Flytta menyn till sidhuvudet

Gå längst ned på första sidan i sidmenyn (Portfolio) som har ett litet hus bredvid sig för att markera att det är startsidan på vår hemsida.

Scrolla längst ned och klicka på menyraden så den får en markering runt sig. Använd cmd/ctrl+X för att klippa ut, eller högerklicka och välj ”Klipp”.

wix-tutorial

Scrolla sedan upp och klicka någonstans i sidhuvudet och använd kommandot cmd/ctrl+V eller högerklicka och välj ”Klistra in”. Då ska det komma upp en ruta som visar att elementet lades till i sidhuvudet och då kommer hamna på alla sidor. Perfekt!

wix-tutorial

Dra menyn högst upp i sidhuvudet och ta hjälp av de rosa hjälplinjerna (de dyker upp automatiskt) för att se att den sitter exakt mot sidmarginalerna.

Ändra färg på menyn

Här vill vi nu passa på och implementera vår grafiska design för att ge vår sida ett unikt utseende. Markera menyn och välj penseln (Design) och klicka på den blå knappen ”Anpassa design”.

wix-tutorial-17 wix-tutorial-18

Välj sedan ”Fyllningsfärg och opacitet” och klicka på färgrutan för ”Bakgrund”.

wix-tutorial-19wix-tutorial-22

I färgväljaren klickar du längst ned på ”Lägg till färg” och skriver in hex-koden från en av färgerna i din grafiska profil. I mitt fall blir den den mörkblå färgen. Välj ”Lägg till” så sparas den färgrutan bland dina färger. Jag väljer den blå färgen på både Bakgrund, Bakgrund rullgardinsmeny och Avgränsare.

wix-tutorial-21

Om du vill kan du också klicka över till Hovring och välja en färg som kommer när man håller över ett alternativ i menyn samt Klickad för att ändra hur det ska se ut när man redan klickat på en av sidorna i menyn. Jag väljer gul för hovring och ändrar text-färgen för hovring (tryck på ”T”:et) till svart så det kontrasterar. För ”Klickad” väljer jag samma blå färg som på övriga.

wix-tutorial-23

Ändra typsnitt för menyn

Gå tillbaka till ”Vanlig”-fliken och välj ”T”:et i den blå raden. I rullmenyn för teckensnitt väljer jag Helvetica Light som är del av min grafiska profil.

Egna typsnitt?

För närvarande är det inte möjligt att lägga till egna typsnitt till Wix men det finns en bra lista med alternativ så antingen får du välja de typsnitten som ligger närmast det du redan har i din grafiska profil eller kolla typsnittslistan först och sen välja två typsnitt till din grafiska profil.

wix-tutorial-25

Lägg till logotyp i sidhuvudet

Markera textrutan där det står Sasha Blake och tryck på backspace/delete för att ta bort den. Tryck sedan på Plus-knappen i den vänstra sidomenyn (Lägg till) och välj Bild > Mina uppladdningar.

Välj din logotyp och tryck ”Lägg till på sidan”. Dra logotypen till där du vill ha den och ändra storleken genom att dra i hörnen när bilden är markerad. Om du vill vara säker på att den ligger helt centrerad kan du använda justeringsverktyget i det högra verktygsfältet.

wix-tutorial

wix-tutorial

För att göra lite mer utrymme markerar vi headern och drar i den lilla nedåtpilen som dyker upp som ändrar höjden på hela sidhuvudet.

wix-tutorial

Lägg till egna bilder i ”murverket”

Murverket är en svensk översättning på ”masonry gallery” vilket är när man gör ett galleri med bilder som arrangerar sig utifrån de olika bildernas storlek för att skapa en helhet. Pinterest är t.ex. uppbyggt på det sättet.

Vi har ett murverks-galleri inlagt per automatik på vår sida och nu ska vi lägga in våra egna bilder i det som länkar till de olika projektsidorna i vår portfolio.

Klicka på murverket och välj Ändra bilder.

wix-tutorial-31

Klicka på en bild i taget och klicka på knappen ”Byt ut bild” och lägg in dina egna portfolio-bilder. Skriv in en titel för bilden och en beskrivning om du vill. Scrolla också ned i den alternativmenyn och välj vilken undersida som just den bilden ska länka till.

Om du klickar och drar i bilderna kan du ändra plats på dem om du vill få till ett perfekt upplägg för ditt murverk.

wix-tutorial-32

Tryck på Klar.

Nu trycker vi på Spara och sedan på förhandsgranska.

wix-tutorial-33

Nu har vi kommit så här långt:

wix-tutorial-34

Lägg till innehåll

Nu till det som kanske är det viktigaste på hela din hemsida – ditt innehåll. Nu ska vi gå in på varje enskild projektsida och lägga till bilder och information.

Klicka i sidmenyn och gå in på den första projektsidan (som du förhoppningsvis nu har länkat till den första bilden i ditt murverk, om inte, gå tillbaka och åtgärda!)

Bilder i galleriet

Klicka på galleriet på sidan och välj Ändra bilder och byt ut bilderna precis som du gjorde för murverket, ta bort de bilderna du inte behöver eller lägg till fler bilder om du vill. Tryck Klar.

För att se till att alla bilder vi lägger in syns om vi valt fler än 3 och inte hamnar under en ”show more” länk så klicka på galleriet och välj Layout-knappen. Dra i reglaget för rader så det stämmer med hur många bilder du vill visa.

wix-tutorial-36

För att bilderna inte ska bli konstiga storlekar väljer vi kugghjulsknappen och väljer ”Passa in” istället för beskär samt ”händer ingenting” för vad som ska hända när man klickar på bilden.

wix-tutorial-37

Ändra teckensnitt för hela sidan

Nu ska vi också ändra så att teckensnitten för rubriken och paragraf-texten på projektsidan stämmer med vår grafiska profil och göra så att ändringen görs över hela sidan och inte bara på den här enskilda projektsidan.

Klicka på rubriken och välj ”Redigera text”, jag väljer teckensnittet Futura och gör den till fet stil. Tyvärr finns inte alternativet Futura Heavy som jag har i min grafiska profil men det här är nära iallafall.

När jag är klar med mina inställningar för rubriken trycker jag på ”Spara temat” så kommer alla rubriker på sidan få samma inställnignar – smart!

wix-tutorial

Upprepa samma tillvägagångssätt för paragraftexten, jag väljer ”Helvetica light”.

När du klistrat in eller skrivit din egen text på projektsidan är du klar med den och kan gå vidare och lägga till innehåll på övriga projekt-sidor.

Glöm inte bort att klicka in och lägga till eget innehåll på About och Contact också.

Sidfoten

Det sista vi ska göra nu är att lägga till lite sociala länkar i sidfoten och ändra copywright-texten. Gå till startsidan i Sidmenyn igen.

Ändra Copyright-texten till det som stämmer för din sida.

Lägg till sociala länkar

I den vänstra sidomenyn välj Lägg till > Socialt och scrollar ned till de svarta, runda knapparna.

Tryck sedan på ”Still in sociala länkar” för att välja vilka länkar du vill ha och skriva in dina adresser.

wix-tutorial

Jag jag två olika varianter med olika sociala medier på varsin sida om copyright-texten.

Jag lägger även till en horisontell linje ovanför sidfoten som jag ger den gula färgen från min grafiska profil med

Lägg till > Figur > Linje

wix-tutorial

Mobilversion

wix-tutorial

Det sista vi ska göra i denna Wix-tutorial innan vi är klara är att titta en snabbis på hur vår sida ser ut i mobilen. När du byter Redigerar-vy (bredvid spara-knappen högst upp) till Mobil så kan du göra redigeringar som endast påverkar mobilversionen så där kan du lägga till, ta bort, flytta, ändra osv i din design så att det ser ut som du vill även på mobilen.

wix-tutorial

Sådär, nu är vi klara med vår hemsida! ✨

starta webshop

Publicera och uppgradera

Nu kan du publicera din hemsida på internet och låta betrodda vänner testa den och komma med synpunkter på användbarhet och liknande. Hittar dem fram till den informationen du tänkt? Har du några stavfel? Borde något vara på ett annat ställe?

Precis som jag skrev i mitt inlägg om att betala på internet så är fördelen med att testa Wix och designa din sida gratis att du vet precis hur det funkar och vilket resultat du kan få ut innan du bestämmer dig om du vill betala för det eller inte. För i gratisvarianten får du en lång och lite krånglig url-adress plus wix-loggor både i toppen och undersidan av din sida – vilket inte ger ett speciellt professionellt intryck.

Om du gillar resultaten av sidan och vill använda den för ditt företag, hobby, idé, förening etc så bör du uppgradera till Premium – då får du en egen domän, reklambilderna försvinner och dessutom support och alla andra fördelar med att vara betalande kund.

Om du funderar på att starta webshop så har Wix en lösning för det också – så om du gillar verktyget men vet att det är något du kommer behöva så kan det vara värt att kolla in.

Om du har några frågor eller funderingar så ställer du dem, som vanligt, nedan i kommentarerna! 👇 Lycka till med hemsidebyggandet. 😁

Psst... join the club!

Vill du ha mer? Få steg-för-steg-guider, gratis resurser, tech-tips, förhandsvisningar, tutorials, bakom kulisserna-snack och mycket mer – helt gratis.

Gå med i min mailklubb genom att skriva upp din mailadress nedan.

Inte ett nyhetsbrev, inget spam. Lovar <3

Powered by ConvertKit

Kommentarer

12 kommentarer

  1. Wow, vilket proffsigt och uttömmande inlägg! Blir på riktigt blown away av vilken kvalitetsnivå dina inlägg håller. <3
    Känner till Wix men har aldrig testat. Har däremot bekantat mig lite med Squarespace på sistone. Har du någon erfarenhet av det?

  2. Ett riktigt bra inlägg! Som vanligt blir man sugen på att testa… Jag har testat Weebly men tycker den tjänsten inte erbjuder så mycket flexibiltet. Har en bekant som kör en kommersiell sajt på Wix så jag antar att det är mer avancerat. Squarespace har jag aldrig testat men vad jag förstår är det populärt, åtminstone utomlands. Ska nog kika på det också.

  3. Intressant och kul för en som inte kan särskilt mycket kod 🙂 Har du testat Squarespace och isf hur tycker du att det är i jämförelse användningsmässigt?

    Du är grym f.ö. håller verkligen med Louise!

  4. Tack för en bra blogg! Råkat komma in på lite av dina ilägg under min resa till att själv försöka starta en blogg. Efter en kass start på gratissidor och sedan på ett svenskt webbhotell (få möjligheter att göra det jag vill) och efter att nästan fått hjärblödning, kastar ut datorn och skrämt livet ur mina hundar för att försöka förstå hur wordpress fungerar inser jag… Att min sambo hade rätt. Gräv ner prestigen. Gör det du är bäst på och låt andra göra det de är bra på… Wix here I come!

  5. Hej! Jag har gjort en hemsida. När jag ska länka den på t ex Facebook visas en liten bild, jag ändrade och valde den bilden jag ville skulle visas, men nu har jag glömt hur jag ändrade detta… och vill givetvis ändra nu! Hur gör man??

  6. Hej Elin 🙂
    Finns det någon sida du skulle kunna rekommendera om man vill göra en hemsida, men kunna koda iaf delar av den själv? 🙂

    Mvh Elina

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *