Separator Block

The Separator block creates a horizontal line or divider to visually separate sections of your email. Use separators to break up content, create visual hierarchy, and improve email readability.

Adding a Separator Block

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

Separator Settings

Width

Control the width of the separator line:

• Default: 100px
• Set custom width using px, em, rem, or % units
• Use percentage for responsive widths (e.g., 50% for half-width)

Examples:

• 100px – Fixed 100 pixel width
• 50% – Half the container width
• 300px – Wider separator

Height

Control the thickness of the separator line:

• Default: 1px
• Set custom height using px, em, or rem units
• Thicker lines create more visual weight

Examples:

• 1px – Thin line (default)
• 2px – Medium line
• 3px – Thick line

Border Style

Choose the style of the separator line:

• Solid: Continuous line (default)
• Dashed: Dashed line
• Dotted: Dotted line
• Double: Double line

Border Color

Set the color of the separator:

• Choose from preset color palette
• Use custom colors with the color picker
• Match your brand colors for consistency

Default: Uses the default text color

Custom Border Color

Set a custom border color using hex codes or color values.

Alignment

Control how the separator is aligned:

• Left: Separator aligns to the left
• Center: Separator is centered (default, recommended)
• Right: Separator aligns to the right

Email Best Practice: Center alignment is most reliable across email clients.

Spacing

Padding

Add spacing above and below the separator:

• Top Padding: Space above the separator
• Bottom Padding: Space below the separator
• Creates visual breathing room around the separator

Best Practices

1. Consistent Styling: Use consistent separator styles throughout your email
2. Appropriate Width: Use full-width or centered separators for better email client compatibility
3. Visual Hierarchy: Use thicker or colored separators to emphasize major section breaks
4. Spacing: Add adequate padding to separate content sections clearly
5. Subtle Design: Keep separators subtle to avoid distracting from content
6. Mobile-Friendly: Test how separators appear on mobile devices

Examples

Example 1: Simple Section Divider

Goal: Create a subtle divider between sections

• Width: 100% (full width)
• Height: 1px
• Border Style: Solid
• Border Color: Light gray (#e0e0e0)
• Alignment: Center
• Padding: 20px top and bottom

Example 2: Accent Separator

Goal: Create a prominent brand-colored separator

• Width: 200px
• Height: 3px
• Border Style: Solid
• Border Color: Brand primary color
• Alignment: Center
• Padding: 30px top and bottom

Example 3: Dashed Divider

Goal: Create a decorative dashed separator

• Width: 80%
• Height: 1px
• Border Style: Dashed
• Border Color: Medium gray
• Alignment: Center
• Padding: 15px top and bottom

Troubleshooting

Separator Not Displaying

• Check that the separator block is properly inserted
• Verify border color is set and visible
• Ensure height is set to at least 1px
• Test in multiple email clients

Width Issues

• Some email clients have limited width support
• Use percentage widths for better compatibility
• Test in multiple email clients
• Consider using full-width (100%) for reliability

Color Not Showing

• Verify border color is set correctly
• Check that the color has sufficient contrast
• Some email clients may render colors differently
• Test in multiple email clients

Spacing Issues

• Adjust padding values to achieve desired spacing
• Test on mobile devices
• Some email clients may render spacing differently
• Use consistent padding values throughout

Alignment Issues

• Center alignment is most reliable in email clients
• Test in multiple email clients
• Some clients may not support all alignment options
• Consider using center alignment for consistency