How to Add Underline Overlay Effect on Text in Elementor?

Key Takeaways

  • The Plus Addons for Elementor Advanced Typography widget allows users to add an image reveal effect on text.
  • The Advanced Typography widget offers three underline options: None, Classic, and Overlay.
  • Users can customize underline styles further by selecting different predefined overlay styles in the Overlay Style dropdown.
Table Of Content

Do you want to add unique underline text effects in Elementor? Adding unique underlines to text not only improves the design but you can easily highlight important parts of the text.

With the Advanced Typography widget from The Plus Addons for Elementor, you can easily add an image reveal effect on text in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To do this, add the Advanced Typography widget to the page and follow the steps –

1. In the Advanced Typography tab, select Normal or Multiple from the Select Option dropdown.

Let’s select Normal.

2. Then add the text in the Text field.

3. Then go to the Advance Underline Options tab under the Style tab.

Note: In the Multiple option you’ll find the Advance Underline Options in each text repeater item.

4. From the Underline Style dropdown, you have to select the underline type. Here you’ll find three options – 

  • None – This will not add any underline. 
  • Classic – With this option you can add some classic underlines like underline, overline and line through for normal and hover states. You can also add different underline styles as well. 
  • Overlay – With this option, you can add unique underline overlay effects.

Advanced typography advanced underline options how to add underline overlay effect on text in elementor? From the plus addons for elementor

Select the option as per your requirements, let’s select Overlay here.

5. From the Overlay Style dropdown, you can select different predefined overlay styles.

Then from the Normal and Hover tab, you can customize the style further.

Note: Depending on the selected style you’ll find different options for normal and hover states.

This is how easily you can add a unique underline style to highlight text.

Advanced typography advanced underline options demo how to add underline overlay effect on text in elementor? From the plus addons for elementor

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What if the underline overlay effect isn't showing up on my text?

If the underline overlay effect isn't appearing, ensure that you have selected the correct underline type in the Advanced Typography widget. You need to choose 'Overlay' from the Underline Style dropdown. If you selected 'None' or 'Classic', the overlay effect won't be visible. Additionally, verify that the Advanced Typography widget from The Plus Addons for Elementor is installed and activated.

Can I use the underline overlay effect for different text styles?

Yes, you can apply the underline overlay effect to various text styles by using the Advanced Typography widget. You can customize the overlay style further in the Normal and Hover tabs. This allows you to create unique visual effects that can enhance the design and highlight important text effectively.

What are the different underline styles available in the Advanced Typography widget?

The Advanced Typography widget offers three underline styles: None, Classic, and Overlay. The Classic option includes traditional underlines, overlines, and line-through effects. The Overlay option allows for unique underline overlay effects, which can be customized further. Choosing the right style can significantly impact how your text is perceived by users.

Are there any limitations when using the underline overlay effect?

One limitation to consider is that the underline overlay effect works only with the Advanced Typography widget from The Plus Addons for Elementor. Ensure that this widget is installed and activated; otherwise, you wonu2019t have access to the underline options. Additionally, the available styles may vary depending on the text settings you choose.

What settings work best for highlighting important text with underline effects?

For highlighting important text, using the Overlay underline style is effective as it provides a unique visual impact. Combine this with contrasting colors for the text and overlay to enhance visibility. Also, consider using the hover options to change the underline style when a user hovers over the text, adding an interactive element to the design.

Does the underline overlay effect work on mobile devices?

The underline overlay effect created with the Advanced Typography widget is responsive, meaning it should work on mobile devices. However, always test your design on various screen sizes to ensure that the effect displays correctly. Adjustments may be required in the styling to maintain a good user experience across devices.

Last reviewed: April 9, 2026