BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Advanced Heading Free

How to set up and style the Advanced Heading widget in Elementor.

Advanced Heading builds a section heading from three parts of title text, so the middle part can stand out in a solid color, a gradient or a marker underline. A small pre-title above, a subtitle below and an optional separator line complete the block. Use it for section intros and hero headlines.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  1. Drag Advanced Heading from the Bright Addons category onto the page.

  2. Type the Pre-title, then split the heading across Title (before highlight), Highlighted text and Title (after highlight).

  3. Pick the HTML Tag that fits the page outline, and add a Link if the title should be clickable.

  4. Write the Subtitle, set the Alignment and switch on Separator Line if a line is wanted.

  5. Open the Style tab, go to Highlighted Text and choose the Style: Solid color, Gradient or Marker underline.

  6. Set the highlight colors, then adjust the typography and colors of the title, pre-title and subtitle.

Content options

Heading

Option What it does
Pre-title Small text shown above the heading. Leave it empty to hide it.
Title (before highlight) The first part of the heading, in the normal title color.
Highlighted text The part of the heading that gets the highlight style. Leave it empty for a plain heading.
Title (after highlight) Optional text that continues the heading after the highlight.
HTML Tag Sets the tag of the heading: H1 to H6, div, span or p. The default is H2.
Link Makes the whole title a link.
Subtitle A paragraph shown under the heading. Leave it empty to hide it.
Alignment Aligns the whole block left, center or right, per device.
Separator Line Adds a line between the title and the subtitle.
Bright Addons Pro

Like this free widget? Get 80 more with Pro

Pro adds 80 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $18 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Pre-title

    color, typography, spacing, background color, padding and border radius (shown when a pre-title is set).

  • Title

    color, hover color for a linked title, typography and text shadow.

  • Highlighted Text

    the highlight Style, Color or Gradient Start, Gradient End and Gradient Angle, Marker Color and typography.

  • Subtitle

    color, typography and spacing above it (shown when a subtitle is set).

  • Separator

    color, width and thickness of the line (shown when Separator Line is on).

Tips

  • The three title parts are always printed with a space between them, so the highlight cannot start in the middle of a word.

  • The title fields accept a few inline tags such as br, strong, em, span, sup, sub and mark. The pre-title and subtitle are plain text.

  • The Pre-title and Subtitle style sections only appear while those fields have text.

  • With Marker underline, Color sets the text color and Marker Color sets the band behind the text.

Questions and answers

Can the highlighted words be in the middle of the heading?

Yes. Put the words before them in Title (before highlight) and the words after them in Title (after highlight).

Can I use a gradient on the text?

Yes. In the Style tab, set Highlighted Text, Style to Gradient, then choose Gradient Start, Gradient End and Gradient Angle.

How do I make a heading with no highlight?

Leave Highlighted text empty and type the full heading in Title (before highlight).

Can the heading link to another page?

Yes. Fill in the Link field and the whole title becomes a link.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides