How to Use Two Different Colors on a Heading in Elementor

Updated: March 3, 2022

A few days ago we spotted an attractive landing page. One of the things that make the page look attractive is the heading decoration. The page creator used two different colors on one of the heading elements on the page.

In Elementor, you can also use two different font colors on a heading. This article will show you how.

When adding a heading in Elementor, you can change the default content on the Title field under the Content tab. Turns out, Elementor allows you to add an HTML code to this field. To use two different colors on a heading, you can make use of the <span> tag of HTML.

In HTML, the <span> tag is used to group elements for styling purposes, including coloring. The text you put between <span></span> (example: <span>different color</span>) will have a different color to the text outside the tags. In other words, the text you put between <span></span> will have a different color to a color you set via the typography controller of Elementor.

How to use two different colors on a heading in Elementor

First off, add a heading by dragging the Heading element from the left panel to the Elementor editor.

Replace the default text with your text and set the color, font size, and font family on the Style tab. Once done, return to the Content tab and specify the words/letters you want to have a different color and add the <span> tag and close it with </span>. Inside the <span> tag, type style="color:#fe667b;". Replace the color hex code (#fe667b) with your own color. Take a look at the example below.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more


Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general