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 add an underline overlay effect on text in WordPress using predefined overlay styles, classic underline variations, and customizable normal and hover state controls.
To check the complete feature overview documentation of the Nexter Blocks Advanced Typography block, click here.
Best Used For:
- Portfolio and creative agency sites that need distinctive heading typography to separate them from competitors
- Marketing landing pages where key phrases need visual emphasis beyond bold or italic formatting
- Service or product pages that use animated text effects to draw attention to benefits and calls to action
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and 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. Select Normal when you are styling a single text item. Select Multiple when you want to apply different underline styles to separate words or phrases in the same heading.
Select Normal for this example.
2. Add the text in the Text field.
3. 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, select the underline type. You will find three options:
- None – Removes any underline from the text. Use this when you want to reset underline styling without removing other typography settings.
- Classic – Adds standard text decoration options including underline, overline, and strikethrough for normal and hover states. Use this when you need clean, professional underline styling without animation effects.
- Overlay – Adds animated or styled overlay effects that appear on or behind the text. Use this when you want eye-catching text highlights for marketing headings or hero text. For another approach to text-layer styling, see how to add a background text blend mode in WordPress using the same block.
Select the option that matches your design. Select Overlay for this example.
5. From the Overlay Style dropdown, select from the predefined overlay styles. Each style produces a different visual effect on both normal and hover states. To add text callouts alongside your underline effects, see how to add a blockquote in WordPress using Nexter Blocks.
From the Normal and Hover tabs, customize the style options to match your design.
Note: Depending on the selected style you’ll find different options for normal and hover states.
