If your headings look plain or don’t grab attention, your content can easily be ignored. The Elementor Advanced Heading widget solves this by helping you create clean, structured, and visually engaging headings using subtitles, icons, separators, and more, so your content becomes easier to read and understand.

A complete YouTube tutorial for this widget is also available, offering a step-by-step visual guide to help you follow along more easily.

How to Install Elementor Advanced Heading Widget

Headings play a key role in how users scan and understand your website. Without proper styling, even great content can feel hard to follow. The Elementor Heading widget from Xpro gives you the flexibility to design headings that are clear, styled, and user-friendly.

Requirements

Before getting started, install and activate the Xpro Elementor Addons Pro plugin. Then make sure the Advanced Heading widget is enabled.

Step 1: Enable the Widget

• Go to your WordPress dashboard.
• Click on Xpro Addons
• Open the Widgets tab
• Find the Advanced Heading widget
• Turn it ON

How to Use Elementor Advanced Heading Widget

Once enabled, you can quickly add the Elementor Heading widget to any page and start designing.

Step 1: Add the Widget

• Open your page in Elementor
• Go to Xpro Addons – Pro section
• Search for Advanced Heading
• Drag and drop it onto your page

How to Style Your Headings with Elementor Heading Widget

The Elementor Advanced Heading widget gives you full control to design headings that look clean, consistent, and engaging.

Step 1: Add Heading Text

• Go to the Content tab
• Enter your title (before, center, after fields)
• Choose the HTML tag (default H2)
• Add a link if needed
• Adjust alignment from the Style tab

Add Subtitle in Elementor Heading Widget

Subtitles help explain your heading without making it too long.

• Enable the subtitle option
• Add your subtitle text
• Set its position (before or after the title).
• Style it with typography, color, and background

Add Description in Elementor Heading Widget

Descriptions give more context and improve content clarity.

• Enable the description option
• Add supporting text
• Use formatting like bold, italic, or links
• Style it using typography and color settings

Add Icon & Alignment in Elementor Heading Widget

Icons help highlight your message and make headings more noticeable.

• Turn ON the icon option
• Choose an icon or upload SVG
• Set its position (top, float, inside, behind)
• Customize size, color, background, and spacing

Add Separator in Elementor Heading Widget

Separators help organize content and improve visual structure.

• Enable the separator option
• Choose a style (line, icon, or shape)
• Set position (before or after title)
• Adjust color, size, and border style

Apply Shadow Text in Elementor Heading Widget

Shadow text adds depth and improves visibility.

• Enable shadow text
• Add your text
• Choose HTML tag
• Customize typography, color, background, and effects
• Adjust position, rotation, blur, and outline

Apply Image / GIF Masking in Elementor Heading Widget

Masking helps you create modern and eye-catching heading designs.

• Enter your heading text
• Upload an image or GIF as background
• Enable masking
• Adjust size, position, and attachment

Apply Scroll Effect to Elementor Heading Widget

Scroll effects add simple animations as users move down the page, making your headings feel more interactive without overwhelming the design.

Apply Mouse Effect to Elementor Heading Widget

Mouse effects allow your headings to respond to cursor movement, adding a subtle interactive touch to your layout.

While designing your headings, you can also improve your overall website by using a free theme builder for Elementor to customize headers, footers, and layout structure. To save time, you can use free Elementor templates to quickly build pages and extend functionality further with free Elementor addons like Xpro for more design options and widgets.

Bonus Tips 

Keep your headings short, clear, and easy to read, using subtitles to add context without making them too long. Maintain consistent typography across your website for a clean look.