Din WordPress-sajt är igång, men den ser ut som hundratals andra? Samma standardtema, samma typsnitt, ingen antydan till personlighet. Plattformen erbjuder massor av anpassningsmöjligheter; frågan är var man ska börja utan att ha sönder sajten på vägen.

Att ändra designen på en WordPress-sajt innebär inte nödvändigtvis en total ombyggnad från grunden. Ibland räcker det med tre eller fyra riktade justeringar för att din sajt ska sluta se generisk ut och börja bli minnesvärd. Här följer en steg-för-steg-genomgång: från färgschema till favicon, med specifika verktyg och ingen kod där du klarar dig utan.

💡 Snabb översikt:

• Välj ett färgschema med 3 färger med hjälp av Adobe Color, Coolors eller ColorHexa
• Ställ in typsnitt via Google Fonts, Use Any Font för anpassade typsnittsfiler
• Ändra datum- och tidsformat med en enda kodrad eller via anpassaren

Välja ett färgschema

Färger står för halva intrycket. En besökare har inte läst rubriken än, men känner redan av om sajten upplevs som "premium" eller "billig", teknisk eller kreativ, pålitlig eller tveksam. Färgschemat är ditt varumärkes visuella ankare.

Det optimala tillvägagångssättet är tre basfärger: primär (bakgrund/text), accent (knappar, länkar, viktiga element) och stödjande (ramar, avskiljare, hover-effekter). Fler än tre riskerar visuellt brus; färre är tråkigt. Huvudregeln: använd accentfärgen sparsamt, bara där du behöver dra till dig uppmärksamhet.

Var du ska börja med färgval:

Adobe Color (tidigare Kuler)

Ett verktyg från Adobe för att skapa färgscheman baserade på harmoniregler: monokromatiskt, komplementärt, triadisk, analogt. Under huven finns ett färghjul där du ställer in grundnyansen, och systemet väljer automatiskt resten. Du kan extrahera en palett från en uppladdad bild, vilket är praktiskt om du har en referens. Tillgängligt gratis på color.adobe.com.

Coolors

En palettgenerator byggd för snabbhet. Tryck på mellanslag, få en ny kombination av fem färger. Du kan låsa vilken färg som helst och slumpa fram resten. Resultatet är färdiga HEX-koder. Det finns ett plugin för Chrome/Firefox och en iOS-app. Fungerar på coolors.co.

ColorHexa

ColorHexa är inte bara en pipett utan ett uppslagsverk för färg. Ange en HEX, RGB eller ett namn, så får du en sida med komplementära nyanser, gradienter, triader, procentuell sammansättning och blindförhandsvisning (hur färgen uppfattas av personer med olika typer av färgblindhet). Färgblandare: ange #ff0000+#0000ff+#ff00ff, få resultatet #aa00aa med en fullständig genomgång. colorhexa.com.

Färdiga HTML-paletter

Om du inte vill börja från noll, använd färdiga paletter. htmlcolorcodes.com erbjuder 216 webbsäkra färger med HEX-koder, kompatibla med CSS, Photoshop och alla grafikprogram. Tjänsten Paletton (tidigare Color Scheme Designer) ger färgscheman med förhandsvisning på en webbplatsmockup.

CSS Gradient Generator

Övertoningar gör comeback, och nu är det inte banden från 2012 utan subtila övergångar på sektionsbakgrunder och knappar. ColorZilla Gradient Editor är en Photoshop-liknande editor: sätt ankarpunkter med färger och transparens, flytta mittpunkten, kopiera den färdiga CSS:en. Den stöder linjära, radiella och upprepade övertoningar. Det finns ett tillägg för Chrome och Firefox med en pipett direkt i webbläsaren.

Välja och ställa in typsnitt

Färger drar till sig uppmärksamhet; text håller kvar den. Typsnitt påverkar läsbarhet och tonuppfattning: en strikt seriff ger en känsla av redaktionell kvalitet, medan en ren sans-serif förmedlar tech-vibbar.

