How to Color Gradient Texts in Elementor | Elementor Resources 134816282619
How to Color Gradient Texts in Elementor

How to Color Gradient Texts in Elementor

 

It’s sometimes nice to create those fancy color gradient text stuff to add some spice to your web pages. After all, it’s our job as web designers to maximize the comfort and appeal our users feels while browsing our content. And also add some CRO to make them come back and give a certain degree of professionalism.

Anyway… so in this tutorial, I’ll teach you how to create the “color gradient” effect for headings, paragraphs, anchors or basically any tag that you want!I’ll also teach you how to make this very easily re-usable through Global Widgets.

But before anything else, you might want to consider getting the Elementor Pro Version and get access to more cool looking and quality Elementor templates directly to your Elementor Template Library for free!

Get Elementor Pro Now

All that aside, let’s now start the tutorial!

Step 1: Setting Up

Of course, initial step will be on finding the page you want to apply the color gradient. Just go to your WordPress Dashboard, click ‘Pages’ and then ‘All Pages’.

how-to-text-gradient-1

Now browse to the literal page and find the link that says ‘Edit With Elementor’ and click it.

how-to-text-gradient-2

You’re now on that page’s Elementor visual editor section. I’ve made a quick test of this, so this is what your text will look like once you finish this tutorial.

how-to-text-gradient-3

Step 2: Editing

So your now on Elementor, on the left side, under the ‘Basic’ widgets, find the ‘Heading’ widget and drag it to the ‘Drag Widget here’ area. Doing this will create an instance of that widget, which allows you to create a header tag, design it, change text, all in real time.

how-to-text-gradient-4

Let’s change the font-size of this heading real quick so we’ll see a much more clearer view of what we’ll do later in this tutorial.

how-to-text-gradient-5

Step 3: Customizing Color

Now, go to the ‘Advanced’ tag on the Widget’s section and find the ‘Custom CSS’.

how-to-text-gradient-6

Once you find it, it’ll look like this:

how-to-text-gradient-7

Now, this is the tricky part. Since there’s no other way to do it currently on elementor, even on the Elementor Pro Version, you’ll have to do it manually, of course other than uploading Elementor Addons such as ‘Raven Elements’ with the Jupiter X theme.

But here, you’ll just copy this code and paste it on that text area:

selector h2 {
    background-image: linear-gradient(to right,#463f64,#463f64, #e2285c, #e2285c);
    -webkit-background-clip: text;
    display: inline-block;
    padding: 14px;
    -webkit-text-fill-color: #00000000;
    font-family: 'Stay Out Regular';
}


NOTE: See that “h2” beside the word “selector”? That’s the type of Widget we’re currently using. So if you decide to change the heading, make sure you update it as well so you don’t end up change something else… like I did!

Now immediately, your text will look like this:

how-to-text-gradient-9

This is one of the amazing aspects of Elementor. Everything happens in real-time! You don’t have to edit code, refresh the page, edit again, refresh the page, over and over again, just like what I did while creating this tutorial. Of course you’ll say “why didn’t you do inspect element?” Well I don’t really like the tool so what.

Step 3: Saving for Future Use

Now let’s wrap up our newly created Elementor block so we can use it anywhere on the website without having to do this dirty stuff all over again. Just right click the blog and once the panel shows up, look for the option saying ‘Save as a Global’ and then click it.

how-to-text-gradient-10

Just pick a very clear and apparent name for your widget so you don’t confuse yourself once these Global widgets starts to overpopulate!

how-to-text-gradient-11

But before re-using it on your pages, make sure you ‘Unlink’ newly instance version of that widget in case you mess up things, it wouldn’t apply to the other instances of that widget.

how-to-text-gradient-12

Now we’re done! Just repeat the steps here and freely modify the custom CSS code if you know what you’re doing and you will surely make your site look fancy and appealing to your users!

I made this version really quick by just changing the hexadecimal color codes and the font-style. The possibilities are limitless, just as youre creativity!

how-to-text-gradient-13

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart