How to Apply Different Color To Text within Headings in Elementor

Apply-different-color-text-to-headings

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.

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

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)

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

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

Leave a Comment

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

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

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

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG

Get My Free WordPress
Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design journey.

Intermediate and advanced WordPress users have found it helpful too.

By joining my list, I promise you’ll never be spammed! 🙂

cropped img of the toolkit