Spirited and Then Some

A food blog with hundreds of delicious gluten-free and dairy-free recipes.

  • Home
  • About Us
  • Recipes
    • Recipe Index
  • Resources
    • Blogging Resources
    • Photography Resources
    • Teacher Resources
  • Blog
  • RSS
  • Pinterest
  • Instagram
  • Twitter
  • Facebook

Blogging Resources

How To Change The Font Color Of Your Headings In WordPress 5.0 Gutenberg

How to change the font color of your headings in WordPress 5.0 Gutenberg! Plus screenshots and step-by-step instructions! | spiritedandthensome.com

So when I went to change the heading font color in Gutenberg 5.0 and couldn’t find an easy solution, I started scouring the internet webs for a quick “how-to.” It was there that I found I wasn’t alone. Suggestions included finding a plugin that would allow heading font color changes. Others said it wasn’t possible to change heading font colors in WordPress 5.0 Gutenberg editor just yet, but that maybe one day this would change. Another said to change it in CSS. And that got me thinking, could I change the color of my headings in Gutenberg 5.0 if I worked in the HTML tab in the block editor? The block editor is Gutenberg 5.0’s new editor layout. 

The answer is YES! And Gutenberg 5.0 seems to expect us to do that. It even offers a few guideposts if something doesn’t go quite right. Truthfully, I love the new block editor. Learning it was a lot like learning a new language (and totally worth it, by the way!). I hope you have the same overall positive experience, too!

So let’s get started, and I’ll show you how to change the font color of your headings in WordPress 5.0 Gutenberg!

WHAT YOU’LL NEED TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG:

Font color numbers or font color name. Colors have names or numbers in WordPress written in a code a few different ways WordPress will understand. For example, colors may have a straightforward name, such as “red”, that WordPress will understand. Other times the color is written in RGB  (3 different numbers separated by commas). RGB stands for Red, Green, Blue. Or the color is written as a hex color (a pound sign in front of six alphanumeric characters). For example, there are thee ways to write the color red:

  • Color Name – Red
  • RGB – 255, 0, 0
  • Hex # – #FF0000

In the above examples, each represents another way to write the color red. And they each tell WordPress the color red should appear in the block you’re working in. Keep reading, and I’ll show you how. 

HTML tab in the Gutenberg 5.0 block editor. You’ll want to work from the HTML tab in the block editor. 

HOW TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG:

Below are steps to change the font color of headings in Gutenberg 5.0. 

  • Select the heading block and begin typing the heading you want in your blog post. At this point it does not matter if you are working in the visual or HTML tab. 
  • When you are done writing the heading, it’s time to give it a color. Click on the three vertical dots and select “work from html.” This will shift you into HTML mode for that block, where you’ll add a piece of code telling WordPress what color you want that heading to be. 
  • Once you’re satisfied with the heading color, then toggle back to the visual tab. You do this by clicking the three vertical dots on the lefthand side of the block.

Here are screenshots detailing the process outlined above (descriptions of each step are below the pictures).

1 - Fill in the blog title name HOW TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG | spiritedandthensome.com

Fill in the blog title name.

2 - Click the Plus Sign for a new block Gutenberg Editor | spiritedandthensome.com

Click the Plus Sign for a new block and then select “Heading.”

3 - Fill in the name of the header Gutenberg Editor | spiritedandthensome.com

Fill in the header with the message you want.

4 - Click the 3 vertical lines and select Edit as HTML Gutenberg Editor | spiritedandthensome.com

Click the three vertical lines and select “Edit as HTML.”

5 - You will be in HTML mode now Gutenberg Editor | spiritedandthensome.com

You will be in HTML mode now.

6 - Add a piece of code that tells WordPress the font color to use Gutenberg Editor | spiritedandthensome.com

Add a piece of code that tells WordPress the font color to use. It is typically written as <font color = #yourchosencolor>Heading</font>. See below for troubleshooting if you have issues writing the code.

7 - Click the 3 vertical lines on the left to return to Edit visually Gutenberg Editor | spiritedandthensome.com

Click the three vertical lines on the left to return to “Edit visually.”

8 - Click the plus sign below the header to continue with blog post Gutenberg Editor | spiritedandthensome.com

Click the plus sign below the header to continue with your blog post.

 

9 - Begin typing in the new block Gutenberg Editor | spiritedandthensome.com

 

Begin typing in the new block you’ve chosen.

