---
title: "How to Add Underline Overlay Effect on Text in Elementor?"
url: https://theplusaddons.com/docs/underline-overlay-effect-on-text-in-elementor/
date: 2024-05-15
modified: 2026-05-06
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Unique-Underline-Text-Effects-in-Elementor_-1024x536.jpg
word_count: 600
---

# How to Add Underline Overlay Effect on Text in Elementor?

## 

- Utilizes the Advanced Typography widget from The Plus Addons for Elementor to add unique underline effects.
- Offers three underline styles: None, Classic, and Overlay, allowing for customization of text appearance.
- Enables selection of predefined overlay styles and further customization through Normal and Hover tabs.

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](https://theplusaddons.com/docs/advanced-typography/).*

**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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/)

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?](https://theplusaddons.com/docs/create-text-stroke-outline-in-elementor/) guide covers adding stroke styles to headings using The Plus Addons for Elementor.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-advanced-underline-options.gif)

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?](https://theplusaddons.com/docs/add-animated-headings-in-elementor/) guide shows you how to add animated headline styles using The Plus Addons for Elementor.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-advanced-underline-options-demo.gif)

***Suggested Reading**: [How to Create Image Reveal Effect on Text in Elementor?](https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/)*