Nettsiden din har riktig innhold og en fungerende meny, men fargene er temaets standardfarger og skrifttypen sier ingenting om merkevaren din. Du trenger ikke å bytte tema for å fikse dette. I WordPress kan du endre farger, typografi og globale stiler fra ett sentralt sted, og endringene slår gjennom på hele nettsiden med en gang.
Åpne stilpanelet i WordPress
Gå til Utseende i kontrollpanelet og klikk på Redigeringsverktøy. I venstrepanelet klikker du på Stiler. Her finner du alle verktøyene for å endre farger i WordPress, justere typografi og tilpasse det visuelle uttrykket globalt.
Det første du ser, er en samling med forhåndsdefinerte stilvarianter. Disse har navn som "Kveld", "Middag" og "Skumring" og endrer hele fargepaletten og typografien med ett klikk. Prøv noen av dem for å se hvordan nettsiden din kan se ut med forskjellige visuelle profiler. Du kan alltid gå tilbake til standardstilen.
Stilboken: en visuell oversikt over alt
Klikk på øyeikonet ved siden av overskriften "Stiler" for å åpne stilboken. Dette er en side som viser alle elementene på nettsiden din samlet: overskrifter i alle størrelser, brødtekst, lenker, knapper, sitater, lister og mye mer. Alt vises med de nåværende stilinnstillingene dine.
Stilboken er uvurderlig når du gjør designendringer. I stedet for å åpne ulike sider for å sjekke hvordan endringene ser ut, ser du alt på ett sted. Endrer du fargen på overskrifter, oppdateres alle overskriftene i stilboken umiddelbart. Det gjør det enkelt å vurdere om endringen fungerer visuelt før du lagrer.
Endre farger i WordPress globalt
Under Stiler klikker du på Farger for å åpne fargepanelet. Her finner du to hoveddeler: paletten og elementfargene.
Paletten er en samling farger som temaet bruker. Standardpaletten inneholder vanligvis en primærfarge, en sekundærfarge, bakgrunnsfarger og tekstfarger. Endrer du primærfargen her, oppdateres alle elementer som bruker den fargen automatisk. Det betyr at knapper, lenker, overskrifter og andre elementer som er knyttet til primærfargen, alle endres med ett klikk.
Dette er det smarte med WordPress sitt fargesystem. Du definerer fargene ett sted, og hele nettsiden følger etter. Vil du endre merkevarefargen fra blå til grønn? Endre primærfargen i paletten, og alt oppdateres.
Elementfarger lar deg sette farger for spesifikke elementer. Du kan velge en farge for bakgrunn, tekst, lenker, overskrifter og knapper. Disse innstillingene gjelder globalt, men kan overstyres på enkeltsider eller i individuelle blokker ved behov.
Typografi: skrifttyper og tekststiler
Klikk på Typografi i stilpanelet for å endre skrifttyper og tekststiler. Her ser du innstillinger for ulike teksttyper: overskrifter, brødtekst, lenker og knapper.
Skriftsett bestemmer hvilke skrifttyper som er tilgjengelige. WordPress leveres med en samling systemskrifter, men du kan installere flere via Google Fonts. Klikk på skriftsett-ikonet for å bla gjennom og installere skrifttyper som Inter, Roboto eller Open Sans. Etter installering er skrifttypen tilgjengelig i alle typografiske innstillinger.
For hvert tekstelement kan du justere skrifttype, størrelse, linjehøyde, skriftvekt og bokstavmellomrom. En vanlig tilnærming er å velge en skrifttype for overskrifter og en annen for brødtekst. Hold det enkelt med to, maksimalt tre skrifttyper. Flere enn det gjør nettsiden visuelt rotete.
Størrelsene du setter her, gjelder som standard overalt på nettsiden. Du kan overstyre dem i individuelle blokker, men det er bedre å sette fornuftige globale størrelser og la dem gjelde konsekvent.
Bakgrunner, skygger og layout
Stilpanelet gir deg kontroll over mer enn farger og tekst. Under Bakgrunn kan du sette en global bakgrunnsfarge eller et bakgrunnsbilde for hele nettsiden. Under Skygger kan du definere skyggene som brukes på knapper, kort og andre opphøyde elementer.
Layout inneholder to spesielt viktige innstillinger. Innholdsbredde bestemmer hvor bredt hovedinnholdet er (standardverdien er ofte rundt 645 piksler). Vidde-bredde bestemmer bredden på elementer som er satt til bred visning (typisk rundt 1340 piksler). Disse verdiene påvirker hvor mye av skjermen innholdet ditt fyller. For teksttungt innhold fungerer en smalere innholdsbredde bedre fordi korte tekstlinjer er lettere å lese.
Endre stiler for spesifikke blokktyper
En av de mest kraftfulle funksjonene i stilsystemet er muligheten til å endre standardstilen for en bestemt blokktype på tvers av hele nettsiden. Klikk på Blokker i stilpanelet for å se en liste over alle blokktyper.
Velg for eksempel Overskrift. Her kan du endre skrifttype, størrelse, farge og avstand for alle overskrifter på nettsiden. Endringen gjelder overalt der overskriftsblokken brukes, uten at du trenger å redigere hver enkelt side.
Det samme gjelder knapper, avsnitt, bilder, sitater og alle andre blokktyper. Har du et sitat-element med en bestemt stil (for eksempel "Uthevet 1"), kan du endre fargen på den stilen i blokk-innstillingene, og alle sitater med den stilen oppdateres samtidig.
Denne tilnærmingen gjør at du kan bygge et konsistent design uten å besøke hver enkelt side. Sett de globale stilene en gang, og la WordPress ta seg av resten.
Forhåndsdefinerte stilvarianter
Tilbake i hovedvisningen av stilpanelet kan du bla gjennom de forhåndsdefinerte stilvariantene som temaet tilbyr. Disse kombinerer fargepaletter og typografiske valg til komplette visuelle profiler. De er et godt utgangspunkt som du kan finjustere videre.
Klikk på en variant for å se hvordan den påvirker nettsiden. Endringene vises i sanntid i bakgrunnen. Liker du fargepaletten men ikke typografien, kan du velge varianten og deretter justere typografien manuelt. Du er ikke låst til variantens innstillinger.
Neste steg
Nå som du har kontroll over farger, typografi og globale stiler, er neste steg å forstå hvordan du bruker maler og mønstre for å bygge konsistente sidelayouter som gjenbruker designelementene dine effektivt.
Denne videoen er hentet fra kurset WordPress - komplett guide på Utdannet.no. I det fulle kurset lærer du å endre farger i WordPress med fargepaletter og temavariabler, installere og konfigurere Google Fonts, og bruke stilpanelet for å bygge et helhetlig visuelt uttrykk.
