Hur man ändrar textfärg i WordPress (för alla teman)

När vi först började använda WordPress antog vi att det skulle vara enkelt att ändra textfärg. Men vi insåg snabbt att det kan variera beroende på ditt tema, dina inställningar eller vilken redigerare du använder.

Efter att ha hjälpt tusentals nybörjare att anpassa sina WordPress-webbplatser vet vi att detta är en vanlig frustration för många användare.

De goda nyheterna är att det finns flera enkla sätt att ändra textfärg i WordPress, oavsett vilket tema du använder.

I den här steg-för-steg-guiden går vi igenom de enklaste metoderna för att anpassa din textfärg i WordPress.

Varför ändra textfärgen i WordPress?

Att ändra textfärg i WordPress låter dig markera viktigt innehåll, förbättra läsbarheten och matcha din webbplats varumärkesprofil.

Du kan till exempel markera en uppmaning till handling på en landningssida eller använda färgade underrubriker på din webbplats.

Ibland kanske du till och med vill ändra textfärgen över hela webbplatsen. Till exempel kanske ditt WordPress-tema använder en grå typsnittsfärg, men du föredrar att använda svart för bättre kontrast med din bakgrundsfärg.

Du kan också använda färg för att framkalla en känsla hos dina besökare. Till exempel tror många att blått skapar en känsla av förtroende och pålitlighet.

För att lära dig mer, se vår guide om hur du väljer ett perfekt färgschema för din WordPress-webbplats.

Med det sagt, låt oss se hur du kan ändra textfärgen i WordPress.

Använd helt enkelt länkarna nedan för att hoppa till den metod du föredrar:

• Method 1: How to Change Text Color in Block Editor
  • Ändra färgen på ett ord eller en fras
• Metod 2: Hur man ändrar textfärg i temaanpassaren (endast klassiska teman)
• Metod 3: Hur man ändrar textfärg i Full Site Editor (endast blockteman)
• Metod 4: Hur man ändrar textfärg med CSS-kod (mer anpassningsbar)
• Metod 5: Hur man ändrar textfärg i en sidbyggare
• Vanliga frågor om att ändra textfärg

Metod 1: Hur man ändrar textfärg i blockredigeraren

Om du bara vill ändra några ord, ett stycke eller en rubrik inuti ett inlägg, kan du använda WordPress innehållsredigerare. Denna metod fungerar oavsett om du använder ett blocktema eller ett klassiskt tema.

För att komma igång, öppna inlägget eller sidan där du vill ändra textfärg eller skapa en ny sida.

Om du inte redan har gjort det, skriv in texten du vill anpassa. Beroende på texten kan du behöva lägga till ett stycke, en rubrik eller något annat block som accepterar text. För hjälp med detta, ta en titt på vår guide om hur man använder WordPress blockredigerare.

Så fort du har lite text är du redo att ändra dess färg.

Ändra textfärgen på ett block

För det här första exemplet kommer vi att ändra textfärgen för ett helt block. Detta är ett bra sätt att lyfta fram en hel innehållssektion, som ett helt stycke.

Klicka bara på blocket och välj sedan fliken 'Block' i menyn till höger.

När du har gjort det, leta reda på sektionen 'Färg' och klicka på 'Text'.

Visningsredigeraren kommer nu att visa några färger som kompletterar ditt WordPress-tema. Du kan helt enkelt klicka på vilken färg som helst för att ändra all text inuti det blocket.

För att använda en annan färg, klicka bara på rutan högst upp i popup-fönstret.

Detta öppnar en väljare där du kan välja en ny teckensnittsfärg.

Ett annat alternativ är att skriva in en hexkod, vilket är HTML-koden för en viss färg. Detta är användbart om du vill använda en mycket specifik färg, som den exakta röda nyansen från din webbplats logotyp.

Om du är osäker på vilken hexkod du ska använda, kan det vara till hjälp att titta på en webbplats som HTML-färgkoder. Här kan du utforska olika färger och få deras hexkoder.

När du har en kod, klistra antingen in eller skriv den i rutan ‘Hex’.

Om du ändrar dig och vill återställa standardtextfärgen, klickar du bara på den prickade knappen i menyn till höger.

De alternativ du ser varierar beroende på om du också har ändrat blockets bakgrundsfärg, så du kan behöva klicka på antingen 'Text' eller 'Återställ alla'.

Ändra färgen på ett ord eller en fras

Ibland kanske du bara vill ändra färgen på ett visst ord, en fras eller en mening, som till exempel uppmaningen till handling på din squeeze page.

För att göra detta, markera helt enkelt ordet eller frasen du vill ändra i WordPress blockredigerare. Klicka sedan på den lilla nedåtpilen på verktygsfältet för innehållsredigeraren och klicka på 'Markera'.

Detta öppnar ett popup-fönster som visar några färger som kommer att se bra ut med ditt nuvarande tema.

Du kan också välja en färg manuellt eller till och med använda en hexkod genom att följa samma process som beskrivs ovan.

Proffstips: Vill du ändra färgen på dina länkar? Kolla in vår nybörjarguide om hur man ändrar länkar i WordPress.

Metod 2: Hur man ändrar textfärg i temaanpassaren (Endast klassiska teman)

Färg kan dra uppmärksamhet till en sidans viktigaste innehåll, men många olika färger kan bli överväldigande. Med det i åtanke vill du vanligtvis använda samma textfärg över de flesta av din WordPress-webbplats.

Att ändra varje sida och inlägg manuellt med blockredigeraren skulle ta lång tid, så istället rekommenderar vi att ändra själva temat med hjälp av temaanpassaren.

Notera: Om temaanpassaren saknas, använder du troligen ett blocktema och kan hoppa vidare till metod 3.

För att komma igång, gå till Utseende » Anpassa.

Du behöver nu hitta temat textinställningar. Varje tema är annorlunda, men du kommer vanligtvis att behöva leta efter ett alternativ för 'Typografi'.

I våra bilder använder vi OceanWP.

Klicka på inställningen 'Typografi' eller liknande. Vid det här laget ser du vanligtvis alla olika typer av text som används i temat, till exempel Rubrik 1 och Sidtitel.

För att ändra texten i dina inlägg och sidor, klicka på sektionen 'Brödtext' eller liknande.

För att anpassa textfärgen, hitta sektionen 'Font Color'.

Klicka sedan på 'Välj färg'.

Detta öppnar väljaren. Du kan antingen använda en av de färdiga färgerna, välja en ny färg med hjälp av inställningarna eller skriva in en hexkod.

Om du vill återställa temat standardfärg när som helst, klicka helt enkelt på 'Default'.

Du kan också använda dessa inställningar för att ändra teckenstorlek, stil, bokstavsavstånd och mer.

När du är nöjd med hur texten ser ut, klicka på knappen ‘Publicera’ högst upp på skärmen.

Metod 3: Hur man ändrar textfärg i Full Site Editor (endast blockteman)

Om du använder ett blockbaserat tema som ThemeIsle Hestia Pro eller Twenty Twenty-Three, då är processen för att ändra temats textfärg lite annorlunda.

För att anpassa texten med Full Site Editor, gå till Teman » Redigerare.

Nu kommer du att se flera menyer för att anpassa utseendet på din webbplats.

Här vill du välja 'Stilar'. Den här sektionen definierar de globala färgerna, typografin och layouten för din webbplats.

På nästa skärm ser du några stilkombinationer att välja mellan. Om du vill ändra hur ditt blocktema ser ut helt och hållet, kan du bara välja ett av de tillgängliga alternativen.

Men för demonstrationsändamål kommer vi att fortsätta och klicka på pennikonen 'Redigera stilar'.

Du kommer nu att komma till den fullständiga webbplatsredigeraren, och fliken Stilar kommer att vara öppen.

Låt oss klicka på 'Färger'.

Sidofältet visar dig några element vars färginställningar du kan ändra, som text, länkar, bildtexter, knappar och rubriker.

Var och en kommer att ha olika färginställningar, så se till att utforska dem för att se vad de kan göra.

Låt oss använda ett exempel genom att klicka på 'Rubrik'.

För att ändra rubrikfärgen kan du antingen välja en av de fördefinierade temafärgerna eller använda en anpassad genom att klicka på färgväljaren.

När du är nöjd med hur dina textfärger ser ut, klickar du bara på knappen 'Spara'. Alla ändringar du gör kommer sedan att tillämpas på alla dina sidor och inlägg.

För mer information, kolla in vår nybörjarguide till WordPress Full Site Editing.

Metod 4: Hur man ändrar textfärg med CSS-kod (Mer anpassningsbar)

Om du vill ha mer kontroll över din webbplats textfärger eller behöver ändra ett element som inte är tillgängligt i dina temainställningar, då är det en utmärkt lösning att lägga till anpassad CSS-kod.

Denna kraftfulla metod är mycket anpassningsbar och låter dig rikta in dig på specifika texttyper, som rubriker eller stycken, över hela din webbplats.

