How To Add Glowing Text In Elementor
Hi guys in this Tutorial I’m going to show you how you can make your text glow in Elementor. It only takes a couple of minutes to do. So sit back relax hit that like And subscribe button and let’s get into the Tutorial.
Okay guys to get things going we’re going to start by adding a heading widget and we do that by just dragging it onto our page. Whilst I’m here I’m going to quickly Centre align it.
Now what you need to do is head over to my website where you’ll find the code for the heading. You’ll find that link in the top of the description. Highlight and copy that code and paste it into your title box. As you can see within the title box it says DIY Websites Pro.
When it comes to adding your own text this is where you need to paste it. Now what I’m going to do is go back into our widgets menu and I’m going to type in on the top left hand side search bar HTML. Once we’ve found it I’m going to drag it onto the top of our page.
You can add this anywhere you like although you can see it within the page builder. You won’t be able to see it on the front end of your finder website. Now what we need to do is click on the advanced tab in the top left hand side. Then scroll down to the bottom of the list where it says custom CSS.
To add custom CSS within Elemental you will need Elementor Pro. There is a link for that in the top of the description. Now what you need to do is go back over to my website and copy the CSS part of the code. Once you’ve done that head back over into Elementor and paste it into your custom CSS box.
As you can see with our code added our text has changed colour and our glows take effect. Any changes to the style colour and the size of our text will have to be done within the CSS code. The first thing I’m going to show you is how to change the colour of our text.
We do that by going up to the top of our code where it says colour. As I say this is our text colour so if we want to change it.
I’m going to go into colorzilla and I’m going to choose pink now go into the hex color underneath highlight it and copy it now we’re going to head back over to our CSS code and we’re going to paste it in make sure to paste it in after the hash
As soon as you do your text will change colour. The next thing you can change is the style of your text where it says font family in our code it says Ariel underneath this is where you can paste in your own style.
The next thing I’m going to show you how to do is change the size of your text. Go down to the font size in the code that you’ve copied and it’ll say 10 em. This size is 12 and it’s too big for our screen so I’m going to change it back to 10. For your page you can make it as big or as small as you like.
Now I’m going to show you how to change the timing of the animation glow. Going back to our code on the left hand side a couple of lines down says animation duration. What you’ve so far is set at five and what I’m going to do is change it to 10 in The Code.
By increasing the number it slows the glow down and it takes longer. For it to change on the Page by lowering that number it will speed the glow up and change more frequently. The last thing and the most important thing I’m going to show you how to change now is the colour of your glows.
So to do that we’re going to go down to the bottom of our code where it says keyframe animate. You’ll see there that I’ve typed in white this is only one of the four colours that are glowing on your screen. To find the other three colours all you’re looking for is where it says 20px and the hex number after it.
It’s these hex colours that are displayed on the screen wherever colour you want your glow to be replace. These numbers for example if I wanted to add yellow to our glow all I have to do is remove this colour and type in yellow. As you can see it’s automatically added to our glow. All that’s left for you to do is choose which colours you want to use on your site.
So there you have it that’s how easy it is to add a glowing effect to your text in Elementor. Remember you do need Elementor Pro to be able to add custom CSS to your page. If you haven’t got Elementor Pro then please do use the link in the top of the description.
It is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of Elementor’s profits if you choose to sign up. If you have found this Tutorial useful please do hit that like And subscribe button. Also if you’ve got any questions come and hit me up in the comments box below or on my blog.
All those links can be found in the description below. That’s it for this Tutorial thanks for watching and I will see you in the next one.
