Sunday, November 29, 2020
Home Blogging How to Change the Text Color in WordPress (3 Easy Methods)

How to Change the Text Color in WordPress (3 Easy Methods)

Recently, certainly one of our readers requested if there was a simple manner to change the text color in WordPress?

The reply is sure. You can simply change your font shade in WordPress throughout your complete website, and even only for a single phrase inside your put up content material.

In this information, we’ll present you the way to simply change the textual content shade in WordPress, step-by-step.

Easily change text color in WordPress

There are a lot of explanation why you may want to change the textual content shade in your posts or pages. Maybe you’d like to emphasize a key phrase, or maybe you need to use coloured subheadings on a specific web page.

Alternatively, you may want to change the textual content shade throughout your complete website. Perhaps your theme makes use of a grey shade for textual content, however you’d moderately make it black, or a darker grey, for higher readability.

In this tutorial, we’ll be overlaying the following strategies:

  • Changing the textual content shade utilizing the visible editor (nice for altering just a few phrases, a paragraph, or a heading when writing content material).
  • Changing the textual content shade in the theme customizer (the finest manner to change font colours throughout your complete website, however not supported by all themes).
  • Changing the textual content shade utilizing CSS code (appropriate for altering the font shade throughout your complete website with any themes).

Just click on a kind of hyperlinks to soar straight to that methodology.

Method 1. Changing the Text Color Using the Visual Editor

You can use the default WordPress editor to put phrases, paragraphs, and even subheadings in a unique shade out of your primary textual content.

An example of colored text in a WordPress page

Here’s how one can change your textual content shade utilizing the block editor.

First, you’ll want to edit the put up or web page that you really want to change, or create a brand new one.

Next, kind in your textual content. You’ll want to create a paragraph block or a heading block as acceptable. For assist with this, check out our tutorial on how to use the WordPress block editor.

Once your textual content is in place, you’ll be able to change the shade.

Changing the Text Color of a Block

For this primary instance, we’re going to change the textual content shade of the complete block.

Simply click on on the block and the Block Settings panel ought to open up on the proper hand aspect of your display screen. Next, click on on the arrow for ‘Color settings’ to broaden that tab. You’ll see the textual content shade settings right here.

Picking a text color for the whole block in WordPress

Now, you’ll be able to choose a brand new shade for the textual content. The visible editor will present you some choices based mostly in your theme. You can merely click on on certainly one of these to change your textual content shade.

Alternatively, in case you have a selected shade in thoughts, click on the ‘Custom Color’ hyperlink. This will open up a shade picker the place you’ll be able to manually choose a shade. You may use this to kind in a hex code.

Picking a custom text color for your block

If you modify your thoughts and need to return to the default textual content shade, simply click on the ‘Clear’ button under the shade choices:

Setting your block back to the default text color

Pro Tip: If you need to change the background shade for a block, you are able to do that right here too.

Changing the Text Color of a Word or Phrase

What for those who solely need to change the shade of 1 or two phrases? That’s straightforward utilizing the block editor as nicely.

First, you’ll want to spotlight the phrase(s) that you really want to change. Then, click on the small downward arrow on the content material editor toolbar.

Highlight the words that you want to change the color of

Next, merely click on on the ‘Text Color’ hyperlink at the backside of the dropdown checklist:

Click the 'Text Color' link at the bottom of the dropdown list

You’ll now see the similar shade choices as for the complete block. Again, you’ll be able to choose from certainly one of the default choices or use the ‘Custom color’ hyperlink to choose any shade you need.

Choose the text color for your highlighted word(s)

The shade choices aren’t restricted to paragraph blocks. You may change the textual content shade of heading blocks. As with paragraph blocks, you’ll be able to set textual content shade for the complete block in the block settings. Alternatively, you’ll be able to spotlight particular person phrases and alter their shade.

Changing the text color of a heading block in WordPress

Note: You can’t set a background shade for heading blocks.

You may change the textual content shade in a listing block, however solely by highlighting the phrase(s) and utilizing the toolbar. There’s no choice in the block settings to change the textual content shade for the complete of a listing block.