Problemet med webbtypsnitt är att besökare bara ser de som är installerade på deras datorer om du inte använder inbäddade (webb)typsnitt. Så för anpassad stil används bara externa typsnitt.

Grundregel: max två typsnitt per sida. Ett för rubriker (stort, karaktäristiskt), ett andra för brödtext (maximalt läsbart). Ett tredje bara om du behöver ett monospace för kod.

Google Fonts, den primära källan

En gratis katalog med över 1 500 familjer på fonts.google.com. Inläsning tar två rader. Den klassiska metoden är via temats header.php:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Eller i style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Efter import är typsnittet tillgängligt i valfri CSS-regel:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

GDPR-nyans: Google Fonts som laddas direkt från Googles servrar överför besökarnas IP-adresser. Sedan 2022 har EU-domstolar bedömt detta som en överträdelse. Lösningen är tillägget Local Google Fonts, som laddar ner typsnitten till din server och serverar dem lokalt. Ett alternativ för den som inte vill hantera tillägg är en artikel om att ladda Google Fonts lokalt på vår blogg.

Anpassade typsnitt via tillägg

Om du behöver ett varumärkestypsnitt som inte finns i Google Fonts, prova Use Any Font. Ladda upp en ttf-, otf- eller woff-fil så konverterar tillägget den till woff2 och lägger till den i adminpanelen. Gratisversionen tillåter uppladdning av ett typsnitt; Pro tar bort begränsningen.

Manuell inkoppling via @font-face

Om du föredrar kod framför tillägg, placera typsnittsfilen i /wp-content/themes/your-theme/fonts/ och lägg till i style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Användning:

1
#menu { font-family: 'Museo300', sans-serif; }

Formatera datum och tid

Standardformatet för datum passar inte alltid designen. Som tur är låter WordPress dig ändra det utan tillägg.

Metod 1: via Anpassa (ingen kod)

Gå till Utseende → Anpassa → Allmänna inställningar. Där ändras även tidsformatet. Fungerar för de flesta klassiska teman.

Metod 2: via single.php (precis kontroll)

Öppna Utseende → Temaeditor → single.php. Hitta funktionen the_time() eller the_date():

1
<?php the_time('F Y'); ?>

Formatsymboler:

• l, hela veckodagens namn (gemen L)
• F, månad som ord
• j, dag i månaden som siffra
• Y, år som fyra siffror
• y, år som två siffror

Kombinationsexempel:

('l, j F Y') → söndag, 14 juni 2026. ('j F, Y') → 14 juni, 2026.

Rör inte de enkla citattecknen inuti parenteserna, ändra bara symbolerna mellan dem. Om temat använder the_date() istället för the_time() ändrar du formatet enklare: Inställningar → Allmänt → Datumformat.

Använda bilder

Att lägga till bilder i WordPress görs via knappen "Lägg till media" i inläggsredigeraren. Placera markören där du vill ha bilden → Lägg till media → välj en bild från mediebiblioteket eller ladda upp en ny.

Till höger finns panelen för bilageinställningar: titel, alt-text (viktigt för SEO och tillgänglighet), storlek, justering, länk. För sajtens hastighet, ladda upp bilder som redan är komprimerade (TinyPNG eller ShortPixel innan uppladdning). Mer information i vår guide till WordPress mediebibliotek.

Lägga till en favicon

En favicon är den lilla fyrkanten i webbläsarfliken och bokmärkena. En liten detalj som bygger igenkänning: när en användare har 20 flikar öppna är faviconen det enda som visuellt skiljer din sajt från resten.

Så skapar du en favicon

Den mest pålitliga tjänsten är RealFaviconGenerator. Ladda upp en kvadratisk bild (minst 260×260) så får du ett ikonpaket för alla plattformar: iOS, Android, Windows-paneler, Safari-fäst flik. Plus färdig HTML-kod att infoga.

Om du behöver en enkel.ico-fil på 16×16 fungerar vilket grafikprogram som helst som kan spara till.ico (GIMP är gratis). Eller använd onlinetjänsten Favicon.io.

Så installerar du i WordPress

Den enklaste metoden är den inbyggda webbplatsikonen. Sedan WordPress 4.3 finns den i anpassaren:

