Advanced Heading Widget (Elementor) #

The Advanced Heading widget helps you create visually rich heading sections using a combination of sub-heading, main title, and description text. It is ideal for section headers, hero titles, and content introductions on modern websites.

Live Demo

How to Use the Advanced Heading Widget #

Step 1: Add the Widget #

1. Open a page in the Elementor Editor.

2. Search for Advanced Heading.

3. Drag and drop the widget into your page.

Step 2: Configure Content #

Go to Content tab → Content section.

Sub Heading #

• Show Sub-Heading – Enable or disable the sub heading.

• Sub-Heading Text – Add a short supporting heading text.

Use this for small intro text above the main heading.

Title (Main Heading) #

• Show Title – Enable or hide the main heading.

• Title Text – Enter the main heading text.

This is the primary Elementor heading title used for section emphasis and SEO.

Description #

• Show Description – Enable or disable description text.

• Description Editor – Add paragraph text using the visual editor.

  • Supports formatting, links, and media.

Use this to explain or expand on the heading message.

Step 3: Style the Heading Box #

Go to Style tab → Box.

Alignment #

• Align the entire heading content:

  • Left

  • Center

  • Right

This controls alignment for sub-heading, title, and description together.

Step 4: Style Individual Elements #

Sub Heading Style #

Go to Style tab → Sub Heading.

You can customize:

• Typography

• Text color

• Spacing (margin)

Heading (Title) Style #

Go to Style tab → Heading.

Available options:

• Typography – Font family, size, weight, line height

• Color – Text color (responsive supported)

• Margin – Control spacing around the heading

This helps fine-tune your Elementor heading title design.

Description Style #

Go to Style tab → Description.

Customize:

• Typography

• Text color

• Margin spacing

Step 5: Advanced Options #

Use Elementor’s Advanced tab for:

• Padding & margin

• Responsive visibility

• Motion effects

• Custom CSS (optional)

Final Output #

The Advanced Heading widget creates a clean, structured heading section combining sub-heading, title, and description, fully responsive and visually consistent across devices.

Also See the youtube tutorial:

💡 Tips for Better Results #

• Use only one H1-style heading per page for SEO best practices.

• Keep sub-headings short and descriptive.

• Adjust margins to maintain proper spacing between sections.

• Use global fonts and colors for consistent branding.