How To Create a Multi-Colored Text or Heading With Elementor

You are currently viewing How To Create a Multi-Colored Text or Heading With Elementor

Elementor is a powerful WordPress theme, that comes with a wide range of web design tools. It allows you to create themes and layouts easily without having to master coding. But one of the best features of this theme is its ability to use Custom CSS. This tutorial will show you how to create a multi-colored text or heading using Elementor.

Screenshot 57

The first step is to install Elementor. If you have not installed elementor yet, you can install Elementor on your site.

Once Elementor is installed and activated on your site, go ahead and create a new page or edit the page you need to add Multi-colored text. Once you are done naming your page, click continue.

This will bring you to the Page Builder.

How to add multi-colored text.

If you want to create a multi-colored text or heading using Elementor, follow these steps.

Step 1: Drag and drop the “Text” widget.

Step 2: In the content field, type your content, at least 6 words.

Step 3: Now add H1 tags before and after the text.

text elementor

Step 4: Now, go to the Advanced tab and click Custom CSS.

elementor 3

Create a Custom Css Style

To create a multi-colored text or heading, you’ll need to add a Custom CSS style to your theme.

Step 5: Navigate to the “Custom CSS” and add the following CSS code to it.

Enter the following code into the text box:

:root {

 --color-1: #186cb5;

 --color-2: #2b9a9f;

 --color-3: #f1a211;

 --color-4: #e83611;

 --color-5: #f9002f;

}

h1 {

 font-family: "Montserrat", sans-serif;

 font-size: 75px;

 width: -webkit-min-content;

 width: -moz-min-content;

 width: min-content;

 margin: auto;

 background: linear-gradient(220deg, 

  var(--color-1) 19%, 

  transparent 19%,transparent 20%, 

  var(--color-2) 20%, var(--color-2) 39%,

  transparent 39%,transparent 40%, 

  var(--color-3) 40%,var(--color-3) 59% ,

  transparent 59%,transparent 60%, 

  var(--color-4) 60%, var(--color-4) 79%,

  transparent 79%, transparent 80%, 

  var(--color-5) 80%);

 background-clip: text;

 -webkit-background-clip: text;

 color: transparent;

}

This will change the color of any text placed in this area. If you want to customize colors for different parts of your text, you can change the “–color-1”, “–color-2” etc .. to any value you want.

Make sure to save your changes, and preview the page to see how it looks.

And that’s how you customize text colors using Custom CSS with Elementor.

Why Multi-Colored Text?

When it comes to creating a blog or a website, most designers will see that they have been given the opportunity to own a lot of plugin tools. But most of them are not aware of how I can easily give their site more distinctive looks with just a few clicks.

Among the many plugins that are available today, the Elementor is one of the most advanced plugins for WordPress. It gives you free access to a wide range of tools that are designed to help users design their site with ease.

One such feature is Custom CSS, which you can find in the Elementor’s Advanced tab.

Custom CSS is an ideal solution for webmasters who want to customize their sites with ease. Using this feature, users are able to edit any theme element in their site including text colors and backgrounds.

Conclusion

Elementor is a powerful page builder that makes creating websites easy and efficient. If you are looking for a way to create a multi-colored text or header on your website, then Elementor is the perfect solution.

With this tutorial, we hope that you can now easily create multi-colored text and headers using Elementor.

Leave a comment below if you have questions about how to use this feature. Enjoy 🙂

Leave a Reply