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