Changing the Font Color Using the Classic Editor

If you’re nonetheless utilizing the basic WordPress editor, then you’ll be able to change the font shade utilizing the toolbar.

In the basic editor, click on on the Toolbar Toggle on the far proper. You’ll then see a second row of icons:

Click the Toolbar Toggle button to see the second row of icons

Now, you’ll be able to choose your textual content and alter the font shade utilizing the font shade dropdown.

Use the text color button in the classic editor

Method 2. Changing the Text Color in the Theme Customizer

What in order for you to change the textual content shade throughout your complete web site? Many of the finest WordPress themes will permit you to do that utilizing the theme customizer.

For this instance, we’re utilizing the OceanWP theme. It’s certainly one of the high free themes accessible for WordPress.

In your WordPress dashboard, go to Appearance » Customize to open up the Theme Customizer.

Go to Appearance then Customize in your WordPress dashboard

Next, you want to search for an choice equivalent to ‘Typography’. The accessible choices, and what they’re known as, will range relying in your theme.

Select 'Typography' or a similar option in the theme customizer

Let’s go forward and click on on the Typography tab, or an equal choice. Next, search for a setting the place you’ll be able to change the textual content of your posts and pages. In OceanWP, that is known as the ‘Body’ textual content. You want to click on on this, so that you’ll can customise the font shade and extra.

Select the Body text to modify in the customizer

When you click on on the Font Color selector, you’ll see a shade picker. Choose no matter shade you need to use in your textual content. This will change the textual content shade in all your posts and pages.

Picking the color for your body text using the theme customizer

You may change your heading colours in an analogous manner, by utilizing the choices to change H1, H2, and so forth.

You may see : How to Disable Automatic Updates in WordPress

Once you’re blissful along with your modifications, click on the ‘Publish’ button at the high of the display screen.

Publishing your changes to your website

Tip: Choosing black or darkish grey textual content on a white or very mild background is often finest for readability.

Method 3. Changing the Text Color Using CSS Code

What in case your theme doesn’t have the choice to change the textual content shade?

You can nonetheless change font shade throughout an entire website by utilizing the theme customizer. Go to Appearance » Customizer in the WordPress dashboard.

At the backside of the checklist of choices, you’ll see a tab that reads ‘Additional CSS’.

Open up the Additional CSS section of the theme customizer

Next, click on on the Additional CSS tab, and also you’ll see some directions plus a field the place you’ll be able to enter CSS code.

For starters, you’ll be able to copy this code into the field. After that, you’ll be able to change the 6 numbers to the hex code of your chosen shade.

p shade:#990000;

Enter the CSS for changing the paragraph color into the theme customizer

This will change the font shade of the common textual content in all of your posts and pages to darkish purple (or no matter shade you selected), like this:

Text color customized site-wide using CSS code

If you need to change the shade of the headings inside your put up, you’ll be able to add this code as an alternative:

h2 shade:#990000;

Again, change the hex code to no matter shade you need.

If you’re not aware of CSS or need a beginner-friendly CSS editor that permits you to simply customise the complete kinds of your web site, then we suggest trying into CSS Hero. It’s a strong visible editor that permits you to customise the kinds of your complete website.

CSS Hero plugin

We hope this tutorial helped you find out how to change the textual content shade in WordPress. You may additionally like our tutorials on how to change the font measurement in WordPress, and how to add customized fonts in WordPress.



Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

An Internship Guide about DRDO

Defense Research Development Organization (DRDO) provides an internship to graduates and submit graduate college students. If you're on the lookout for a profession in DRDO...

How to Become a Pilot: Eligibility, Training, Study & Salary

Every little one dreamt of flying. Some wished to fly as passengers whereas others wished to grow to be pilot, taking plane hovering into...

10 Best Online Money Transfer Apps & e-Wallets in India

There was a time when sending cash from one place to a different concerned standing in lengthy financial institution/publish workplace queues, patiently awaiting your...

14 Best Part Time Jobs in Chennai (+Online Jobs)

Chennai is a quickly rising metropolis with a booming auto business. Not simply auto business however Chennai has turn out to be hub for FMCG...

Recent Comments