Inledning
WYSIWYG-verktyg, vilket står för What You See Is What You Get, har blivit en populär metod för att skapa webbplatser och bloggar utan att behöva kunna koda. Genom ett visuellt gränssnitt kan man enkelt placera ut text, bilder och andra element för att skapa sidor utan djupare teknisk kunskap.
Det finns flera fördelar med WYSIWYG-editors jämfört med att koda för hand:
- Lätt att komma igång för nybörjare. Man behöver ingen tidigare erfarenhet av HTML, CSS eller programmering.
- Snabbare att producera innehåll utan att tänka på kod. Man kan fokusera på text och design.
- Färdiga mallar och teman gör det enkelt att få ett proffsigt utseende.
- Ofta billigare alternativ än att anlita en webbutvecklare.
Nackdelarna inkluderar:
- Sämre kontroll och flexibilitet jämfört med att koda från grunden.
- Kan generera rörig och ineffektiv kod.
- Svårare att flytta innehållet till en annan plattform.
- Begränsningar i design och funktioner.
Målgruppen för WYSIWYG-verktyg är främst privatpersoner och mindre organisationer som vill skapa en enklare webbplats eller blogg, utan budget för en utvecklare. Med lite tålamod kan man få till ett fullt fungerande resultat även utan tidigare erfarenhet. För större och mer avancerade webbplatser är det dock fördelaktigt med handkodning och en webbutvecklare.
Populära WYSIWYG-editorer
Det finns många olika WYSIWYG-editorer att välja mellan när man ska skapa en hemsida. Här är några av de mest populära alternativen:
WordPress
WordPress är den mest populära plattformen för att skapa hemsidor och bloggar. Det finns en gratisversion som kan installeras på egen webbserver eller så kan man använda WordPress.com för att komma igång snabbt utan att behöva sköta server och underhåll själv. WordPress har en användarvänlig WYSIWYG-editor där man kan redigera sidor och inlägg visuellt utan HTML-kunskaper. Det finns också många teman och tillägg för att anpassa utseende och funktioner.
Wix
Wix är en molnbaserad tjänst där man kan skapa en hemsida online via deras WYSIWYG-editor och mallar. Allt värds av Wix så inga tekniska kunskaper krävs. Wix erbjuder hundratals mallar, integrerade betalningslösningar, chattverktyg med mera. Wix är gratis för enklare hemsidor, större sajter kräver ett premium-konto.
Squarespace
Squarespace liknar Wix och är också molnbaserat med färdiga mallar som man kombinerar med egna bilder och text via deras editor. De erbjuder även e-handelslösningar, statistik och analys av besökare med mera. Squarespace kostar från ca 150 kr/månad.
Webnode
Webnode låter dig bygga en responsiv hemsida utan kunskaper i kodning. De har färdiga mallar och moduler som man kombinerar i sin editor. De har även e-handelslösningar och marknadsföringsverktyg. Webnode är gratis för enklare sajter, större kräver betalplan.
Jimdo
Jimdo fungerar ungefär som Webnode med färdiga mallar och moduler som kombineras i editorn för att skapa en hemsida. De erbjuder även eget domännamn och e-post. Jimdo är gratis för basfunktioner men har premiumalternativ för mer avancerade sajter och funktioner.
Installera och komma igång
För att börja använda en WYSIWYG-editor behöver du först ladda ner och installera programvaran. De flesta populära verktygen är tillgängliga som nedladdningar för Windows och Mac.
När du laddat ner installationsfilen, följ instruktionerna för att installera programmet på din dator. Installationen går oftast smidigt och tar bara några minuter.
Efter installationen behöver du skapa ett konto eller logga in för att komma igång. De flesta verktyg erbjuder att skapa ett kostnadsfritt konto för grundläggande användning.
Nästa steg är att välja en mall eller design för din webbplats. De flesta editorer har färdiga mallar att utgå från, både gratis och premiumalternativ. Välj en mall som passar den typ av webbplats du vill skapa.
Nu är det bara att börja redigera! Gränssnittet i en WYSIWYG-editor liknar ett ordbehandlingsprogram. Du kan börja lägga till och formatera text, bilder och andra element i din webbplats. Verktygsfälten ger dig kontroll över styling, font, färger och mycket mer.
Med rätt program installerat och ett konto skapat är det enkelt att komma igång och börja bygga din webbplats visuellt med en WYSIWYG-editor.
Redigera sidor och innehåll
En av de viktigaste funktionerna i ett WYSIWYG-verktyg är möjligheten att enkelt redigera sidor och lägga till olika typer av innehåll. Här är några vanliga sätt att redigera ditt innehåll:
Lägga till text
Det grundläggande är såklart att kunna lägga till och redigera text på dina sidor. I editorn hittar du ett stort textfält där du kan skriva eller klistra in text. Använd markdown-formatering för att lägga till rubriker, fetstil, kursiv text etc.
Lägga till bilder
För att lägga till bilder, använd bild-ikonen i editorn för att ladda upp eller välja bilder från ditt mediebibliotek. Justera storlek och placering med hjälp av verktygen. Lägg till bildtext och alternativ text för tillgänglighet.
Lägga till media
Utöver bilder kan du ofta lägga till video, ljud och andra mediefiler. Använd media-ikonen och välj din fil från datorn. Mediafiler läggs in med en spelare direkt på sidan.
Lägga till länkar
Skapa interna länkar mellan dina sidor eller externa länkar genom att markera text och klicka på länk-ikonen. Fyll i länkadressen och ställ in öppningsbeteende.
Lägga till widgets
Många editorer har färdiga widgets, som kontaktformulär, kartor eller sociala flöden, som du enkelt kan dra och släppa in på sidor. Anpassa widget-inställningar efter behov.
Använda mallar
Spara tid genom att använda fördefinierade mallsidor för olika syften, som kontaktsida, blogg eller produktsida. Mallar innehåller ofta grundläggande struktur, stilar och innehåll.
Formatera text och styling
Du kan enkelt ändra utseendet på texten i din WYSIWYG-editor. Det finns verktyg för att ändra typsnitt, storlek, färg och stil.
Typsnitt
För att ändra typsnitt, markera texten du vill formatera och välj sedan ett typsnitt från rullgardinsmenyn för typsnitt. De vanligaste typsnitten som Arial, Times New Roman, Verdana etc finns tillgängliga.
Storlek
För att ändra textstorlek, markera återigen text och välj en storlek från rullgardinsmenyn för storlek. Storlekar mäts vanligtvis i pixlar eller punkter.
Färg
Du kan välja textfärg genom att markera text och klicka på färgväljaren för att välja önskad färg. Välj mellan fördefinierade färger eller ange en hexkod för en specifik färg.
Stil
För att lägga till stil på text som fet, kursiv eller understruken, markera text och klicka på motsvarande knapp i verktygsfältet. Kombinera olika stilar för exempelvis fet kursiv text.
Så där, nu kan du enkelt ändra dina texters utseende med bara några musklick!
Arbeta med bilder
Bilder är ett viktigt inslag på de flesta webbplatser. Med ett WYSIWYG-verktyg är det enkelt att lägga till och arbeta med bilder.
Ladda upp bilder
För att ladda upp en bild, hitta upload-funktionen i verktygsfältet eller menyn. Välj den bildfil du vill ladda upp från din dator. De vanligaste filformaten som stöds är JPG, PNG och GIF.
När bilden är uppladdad visas den i innehållet. Du kan dra den till önskad plats.
Beskära och justera
Genom att markera en bild öppnas alternativ för att beskära och justera. Beskär bilden till önskad storlek och proportionsförhållande.
Justera placeringen genom att välja vänster, höger, centrerat och andra alternativ.
Bildtexter
Lägg till en bildtext genom att skriva under bilden. Detta är viktigt för att beskriva bildinnehållet, särskilt för synskadade.
En bra bildtext är kortfattad och informativ. Undvik upprepning av omgivande text.
Bildinställningar
Justera ytterligare inställningar som storlek, ramar, skugga med mera i bildalternativen. Det går även att länka bilder till andra sidor.
Med ett WYSIWYG-verktyg kan du enkelt arbeta med bilder för att förbättra ditt innehåll.
Navigation och menyer
När du skapar en hemsida behöver du vanligtvis en navigationsmeny för att besökarna ska kunna navigera mellan olika sidor och avdelningar på webbplatsen. De flesta WYSIWYG-editorer har bra stöd för att enkelt skapa och hantera navigationsmenyer.
Skapa en meny
För att skapa en navigationsmeny letar du vanligtvis efter alternativet ”Menyer” i verktygsfältet eller inställningarna. Där kan du skapa en ny meny genom att namnge den och spara.
Lägga till menyalternativ
När du har en tom meny kan du börja lägga till menyalternativ. Det gör du genom att fylla i namn på menypunkten och länka den till rätt sida eller avdelning på webbplatsen. Se bara till att använda de sidnamn och URL:er som finns på din webbplats.
Undermenyer
För att skapa undermenyer, dvs menyer under huvudnavigeringen, så är det bara att dra och släppa menyalternativ under varandra i den visuella menyeditorn. På så sätt skapar du en hierarkisk navigationsstruktur.
Redigera och uppdatera menyer
I menyeditorn kan du enkelt flytta runt, lägga till eller ta bort menypunkter. När du gör ändringar är det bara att spara så uppdateras menyn överallt på webbplatsen. På så sätt är det lätt att maintainera navigationen allteftersom webbplatsen växer.
Mallar och teman
Många WYSIWYG-editorer har inbyggda mallar eller teman som du kan använda för att snabbt ändra utseendet på din webbplats. Dessa ger dig färdiga designalternativ för sidlayout, färger, typsnitt och mer.
Välja, anpassa, byta
När du skapar en ny webbplats brukar du kunna välja mellan olika mallar. Testa dig fram för att hitta en som passar innehållet och stilen du vill ha.
Det går ofta att anpassa en mall genom att ändra färger, typsnitt och andra designelement. På så vis kan du sätta din personliga prägel på mallen.
Om du vill byta mall helt går det bra att göra det även efter att du har skapat en del innehåll. Mallar brukar vara utbytbara så att befintligt innehåll överförs på ett smidigt sätt.
Mobilanpassning
Att anpassa en webbplats för mobilen är idag ett måste. De flesta besöker numera sajter från mobila enheter som mobiltelefoner och surfplattor. Därför är det viktigt att webbplatsen är responsiv och fungerar bra på alla skärmstorlekar.
De flesta WYSIWYG-editorer har bra stöd för responsiv design. Ofta finns färdiga teman och mallar som är responsiva. Responsiv design innebär att sidlayouten anpassas automatiskt efter skärmstorlek, så att innehållet presenteras på ett optimalt sätt oavsett om besökaren använder en stor desktop-skärm eller en liten mobilskärm.
För att testa hur webbplatsen ser ut på mobilen finns det preview- eller förhandsgranskningsfunktioner i editorn. Där kan man simulera hur mobilversionen kommer se ut och testa hur innehåll och design fungerar. Det är viktigt att kontrollera att text och bilder inte skalerar ned för mycket på mobilen, att knappar och länkar fungerar och att naviationen är tydlig. Genom att förhandsgranska mobilversionen kan man enkelt göra justeringar direkt i editorn vid behov.
Med responsiv design och mobil förhandsgranskning kan man enkelt skapa en webbplats som fungerar utmärkt för alla besökare, oavsett vilken enhet de använder.
Publicera och domän
När du har skapat din hemsida i WYSIWYG-editorn är det dags att förhandsgranska den och publicera den live på internet. De flesta WYSIWYG-verktyg har en inbyggd funktion för att förhandsgranska hur din hemsida kommer se ut innan du publicerar den.
När du är nöjd med hur allt ser ut kan du publicera din hemsida live. Oftast finns det en knapp för att ”publicera” eller ”gå live”. När du trycker på den laddas din hemsida upp och blir tillgänglig för besökare.
För att besökare ska hitta din hemsida behöver den ett domännamn. Det kan du köpa separat och peka det mot din publicerade hemsida. Processen för att koppla ett domännamn beror på vilket WYSIWYG-verktyg du använder, men oftast finns det guider som hjälper dig att peka domänen rätt.
När ditt domännamn pekar mot din hemsida så kommer besökare kunna skriva in domännamnet i sin webbläsare för att komma åt din publicerade hemsida.