Easy Underline Overlay Effect on Text in Elementor

Table of Contents

Today, We will show you how to create an Underline Overlay Effect on your text in Elementor. This something many people are looking for, I now want to give you the solution without using any 3rd party plugin, and it’s pretty much easy to implement. Do share this article if it helps you in any way.

Adding Text on your Page

To begin with this, take any text or heading widget from your Elementor widget menu and type your desired content. For this tutorial we will be using the text “Elementor is The Best WordPress Builder”.

Adding Class to Elementor Text Widget

Now, this is one of the key step for this design to work, add the class “highlight” to span tag before and after the text where you need this highlight effect. As shown in image below.

				
					Elementor is <br> The Best  <br> <span class="highlight">WordPress Builder</span>

<! --Please note here the tag "br" is given to add line breaks you can avoid that if you need your heading in one line -->

				
			
Easy Underline Overlay Effect on Text in Elementor
Adding Text in Heading Widget with Class Highlight

Adding the Custom CSS to Class

And here comes the final nail to achieve this in display, so to get the effect add the code below using custom CSS if a pro user or simply an HTML block if on the free version of Elementor.
(Don’t forget to add “style” tags in HTML for this CSS to work in HTML block)

				
					.highlight {
  background: linear-gradient(180deg,white 50%, yellow 50%);
}

<!--Use this if using HTML Block -->

<style>
.highlight {
  background: linear-gradient(180deg,white 50%, yellow 50%);
}
</style>

				
			
Easy Underline Overlay Effect on Text in Elementor
Add Custom CSS Code in Elementor

Playing More with the Design

You can even play with the code to achieve more awesome designs.

				
					.highlight {
  background: linear-gradient(180deg,#FF5733 50%, #21034F 50%);
  color:white
}

				
			
Easy Underline Overlay Effect on Text in Elementor
Playing with Custom CSS for more Customization

End Note

That’s all, yes this was this easy to achieve. I hope you found this tutorial helpful. Feel free to ask anything in comments if you face any issue.

Comments

4 Responses

Leave a Reply