How to Add Underline Overlay Effect on Text in WordPress?

Key Takeaways

  • Nexter Blocks includes the Advanced Typography block that allows users to add an image reveal effect on text in WordPress.
  • The Advanced Typography block offers three underline options: None, Classic, and Overlay for customizing text appearance.
  • Users can select different predefined overlay styles and customize them further in the Normal and Hover tabs.
Table of Contents

Do you want to add unique underline text effects in WordPress? Adding custom underlines to your text not only enhances the design but also helps you highlight important sections, making them stand out and improving readability.

With the Advanced Typography block from Nexter Blocks, you can easily add an image reveal effect on text in WordPress.

To check the complete feature overview documentation of the Nexter Blocks Advanced Typography block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.

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

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

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 Select Underline 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.

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.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 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.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

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 'Overlay' option from the Select Underline dropdown in the Advanced Underline Options tab. If you have multiple text items, remember to set the underline for each item individually. Additionally, check that the Advanced Typography block from Nexter Blocks is installed and activated, as this block is essential for the effect.

What are the best practices for using the underline overlay effect in WordPress?

When using the underline overlay effect, select styles that complement your overall design without overwhelming the text. Use the predefined overlay styles wisely and customize them for both normal and hover states to create a dynamic user experience. This approach can significantly improve the visual appeal and readability of your content.

Are there any limitations to the underline overlay effect in Nexter Blocks?

The underline overlay effect is limited to the options provided in the Advanced Typography block. You can choose from predefined overlay styles, but customization options may vary depending on the selected style. Make sure to explore the different styles available to find the best fit for your design needs.

How do I add an image reveal effect along with the underline overlay?

To add an image reveal effect alongside the underline overlay, use the Advanced Typography block from Nexter Blocks. After selecting the underline type as 'Overlay', you can customize the text and image settings within the block. This combination can create a visually engaging effect that enhances your content's appeal.

Last reviewed: April 14, 2026

Related Docs