Headline element
The Headline element is a rich-text title for a widget, such as "Get 10% off your first order". You choose its semantic heading level (H1 to H6) separately from its look, and you can personalize it with dynamic text, for example Welcome back, {visitor.firstName or 'friend'}!.
Available on: all platforms.
How it's rendered
The headline is published as a real heading tag (<h1> to <h6>), so screen readers and the page outline treat it as a heading. The level doesn't decide the size: new headlines get a font size from your branding heading scale, with a smaller size for screens up to 480 px wide. Change the size in Typography at any time.
Edit the text directly in the editor. The text toolbar sets bold, italic, color, links and alignment for the selected words.
Options
Option | What it does | Values / default |
|---|---|---|
Heading level | The semantic tag used on your site | H1–H6. New headlines use H2; headlines in bar templates use H4 |
Typography | Color, font, size, line height, letter spacing, style, text transform, text wrap, alignment | Defaults from your branding |
Text wrap | How lines break | Balance (default for headlines) evens out line lengths |
Style | Background, border, radius, shadow, opacity, scale | — |
Size, Spacing, Position | Width and height, padding and margin, static, relative or absolute placement | — |
Device, Animation | See Widget elements | All devices, no animation |
Behavior details
- Use one H1 at most, or none. The widget is part of your page, and your page probably has its own H1. H2 or lower is the safe choice for SEO and accessibility.
- Dynamic text and fallbacks. If a placeholder has no value and no fallback, it's replaced by nothing. Hi {visitor.firstName}! becomes "Hi !" for an unknown visitor, so add a fallback: Hi {visitor.firstName or 'there'}!.
- Theme CSS can apply. Some themes style every h1–h6 on the page (for example forcing uppercase or a font). If your headline looks different on the site than in the editor, override it with the widget's custom CSS.
- Mobile sizes are separate values. Switch the editor to mobile view to change them; desktop edits don't overwrite them.
Example
An exit popup headline that greets returning subscribers by name and everyone else generically:
{visitor.firstName or 'Wait'}, before you go!