Den goda nyheten är att du kan anpassa texten över hela webbplatsen genom att lägga till anpassad CSS. Ännu bättre, den här metoden låter dig definiera olika färger för specifika typer av text, som rubrik 1 (h1) eller styckestext (p).

Eftersom redigering och anpassning av WordPress-teman kan variera från tema till tema, rekommenderar vi att du använder WPCode för att lägga till anpassad CSS på din webbplats.

WPCode är det bästa pluginet för kodavsnitt som används av över 1 miljon WordPress-webbplatser. Det gör det enkelt att lägga till anpassad CSS, PHP, HTML och mer utan att behöva redigera några kärnfiler i WordPress.

Det första du behöver göra är att installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Kodavsnitt » Lägg till kodavsnitt.

Här ser du alla färdiga WPCode-utdrag som du kan lägga till på din webbplats.

För muspekaren helt enkelt över 'Lägg till din anpassade kod' och välj sedan 'Använd kodavsnitt' när det visas.

Till att börja med, skriv in en titel för det anpassade kodavsnittet. Detta kan vara vad som helst som hjälper dig att identifiera avsnittet i WordPress-instrumentpanelen.

Därefter öppnar du rullgardinsmenyn 'Kodtyp' och väljer 'CSS-utdrag'.

Därefter kan du lägga till den anpassade CSS:en i den lilla kodredigeraren. Du behöver skriva in selektorn för den typ av text du anpassar, följt av hexkoden för den färg du vill använda.

Du kan till exempel ändra färgen på styckestexten genom att lägga till följande:

