Spacer Block

The Spacer block adds vertical white space between blocks in your email templates. Use spacers to create breathing room, separate sections, and improve the visual flow of your emails.

Adding a Spacer Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Spacer” or find it in the “Design” category
3. Click to insert the block

Spacer Settings

Height

Control the amount of vertical space the spacer creates:

• Default: 30px
• Set custom height using px, em, or rem units
• Adjust the height to create the desired spacing

Common Heights:

• 10px – Small spacing
• 20px – Medium spacing
• 30px – Default spacing
• 40px – Large spacing
• 50px – Extra large spacing

When to Use Spacers

Section Separation

Use spacers to create clear separation between major sections of your email:

• Between header and main content
• Between content sections
• Before call-to-action buttons
• After footer content

Visual Breathing Room

Add spacers to create visual breathing room:

• Around important content
• Between paragraphs and images
• Around buttons and CTAs

Mobile Optimization

Use spacers to improve mobile readability:

• Add spacing between stacked content on mobile
• Create comfortable reading experience
• Separate touch targets

Best Practices

1. Consistent Spacing: Use consistent spacer heights throughout your email
2. Appropriate Sizing: Use 20-40px for most spacing needs
3. Section Breaks: Use larger spacers (40-60px) for major section breaks
4. Mobile Testing: Test how spacers appear on mobile devices
5. Don’t Overuse: Use spacers strategically, not between every block
6. Visual Hierarchy: Use different spacer sizes to create visual hierarchy

Examples

Example 1: Section Separation

Goal: Separate header from main content

• Height: 40px
• Placement: Between header and first content block

Example 2: Content Spacing

Goal: Add spacing between paragraphs

• Height: 20px
• Placement: Between paragraph blocks

Example 3: Pre-Button Spacing

Goal: Add space before a call-to-action button

• Height: 30px
• Placement: Before button block

Troubleshooting

Spacer Not Working

• Verify the spacer block is properly inserted
• Check that height is set correctly
• Ensure the spacer is between blocks (not inside another block)
• Test in multiple email clients

Spacing Too Large/Small

• Adjust the height value to achieve desired spacing
• Test on mobile devices to ensure spacing looks good
• Consider the context (more spacing for section breaks, less for content)

Mobile Display Issues

• Test spacers on actual mobile devices
• Some email clients may render spacing differently
• Consider using percentage-based heights for responsive spacing
• Test in multiple mobile email clients

Inconsistent Spacing

• Use consistent spacer heights throughout your email
• Create a spacing system (e.g., 10px, 20px, 30px, 40px)
• Document your spacing standards for consistency