Do you want to add unique underline text effects in Elementor? Adding a styled underline or overlay draws the reader’s eye to key phrases in a way that standard bold or italic formatting cannot replicate.
With the Advanced Typography widget from The Plus Addons for Elementor, you can add a styled underline or overlay text effect to selected words directly in the Elementor editor. Choose an underline style, pick a color, and the effect attaches to exactly the portion of text you mark within your heading.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Best Used For:
- SaaS landing pages that need to visually emphasize a key benefit phrase or product name in the hero heading
- Agency portfolio sites using custom underlines to give section titles a distinctive typographic look
- WooCommerce stores drawing attention to promotional phrases like “Limited Time” or “Best Value” in product banners
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is 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. Use Normal when you want a single block of text with one underline style applied. Use Multiple when the widget contains separate text segments that each need their own underline treatment.
For this walkthrough, select Normal.
2. In the Text field, add the heading or label you want to display. The underline or overlay effect applies to the portion of text you mark for emphasis within this 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 Underline Style dropdown, select the underline type. Three options are available:
- None – No underline is added. Use this to temporarily disable the effect while keeping your other style settings in place.
- Classic – Adds standard underline styles including underline, overline, and strikethrough, with separate options for both normal and hover states. Use this when you want a clean typographic underline that matches or contrasts the text color.
- Overlay – Adds a background fill or highlight effect behind the selected text. Use this when you want a highlighter-style emphasis that stands out on light page backgrounds.
For a different text decoration approach that adds an outline around text rather than a fill or underline, the How to Create Text Stroke Outline in Elementor? guide covers adding stroke styles to headings using The Plus Addons for Elementor.
Select the option that fits your design. For this walkthrough, select Overlay.
5. From the Overlay Style dropdown, select one of the predefined overlay styles. Each style controls the shape and animation behavior of the overlay. Use a solid or bold style for strong visual emphasis, or select a brush-stroke style for a more editorial, handcrafted look.
From the Normal and Hover tabs, set the overlay color, opacity, and animation duration for each state.
Note: Depending on the selected style you’ll find different options for normal and hover states.
This is how you add a unique underline or overlay effect to highlight text in the Elementor editor. For animated heading effects that go beyond text decoration, the How to Add Heading Animation in Elementor? guide shows you how to add animated headline styles using The Plus Addons for Elementor.
Suggested Reading: How to Create Image Reveal Effect on Text in Elementor?
