Så här ändrar du textfärgen i WordPress (4 enkla metoder)

Vill du ändra textfärgen i WordPress?

Färg kan rikta uppmärksamheten mot en pages viktigaste content och stärka din websites varumärke. Att Changed textfärgen kan också göra din site lättare att läsa, särskilt för personer med synrelaterade problem.

I den här guiden visar vi hur du enkelt kan ändra textfärgen på din website i WordPress.

Varför ändra textfärgen i WordPress?

Det finns många anledningar till varför du kanske vill ändra textfärgen i WordPress. Du kanske gillar att markera en call-to-action på en landing page, eller så kanske du vill använda färgade subheadings på din site.

Ibland kanske du till och med vill ändra textfärgen på en hel website. Till exempel kanske ditt WordPress theme använder en grå font, men du skulle föredra att använda svart för bättre kontrast med bakgrundsfärgen.

Du kan också använda färg för att väcka en känsla hos dina besökare. Många tycker till exempel att blått skapar en känsla av tillit och tillförlitlighet. Om du vill veta mer kan du vänligen läsa vår guide om hur du väljer ett perfekt färgschema för din website i WordPress.

Med detta sagt, låt oss se hur du kan ändra textfärgen i WordPress. Använd bara länkarna under för att hoppa till den metod du föredrar:

Metod 1: Använda Block Editor (bäst för små textmängder)

Om du bara vill ändra några ord, ett stycke eller en heading i ett post kan du använda WordPress content editor.

För att komma igång öppnar du det post eller den page där du vill ändra textfärgen eller skapar en new page.

Om du inte redan har gjort det skriver du in den text som du vill customize. Beroende på texten kan du behöva add to ett Paragraph, Heading eller något annat block som godkänner text. För hjälp med detta, ta en titt på vår guide om hur du använder WordPress block editor.

Så snart du har en text är du redo att ändra dess färg.

Ändra textfärgen för ett block

I det här första exemplet ska vi ändra textfärgen för ett helt block. Detta är ett bra sätt att markera en hel section av content, t.ex. ett helt stycke.

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

När du har gjort det hittar du sectionen ”Color” och klickar på ”Text”.

Den visuella editorn kommer nu att visa några färger som kompletterar ditt WordPress theme. You can simply click on any color to change all the text inside that block.

Om du vill använda en annan färg klickar du bara på boxen högst upp i popupen.

Detta öppnar en väljare där you kan välja en new färg på fonten.

Ett annat alternativ är att skriva in en hex-kod, vilket är HTML-koden för en viss färg. Detta är användbart om du vill använda en mycket specifik färg, till exempel den exakta röda nyansen i logotypen på din website.

Om du ej är säker på vilken hex-kod du ska använda kan det vara bra att klura på en site som HTML color codes. Här kan du utforska olika färger och få deras hex-koder.

När du har en kod klistrar du in eller skriver den i boxen ”Hex”.

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

Alternativen 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 allt”.

Ändra textfärgen för ett ord eller en fras

Ibland kanske du bara vill ändra färg på ett visst ord, en viss fras eller mening, t.ex. call-to-action på din försäljningssida.

För att göra detta markerar du bara det ord eller den fras som du vill ändra i WordPress Block Editor. Klicka sedan på den lilla nedåtpilen i toolbaren för content editor och klicka på ”Highlight”.

Detta öppnar en popup som visar några färger som ser bra ut med ditt nuvarande theme.

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

Metod 2: Använda Theme Customize (endast för Classic Themes)

Färg kan dra uppmärksamhet till en pages viktigaste content, men massor av olika färger kan bli överväldigande. Med detta i åtanke vill du vanligtvis använda samma textfärg på större delen av din website i WordPress.

Att ändra varje page och post manuellt med hjälp av Block Editor skulle ta lång tid, så istället rekommenderar vi att du ändrar själva temat med hjälp av Theme Customize.

För att komma igång, gå till Appearance ” Customize.

Du måste nu hitta temats textinställningar. Alla teman är olika, men du behöver vanligtvis leta efter ett alternativ för ”Typografi”.

I våra images använder vi OceanWP.

Gå vidare och klicka på ”Typography” eller liknande settings. Vid denna punkt kommer du vanligtvis att se alla de olika typer av text som används i temat, till exempel Heading 1 och Page Rubrik.