p { color:#990000; }

Om du vill använda en annan färg för webbplatsens rubriker, måste du använda h1, h2, h3 eller liknande selektorer.

Du kan se detta i bilden nedan.

Om du är osäker på vilken hexkod du ska använda, kan du använda en webbplats som HTML color codes.

När du är nöjd med kodavsnittet, skrolla till sektionen 'Insertion'. WPCode kan lägga till CSS till olika platser, som efter varje inlägg, endast frontend, eller endast admin.

För att ändra texten över hela din WordPress-blogg, klicka på 'Auto Insert' om det inte redan är valt. Öppna sedan rullgardinsmenyn 'Location' och välj 'Site Wide Header.'

När du har gjort det, skrolla till toppen av skärmen och klicka på växlingsknappen 'Inaktiv' så att den ändras till 'Aktiv'.

Klicka slutligen på ‘Spara kodavsnitt’ för att göra CSS-kodavsnittet live.

Nu, om du besöker din webbplats, kommer du att se den anpassade texten live.

Om du vill använda en annan textfärg när som helst eller bara lägga till mer CSS i det kodavsnittet, gå helt enkelt till Kodavsnitt » Kodavsnitt. Håll muspekaren över kodavsnittet du just skapade och klicka på 'Redigera' när det visas.

Du kan nu redigera kodavsnittet för att använda den nya färgen och sedan klicka på ‘Spara avsnitt’ för att göra ändringen live på din webbplats.

Förutom textfärg kan du också använda WPCode för att ändra standardfärgen när du markerar text eller aktivera textmarkeringar på en sida och i inläggsinnehåll.

Metod 5: Hur man ändrar textfärg i en sidbyggare

Ofta vill du att dina landningssidor ska se annorlunda ut än resten av din webbplats. Detta gör att de sticker ut, vilket kan ge dig fler konverteringar.

Detta är särskilt viktigt om du har flera landningssidor, till exempel en för en viral väntelista och en annan för en Google Ads-kampanj. Var och en av dessa sidor kan behöva sin egen unika design och färgschema för att effektivt rikta sig mot olika målgrupper eller marknadsföringskanaler.

Om du vill skapa en landningssida eller en försäljningssida, rekommenderar vi att du använder SeedProd. Av alla sidbyggare vi har provat är det den bästa på marknaden och har en lättanvänd dra-och-släpp-sidbyggare.

SeedProd levereras med över 90 block som du enkelt kan dra och släppa på din layout. Du kan sedan finjustera dessa block på många olika sätt, inklusive att ändra textfärgen.

Om du använder en anpassad sida för att få fler konverteringar, fungerar SeedProd med många populära tredjepartsverktyg som du kanske redan använder för att hantera konverteringar.

Dessa inkluderar topptjänster för e-postmarknadsföring, WooCommerce, Google Analytics och mer.

Först måste du installera och aktivera SeedProd. För mer detaljer, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter att ha aktiverat pluginet kommer SeedProd att be om din licensnyckel.

Du hittar denna information i ditt konto på SeedProd-webbplatsen. Efter att ha angett licensnyckeln, klicka på knappen 'Verifiera nyckel'.

Därefter behöver du besöka SeedProd » Sidor och klicka på knappen 'Lägg till ny landningssida'.

Därefter är det dags att välja en mall. SeedProd har över 300 professionellt designade mallar som du kan anpassa med dina egna bilder, text, färger och mer.

För att välja en mall, för helt enkelt muspekaren över den och klicka sedan på ikonen ‘Kryssruta’.

Vi använder mallen 'Juicy Sales Page' i alla våra bilder, men du kan använda vilken design som helst.

Ange sedan ett namn för den anpassade sidan. SeedProd skapar automatiskt en URL baserad på sidans titel, men du kan ändra denna URL till vad du vill.

När du är nöjd med informationen du har angett, klicka på knappen 'Spara och börja redigera sidan'.

Därefter tas du till SeedProd dra-och-släpp-sidbyggare, där du kan anpassa din mall.

SeedProd-redigeraren visar en liveförhandsgranskning av din design till höger och vissa blockinställningar till vänster.

Menyn till vänster har också block som du kan dra till din layout.

Du kan till exempel dra och släppa standardblock som knappar och bilder eller använda avancerade block som nedräkningstimer, roterande vittnesmål, sociala delningsknappar och mer.

SeedProd kommer också med 'Sektioner', som är samlingar av block som ofta används tillsammans. Till exempel har SeedProd en rubrik, hjältebild, uppmaning till handling, vittnesmål, kontaktformulär, vanliga frågor, funktioner, sidfotssektioner och mer. Detta kan hjälpa dig att snabbt skapa en professionellt designad sida.

För att gå igenom de olika sektionerna, klicka helt enkelt på fliken 'Sektioner'. För att förhandsgranska en sektion, för muspekaren över den och klicka sedan på förstoringsglaset.

För att lägga till sektionen i din design, klicka helt enkelt på 'Välj den här sektionen'.

Detta lägger till sektionen längst ner på din sida.

Du kan flytta sektioner och block i din layout med dra och släpp.

För att anpassa ett block, klicka helt enkelt för att välja det i din layout. Menyn till vänster visar nu alla inställningar du kan använda för att konfigurera det blocket.

För att ändra textfärgen, klicka helt enkelt på ett block som innehåller text.

I menyn till vänster, välj fliken 'Advanced'. Under 'Styles', klicka på 'Color'.

Detta öppnar ett popup-fönster där du kan välja en ny textfärg.

Ett annat alternativ är att skriva in en hexkod i fältet 'Hex'.

Du kan nu ändra textfärgen för alla andra block genom att helt enkelt följa samma process som beskrivs ovan.

När du är nöjd med hur sidan ser ut är det dags att publicera den genom att klicka på knappen 'Spara'. Välj sedan 'Publicera'.

Om du besöker din webbutik, blogg eller webbplats, kommer du att se den nya sidan i aktion, komplett med dina anpassade textfärger.

Vanliga frågor om att ändra textfärg

Här är några frågor som våra läsare har ställt om att ändra textfärg i WordPress:

Vad är det enklaste sättet att ändra textfärg för en hel webbplats?

Det bästa sättet är att använda ditt temas inbyggda inställningar. För klassiska teman hittar du detta i WordPress Customizer under Utseende » Anpassa, vanligtvis i en flik för 'Typografi' eller 'Färger'.

För moderna blockteman kan du ställa in globala färger genom att gå till Teman » Redigerare och klicka på ikonen 'Stilar'. Detta säkerställer ett konsekvent utseende på alla dina sidor.

Varför kan jag inte ändra min textfärg i WordPress?

Detta problem uppstår ofta när ditt temas stilmall (CSS) åsidosätter inställningarna du väljer i redigeraren. Temats kod kan ha en mer specifik regel för textfärg. I dessa fall är det mest pålitliga sättet att lägga till din egen anpassade CSS (som visas i Metod 4) för att tvinga fram den färgändring du vill ha.

Vad är bästa praxis för textfärg och tillgänglighet?

För tillgänglighet är det mycket viktigt att säkerställa hög kontrast mellan din text och dess bakgrundsfärg. Detta gör ditt innehåll läsbart för besökare med synnedsättning. Vi rekommenderar att använda ett onlineverktyg som WebAIM Contrast Checker för att säkerställa att dina färgkombinationer uppfyller tillgänglighetsstandarder.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du ändrar textfärg i WordPress. Du kanske också vill titta på vår handledning om hur man lägger till en teckenstorleksändrare i WordPress och sätt att skapa en mobilvänlig WordPress-webbplats.

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.