How to Apply Different Color To Text within Headings in Elementor

In this tutorial, I’ll show you how to apply different color to text within headings in your elementor website using a tiny CSS you apply to your heading text before or after. You can apply the different color text to a single word or more than one word as long as your text lies within the CSS. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Apply Different Color To Text within Headings

Assuming you have an already made Elementor section with a heading, just like I do here (00:16), I’m going to demonstrate how to give the word ‘Delicious’ a different color.

VDibyyskWUegXLx8Uc7KeVoN7nOJlHUmmXPy6JVxsB8LfaSn3V87hVGAxcLJcvZdNTpKuxQQcjLUf5LNjwTRhNFiuKlghLhHqS8YUW7XW3w PQIN05t8tnlCIFD 2aTeFYb03E Z

If I select this heading text and go check under Style in the Edit Heading area, under Typography, the text color for this heading is black. So to apply the yellow/orange (or whichever color you prefer)  to only ‘Delicious’, we’re going to add a small CSS code. 

To do this:

With your heading selected, go to Content and under Title use this code (00:46): 

<span styles=“color:#FF9D02;”> Your Word </span>

To Read: Create an Elementor Posts Loop with Custom Column Link

ItGJaMGGM8E 3jgAqpCc7kg jMNBH4b2IVLuqmjUzdvKWv0iYiMuCztDH rYK48wZugisO7tbr4tAqAayzYdsy8BfVxvL2lbTXRQ HJOl9OilVuo6 j6lelTlyZNd2TvDWkLQHJu

This code translates to; the color (FF9D02) is going to be applied to whichever word is situated within the span tag. You’re free to change the color code to your preference.

In this case we type into the Title area:

We Serve <span styles=“color:#FF9D02;”>Delicious</span> Food (01:56)

4uTrf1QMn QuOrFqpJdm1HHsoUND7Mc2fqOLjehVDe35yNgSBc5q6ja2hF1UF3bkyP9GnjstdkGaKBGJke6e R3mP YJ5cZSBdC2M MwXSovEw1g2apQl8JphrjS9PZYsIQ4s1tK

In this case, I also want the whole heading to be visible so I’m going to apply an HTML break tag too:

We Serve <br>

<span styles=“color:#FF9D02;”>Delicious</span> Food

This tag moves everything that’s after the word Serve to the next line (02:18).

Also Read: How to Link WordPress Menu Items to Elementor Sections

m0x72OWwKncIDdX9ii ohsXOkRib 7 5UUvWclxEcyOuvPwpxTYYfAc

You can use this same code to apply a different color to a word(s) in your headings. For example: 

Our<span styles=“color:#FF9D02;”>Services</span> (02:35)

Different Color To Text within Headings

All you have to do is make sure you have your color code included and that the word(s) you want to have a different color is within the tags.

Also Read: Create Responsive Elementor Cards with an INNER Section Inside an INNER Section

In Closing

I hope this quick tip is useful for you to apply to your Elementor websites.

If you have any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users