If you are a new blogger just starting out your blogging journey, certain things can look intimidating. Simple things like changing font size and color can seem like a Herculean task.
Luckily, WordPress has progressed a lot over the years. Previously, changing these elements was not so simple, and were less intuitive.
But as of today, things have changed dramatically. Changing font colors has become simple. In fact, there are multiple methods available to achieve the desired colors.
In this quick tutorial, I am going to show three quick methods that you can use for changing font color in your WordPress site.
However, here is a word of advice: DO NOT USE OUTRAGEOUS COLORS.
The colors you use can make or break your website. Colors can be attractive or repelling. To top that, what’s attractive to you might be disgusting to others.
So, your choice of colors will be a vital factor. Choose wisely. There are 3 methods you can use to change your font color.
Enough talks! Let’s start learning!
1. Set Colors Globally Using Customizer
Most likely you are using a different theme rather than the default theme that comes bundled with the default WordPress installation.
I will assume that you are using some premium theme.
When you install a theme, it will come with a set of customization settings that usually integrate with the Live Customizer.
You can change the text colors through those settings.
In this example, I will use GeneratePress premium theme. However, for most of the premium themes, the process will remain the same.
To begin with, go to Dashboard >> Appearance >> Customize.
Once you click on Customize, it will open the customization options in the Live Customizer. From there, locate the option for ‘Colors.’
Clicking on the ‘Colors’ option will open the panel where you can set the colors for Headings, Body Text, Links, Navigation, Widgets, etc.
This is what you notice in the case of GeneratePress:
Now, you can edit the colors as per your choice. For instance, if you want to change the colors for the normal text in your blog posts, you can find the options for that in ‘Body.’ If you want to change the color of links, content title, headings, etc., you can find the options in ‘Content.’
This is what you will generally see when you open any option:
Just remember that whatever you are setting in the theme customization panel will be set globally across your website.
So, if you are setting the link color to ‘Blue,’ all links on your website will have that color. If you set the color of the content title to be ‘Purple,’ every time you write a post, the title color will be displayed as Purple!
As I said earlier, the method of changing the text color through theme customization options will be more or less the same for all themes.
If you are using a free theme, color customization might not be available. That’s a deliberate exclusion, because developers of these themes want you to purchase their premium themes.
2. Changing Text Colors in Individual Blog Posts
While method one focuses on setting text color globally, you can change text colors for individual posts even if you have set something globally.
This feature of WordPress is particularly helpful for specific text decorations that you may use for highlighting certain parts of your content.
You can change the text color for individual posts directly from inside the editor. Since Gutenberg is the default editor for WordPress, I will show examples using that. If you are using Classic editor, there are options for changing text colors in that as well.
Let’s learn!
Open your WordPress editor and type something.
Here is an example:
With the Gutenberg editor, there is no way of changing the text color for the title. The color you set globally is the one that will apply.
However, you can change the text color or the color of the headings and subheadings in the post body.
To change the color of the body text, click on the text block (and select the text) to see different options pop up for that text block.
Now, click on the small down arrow next to the link icon. This will give you the option for text color.
In the image above you can see the text color option (highlighted using blue box) showing in the dropdown menu.
However, that’s not the only way.
On the right side of the editor, you can switch to the Block tab (highlighted using red) and then click on the Color settings menu (also highlighted using red box) to select the color.
No matter which route you take, you will have the option of selecting from an existing palette of colors or you can set custom colors.
When you click on the Custom color link, a new color picker will show up where you can select the color you want.
Now select the color you want! This will change the text color for your blog post.
Here is how the end result looks like:
Congratulations! You have successfully changed the text color.
Just a word of advice – don’t make your text too darn colorful. That repels readers!
3. Use CSS to Change Text Color
I don’t recommend this method because of two reasons:
- There is no reason why you should be using extra codes for changing text colors when you already have that option available through customization options.
- If you don’t do it right, it will not work. You need to use the right CSS classes to get the code working.
So, it is better that you stick with the simpler methods instead of making things complex unnecessarily.
You need to put the codes in the Additional CSS section of the theme settings that you can access from Dashboard >> Appearance >> Customize >> Additional CSS.
When you open the Additional CSS segment, you can put in the CSS codes for changing text colors. This is how the code will look like for headings:
h1, h2, h3, h4, h5, h6 {
color: #ff005c;
}
To change the post title color, you can use the code that looks something like this:
.entry-title a {
color: #1F618D;
}
The CSS classes may be different depending on your theme. So, if you are not aware of the CSS classes, applying these CSS codes will not be possible. You might need help from the theme developers.
Final Thoughts
There is no denying that colors indeed play a vital role in web designing. While your readers are more concerned about your content quality, they may not realize that the colors on your website may be one of the reasons why they don’t like your site.
Color plays a deep psychological role. So, make sure that you are using soothing colors that are known to work. If you don’t know which colors to use, you can always use help from various online resources. Here is one for you to go through.
Tweaking your colors slightly can increase pageviews and session duration, while reducing the bounce rate. The colors you select can increase your conversion rate. So, be wise!
