Color is what catches the viewer’s eye first. As an artist, you might want to add an extra splash of color to your online content. While you can easily change the color of one word or more in the Elementor text editor or make use of Dual Color Headings, there are no Elementor widgets that allow you to create a heading in more than two colors. This tutorial shows you how to make an Elementor heading in different colors – i.e. MANY different colors!
There are plenty of possibilities to add some color to your WordPress website: pictures, backgrounds, texts, headings,… If you’re used to working with Elementor, you know that you have the option to change the color of entire text blocks, a sentence or one word in the Elementor text editor.
You can also change the color of headings or use one of Elementor’s widgets that allow you to create a dual color heading – a heading that is made up of two colors.
Still, none of the Elementor widgets make it possible to design a heading that includes more than two colors.
However, the good news is that there’s a way to make an Elementor heading in as many different colors as you like!
All you need to do is add a little bit of code to the heading within Elementor. Nothing complicated – and I’m going to show you in this tutorial, step-by-step, how you can create such an Elementor heading in different colors!
How do you change the color of a heading in Elementor?
If you’re an old stager on Elementor, you know that changing the color of a heading is a child’s play.
However, for everybody who is new to Elementor, this is how you change the heading color:
- Step 1: With the Heading Editor open in the Elementor sidebar, click on the Style tab in the top menu.
- Step 2: In the Title dropdown, click on the little box next toText Color and select one of the color presets or use the color picker to choose a color for your heading.
Once you’ve selected a color, you see the color code appear in the field at the bottom of the color picker box.
The color code is usually a hexadecimal value that consists of a 6-digit combination of the numbers 0-9 and the letters A-F and starts with the hash sign (#).
For example, the color code of white is #FFFFFF, of black #000000, and a medium gray would be #7A7A7A.
What is a dual color heading in Elementor?
If you’ve been using Elementor for a while, you’ve surely heard that there are different Elementor heading styles that come with certain Elementor widgets.
For example, there’s the Animated Headline by Elementor Pro, the Fancy Heading and the Advanced Heading by Ultimate Addons for Elementor, and the Dual Color Heading by Essential Addons for Elementor and Ultimate Addons for Elementor.
All these Elementor widgets offer different options to style your headings, either with some sort of animation, an included icon or description, or a combination of two colors of your choice.
As for creating an Elementor heading in different colors, you so far only have the Dual Color Heading widgets, for example from Essential Addons for Elementor and Ultimate Addons for Elementor.
As their name suggests, these Elementor widgets allow you to create headings that include TWO colors – not more.
Depending on the widget you choose, you can use each of the two colors only once, or you can use one of the colors twice, like in the example of the Dual Color Heading by Ultimate Addons for Elementor below.
Apart from choosing two colors, Dual Color Heading widgets might allow you to use icons, descriptions, or background text.
Below you see the default appearance of the Dual Color Headings by Essential Addons for Elementor and Ultimate Addons for Elementor – two of the most common and most powerful extensions for Elementor.
Default dual color heading by Essential Addons for Elementor
Dual Heading Example
Insert a meaningful line to evaluate the headline.Default dual color heading by Ultimate Addons for Elementor
I love this website so much!
Essential Addons for Elementor
Ultimate Addons for Elementor
How do I change the text color in Elementor?
Changing the color of text in Elementor, like changing the color of one or more words within Elementor text blocks is super-easy.
Simply type your text into the text editor. Make sure the Visual tab on top of the text editor is active.
Then select the word or words whose color you want to change and click on the little arrow next to the A icon in the editor toolbar.
This will bring up a color palette where you can either choose one of the predefined colors or select a custom color.
You can repeat the process for as many words as you like and, for example, create a text string like the one below where each word has a different color! J
This is a text string in Elementor where each word has a different color.
How to make an Elementor heading in different colors?
While changing the color of one or several words in the Elementor text editor adds nice effects to your website, you cannot create an actual heading with the text editor.
Elementor’s Heading widget allows you to assign a hierarchical structure to each heading, from Heading 1 to Heading 6 (H1 – H6), according to the importance of the heading within your web content.
If you’ve already looked a bit into SEO (Search Engine Optimization), you know that having main headings and sub-headings that include relevant keywords is an important ranking criterion for Google.
Therefore, you might want to use the actual Heading widget to make an Elementor heading in different colors!
To assign different colors to individual words in an Elementor heading, you need to insert a tiny bit of HTML code into the Title field.
These so-called HTML tags always come within angle brackets < >.
The HTML tag that we’re going to use to create an Elementor heading in different colors is the span tag, followed by a color attribute.
That means there will be an opening span tag (<span>) before the word whose color you want to change, and a closing span tag (</span>) after the word.
Within the opening span tag, you will have the hexadecimal code of your preferred color.
For example, the code to change the color of one word to black looks like this:
It’s important to replicate the code exactly, including all the special characters and spaces. Note that there’s an equal sign after ‘style‘, followed by quotation marks. The ‘color‘ attribute is followed by a colon (not by an equal sign!) and the color code stands after the hash (#). The string ends with quotation marks and the closing angle bracket.
After that, you have the word or words whose color you want to change. Note that the span tag closes within angle brackets and a forward slash ( / ) at the beginning!
There are different ways to figure out the color code that comes after the hash (#) and defines the color of the word/s between the 'span' tags.
For example, you can use Photoshop’s color picker tool to find out the code of a particular color or install an extension to your Chrome browser.
One of the easiest and fastest ways is probably to use Elementor’s own color picker tool.
When you’re in the Heading Editor, just click on the Style tab and then on the box next to Text Color in the Title dropdown.
In the Color Picker dialog box, you can then select either one of your presaved colors or choose a color in the color wheel.
You’ll see the color code appear in the bottom field. You can copy it from there and paste it after the color attribute in the HTML span tag.
And that was already it! This is how easy it is to assign a different color to one word or several words in your Elementor heading!
To create an Elementor heading in many different colors, you just need to repeat the process above and put each word or words whose color you want to change in between span tags.
As for the Elementor heading that I’ve created for this example, I’ve assigned different colors to all words in the heading.
You can see what the code of that mulit-color heading looks like in the screenshot right here!
Each word is within span tags. All tags contain a different color code.
How to make an Elementor Heading in Different Colors
Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
I hope this Elementor tutorial was able to help you. If you found it useful, please don’t forget to share it with other WordPress users! Let me know what you’d like to see an Elementor tutorial about next. Cheers, Angie 🌟
