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.

This page may contain affiliate links, which help support our project. Learn more.

Your websites deserve a better home

Find the fastest WordPress hosting services. Curated by our experienced team.

10 thoughts on “How to Use Two Different Colors on a Heading in Elementor”

  1. Just wanted to say thx!
    I wanted 1 word highlighted with color.
    Used this guide and then just pasted the code 2 times in the header.
    1 time before my highlighted word. 1 time after with the normal color code so in the end only 1 word mid-sentence is other color :).
    Its currently visible at if somebody wants to see how it looks.


Leave a Comment

Haven’t used Elementor Pro yet?