How to Change Text Color in WordPress 1

How to Change Text Color in WordPress

Colors are one of the basic elements of web design that can evoke certain emotions and win the reaction of your target audience. They have the power to increase brand awareness and influence the way someone perceives your brand, encourage people to take action, convey messages and emotions, affect the readability of text, and more.

While you’re building your WordPress website, you may feel like the default text colors aren’t really working for you, so naturally you’ll want to change them. In this article, we will show you how to change text color in WordPress with five different methods:

How to Change Text Color in WordPress Using Qode Theme Options

Even when you buy a WordPress theme that fits all your needs, you may want to tweak some of its elements to make them better fit the style you’re trying to achieve.

Some themes on the market allow you to control the visual aspect of your website and change the text colors, usually by clicking on it. Appearance > Customize and then selecting typography related options (which is where the font color settings are placed).

But Qode themes come with significantly more customization options, allowing you to change the colors of almost every section on your website. You can do go to your theme’s general options and change not only the text color but also the font size, weight, height and more (the title of the basic options section in the menu usually contains the theme’s name or the profile name + options, eg. Leitmotif Options, Mikado Optionsetc.).

For example, if you have Bridge installed, you can go to: Qode Options > Fonts and there edit all general settings related to typography.

Qode Options Fonts

Depending on a theme, we also in the header and footer sections of users’ sites, in headers, etc. let them change the text color. All you have to do is select the part you want to change (from the general options) and adjust the text color as you wish.

The quest to change colors on your WordPress website has been significantly simplified with the release of our new Qode Interactive framework, which takes the user experience to a whole new level. This powerful framework includes several practical features that make the user’s website creation experience more comfortable; one of these To search choice. While navigating the general options of your Qode theme with the new framework, you will notice the search bar at the top of the page. you can write Colors and you will see the list of all partitions where it is possible to change color.

In relation :  How to Add Emojis to WordPress
Qode New Frame

We are also no strangers to packaging powerful shortcodes that allow users to create websites that fully fit their needs, and therefore, depending on a theme, we can add some shortcodes that also contain text content. Picture with Text short code. It would be fair to let our users customize the shortcodes as well, and that’s why we’ve included options that allow text color change.

Image with Text Shortcode

That’s it for the general theme options. Now let’s see how to change text colors on individual pages.

How to Change Text Color in WordPress Using the Classic Editor

It takes a few clicks to change the text colors for anyone using the Classic Editor.

For starters, go to the page you want to edit or create a new one and add the text content. From the toolbar menu, Toolbar Toggle icon to display the second line of options Text Color option is placed.

Toolbar Toggle

Then highlight the parts of the text you want to change the color of and click on it. Text Color icon for playing with colors.

Classic Editor Text Colors

If you have a specific color in mind that is not listed here, click on it. Tradition… and select a hue from the color pane or enter its hexadecimal code.

How to Change Text Color in WordPress Using Gutenberg

If you are working on a page or post in Gutenberg and you want to change the text color of the entire block, first click on the box containing the text. Now, take a look at the right side of the screen and click on it. Color settings choice.

Gutenberg Color Settings

You can not only change the text color but also set the background color for the block to your favourite.

If you want to change the tone of only parts of the text, not the entire block, highlight the text you want to color differently, click the down arrow and Text Color.

Gutenberg Text Color

A color palette will appear next, and now all you have to do is choose the shade that matches your brand’s style.

Gutenberg Custom Color

NB In Gutenberg, you can change the text colors for both heading and paragraph blocks, but you cannot change the background color for heading blocks.

How to Change Text Color in WordPress with Elementor

When you want to edit your text in Elementor, text editor A widget similar to WordPress’ Classic Editor. All options are listed on the left side of the screen, but what we’re interested in Text Color. Highlight the part of the text that you want to paint in another tone and choose the color to your liking.

In relation :  PS5: Sony is changing the way you invite friends to play games; So what will change?
Elementor Text Color

Elementor is also practical edit section option displayed above the widget you added to the page.

Elementor Editing Section

Click on it and select it from the left menu style select and then typography.

Elementor Style Typography

Besides changing the text color, you can also adjust the text alignment, title color, link color and more.

How to Change Text Color in WordPress Using CSS

Finally, we want to show you how. Change font colors globally in WordPress using CSS. If the options of the theme you have chosen are not sufficient, you can make some adjustments to the text color.

From your clipboard menu, Appearance > Customize.

Customize Appearance

Multiple options will appear on the left side of the screen, but you have to click it. Additional CSS.

Customize Additional CSS

Now a CSS box will appear where you need to paste the following lines of code:

h1 { 
color: #some_hex_code; 
}

Of course depending on what titles you have on your site you can use h2, h3 etc. You can change the color of any title you want. For example, we wanted to paint our h1 red and added the following code:

h1 { 
color: #cc0a0a;
}

This code is enough to change the text color in the headers but if you want to change the color of other text elements use different selectors eg. “a” for links, “P” for paragraphs etc.

p { 
color: #cc0a0a;
}

Let’s Close This

Creating an attractive website is much easier when you know how to change text colors in WordPress. With this tutorial, we wanted to show you how to change text tones globally and on single pages using all popular editors and page builders, and the method you choose will depend on your preferences and perhaps your skills. After all, not everyone knows how to use CSS, but with the right WordPress theme with lots of customization options, you don’t even need to know how to code.

Moyens I/O Staff has motivated you, giving you tips on technology, personal development, lifestyle and strategies that will help you.