Skip to main content

Resizing Columns in an email using the Modern Editor

Updated

You will learn

Overview of column layouts

When building emails in the modern editor, rows define the structure of your email by creating columns that content blocks can be placed into. Column layouts are essential for creating dynamic designs such as two-column image and text sections, side-by-side buttons, or multi-column content displays.

The modern editor offers pre-built row templates with different column configurations (1 column, 2 columns, 3 columns, and more). You can also customize the width of each column after placing a row to achieve your desired layout.

Adding rows with columns

To add a multi-column row to your email:

  1. Click the Build tab (the grid icon) in the left panel.
  2. Select the Rows section to view available row templates.
  3. Choose a row layout that matches your needs — for example, select the 2-column layout if you want two side-by-side sections.

    Screenshot 2026-07-30 at 12.51.34 PM.png
     
  4. Drag the selected row into your email canvas.
  5. You'll see placeholder boxes that say "Drag and drop content here" in each column.
  6. Drag content blocks (text, images, buttons, etc.) into each column as needed.

    Screenshot 2026-07-30 at 12.53.45 PM.png

Resizing column widths

To adjust the width of individual columns:

  1. Under Row > Column Settings, Hover over the divider line between two columns in your email.
  2. The cursor will change to a resize cursor (double-headed arrow).
  3. Click and drag the divider to the left or right to resize the columns.
  4. Release the mouse to set the new column width.

 

 

Tip: Column resizing is responsive. Make sure your content remains readable and visually balanced on mobile devices. Test your email design on different screen sizes before sending.

Creating custom column ratios

The modern editor automatically adjusts columns to maintain balance, but you can create custom proportions:

  1. Add a row with the number of columns you need.
  2. Resize the dividers between columns to create your desired proportions (for example, a 70/30 split or 50/50 balance).
  3. Ensure that text blocks within narrow columns use appropriate font sizes for readability.

  4. Use the Spacer block to add padding and improve visual spacing in your layout.

Tip: Avoid making columns too narrow, as this can make content difficult to read. A minimum column width of about 200 pixels is recommended for text content.

Best practices for multi-column emails

  • Start with pre-built row templates that closely match your desired layout to save time.
  • Use consistent spacing (padding) across all columns to maintain a professional appearance.
  • Resize columns incrementally and preview your email frequently to catch layout issues early.
  • Keep important content in the wider columns when using unequal column widths.
  • Test your email in multiple email clients to ensure columns render correctly.

Related articles

  • Adding rows and content blocks (Build tab)
  • Creating and editing content in the modern editor
  • Using Spacer blocks for layout control

Related articles