Add Custom Underlined Text In Elementor Using CSS
Okay guys the first thing you need to do is go to where you want to add your underline on your text. I’ve only just quickly set up this page so I’m going to drag in a hidden widget and once that’s done I’m going to add my texting to the title box on the left hand side.
Now that I’ve added my text I’ve reached the point where I want to add a word with custom underline. What I’m going to do now is highlight and copy this bit of code. I’m going to paste it into the title box and as you’ll notice the word Elementor has been highlighted in purple on the page.
Well I’m going to show you how to change that now. If you look in the code it says style colour and it’s got a hex colour and it’s this hex colour that determines the colour of your highlighted text. If you don’t know what exact colour you want to add to your text then use Colorzilla.
This is a free Google extension that you can add to your Chrome browser. Now to change the highlighted word and in this bit of code you’re looking for the word Elementor with the word <strong> either side.
It’s in this space that we can change our word in and it’s where we’re going to add our underline. If I highlight the word Elementor and start typing in “hi”. You’ll see that it changes but for the purpose of this Tutorial I am going to change it back again
So now we know how to add our code to headers. I’m now going to show you how to add it to text so I’m going to drag in a text widget onto our page. I’m also going to start typing in the text box on the left hand side.
Once we’ve finished typing in our text you might be tempted to paste in the code. We are going to do that but first we need to click on the text tab. Just above our text box and it’s in here that we need to paste in our code.
Now it is important to note that if you are pasted in your code into a text box. You will have to click on the visual tab. Once it’s been added to make it display on our page builder. All we need to do is click on one of the other widgets this will refresh the text widget box with our code added to our text.
Now we’re going to highlight and copy our CSS code. Now we can add this to individual widgets columns or Pages now to use CSS in Elementor.
You will need Elementor Pro there is a link for that in the top of the description. With our CSS code highlighted and copied to add it to our page. All we need to do is go into the advanced tab in the top left hand side, scroll down to custom CSS, and paste it in.
Now I want to display an underline anywhere on our page that our code appears. So I’m going to click on the gear icon in the bottom left hand side and go into the advanced tab in the top left. Paste in our code into the custom CSS box.
As soon as our CSS code has been added to our page all our highlighted text will be underlined. Now you might be thinking where is this underline coming from. Well it’s an uploaded image that I added to my image gallery.
As you will see in the code there is the image URL. I made this image for free using my mobile phone and the app medipaint. If you are making it yourself you can choose any colour you like. Then all you need to do is upload it to your image gallery and copy and paste the image URL into your code.
Just remember if you are making your own underline or you’re using someone else’s it needs a transparent background. The great thing about this bit of code is anywhere you can add text on your page you can underline it and highlight it.
Just like this try to remember if you are making your own you will need a reverted image as well.
Remember if you are using a reverted image you will have to change the image URL in your CSS code. If you’re using two different underline images on your page. You will have to give each one a different class name within the CSS code and the text code.
Remember if you do want to use CSS code with in Elementor you will need Elementor Pro. There is a link for that at 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.
You’re not only just limited to using this bit of code in Elementor. You can also use it within other page Builders. The process might be slightly different but it is the same code.
If you have found this video useful please do hit that like And subscribe button. And if you’ve got any questions come and hit me up in the comments box below. Thanks for watching and I’ll see you in the next Tutorial.
