Heading Element

The Heading element creates headline text for your popup. Use it for titles, section headers, and any text that needs to stand out.

Overview

Property	Value
Element Type	heading
Can Contain Children	No
HTML Tags	H1, H2, H3, H4, H5, H6

Use Cases

• Popup titles and main headlines
• Section headers
• Feature titles
• Promotional headlines
• Form section labels

Content Settings

Heading Text

Enter your headline text. Keep it concise and impactful.

Heading Level

Choose the semantic HTML heading level:

Level	Tag	Typical Use
H1	<h1>	Main popup title
H2	<h2>	Major sections
H3	<h3>	Sub-sections
H4	<h4>	Minor headings
H5	<h5>	Small headings
H6	<h6>	Smallest headings

SEO Note

While heading levels matter for SEO on web pages, popup content typically doesn't affect page SEO. Choose the level that makes visual sense.

Text Alignment

Option	Description
Left	Align text to the left
Center	Center text horizontally
Right	Align text to the right

Typography Settings

Font Family

Select from system fonts or Google Fonts. Popular choices for headings:

• Inter — Modern, clean
• Outfit — Contemporary, friendly
• Playfair Display — Elegant, editorial
• Montserrat — Geometric, professional

Font Size

Heading sizes are typically larger than body text:

Level	Suggested Size
H1	32-48px
H2	24-32px
H3	20-24px
H4	18-20px
H5	16-18px
H6	14-16px

Font Weight

Headings typically use heavier weights:

Weight	Description
500	Medium
600	Semi-bold (popular)
700	Bold (popular)
800	Extra-bold
900	Black

Line Height

For headings, tighter line heights work well:

• 1.1 — Very tight
• 1.2 — Tight (recommended)
• 1.3 — Normal

Letter Spacing

Adjust character spacing:

• Negative values create tighter, modern look
• Positive values add air and elegance

Text Transform

Transform the text case:

Option	Example
None	As typed
Uppercase	ALL CAPS
Lowercase	all lowercase
Capitalize	Each Word Capitalized

Text Color

Set the heading color to match your brand or create contrast.

Advanced Typography

Text Shadow

Add shadow for depth or effect:

Property	Description
X Offset	Horizontal shadow position
Y Offset	Vertical shadow position
Blur	Shadow blur radius
Color	Shadow color

Example for subtle depth:

• X: 0px
• Y: 2px
• Blur: 4px
• Color: rgba(0,0,0,0.1)

Text Decoration

Option	Description
None	No decoration
Underline	Underlined text
Line-through	Strikethrough

Spacing Settings

Margin

Control space around the heading:

Top: 0px
Right: 0px
Bottom: 16px (space before next element)
Left: 0px

Padding

Add internal spacing if using a background.

Advanced Settings

HTML ID

Set a custom ID:

#main-headline {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

CSS Classes

Add custom classes for styling.

HTML Tag Override

Change the rendered HTML tag independently of visual styling.

Examples

Main Popup Title

🎉 Welcome to Our Store!

Settings:

• Level: H2
• Font: Inter
• Size: 32px (desktop), 24px (mobile)
• Weight: 700
• Alignment: Center
• Color: #1e293b

Promotional Headline

50% OFF Everything

Settings:

• Level: H2
• Font: Outfit
• Size: 40px
• Weight: 800
• Transform: Uppercase
• Letter Spacing: 2px
• Color: #dc2626

Subtle Section Header

What You'll Get

Settings:

• Level: H3
• Font: Inter
• Size: 18px
• Weight: 600
• Transform: Uppercase
• Letter Spacing: 1px
• Color: #64748b

Best Practices

1. Hierarchy — Use heading levels to create visual hierarchy
2. Contrast — Make headings stand out from body text
3. Brevity — Keep headlines short and punchy
4. Readability — Test on all device sizes
5. Emphasis — Use sparingly for maximum impact

Related Elements

• Text — For body content
• Button — Often paired with headlines
• Divider — Visual separation after headings