In this guide, we’ll show you how to add the “Underline Link Hover Effect widget” to your Elementor website. Available in the Pro version, the Underline Link Hover Effect widget adds a sleek and stylish underline animation to your text links, enhancing interactivity and giving your site a polished, professional look. Perfect for highlighting key links and calls to action, this widget helps improve user engagement with subtle, dynamic visuals. With flexible customization options for underline styles, icons, and colors, you can seamlessly match the effect to your website’s branding.
Let’s explore the customization options available in the “Underline Link Hover Effect widget” for Elementor Pro below.
Add an Underline Link Hover Effect to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website
Go to Unlimited Elements and click "Widgets".
Search for "Underline Link Hover Effect" in the widget library.
Hover over the widget and click Install.
Add an Underline Link Hover Effect Widget to an Elementor Page
Click "Add Element" in Elementor
Search for "Underline Link Hover Effect" in the widget panel.
Drag and drop the “Underline Link Hover Effect” into the container.
Elementor Underline Link Hover Effect Widget General Settings
Link Text
Enter the text that will be displayed for the link.
Link
Set the URL or destination the link will navigate to when clicked.
Icon
Choose and display an icon (e.g., an arrow) to appear alongside the link text.
Alignment
Control the horizontal alignment of the link within its container. Options include:
Start
Center
End
Layout
Define the arrangement of the link’s content (text and icon). Options include:
Row
Row Reverse
Elementor Underline Link Hover Effect Widget Style Settings
Text Color
Set the color of the link text.
Text Typography
Customize the font, size, weight, and other styling options for the link text.
Line Color
Set the color of the underline effect.
Line Height
Adjust the thickness or vertical size of the underline.
Icon Size
Adjust the size of the icon using the slider or input box. This controls how large the icon appears next to the link text.
Underline Link Hover Effect Widget Design Examples For Elementor
Here are some live use cases for the Underline Link Hover Effect widget.
Tag Cloud with Underline Link Hover Effect widget.
Product Box with Underline Link Hover Effect widget
Thank you for using the Underline Link Hover Effect widget for Elementor! Designed to add a sleek and stylish underline animation to your text links, this Pro widget enhances interactivity and gives your website a polished, professional look. It’s ideal for highlighting important links, improving visual engagement, and creating a more dynamic browsing experience. With fully customizable options for underline style, icon, and color, the Underline Link Hover Effect widget gives you the flexibility to match your site’s design perfectly. If you have any questions or need assistance, feel free to get in touch. For inspiration and live examples, be sure to check out the demo on our website.
