Columns Block

The Columns block allows you to create multi-column layouts in your email templates. Use columns to organize content side-by-side, create product grids, or display information in a structured format.

Adding a Columns Block

1. While editing your email template, click the “+” button to add a new block
2. Search for “Columns” or find it in the “Design” category
3. Click to insert the block
4. The block will start with two columns by default

Column Layout

Number of Columns

When you add a Columns block, you can choose how many columns to create:

• 2 Columns: Two equal-width columns (default)
• 3 Columns: Three equal-width columns
• 4 Columns: Four equal-width columns
• Custom: Create custom column layouts

Adding Columns

1. Click the “+” button in the Columns block
2. Select “Column” to add a new column
3. Repeat to add more columns

Removing Columns

1. Select a column block
2. Use the block options menu to remove the column
3. Or use the delete/backspace key

Column Settings

Column Width

Control the width of individual columns:

• Equal Width: All columns have equal width (default)
• Custom Width: Set specific widths for each column
• Use percentage or fixed pixel widths

Vertical Alignment

Align content vertically within columns:

• Top: Align content to the top (default)
• Center: Center content vertically
• Bottom: Align content to the bottom

Stack on Mobile

Control how columns behave on mobile devices:

• Enabled (Default): Columns stack vertically on mobile
• Disabled: Columns remain side-by-side on mobile (may be too narrow)

Best Practice: Keep “Stack on Mobile” enabled for better mobile readability.

Adding Content to Columns

Adding Blocks

1. Click inside a column
2. Add any block type (paragraph, image, button, etc.)
3. Each column can contain multiple blocks

Column-Specific Content

Each column is independent and can contain:

• Text blocks (paragraphs, headings)
• Media blocks (images)
• Buttons and CTAs
• Other design blocks
• Any combination of blocks

Styling Options

Colors

• Background Color: Set background color for the columns container
• Text Color: Set default text color for column content
• Heading Color: Set color for headings within columns
• Button Color: Set color for buttons within columns
• Link Color: Set color for links within columns

Typography

Set typography defaults for column content:

• Font size
• Font family
• Font weight
• Line height
• Letter spacing
• Text transform
• Text decoration

Spacing

• Padding: Add internal spacing around column content
• Block Gap: Control spacing between blocks within columns
• Column Gap: Control spacing between columns (horizontal gap)

Borders

Add borders to the columns container:

• Border color
• Border radius
• Border style
• Border width

Best Practices

1. Mobile-First: Always enable “Stack on Mobile” for better mobile experience
2. Equal Widths: Use equal-width columns for simplicity and compatibility
3. Limited Columns: Use 2-3 columns maximum for email (more columns may be too narrow)
4. Consistent Content: Keep column content heights similar when possible
5. Test Thoroughly: Test column layouts in multiple email clients
6. Simple Layouts: Keep column layouts simple for better email client support
7. Content Balance: Distribute content evenly across columns

Examples

Example 1: Two-Column Product Layout

Goal: Display two products side-by-side

• Columns: 2
• Column Width: Equal (50% each)
• Stack on Mobile: Enabled
• Content: Image + Product Title + Price in each column

Example 2: Three-Column Feature List

Goal: Display three features in columns

• Columns: 3
• Column Width: Equal (33.33% each)
• Stack on Mobile: Enabled
• Content: Icon + Heading + Description in each column

Example 3: Two-Column Contact Info

Goal: Display contact information in two columns

• Columns: 2
• Column Width: Equal
• Stack on Mobile: Enabled
• Left Column: Phone, Email
• Right Column: Address, Hours

Troubleshooting

Columns Not Displaying Side-by-Side

• Some email clients have limited column support
• Test in multiple email clients
• Consider using tables for more reliable column layouts
• Ensure columns have content

Mobile Display Issues

• Enable “Stack on Mobile” option
• Test on actual mobile devices
• Some email clients may not support column stacking
• Consider single-column layout for critical content

Column Width Issues

• Use percentage widths for better compatibility
• Avoid very narrow columns (minimum 150-200px)
• Test in multiple email clients
• Consider equal-width columns for simplicity

Content Alignment Issues

• Use vertical alignment settings
• Ensure content heights are similar
• Test in multiple email clients
• Some alignment options may not work in all clients

Spacing Issues

• Adjust block gap and column gap settings
• Test on mobile devices
• Some email clients may render spacing differently
• Use consistent spacing values