Vill du anpassa färgerna på din WordPress-webbplats?
Färger spelar en avgörande roll för att göra din webbplats estetiskt tilltalande och etablera din varumärkesidentitet. Lyckligtvis gör WordPress det väldigt enkelt att anpassa färger på hela din webbplats.
I den här artikeln visar vi dig hur du enkelt anpassar färgerna på din WordPress-webbplats, inklusive bakgrund, rubrik, text och länkfä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ärgteori ä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 hemsida bör du välja färger som ser bra ut tillsammans. Detta kommer att få din webbplats att framstå som mer attraktiv för dina besökare, vilket kan förbättra användarupplevelsen och öka engagemanget.
Olika färger kan skapa olika känslor och känslor 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 ofta på bank- och finanswebbplatser.
Detta eftersom rött kan skapa känslor av värme, energi och passion, medan blått betyder självförtroende, trygghet och lugn.
Förutom att komplettera färger kan du även använda färgkontrast för att uppmärksamma viktiga delar av 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 atmosfär på webbplatsen.
Vad är WordPress-teman? Kan temafärger ändras?
WordPress-teman styr hur användaren ser din webbplats. Ett typiskt WordPress-tema är en uppsättning fördesignade mallar som du installerar på din webbplats för att ändra dess utseende och design.
Teman gör din webbplats mer attraktiv, enklare att använda och ökar engagemanget.
Du kan också skapa dina egna teman från grunden med plugins som SemillaProd och den Thrive Theme Builder.
Med WordPress kan du enkelt anpassa teman och ändra bakgrundsfärger, typsnitt, knappar och länkar.
Kom dock ihåg att vissa teman kommer med fördefinierade färgalternativ, medan andra erbjuder mer flexibilitet att välja ditt eget.
Med det sagt, låt oss se hur du enkelt kan anpassa färger i WordPress.
Hur man anpassar färger i WordPress
Du kan anpassa färger i WordPress med många olika metoder, inklusive temaanpassaren, fullständig webbplatsredigerare, anpassad CSS, plugins för sidbyggare och mer.
Ändra färger med hjälp av temaanpassaren
Det är väldigt enkelt att ändra färger med WordPresss inbyggda temaanpassare.
Besök först Utseende » Anpassa sida från admin sidofältet.
Notera: Om du inte hittar fliken “Anpassa” i din WordPress-instrumentpanel betyder det att du använder ett blocktema. Rulla ner till nästa avsnitt i den här handledningen för att ta reda på 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 använder för närvarande.
Twenty Twenty-One-temat kommer till exempel med en panel “Colors & Dark Mode” som låter användare välja en bakgrundsfärg och anpassa det mörka läget.
När du har öppnat panelen klickar du helt enkelt på alternativet “Välj färg”. Detta öppnar färgväljaren, där du kan välja önskad bakgrundsfärg.
När du är klar, glöm inte att klicka på “Publicera”-knappen högst upp för att spara dina ändringar och publicera dem på din webbplats.
Ändra färger i hela webbplatsredigeraren
Om du använder ett blockbaserat tema har du inte tillgång till temaanpassaren. Du kan dock använda hela webbplatsredigeraren (FSE) för att ändra färgerna på din webbplats.
Gå först till Utseende » Redaktör skärmen från admin sidofältet för att starta hela webbplatsredigeraren.
Nu måste du klicka på “Styles”-ikonen 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 bakgrund, text, länk, rubrik och knappfärger för temat härifrån.
När du är klar klickar du på “Spara”-knappen för att spara dina inställningar.
Ändra färger med anpassad CSS
CSS är ett språk du kan använda för att ändra det visuella 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 tillämpas om du ändrar teman på din webbplats eller uppdaterar ditt befintliga tema.
Det är därför vi rekommenderar att du använder WPC-kod plugin, som är den bästa WordPress kodsnuttar plugin på marknaden. Det är det enklaste sättet att lägga till anpassad CSS-kod och gör att du säkert kan anpassa färger på din WordPress-webbplats.
Först måste du installera och aktivera WPC-kod plugg. För mer instruktioner, se vår nybörjarguide om hur du installerar ett WordPress-plugin.
Notera: Det finns även en gratis version av WPCode som du kan använda. Vi rekommenderar dock att du uppgraderar till en betald plan för att låsa upp pluginets fulla potential.
När du har aktiverat WPCode måste du besöka Kodavsnitt » + Lägg till kodavsnitt sida från admin sidofältet.
Klicka bara på knappen “Använd kodavsnitt” under rubriken “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.
Efter det väljer du helt enkelt ‘CSS Fragment’ som ‘Code Type’ från rullgardinsmenyn.
Därefter måste du lägga till den anpassade CSS-koden i rutan ‘Code Preview’.
För det här avsnittet lägger vi till anpassad CSS-kod som ändrar färgen på texten på webbplatsen:
När du har gjort det, scrolla ner till avsnittet “Infoga”.
Här kan du välja alternativet ‘Auto Infoga’ 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 helt enkelt till toppen av sidan och växla “Inaktiv”-omkopplaren till “Aktiv”.
Slutligen måste du klicka på knappen “Spara utdrag” för att tillämpa CSS-koden på din webbplats.
Ändra färger med SeedProd
Du kan också anpassa färgerna med hjälp av SemillaProd plugg.
Det är den bästa WordPress-sidbyggaren på marknaden som låter dig skapa teman från grunden utan att använda någon kod.
Först måste du installera och aktivera SemillaProd plugg. För mer information kan du läsa vår nybörjarguide om hur du installerar ett WordPress-plugin.
Efter aktivering, gå till SeedProd » Theme Builder sida från WordPress admin sidofält.
Härifrån klickar du på knappen “Theme Template Kits” längst upp.
Notera: Om du vill skapa ditt eget tema från grunden måste du klicka på knappen ‘+ Lägg till ny temamall’.
Detta tar dig till sidan “Theme Template Kit Selector”. Här kan du välja från någon av de fördesignade temamallarna som SeedProd erbjuder.
För mer information, kolla in vår handledning om hur du enkelt skapar ett WordPress-tema utan någon kod.
När du har valt ett tema kommer du att omdirigeras till sidan “Temamallar”.
Här måste du växla “Aktivera SeedProd-tema” till “Ja” för att aktivera temat.
Nu måste du klicka på länken “Redigera layout” under valfri temasida för att öppna dra-och-släpp-redigeraren.
När du är där klickar du på kugghjulsikonen längst ned i den vänstra kolumnen.
Detta leder dig till “Global CSS”-inställningarna.
Härifrån kan du anpassa din webbplatss bakgrundsfärger, text, knappar, länkar och mer.
När du är nöjd med dina val, klicka på “Spara”-knappen för att spara dina inställningar.
Hur man ändrar bakgrundsfärgen i WordPress
Alla WordPress-teman kommer 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 hela webbplatsredigeraren.
Först måste du gå till Utseende » Redaktör skärmen från admin sidofältet.
När hela webbplatsredigeraren har startat klickar du på ikonen “Stiler” 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 panelen “Färger” kan du nu hantera standardfärgen för olika element på din webbplats.
Här måste du klicka på alternativet “Bakgrund” i avsnittet “Element”.
När panelen “Bakgrund” har expanderat, kommer du att kunna välja bakgrundsfärg för din webbplats härifrån.
Alla WordPress-teman erbjuder ett antal standardfärger för webbplatser som du kan välja mellan.
Men om du 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 den färg du föredrar.
Du kan också använda gradientfärger för bakgrunden på din webbplats.
För att göra detta måste du först byta till fliken “Gradient” längst upp.
Du kan sedan välja en standardgradient från temat eller välja dina egna gradientfärger med hjälp av verktyget Färgväljare.
När du är klar, glöm inte att klicka på “Spara”-knappen för att spara dina inställningar.
Du kan också ändra bakgrunden på din webbplats med hjälp av temaanpassaren, SeedProd och anpassad CSS.
För mer detaljerade instruktioner kanske du vill kolla in vår guide om hur du ändrar bakgrundsfärgen i WordPress.
Många WordPress-teman kommer med en rubrik inbyggd i toppen av sidan. Den innehåller vanligtvis länkar till viktiga sidor, sociala ikoner, CTA:er och mer.
Om du använder ett blocktema kan du enkelt anpassa WordPress-huvudet med den fullständiga webbplatsredigeraren.
Först måste du besöka Utseende » Redaktör skärmen från admin sidofältet för att starta hela webbplatsredigeraren. Väl där väljer du mallen “Header” högst upp genom att dubbelklicka på den.
Härifrån scrollar du helt enkelt ner till avsnittet “Färg” och klickar på alternativet “Bakgrund”.
Detta öppnar ett popup-fönster där du kan välja en standardfärg för din rubrik.
Du kan också välja en anpassad färg genom att öppna verktyget Färgväljare.
För att anpassa din rubrik med hjälp av en färggradient måste du byta till fliken “Gradient”.
Efter det kan du välja ett standardgradientalternativ eller anpassa ditt eget med färgväljaren.
Klicka slutligen på knappen “Spara” för att spara dina inställningar.
Om du vill ändra rubrikens färg med hjälp av temaanpassaren eller ytterligare CSS kan du läsa vår nybörjarguide om hur du anpassar din WordPress-header.
Hur man ändrar textfärg i WordPress
Att ändra färgen på texten kan bidra till att förbättra läsbarheten för din WordPress-blogg.
Om du använder ett blocktema måste du ändra textfärgen med hjälp av hela webbplatsredigeraren.
Du kan börja med att besöka Utseende » Redaktör skärmen från admin sidofältet. Detta kommer att starta hela webbplatsredigeraren, där du måste klicka på ikonen “Stiler” i det övre högra hörnet.
Därefter måste du klicka på panelen “Färger” för att komma åt ytterligare inställningar.
När du är där, fortsätt och klicka på alternativet “Text” i avsnittet “Element”.
När textfärginställningarna har öppnats kommer du att kunna se olika textfärger i avsnittet “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 bara på knappen “Spara” för att spara dina ändringar.
Ytterligare tips: Du kan använda WebAIM Contrast Check Tool för att kontrollera om bakgrunden och textfärgen fungerar tillsammans. Verktyget kan hjälpa dig att förbättra läsbarheten för text på din webbplats.
För att anpassa textfärgen med CSS, temaanpassaren eller SeedProd, kanske du vill se vår guide om hur du ändrar textfärgen i WordPress.
Hur man ändrar textvalsfärg i WordPress
När en besökare väljer text på din webbplats kommer den att visa en bakgrundsfärg. Standardfärgen är blå.
Men ibland kanske färgen inte stämmer överens med ditt WordPress-tema och du kanske vill ändra det.
Genom att lägga till CSS-kod till dina temafiler kan du enkelt ändra textvalsfärgen. Tänk dock på att om du byter till ett annat tema eller uppdaterar ditt nuvarande tema kommer CSS-koden att försvinna.
Det är därför vi rekommenderar att du använder WPC-kod plugin, som är den bästa WordPress kodsnuttar plugin på marknaden.
Först måste du installera och aktivera WPC-kod plugg. För mer instruktioner, se vår guide om hur du installerar ett WordPress-plugin.
Efter aktivering, gå till Kodavsnitt » + Lägg till kodavsnitt sida från admin sidofältet.
Sedan klickar du helt enkelt på knappen “Använd kodavsnitt” under rubriken “Lägg till din anpassade kod (nytt kodavsnitt).
När du är på sidan “Skapa anpassat kodavsnitt” kan du börja med att skriva ett namn för ditt kodavsnitt.
Efter det måste du välja “CSS Fragment” som “Code Type” från rullgardinsmenyn till höger.
Nu, fortsätt och kopiera och klistra in följande CSS-kod i rutan “Code Preview”.
::-moz-selection {
background-color: #ff6200;
color: #fff;
}
::selection {
background-color: #ff6200;
color: #fff;
}
Du kan ändra textvalsfärgen genom att ersätta hex-koden bredvid “bakgrundsfärg” i CSS-kodavsnittet.
När du har lagt till koden, scrolla ner till avsnittet “Infoga”.
Här måste du välja ‘Auto Infoga’-metoden för att köra koden automatiskt vid aktivering.
Efter det, rulla uppåt och växla “Inaktiv”-omkopplaren till “Aktiv”.
Slutligen, gå vidare och klicka på knappen “Spara utdrag” för att lagra dina ändringar.
Du kan nu besöka din webbplats för att kontrollera textvalsfärgen.
Du kan också ändra textvalsfärgen med hjälp av temaanpassaren eller ett plugin. För mer information, kolla in vår handledning om hur du ändrar standardfärgen för textval i WordPress.
Hur man ändrar länkfärg i WordPress
Du kan enkelt ändra länkfärg i WordPress med hjälp av hela webbplatsredigeraren eller anpassad CSS.
Om du använder ett blocktema, gå till Utseende » Redaktör skärmen från admin sidofältet.
När hela webbplatsredigeraren har lanserats måste du klicka på ikonen “Stiler” 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 väl är där klickar du bara på panelen “Länkar”.
Detta kommer att starta länkfärgsinställningarna och du kommer att se flera standardlänkfärger i den högra kolumnen.
Du kan dock också använda en anpassad länkfärg genom att klicka på verktyget Anpassad färg för att öppna färgväljaren.
Du kan också ändra färgen på den flytande länken med hjälp av FSE. Det betyder att färgen på länken ändras när någon svävar över den.
Först måste du byta till fliken “Hover” från toppen.
Väl där kan du välja en standardfärg eller anpassad färg för att ändra färgen på den flytande länken.
Klicka slutligen på knappen “Spara” för att spara dina inställningar.
För mer detaljerade instruktioner kanske du vill kolla in vår guide om hur du ändrar länkfärg i WordPress.
Hur man ändrar adminfärgschemat i WordPress
Du kan också ändra adminfärgschemat i WordPress om du vill. Den här metoden kan vara användbar om du vill att adminpanelen ska matcha din webbplatss varumärke eller använda dina favoritfärger.
Kom dock ihåg att en ändring av WordPress-instrumentpanelens färgschema inte kommer att påverka den synliga delen av din webbplats.
För att ändra administratörens färgschema, besök helt enkelt Användare » Profil sida från admin sidofältet.
Du kommer att se flera färgscheman bredvid alternativet “Administration Color Scheme”.
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, kolla in vår nybörjarguide om hur du ä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 kolla in vår ultimata SEO-guide för WordPress och vår artikel om hur du väljer ett perfekt färgschema för din WordPress-webbplats.
