How to Use Two Different Colors on a Heading in Elementor

A few days ago, we spotted an attractive Elementor 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 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.