Originally, the Elementor constructor does not provide this feature, but there are several ways to solve this issue.
Two-tone heading are a great way to make an accent and add dynamism to the design of your website. Elementor offers a range of text tools, and with its help, you can easily create multi color heading. Let’s see how to do it step by step.
Adding a new heading
First, add a header widget to your page in the Elementor editor.
Selecting text and basic styles
Enter the text of your heading. Suppose your header reads: “Design and Development”. You want to make the word “Design” one color, and the word “Development” another. Before applying the two-tone, set the basic text style: size, font, weight, etc.
Inline style
Add HTML markup to your heading: <span style=”color: red”>Design</span> and Development
After applying this code, the word “Design” should turn red.
Using class and custom CSS:
The second way is to use styles from the “Custom CSS” section.
Add a class to your heading: <span class=”red”>Design</span> and Development
Go to the “Advanced” section of your header widget and find the “Custom CSS” field.
Insert the following code: .red { color: red; }
You can adapt this method by adding different CSS styles, such as gradients, shadows, etc., for additional styling of your heading.
Multi color heading can give your site a unique and professional look. With Elementor and a small amount of custom CSS, you can easily achieve this effect and make your content stand out from the competition.