Om du vill ändra texten i dina posts och pages klickar du på ”Body” eller liknande section.

För att customize textfärgen, se ”Font Color” section.

Klicka sedan på ”Select Color”.

Då öppnas färgväljaren. Du kan antingen använda en av de färdiga färgerna, välja en new färg med hjälp av Settings eller skriva in en hex-kod.

Om du vill återställa temats standardfärg vid något tillfälle, klickar du bara på ”Default”.

Du kan också använda dessa Settings för att ändra storlek på fonten, stilen, bokstavsavståndet med mera.

När du är nöjd med hur texten ser ut klickar du på knappen ”Publicera” högst upp på vyn.

Metod 3: Använda hela Site Editor (endast för Block Themes)

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

Om du vill customize texten med hjälp av Full Site Editor går du till Themes ” Editor.

Nu kommer du att se flera menyer för att customize utseendet på din website.

Här vill du selecta ”Styles”. This section defines the global colors, typography, and layout for your website.

På nästa vy kommer du att se några stilkombinationer att välja mellan. Om du vill ändra hur ditt block-tema ser ut helt, kan du bara välja ett av de tillgängliga alternativen.

Men för demonstrationsändamål kommer vi att gå vidare och klicka på knappen ”Edit styles”.

Du kommer nu till Full Site Editor och fliken Styles är öppen.

Vi klickar på ”Färger”.

I sidebaren visas några element vars färginställningar du kan ändra, gillar text, links, captions, knappar och headings.

Var och en har 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 clicka på ”Heading”.

För att ändra färgen på head kan du antingen välja en av de fördefinierade färgerna i temat eller använda en egen genom att clicka på färgväljaren.

När du är nöjd med hur dina textfärger ser ut klickar du bara på knappen ”Save”. Alla ändringar du gör kommer sedan att tillämpas på alla dina pages och posts.

För mer information, kontrollera vår guide för nybörjare till WordPress Full Site Editing.

Metod 4: Ändra textfärgen med CSS-kod (rekommenderas)

Beroende på ditt theme kanske det inte är möjligt att ändra texten på hela din site med hjälp av customizer-menyerna. Ett alternativ är att ändra varje textstycke manuellt med hjälp av en av metoderna i det här inlägget. Detta skulle dock ta mycket tid och ansträngning.

Den goda nyheten är att du kan customize texten över en hel site genom att lägga till custom CSS. Ännu bättre är att den här metoden allow you att definiera olika färger för specifika typer av text, till exempel Heading 1 (h1) eller paragraftext (p).

Eftersom WordPress temareditering och customize kan ändras från tema till tema rekommenderar vi att du använder WPCode för att add to custom CSS till din site.

WPCode är det bästa code snippets tillägget som används av över 1 miljon WordPress-webbplatser. Det gör det enkelt att add to custom CSS, PHP, HTML, och mer utan att behöva edit några core WordPress-filer.

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

Efter aktivering, head över till Code Snippets ” Add Snippet.

Here, you will see all the ready-made WPCode snippets you can add to your site. Dessa inkluderar ett snippet som allow you att helt inaktivera comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.

Håll bara musen över ”Add Your Custom Code” och välj sedan ”Use snippet” när det visas.

Till att börja med skriver du in en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

Efter det öppnar du dropdown ’Code Type’ och väljer ’CSS Snippet’.

Därefter kan du add to den customize CSS till den lilla code editor. Du måste skriva in väljaren för den typ av text som du customiserar, följt av hex-koden för den färg du vill använda.

Du kan t.ex. ändra färg på stycketexten genom att lägga till följande:

p { color:#990000; }

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

Du kan se detta på bilden under.

Om du ej är säker på vilken hex-kod du ska använda, kan du använda en site som HTML color codes.

När du är nöjd med snippet, rulla till ”Insertion” section. WPCode kan add to CSS till olika locations, till exempel efter varje post, endast front-end eller endast admin.

Om du vill ändra texten i hela din blogg i WordPress klickar du på ”Auto Insert” om det inte redan är valt. Öppna sedan dropdown-menyn ”Location” och välj ”Site Wide Header”.

När du har gjort det rullar du högst upp på vyn och klickar på toggeln ”Inaktiverad” så att den ändras till ”Aktiv”.

Slutligen klickar du på ”Save Snippet” för att göra CSS-snippet live.

Nu, om du besöker din site, kommer du att se den customize texten live.

Om du vill använda en annan textfärg någon gång eller bara add to mer CSS till det snippet, så går du helt enkelt till Code Snippets ” Code Snippets. Här hoverar du musen över det snippet du just skapat och klickar på ”Edit” när det visas.

You can now edit the code snippet to use the new color and then click on ”Save Snippet” to make the change live on your website.

Förutom textfärg kan du också använda WPCode för att ändra standardfärgen när du väljer en text eller aktivera textmarkeringar på en page och i ett post content.

Metod 5: Ändra textfärgen med hjälp av en Page Builder (bäst för Landing Pages)

Ofta vill du att dina landing pages och försäljningssidor ska se annorlunda ut än resten av din website. Detta gör att de sticker ut, vilket kan ge dig fler konverteringar.

Om du vill ändra textfärgen för en landing page eller försäljningssida rekommenderar vi att du använder SeedProd. Det är det bästa plugin-programmet för landing pages för WordPress och har en användarvänlig drag and drop page builder.

SeedProd levereras med över 90 block som du helt enkelt kan drag and drop 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 custom page för att få fler konverteringar, så fungerar SeedProd med många populära tredjeparts tools som du kanske redan använder för att hantera konverteringar.

Dessa inkluderar högst upp e-post marknadsföringstjänster, WooCommerce, Google Analytics, och mer.

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

När du har aktiverat pluginet kommer SeedProd att be om din license key.

You can find this information in your account on the SeedProd website. När du har enter license key, fortsätt och click the ”Verify Key” button.

Därefter måste du besöka SeedProd ” Pages och klicka på knappen ’Add New Landing Page’.

Efter det är det dags att välja en template. SeedProd har över 300+ professionellt utformade templates som du kan customize med dina egna images, text, färger och mycket mer.

För att välja en template, hoverar du bara musen över den och klickar sedan på ikonen ”Checkmark”.

Vi använder templaten ”Juicy Sales Page” i alla våra images, men du kan använda vilken design som helst.

Gå sedan vidare och skriv in ett namn för den customize page. SeedProd kommer automatiskt att skapa en URL baserat på sidans Rubrik, men du kan ändra denna URL till vad du vill.

För att hjälpa search engines att förstå vad sidan handlar om kan du add to några relevanta keywords. Detta kan förbättra din sökmotorsoptimering i WordPress.

När du är nöjd med den information du har enter klickar du på knappen ”Save and Start Editing the Page”.

Därefter kommer du att tas till SeedProd drag and drop page builder, där du kan customize din template.

SeedProd editor visar en live preview av din design till höger och några block editor inställningar till vänster.

I menyn till vänster finns också block som du kan dra till din layout.

Du kan till exempel dra and drop standardblock som knappar och images eller använda avancerade block som nedräkningstimer, animerade headlines, delningsknappar med mera.

SeedProd kommer också med ”Sections”, som är samlingar av block som ofta används tillsammans. Till exempel har SeedProd en header, hero image, call-to-action, testimonials, kontaktformulär, Vanliga frågor, features, footer sections, och mer. Detta kan hjälpa dig att skapa en professionellt utformad page, snabbt.

För att titta igenom de olika sektionerna klickar du bara på tabben ”Sections”. För att få en preview av en section, hovera musen över den och click sedan på magnifying glass icon.

To add the section to your design, simply click on ”Choose This Section”.

Detta kommer att add to section längst ner på din page.

Du kan flytta runt sektioner och block i din layout med hjälp av drag and drop.

För att customize ett block klickar du bara för att välja det i din layout. I menyn till vänster visas nu alla de Settings som du kan använda för att konfigurera blocket.

För att ändra textfärgen klickar du bara på ett block som har text.

I menyn till vänster väljer du tabben ”Advanced”. Under ”Styles” klickar du på ”Color”.

Detta öppnar en popup där du kan välja en new textfärg.

Ett annat alternativ är att skriva in en hex-kod i fältet ”Hex”.

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

När du är nöjd med hur page ser ut är det dags att publicera den genom att clicka på knappen ”Save”. Välj sedan ”Publicera”.

Om du besöker din online store, blogg eller website kommer du att se den nya page i action, komplett med your custom text colors.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du ändrar textfärgen i WordPress. You may also like our tutorial on how to increase your blogg traffic and our expert pick of the best email marketing services.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.