Färger spelar en viktig roll för att göra din webbplats visuellt tilltalande och etablera dess varumärkesidentitet. Lyckligtvis gör WordPress det superenkelt att anpassa färger över hela din webbplats.
Detta är avgörande för att skapa ett unikt utseende och ge konsekvens och tydlighet.
Vi har framgångsrikt använt färg för att bygga en stark varumärkesidentitet på våra webbplatser. Färgen orange har till exempel blivit en definierande del av WPBeginner-varumärket. Det gör vår webbplats minnesvärd för läsarna samtidigt som det skapar en estetiskt tilltalande design.
Denna genomtänkta användning av färg hjälper till att säkerställa att vårt varumärke är lätt igenkännbart, vilket ökar användarupplevelsen och varumärkeslojaliteten.
I den här artikeln visar vi dig hur du enkelt kan anpassa färger på din WordPress-webbplats, inklusive bakgrunds-, rubrik-, text- och länkarfärger.
Vad är färglära?
Innan du kan börja anpassa färger på din WordPress-webbplats är det viktigt att förstå färgteori.
Färglära är studiet av färger och hur de fungerar tillsammans. Det hjälper designers att skapa färgkombinationer som kompletterar varandra.
När du designar en webbplats måste du välja färger som ser bra ut tillsammans. Detta kommer att göra din webbplats mer attraktiv för dina besökare, vilket kan förbättra användarupplevelsen och öka engagemanget.
Olika färger kan framkalla olika känslor och stämningar hos människor, och färglära kan hjälpa dig att välja rätt kombination för din webbplats.
Till exempel används rött ofta för att representera mat och restauranger. Å andra sidan används blått vanligtvis på bank- och finansiella webbplatser.
Det beror på att rött kan skapa känslor av värme, energi och passion, medan blått signalerar förtroende, säkerhet och lugn.
Förutom kompletterande färger kan du också använda färgkontrast för att uppmärksamma viktiga områden på din WordPress-blogg.
Detta gör att du kan göra ditt innehåll mer läsbart, etablera en stark varumärkesidentitet och skapa en specifik stämning på webbplatsen.
Vad är WordPress-teman, och kan du ändra temafärger?
WordPress-teman styr hur din webbplats ser ut för användaren. Ett typiskt WordPress-tema är en uppsättning fördesignade mallar som du installerar på din webbplats för att ändra dess utseende och layout.
Teman gör din webbplats mer attraktiv, lättare att använda och ökar engagemanget.
Du kan också skapa dina egna teman från grunden med hjälp av plugins som SeedProd och Thrive Theme Builder.
Med WordPress kan du enkelt anpassa teman och ändra deras bakgrund, teckensnitt, knappar och länkar.
Tänk dock på att vissa teman kommer med fördefinierade färgval, medan andra erbjuder mer flexibilitet att välja egna.
Med det sagt, låt oss se hur du enkelt kan anpassa färger i WordPress. Du kan använda snabblänkarna nedan för att hoppa till olika delar av vår handledning:
- Hur man anpassar färger i WordPress
- Hur man ändrar bakgrundsfärgen i WordPress
- Hur man ändrar rubrikfärgen i WordPress
- Hur man ändrar textfärg i WordPress
- Hur man ändrar färgen på markerad text i WordPress
- Hur man ändrar länkfärg i WordPress
- Hur du ändrar administrationsfärgschemat i WordPress
Hur man anpassar färger i WordPress
Du kan anpassa färger i WordPress med många olika metoder, inklusive temaanpassaren, redigeraren för hela webbplatsen, anpassad CSS, sidbyggarplugins och mer.
Ändra färger med hjälp av temaanpassaren
Det är superenkelt att ändra färger med hjälp av den inbyggda WordPress-temaanpassaren.
Besök först sidan Utseende » Anpassa från sidomenyn i administratören.
Observera: Om du inte hittar fliken ‘Anpassa’ i din WordPress-instrumentpanel, betyder det att du använder ett blocktema. Bläddra ner till nästa avsnitt i den här handledningen för att se hur du ändrar färger i ett blocktema.
För den här handledningen kommer vi att använda standardtemat Twenty Twenty-One.
Kom ihåg att temaanpassaren kan se annorlunda ut beroende på vilket tema du för närvarande använder.
Till exempel kommer temat Twenty Twenty-One med en panel för 'Färger och mörkt läge' som låter användare välja en bakgrundsfärg och anpassa mörkt läge.
Efter att ha öppnat panelen klickar du helt enkelt på alternativet 'Välj färg'. Detta öppnar färgväljaren, där du kan välja din föredragna bakgrundsfärg.
När du är klar, glöm inte att klicka på knappen 'Publicera' högst upp för att spara dina ändringar och göra dem live på din webbplats.
Ändra färger i redigeraren för hela webbplatsen
Om du använder ett blockbaserat tema, då har du inte tillgång till temaanpassaren. Du kan dock använda redigeraren för hela webbplatsen (FSE) för att ändra färger på din webbplats.
Gå först till skärmen Utseende » Redigerare från admin sidofältet för att starta webbplatsredigeraren. Nu måste du klicka på ikonen 'Stilar' i det övre högra hörnet av skärmen.
Detta öppnar kolumnen 'Stilar', där du måste klicka på panelen 'Färger'.
Du kan ändra temats bakgrunds-, text-, länk-, rubrik- och knappfärger härifrån.
När du är klar klickar du på knappen ‘Spara’ för att spara dina inställningar.
Ändra färger med anpassad CSS
CSS är ett programmeringsspråk som du kan använda för att ändra utseendet på din webbplats, inklusive dess färger. Du kan spara anpassad CSS i dina temainställningar för att tillämpa dina anpassningar på hela din webbplats.
Den anpassade CSS-koden kommer dock inte längre att gälla om du byter tema på din webbplats eller uppdaterar ditt befintliga tema.
Därför rekommenderar vi att använda WPCode, som är det bästa pluginet för kodsnuttar för WordPress på marknaden. Det är det enklaste sättet att lägga till anpassad CSS-kod, och det gör att du säkert kan anpassa färger på din WordPress-webbplats.
Först måste du installera och aktivera pluginet WPCode. För fler instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.
Notera: Det finns också en gratisversion av WPCode som du kan använda. Vi rekommenderar dock att uppgradera till en betald plan för att låsa upp pluginets fulla potential.
Efter aktivering, besök sidan Kodavsnitt » + Lägg till avsnitt från WordPress admin sidofält.
Klicka här helt enkelt på knappen 'Använd kodavsnitt' under alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)'.
När du är på sidan 'Skapa anpassat utdrag' kan du börja med att skriva ett namn för din kod.
Välj därefter bara ‘CSS-kodavsnitt’ som ‘Kodtyp’ från rullgardinsmenyn.
För den här sektionen lägger vi till anpassad CSS-kod som ändrar textfärgen på webbplatsen:
p { color:#990000; }
Lägg helt enkelt till den anpassade CSS-koden i rutan ‘Kodförhandsgranskning’.
När du har gjort det, scrolla ner till avsnittet 'Infogning'.
Här kan du välja alternativet ‘Infoga automatiskt’ om du vill att koden ska köras automatiskt vid aktivering.
Du kan också lägga till en kortkod till specifika WordPress-sidor eller inlägg.
När du är klar, scrolla tillbaka till toppen av sidan och växla omkopplaren ‘Inaktiv’ till ‘Aktiv’.
Slutligen behöver du klicka på knappen 'Spara kodsnutt' för att tillämpa CSS-koden på din webbplats.
Ändra färger med SeedProd
Du kan också anpassa färger med hjälp av pluginet SeedProd.
Det är den bästa WordPress sidbyggaren på marknaden, och den låter dig skapa teman från grunden utan att använda någon kod.
Först måste du installera och aktivera pluginet SeedProd. För mer information kan du läsa vår nybörjarguide om hur man installerar ett WordPress-plugin.
När du har aktiverat, gå till sidan SeedProd » Temabyggare från WordPress admin sidofält.
Klicka här på knappen ‘Theme Template Kits’ högst upp.
Notera: Om du vill skapa ett eget tema från grunden måste du istället klicka på knappen '+ Lägg till ny temamall'.
Detta tar dig till sidan ‘Välj tema-mallkit’. Här kan du välja bland alla fördefinierade temamallar som erbjuds av SeedProd.
För mer information, se vår handledning om hur man enkelt skapar ett WordPress-tema utan kod.
Efter att ha valt ett tema kommer du att omdirigeras till sidan ‘Temamallar’.
Här växlar du omkopplaren 'Aktivera SeedProd-tema' till 'Ja' för att aktivera temat.
Klicka nu på länken 'Redigera design' under valfri temasida för att öppna dra-och-släpp-redigeraren.
När du är där, klicka på kugghjulsikonen längst ner i den vänstra kolumnen.
Detta kommer att leda dig till inställningarna för 'Global CSS'.
Härifrån kan du anpassa färgerna på din webbplats bakgrund, text, knappar, länkar och mer.
När du är nöjd med dina val klickar du på knappen 'Spara' för att spara dina inställningar.
Hur man ändrar bakgrundsfärgen i WordPress
Alla WordPress-teman levereras med en standardbakgrundsfärg. Du kan dock enkelt ändra den för att anpassa din webbplats och förbättra dess läsbarhet.
Om du använder ett blocktema måste du ändra bakgrundsfärgen med hjälp av redigeraren för hela webbplatsen.
Först måste du besöka skärmen Utseende » Redigerare från WordPress-instrumentpanelen.
Detta startar redigeraren för hela webbplatsen, där du måste klicka på ikonen 'Stilar' i det övre högra hörnet av skärmen.
Därefter klickar du helt enkelt på panelen 'Färger' för att öppna ytterligare inställningar
I den här panelen kan du nu hantera standardfärgen för olika element på din webbplats.
Här behöver du klicka på alternativet 'Bakgrund' under sektionen 'Element'.
När den här panelen har expanderats kan du välja din webbplats bakgrundsfärg härifrån.
Alla WordPress-teman erbjuder ett antal standardfärger för webbplatser som du kan välja mellan.
Om du däremot vill använda en anpassad färg måste du klicka på verktyget Anpassad färg. Detta öppnar färgväljaren där du kan välja en färg som du väljer.
Du kan också använda gradientfärger för din webbplatsbakgrund.
För att göra detta måste du först växla till fliken ‘Gradient’ högst upp.
Välj sedan en standardgradient från temat eller välj dina egna gradientfärger med hjälp av färgväljaren.
När du är klar, glöm inte att klicka på knappen 'Spara' för att lagra dina inställningar.
Du kan också ändra din webbplats bakgrund med hjälp av temaanpassaren, SeedProd och anpassad CSS.
För mer detaljerade instruktioner kan du se vår nybörjarguide om hur man ändrar bakgrundsfärg i WordPress.
Hur man ändrar rubrikfärgen i WordPress
Många WordPress-teman levereras med en inbyggd sidhuvud högst upp på sidan. Den innehåller vanligtvis viktiga sidlänkar, sociala ikoner, CTA:er och mer.
Om du använder ett blocktema kan du enkelt anpassa WordPress-rubriken med hjälp av redigeraren för hela webbplatsen.
Först måste du besöka skärmen Utseende » Redigerare från sidomenyn i adminpanelen för att starta redigeraren för hela webbplatsen. Väl där, dubbelklicka på mallen 'Rubrik' högst upp för att välja den.
Detta öppnar rubrikinställningarna i blockpanelen till höger. Här måste du skrolla ner till avsnittet 'Färg' och klicka på alternativet 'Bakgrund'.
Detta öppnar ett popup-fönster där du kan välja en standardfärg för din sidhuvud.
Du kan också välja en anpassad färg genom att öppna verktyget Färgväljare.
För att anpassa din sidhuvud med en färggradient måste du växla till fliken ‘Gradient’.
Därefter kan du välja ett standardgradientalternativ eller anpassa ditt eget med hjälp av färgväljaren.
Klicka slutligen på knappen ‘Spara’ för att lagra dina inställningar.
Om du vill ändra sidhuvudets färg med hjälp av temaanpassaren eller ytterligare CSS, kanske du vill läsa vår nybörjarguide om hur man anpassar ditt WordPress-sidhuvud.
Hur man ändrar textfärg i WordPress
Att ändra textfärgen kan bidra till att förbättra läsbarheten på din WordPress-blogg.
Om du använder ett blocktema måste du ändra textfärgen med hjälp av redigeraren för hela webbplatsen.
Du kan börja med att besöka skärmen Utseende » Redigerare från WordPress adminområde. Detta startar webbplatsredigeraren, där du måste klicka på ikonen 'Stilar' i det övre högra hörnet.
Klicka sedan på panelen ‘Färger’ för att komma åt ytterligare inställningar.
När du är där, klicka på alternativet 'Text' under sektionen 'Element'.
När inställningarna för textfärg har öppnats kan du se ett antal textfärger under sektionen 'Standard'.
Alternativt kan du också använda en anpassad textfärg genom att klicka på verktyget Anpassad färg och öppna färgväljaren.
När du har gjort ditt val klickar du helt enkelt på knappen 'Spara' för att spara ändringarna.
Bonustips: Du kan använda WebAIM Contrast Checker-verktyget för att kontrollera om din bakgrunds- och textfärg fungerar tillsammans. Verktyget kan hjälpa dig att förbättra textens läsbarhet på din webbplats.
För att anpassa textfärgen med CSS, temaanpassaren eller SeedProd, kanske du vill se vår steg-för-steg-guide om hur man ändrar textfärgen i WordPress.
Hur man ändrar färgen på markerad text i WordPress
När en besökare markerar text på din webbplats visas en bakgrundsfärg. Standardfärgen är blå.
Ibland kan färgen dock inte smälta samman bra med ditt WordPress-tema, och du kanske vill ändra den.
Att lägga till CSS-kod i dina temafiler kan enkelt ändra färgen på textmarkeringen. Tänk dock på att om du byter till ett annat tema eller uppdaterar ditt nuvarande tema kommer CSS-koden att försvinna.
Därför rekommenderar vi att använda WPCode, som är det bästa WordPress kodsnuttar-pluginet på marknaden.
Först måste du installera och aktivera pluginet WPCode. För fler instruktioner, se vår guide om hur man installerar ett WordPress-plugin.
Efter aktivering, gå till sidan Kodavsnitt » + Lägg till avsnitt från admin sidofältet.
Klicka sedan helt enkelt på knappen 'Använd utdrag' under alternativet 'Lägg till din anpassade kod (nytt utdrag)'.
När du är på sidan 'Skapa anpassad kodsnutt' kan du börja med att skriva ett namn för din kodsnutt.
Välj därefter ‘CSS-kodavsnitt’ som ‘Kodtyp’ från rullgardinsmenyn till höger.
Kopiera och klistra nu in följande CSS-kod i rutan 'Kodförhandsgranskning':
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}
Du kan ändra färgen på markerad text genom att ersätta hexkoden bredvid background-color i CSS-utdraget.
När du har lagt till koden, scrolla ner till sektionen 'Infogning'.
Välj här metoden 'Automatisk infogning' för att köra koden automatiskt vid aktivering.
Därefter, skrolla tillbaka till toppen och byt 'Inaktiv' omkopplaren till 'Aktiv'.
Klicka slutligen på knappen 'Spara kodavsnitt' för att spara dina ändringar.
Nu kan du besöka din webbplats för att kontrollera färgen för textmarkering.
Du kan också ändra färgen på textmarkeringen med hjälp av temaanpassaren eller ett plugin. För mer information, se vår handledning om hur du ändrar standardfärgen för textmarkering i WordPress.
Hur man ändrar länkfärg i WordPress
Du kan enkelt ändra länkfärg i WordPress med hjälp av redigeraren för hela webbplatsen eller anpassad CSS.
Om du använder ett blocktema, gå sedan till skärmen Utseende » Redigerare från adminmenyn.
När du har öppnat hela webbplatsredigeraren, klicka på ikonen 'Stilar' i det övre högra hörnet.
Klicka sedan på panelen 'Färger' i den högra kolumnen för att se ytterligare inställningar.
När du är där, klicka helt enkelt på fliken ‘Länkar’.
Detta öppnar inställningarna för länkar, och du kommer att se flera standardlänkar som visas i den högra kolumnen.
Du kan dock också använda en anpassad länksfärg genom att klicka på verktyget Anpassad färg för att öppna färgväljaren.
Du kan också ändra färgen på länkar vid hovring med FSE. Detta innebär att länken ändrar färg när någon för muspekaren över den.
Först måste du växla till fliken 'Hover' högst upp.
Där kan du välja en standard- eller anpassad färg för att ändra färgen på länkar vid hovring.
Klicka slutligen på knappen ‘Spara’ för att lagra dina inställningar.
För mer detaljerade instruktioner kan du vilja se vår nybörjarguide om hur man ändrar länkfärg i WordPress.
Hur du ändrar administratörens färgschema i WordPress
Du kan också ändra administrationsfärgschemat i WordPress om du vill. Den här metoden kan vara användbar om du vill att administrationspanelen ska matcha ditt varumärke eller använda dina favoritfärger.
Tänk dock på att ändring av färgschemat för WordPress-instrumentpanelen inte påverkar den synliga delen av din webbplats.
För att ändra administratörens färgschema, besök helt enkelt sidan Användare » Profil från WordPress-instrumentpanelen.
Här ser du flera färgscheman bredvid alternativet 'Adminfärgschema'.
Välj den du föredrar och klicka sedan på knappen ‘Uppdatera profil’ längst ner på sidan för att spara dina ändringar.
För mer detaljerade instruktioner, se vår nybörjarguide om hur man ändrar adminfärgschemat i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du anpassar färger på din WordPress-webbplats. Du kanske också vill se vår artikel om hur du väljer ett perfekt färgschema för din WordPress-webbplats och vår ultimata guide till designelement för WordPress.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Ralph
Jag älskar att WordPress ger oss sådan frihet. Det gör varje webbplats unik och speciell. Den här guiden är verkligen fin, och jag lärde mig en ny sak om att ändra färgen på textmarkering. Det var enkelt, och nu ser min webbplats ännu bättre ut!
Mina 2 cent: Jag skulle inte lita på färgteori. Många människor förstår det fel. Ja, vissa färger har sina egna betydelser, men när du har 2 färger läggs inte dessa betydelser ihop så lätt. De får nya konnotationer som har helt andra betydelser. Jag vet det från någon som professionellt arbetar med att skapa varumärkesbilder.
WPBeginner Support
Med tiden kan vissa färger ändra betydelse, men att känna till färgteori är fortfarande användbart för webbplatsägare.
Admin
Jiří Vaněk
Färger spelar en mycket viktig roll på webben. Ursprungligen var mina första webbplatser i gråskala eller generellt i mörka färger, men de lyckades inte. Sedan försökte jag leka med färger, och feedbacken var omedelbar. Vad som personligen hjälpte mig var att fokusera på bloggar som jag personligen gillade och hämta inspiration från dem. Dessutom skulle jag vilja råda att det finns webbläsartillägg tillgängliga som visar dig hexkoder för enskilda färger på en webbplats. Om du gillar en viss färg kan du enkelt hitta dess hexkod och sedan använda den själv.
Oyatogun Oluwaseun Samuel
Tack för att du delade med dig av din insikt i detta, som webbutvecklare och även grafisk konstnär, har jag alltid vetat att design av något i gråskala inte ger optimala resultat. För att någon ska fånga användarens uppmärksamhet är det viktigt att ta hänsyn till användarnas kultur och traditioner för dina designer. som i min kultur betyder rött alltid fara medan det i andra trakter betyder något mycket viktigt eller något att notera. Så, som du redan sagt spelar färg en mycket viktig roll i design, men då bör det sättas i kontexten av användarnas kultur och tradition.
Jiří Vaněk
Ja, jag har redan lärt mig den här läxan, och du har helt rätt. Problemet uppstår när man skapar en webbplats för användare från hela världen, vilket är mitt fall. Jag har en blogg som jag skriver på mitt modersmål, men alla artiklar (som är av teknisk natur) översätts även till engelska. Enligt Google Analytics kommer besökare från hela världen, från Asien till Europa och Amerika. Därför fokuserade jag på stora webbplatser med liknande trafik och försökte hitta gemensamma element. Jag tror att jag till slut lyckades baserat på den feedback jag fick, men som jag nämnde tog det lång tid att komma dit, och de första versionerna av bloggen var inte alls bra vad gäller färgsättning.