Utseende → Anpassa → Webbplatsidentitet → Webbplatsikon. Ladda upp en kvadratisk bild så beskär WordPress den automatiskt till de storlekar som behövs för alla plattformar. Inga tillägg, ingen FTP, ingen header.php.

Tilläggsmetoden är All In One Favicon, som ger mer kontroll: separata ikoner för admin, frontend och olika ikoner för olika enheter. Men för 95% av sajterna räcker den inbyggda webbplatsikonen.

Manuell metod (lägg till i header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Placera filen favicon.ico i temamappens rot. Glöm inte att duplicera den i public_html så att faviconen öppnas på yoursite.com/favicon.ico.

⁉️🤔 Vanliga frågor

Kan jag ändra sajtens design utan att förlora innehåll?

Ja, att byta WordPress-tema påverkar inte inlägg, sidor och mediafiler. De lagras i databasen separat från temat. Det enda som kan "gå sönder" är layouten och elementens placering, särskilt om det gamla temat använde anpassade inläggstyper eller shortcodes. Gör en fullständig säkerhetskopia innan du byter (webbhotell + databas). Använd en staging-sajt för säker testning; många webbhotell (SiteGround, Kinsta, WP Engine) erbjuder det med ett klick.

Hur många typsnitt är optimalt för en sajt?

Två: ett för rubriker, ett för brödtext. Ett tredje (monospace) för kod, om det finns på sajten. Varje extra typsnitt ökar laddningstiden med 200-400 ms och skapar visuellt brus. Google Fonts låter dig välja endast de teckensnittsvarianter du behöver (regular + bold = 2 filer istället för 9), och tillägget Local Google Fonts cachar dem dessutom på din server.

Är det nödvändigt att hantera kod för anpassning?

Nej. WordPress anpassare (Utseende → Anpassa) täcker de flesta uppgifter: färger, typsnitt, logotyp, favicon, bakgrundsbilder, CSS. Blockteman (från WP 5.9) erbjuder webbplatsredigeraren, en ännu mer visuell metod utan kod. Kod behövs när du kräver finjustering: datumformat i single.php, anpassad @font-face, specifik CSS för ett visst tillägg.

Vad gör jag om sajten gick sönder efter temabyte?

Först: få inte panik, ditt innehåll har inte försvunnit. Andra: om adminpanelen är tillgänglig, återgå till det gamla temat (Utseende → Teman → Aktivera). Om adminpanelen inte är tillgänglig, anslut via FTP till /wp-content/themes/, byt namn på den nya temamappen (lägg till _disabled) så växlar WordPress automatiskt till standardtemat. Efter återställning, aktivera WP_DEBUG i wp-config.php för att se fel.

Hur kontrollerar jag om faviconen fungerar?

Öppna yoursite.com/favicon.ico; om ikonen visas ligger filen på plats. I webbläsaren visas faviconen inte omedelbart: den cachas aggressivt. För att kontrollera, öppna sajten i inkognitoläge eller tvinga fram en cache-uppdatering (Ctrl+Skift+R). RealFaviconGenerator tillhandahåller ett verktyg för favicon-kontroll via URL.

WordPress-redesign: vad du ska göra först

Åtgärdsordningen för anpassning från grunden: färgschema → typsnitt → logotyp och favicon → datumformat → widget- och menylayout. I exakt denna ordning: färger och typografi är grunden som allt annat byggs på.

Om sajten redan är igång och drar trafik, gör inte omdesignen på den aktiva domänen. Staging-kopia + testning → migrering. Ändringar som är märkbara för sökmotorer (HTML-strukturändringar, rubriker, URL:er) bör göras med förståelse: en plötslig omdesign utan omdirigeringar kan sänka rankningen.

För dig som vill fördjupa dig i ämnet: guide för anpassade typsnitt på vår blogg, artikel om WordPress mediebibliotek för att arbeta med bilder, och en detaljerad genomgång av att ladda Google Fonts lokalt med ett före/efter-test i GTmetrix.

Börja med tre färger och två typsnitt; resten följer.