How to Create Dual-Color Heading in Gutenberg

It would be best to stand out from the competition to attract your website visitors’ attention in the always-changing web design and content generation world. Gutenberg is a user-friendly block-based editor that offers a smooth approach to creating visually attractive web pages. One way to grab your user’s attention from the top is by implementing dual colors to your headings.

This article will show you how to create a dual-color heading in Gutenberg without the help of any third-party plugin.

Dual-color heading.

Steps to Create Dual-Color Heading in Gutenberg

Step 1: Add the Heading Text

First, you need to add a heading text.

Go to the Gutenberg WordPress editor to create new content (page/post) or select your existing content. Afterward, select the Heading block, add your desired text, and style up with your preference. Ensure your heading has at least two words.

Step 2: Apply the HTML Tag

Once you add the heading text, we continue to the core of this tutorial, applying a simple HTML tag to make a dual-color heading.

Navigate to the block toolbar by clicking the Options button () -> Edit as HTML.

In this example, we want to make our heading text ” COLOR EVERYWHERE” have a different color for each word (see the top image).

Please follow the steps below:

  • Specify the words/letters you want to have a different color. (ex. COLOR and EVERYWHERE)
  • Here, before EVERYWHERE, type <span style="color:#ff00bf;">
  • Close the <span> tag with </span> after the text

As you can see from the image above, once you’ve applied the simple HTML tag, the heading changes to a dual color.

You can change the color by replacing the hex code of the color or typing any color name you want. In this example we replace the hex color code with “green” (see the GIF below).

That’s it. Now you’ve successfully created a dual-color heading in Gutenberg. Don’t forget to save or publish your project if you want to.

The Bottom Line

This article shows how easily you can create a dual-color heading in Gutenberg. Dual-color headings in Gutenberg are easy to make, and it helps to add a touch of style and uniqueness to your content. By applying the HTML tag, you can effortlessly achieve eye-catching headings.

With Gutenberg’s user-friendly interface, even beginners can create visually stunning dual-color headings in no time, making your content stand out and leave a lasting impression on your web visitors. We hope this article is helpful, and if you have any questions or feedback, please don’t hesitate to contact us.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment