Ditt WordPress-nettsted er oppe og går, men det ser ut som hundrevis av andre? Samme standardtema, samme fonter, ingen antydning til individualitet. Plattformen tilbyr et hav av tilpasningsmuligheter; spørsmålet er hvor man skal begynne uten å ødelegge nettstedet underveis.

Å endre designet på et WordPress-nettsted betyr ikke nødvendigvis en fullstendig ombygging fra bunnen av. Noen ganger er tre eller fire målrettede justeringer nok til at nettstedet ditt slutter å se generisk ut og begynner å bli minneverdig. Nedenfor følger en trinnvis gjennomgang: fra fargepalett til favicon, med konkrete verktøy og uten kode der du kan klare deg uten.

💡 Rask oversikt:

• Velg en fargepalett med 3 farger ved hjelp av Adobe Color, Coolors eller ColorHexa
• Sett opp fonter via Google Fonts, Use Any Font for egendefinerte skrifttyper
• Endre dato- og tidsformatet med én enkelt kodelinje eller via Tilpasser

Velge en fargepalett

Farger utgjør halve inntrykket. En besøkende har ikke lest overskriften ennå, men fornemmer allerede om nettstedet føles «premium» eller «billig», teknisk eller kreativt, pålitelig eller tvilsomt. Fargepaletten er det visuelle ankeret for merkevaren din.

Den optimale tilnærmingen er tre grunnfarger: primær (bakgrunn/tekst), aksent (knapper, lenker, viktige elementer) og støtte (rammer, skillelinjer, hover-tilstander). Mer enn tre risikerer visuell støy; færre er kjedelig. Hovedregelen: bruk aksentfargen sparsomt, bare der du trenger å trekke oppmerksomhet.

Hvor du skal begynne med fargevalg:

Adobe Color (tidligere Kuler)

Et verktøy fra Adobe for å lage fargepaletter basert på harmoniregler: monokromatisk, komplementær, triadisk, analog. Under panseret ligger et fargehjul der du angir grunntonen, og systemet velger automatisk resten. Du kan trekke ut en palett fra et opplastet bilde, noe som er praktisk hvis du har en referanse. Tilgjengelig gratis på color.adobe.com.

Coolors

En palettgenerator bygget for fart. Trykk på mellomromstasten, få en ny kombinasjon av fem farger. Du kan låse hvilken som helst farge og spinne resten. Resultatet er klare til bruk HEX-koder. Det finnes en plugin for Chrome/Firefox og en iOS-app. Fungerer på coolors.co.

ColorHexa

ColorHexa er ikke bare en pipette, men et fargeleksikon. Skriv inn en HEX-, RGB- eller fargenavn, så får du en side med komplementære nyanser, gradienter, triader, prosentvis sammensetning og blindforhåndsvisning (hvordan fargen ser ut for personer med ulike typer fargeblindhet). Fargeblander: skriv inn #ff0000+#0000ff+#ff00ff, få resultatet #aa00aa med en fullstendig oversikt. colorhexa.com.

Ferdige HTML-paletter

Hvis du ikke vil velge fra bunnen av, kan du hente ferdige paletter. htmlcolorcodes.com tilbyr 216 nett-trygge farger med HEX-koder, kompatible med CSS, Photoshop og all annen grafikk. Tjenesten Paletton (tidligere Color Scheme Designer) gir deg fargeoppsett med forhåndsvisning på en nettstedsmockup.

CSS Gradient Generator

Gradienter er på vei tilbake, og nå er det ikke snakk om bandene fra 2012, men subtile overganger på seksjonsbakgrunner og knapper. ColorZilla Gradient Editor er en Photoshop-lignende editor: sett ankerpunkter med farger og gjennomsiktighet, flytt midtpunktet, kopier den ferdige CSS-en. Den støtter lineære, radielle og repeterende gradienter. Det finnes en utvidelse for Chrome og Firefox med en pipette rett i nettleseren.

Velge og sette opp fonter

Farger tiltrekker oppmerksomhet; tekst holder på den. Font påvirker lesbarhet og toneoppfatning: en streng serif skaper en følelse av redaksjonell kvalitet, mens en ren sans-serif formidler tech-stemning.

Problemet med web fonter er at besøkende bare vil se de som er installert på datamaskinene deres, med mindre du bruker innebygde (web) fonter. Så for tilpasset styling, kun eksterne fonter.

Grunnregel: ikke mer enn to fonter per side. En til overskrifter (stor, særpreget), en annen til brødtekst (maksimalt lesbar). En tredje bare hvis du trenger en monospace for kode.

Google Fonts, den primære kilden

En gratis katalog med over 1500 familier på fonts.google.com. Tilkobling tar to linjer. Den klassiske metoden er via temaets 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');

Etter import er fonten tilgjengelig i enhver CSS-regel:

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

GDPR-nyanse: Google Fonts som lastes direkte fra Googles servere, overfører de besøkendes IP-adresser. Siden 2022 har EU-domstoler ansett dette som et brudd. Løsningen er pluginen Local Google Fonts, som laster ned fonter til din server og leverer dem lokalt. Et alternativ for dem som ikke vil forholde seg til pluginer, er en artikkel om lokal lasting av Google Fonts på bloggen vår.

Egendefinerte fonter via plugin

Trenger du en merkevarefont som ikke finnes i Google Fonts, kan du prøve Use Any Font. Last opp en ttf-, otf- eller woff-fil, så konverterer pluginen den til woff2 og legger den til i adminpanelet. Gratisversjonen tillater opplasting av én font; Pro fjerner begrensningen.

Manuell tilkobling via @font-face

Foretrekker du kode fremfor pluginer, plasserer du fontfilen i /wp-content/themes/your-theme/fonts/ og legger til i style.css:

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

Bruk:

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

Formatering av dato og klokkeslett

Standard datoformat passer ikke alltid til designet. Heldigvis lar WordPress deg endre det uten pluginer.

Metode 1: via Tilpasser (ingen kode)

Gå til Utseende → Tilpass → Generelle innstillinger. Tidsformatet endres der også. Fungerer for de fleste klassiske temaer.

Metode 2: via single.php (presis kontroll)

Åpne Utseende → Temaredigering → single.php. Finn funksjonen the_time() eller the_date():

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

Formatsymboler:

• l, fullt dagnavn (liten L)
• F, måned som ord
• j, dag i måneden som tall
• Y, år som fire siffer
• y, år som to siffer

Kombinasjonseksempler:

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

Ikke rør enkle anførselstegn inni parentesene, rediger kun symbolene mellom dem. Hvis temaet bruker the_date() i stedet for the_time(), endres formatet enklere: Innstillinger → Generelt → Datoformat.

Bruke bilder

Å legge til bilder i WordPress gjøres via «Legg til media»-knappen i innleggsredigereren. Plasser markøren der du vil ha det → Legg til media → velg et bilde fra mediebiblioteket eller last opp et nytt.

Til høyre er panelet for vedleggsinnstillinger: tittel, alt-tekst (viktig for SEO og tilgjengelighet), størrelse, justering, lenke. For sidehastighet, last opp bilder som allerede er komprimert (TinyPNG eller ShortPixel før opplasting). Flere detaljer i vår guide til WordPress mediebibliotek.

Legge til et favicon

Et favicon er den lille firkanten i nettleserfanen og bokmerkene. En liten detalj som bygger gjenkjennelse: når en bruker har 20 faner åpne, er faviconet det eneste som visuelt skiller nettstedet ditt fra resten.

Hvordan lage et favicon

Den mest pålitelige tjenesten er RealFaviconGenerator. Last opp et kvadratisk bilde (minst 260×260), så får du en ikonpakke for alle plattformer: iOS, Android, Windows-fliser, Safari-festet fane. Pluss ferdig HTML-kode for innsetting.

Trenger du en enkel.ico-fil på 16×16, fungerer ethvert grafikkprogram som kan lagre til.ico (GIMP er gratis). Eller bruk nettjenesten Favicon.io.

Hvordan installere i WordPress

Den enkleste metoden er det innebygde nettstedsikonet. Siden WordPress 4.3 er det tilgjengelig i Tilpasser:

Utseende → Tilpass → Nettstedsidentitet → Nettstedsikon. Last opp et kvadratisk bilde, så kutter WordPress det automatisk til nødvendige størrelser for alle plattformer. Ingen utvidelser, ingen FTP, ingen header.php.

Utvidelsesmetoden er All In One Favicon, som gir mer kontroll: separate ikoner for admin, frontend og forskjellige for ulike enheter. Men for 95% av nettsteder er det innebygde nettstedsikonet tilstrekkelig.

Manuell metode (legg til i header.php):

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

Plasser favicon.ico-filen i roten av temamappen. Ikke glem å duplisere den i public_html slik at faviconet åpnes på yoursite.com/favicon.ico.

⁉️🤔 Ofte stilte spørsmål

Kan jeg endre nettstedets design uten å miste innhold?

Ja, å bytte et WordPress-tema påvirker ikke innlegg, sider og mediefiler. De lagres i databasen atskilt fra temaet. Det eneste som kan «brekke» er layout og elementplassering, spesielt hvis det gamle temaet brukte egendefinerte innleggstyper eller kortkoder. Før du bytter, ta en full sikkerhetskopi (hosting + database). For trygg testing, bruk et staging-nettsted; mange hoster (SiteGround, Kinsta, WP Engine) tilbyr det med ett klikk.

Hvor mange fonter er optimalt for et nettsted?

To: én til overskrifter, én til brødtekst. En tredje (monospace) til kode, hvis det finnes på nettstedet. Hver ekstra font øker lastetiden med 200-400 ms og skaper visuell støy. Google Fonts lar deg velge bare de nødvendige vektene (regular + bold = 2 filer i stedet for 9), og utvidelsen Local Google Fonts cacher dem i tillegg på din server.

Er det nødvendig å jobbe med kode for tilpasning?

Nei. WordPress-tilpasseren (Utseende → Tilpass) dekker de fleste oppgaver: farger, fonter, logo, favicon, bakgrunnsbilder, CSS. Blokktemaer (fra WP 5.9) tilbyr Nettstedsredigering, en enda mer visuell metode uten kode. Kode er nødvendig når du trenger finjustering: datoformat i single.php, egendefinert @font-face, spesifikk CSS for en bestemt utvidelse.

Hva gjør jeg hvis nettstedet ble ødelagt etter temabytte?

Først: ikke få panikk, innholdet ditt har ikke forsvunnet. Andre: hvis administrasjonspanelet er tilgjengelig, gå tilbake til det gamle temaet (Utseende → Temaer → Aktiver). Hvis administrasjonspanelet ikke er tilgjengelig, gå inn via FTP til /wp-content/themes/, gi nytt navn til den nye temamappen (legg til _disabled), så vil WordPress automatisk bytte til standardtemaet. Etter gjenoppretting, aktiver WP_DEBUG i wp-config.php for å se feil.

Hvordan sjekke om faviconet fungerer?

Åpne yoursite.com/favicon.ico; hvis ikonet vises, er filen på plass. I nettleseren vises faviconet ikke umiddelbart: det caches aggressivt. For å sjekke, åpne nettstedet i inkognitomodus eller tvangsoppdater cachen (Ctrl+Shift+R). RealFaviconGenerator tilbyr et verktøy for favicon-sjekk via URL.

WordPress-redesign: hva du bør gjøre først

Rekkefølgen for tilpasning fra bunnen av: fargepalett → fonter → logo og favicon → datoformat → widget- og menyoppsett. I akkurat denne rekkefølgen: farger og typografi er grunnlaget alt annet bygges på.

Hvis nettstedet allerede kjører og bringer trafikk, ikke gjør redesignet på live-domenet. Staging-kopi + testing → migrering. Endringer som er merkbare for søkemotorer (HTML-strukturendringer, overskrifter, URL-er) bør gjøres med forståelse: en plutselig redesign uten videresendinger kan senke rangeringer.

For de som vil dykke dypere inn i emnet: guide for egendefinerte fonter på bloggen vår, artikkel om WordPress-mediebiblioteket for arbeid med bilder, og en detaljert gjennomgang av lokal lasting av Google Fonts med en GTmetrix før/etter-test.

Start med tre farger og to fonter; resten vil følge.