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:
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.
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.
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.
That’s it for the general theme options. Now let’s see how to change text colors on individual pages.
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.
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.
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.
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.
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.
A color palette will appear next, and now all you have to do is choose the shade that matches your brand’s style.
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.
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.
Elementor is also practical edit section option displayed above the widget you added to the page.
Click on it and select it from the left menu style select and then typography.
Besides changing the text color, you can also adjust the text alignment, title color, link color and more.
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.
Multiple options will appear on the left side of the screen, but you have to click it. 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.