How to Use Two Different Colors on a Heading in Elementor

Updated: October 8, 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

8 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 https://jumpparken.nl/ if somebody wants to see how it looks.

    Reply

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.