Heading Block

The Heading block creates headings and titles in your email templates. Use headings to structure your content, create visual hierarchy, and guide readers through your email.

Adding a Heading Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Heading” or find it in the “Text” category
3. Click to insert the block
4. Start typing to add your heading text

Alternatively, you can type # followed by a space to quickly create a heading block.

Heading Levels

Choose the appropriate heading level for your content hierarchy:

• H1: Main title (largest, use once per email)
• H2: Major section headings
• H3: Subsection headings
• H4: Minor headings
• H5: Small headings
• H6: Smallest headings

Default: H2

When to Use Each Level

• H1: Email subject or main title
• H2: Primary sections (e.g., “Order Details”, “Shipping Information”)
• H3: Subsections within H2 sections
• H4-H6: Further subdivisions as needed

Text Formatting

Basic Formatting

Use the formatting toolbar to style your heading:

• Bold: Make text bold (though headings are typically bold by default)
• Italic: Italicize text
• Link: Add hyperlinks to headings
• Inline Code: Display code or technical terms

Text Alignment

Align your heading:

• Left: Align heading to the left (default)
• Center: Center-align heading
• Right: Align heading to the right

Typography Settings

Font Size

Set the size of your heading. Each heading level has a default size, but you can customize:

• Preset sizes (Small, Normal, Large, etc.)
• Custom size with px, em, or rem units
• Larger sizes for H1, progressively smaller for H2-H6

Font Family

Select a font family for your heading. Consider:

• Web-safe fonts for better email client compatibility
• System fonts for consistent rendering
• Custom fonts (may have limited support in some email clients)

Font Weight

Control the thickness of text:

• Light
• Normal
• Bold (common for headings)
• Custom weight values

Font Style

Apply italic styling to headings (use sparingly).

Line Height

Adjust the vertical spacing between lines. Headings typically have tighter line height than body text.

Letter Spacing

Control spacing between characters. Useful for:

• All-caps headings
• Special styling effects
• Improving readability of large headings

Text Transform

Transform text case:

• None: Keep original case
• Uppercase: Convert to all uppercase
• Lowercase: Convert to all lowercase
• Capitalize: Capitalize first letter of each word

Text Decoration

Add decorative elements:

• None: No decoration
• Underline: Underline heading
• Strikethrough: Strike through heading

Colors

Text Color

Set the color of your heading. Choose from:

• Preset color palette
• Custom colors using the color picker
• Brand colors for consistency
• Ensure sufficient contrast with background

Background Color

Add a background color to your heading. Useful for:

• Highlighting important headings
• Creating visual sections
• Adding visual interest

Link Colors

Customize the appearance of links within headings:

• Link color
• Hover color (limited support in email clients)

Spacing

Padding

Add internal spacing around your heading. This creates space between the text and the block’s edges.

Merge Tags

You can use merge tags within heading blocks to insert dynamic content:

• Field Values: {field:1} – Display form field values
• User Data: {user:display_name} – Display user information
• Entry Data: {entry:date} – Display entry information
• Custom Tags: Any custom merge tags provided by your integrations

Examples:

• Order #{order_number}
• Hello, {user:first_name}!
• Your {product_name} Order

Links in Headings

Adding Links

1. Select the text you want to turn into a link
2. Click the link icon in the toolbar
3. Enter the URL or use a merge tag for dynamic links
4. Set link options (open in new tab, etc.)

When to Link Headings

• Link to related content or pages
• Create clickable section headers
• Link to order details, account pages, etc.

Best Practices

1. Hierarchy: Use heading levels to create clear content hierarchy
2. One H1: Typically use only one H1 per email (the main title)
3. Consistent Styling: Keep heading styles consistent throughout your email
4. Readable Sizes: Ensure headings are large enough to stand out but not overwhelming
5. Contrast: Ensure sufficient contrast between heading text and background
6. Short and Clear: Keep headings concise and descriptive
7. Mobile-Friendly: Test how headings appear on mobile devices
8. Use Merge Tags: Leverage merge tags for personalized headings

Examples

Example 1: Main Email Title

Content: “Order Confirmation”

• Level: H1
• Font Size: 28px
• Font Weight: Bold
• Text Color: Brand color
• Alignment: Center
• Padding: 20px bottom

Example 2: Section Heading

Content: “Order Details”

• Level: H2
• Font Size: 22px
• Font Weight: Bold
• Text Color: Dark gray
• Alignment: Left
• Padding: 15px top, 10px bottom

Example 3: Personalized Heading

Content: “Hello, {user:first_name}!”

• Level: H2
• Font Size: 20px
• Font Weight: Bold
• Text Color: Brand color
• Alignment: Left

Example 4: All-Caps Heading

Content: “SHIPPING INFORMATION”

• Level: H3
• Font Size: 16px
• Font Weight: Bold
• Text Transform: Uppercase
• Letter Spacing: 2px
• Text Color: Dark gray

Troubleshooting

Heading Not Displaying

• Check that the heading has content
• Verify there are no formatting issues
• Ensure the block is properly saved

Merge Tags Not Working

• Verify merge tag syntax is correct
• Check that the data source is configured
• Test with actual data to confirm tags resolve

Font Size Issues

• Some email clients have limited font size support
• Test in multiple email clients
• Consider using relative units (em, rem) for better scaling
• Ensure minimum font sizes for readability

Styling Not Applied

• Some email clients strip or ignore certain CSS
• Test in multiple email clients
• Use inline styles when possible
• Avoid complex CSS that may not render

Hierarchy Issues

• Ensure proper heading level order (don’t skip levels)
• Use H1 for main title, H2 for sections, etc.
• Maintain consistent styling within each level