How to Add Underline Overlay Effect on Text in WordPress?

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.

advanced typography advanced underline 2

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.

advanced typography advanced underline demo 2

Still in Doubt? Let’s Assist You

Need Help? Ask AI Bot

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Docs