And voila! you have changed the color of your heading! And now you know how to change the font color of your headings in WordPress 5.0 Gutenberg! 

PREVIEWING YOUR PROGRESS IN THE GUTENBERG EDITOR:

If you’d like to preview your progress to see if your header looks the way you want it to, then click the preview option in the editor. The green header shown in the screenshot below is what I intended to create. So now I know my header is ready to go (at least for the purposes of this blog post!). And I can continue on with my blog post.

10 - Preview your progress by clicking the preview button Gutenberg Editor | spiritedandthensome.com

 

TROUBLESHOOTING HOW TO CHANGE THE FONT COLOR OF YOUR HEADINGS IN WORDPRESS 5.0 GUTENBERG:

Once you get going, working in Gutenberg 5.0 and changing the colors of your headers becomes fairly straightforward. Bt the first time isn’t always a charm. So let’s look at a few ways to troubleshoot changing the color of your headings if things don’t go smoothly at first.

  • Typing the code incorrectly. I mentioned that Gutenberg 5.0 seems to know we might want to work from the html tab and change a few things about our headers. So if you type your code incorrectly, Gutenberg 5.0 will offer to resolve the issue with a button you can click. Click the button and it should make the change for you. You can also check out W3 Schools article,

    If there is an error message, then convert to HTML to correct it or click Resolve, and the Gutenberg editor will try to fix it for you.

    12 - The error message will show what is wrong Gutenberg Editor | spiritedandthensome.com

    The error message will show what is wrong. In this case I wrote the code incorrectly, and the Gutenberg editor put the incorrect text in a red box so I know where the error is.

    If you run into trouble as you navigate the new Gutenberg editor, then try creating your blog posts in the new editor and switch to the Classic Editor (usually located on the right sidebar of the Gutenberg editor) before publishing. I’ve done this as I make sure everything on my blog, including plugins, is compatible with the WordPress 5.0 update. Then you can say current with your blog while you troubleshoot. Classic Editor won’t stick around forever, but it’s a great way to make the transition to the new format.

    Learning how to work with the WordPress 5.0 Gutenberg editor will take time. Learning how to change the font color of your headings in WordPress 5.0 Gutenberg is just one way to dive even deeper into what this new WordPress editor has to offer!

    You May Also Enjoy These Posts...

    How I Grew My Blog Traffic Almost 30% in 31 Days
    How to Make Money on Teachers Pay Teachers
    How to Create Your Own Instagram Landing Page (without using LinkTree)

Blogging Resources


2 Comments

About Spirited and then Some

I'm Morgan. A spirited, social chatterbox, small biz owner, and teacher. Lover of all things food. Think dip. Lover of all things family. Think K-Hubs, Toodlebug, and Twinkleberry. I'm so glad you found our spirited community.... Click Here to Read More

« Side Notes & Shenanigans: December 2018
Lemon Salmon Piccata »

Comments

  1. Amy says

    February 21, 2019 at 2:00 pm

    Thank you for this great post! I would have NEVER thought to change DOCUMENT HTML-much easier!

    Reply
    • Spirited and then Some says

      February 24, 2019 at 9:49 am

      I’m glad you found it helpful!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Greetings!

I'm Morgan. A spirited, social chatterbox, small biz owner, and teacher. Lover of all things food. Think dip. Lover of all things family. Think K-Hubs, Toodlebug, and Twinkleberry. I'm so glad you found our spirited community. Learn more…

Take a Stroll

my foodgawker gallery  my finding vegan gallery  
View my Tasty Kitchen Profile

Recent Posts

  • Cucumber Mint Cooler
  • Rustic Farmhouse Classroom Decor
  • Apple Slice Charcuterie Board
  • Chocolate-Drizzled Matcha Energy Bites
  • How to Make Cauliflower Rice
  • Creamy Avocado Garlic Quinoa Bowls

Categories

As Seen On

Pure Wow logo
Red Tricycle Logo
Yahoo! Lifestyle logo
Mom and daughters in front of Magnolia Market in Waco, Texas! | spiritedandthensome.com

Family

How to make 3-ingredient Fluffy Slime without borax! | spiritedandthensome.com

Kids’ Activities

Spirited Learning

  • About Us
  • Blog
  • Recipes
  • Family
  • Kids’ Activities
  • Resources
  • Photography Tips
  • Blogging Tips
  • Free Course
  • Privacy Policy

Copyright © 2023 · Divine Theme on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT