How to Use Two Different Colors on a Heading in Elementor

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 canvas area.

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.

The Bottom Line

There are many ideas to make the heading element on your website looks more appealing. One of which is using different colors on each word. Some Elementor add-ons have a dedicated widget to create a dual-color heading.

There is also another solution to create a dual-color heading in Elementor as we have just covered above. The Heading widget of Elementor supports <span> tag. Meaning that you can apply an inline CSS to your text. In addition to dual-color, you can also apply other effects, such highlight, underline, and so on.