Overview

Columns allow you to organize content side-by-side within a row, making it easy to create layouts such as multi-column newsletters, product grids, and image-and-text combinations.

Every row in the Email Builder uses a 12-column grid. You can add, resize, and remove columns to create the layout that best fits your design.

Understanding the Column Grid

The Email Builder uses a 12-column layout system. Each row must total 12 columns, allowing you to create flexible, responsive layouts.

Common layouts include:

• One column (12)
• Two columns (6 / 6)
• Three columns (4 / 4 / 4)
• Four columns (3 / 3 / 3 / 3)
• Mixed layouts (3 / 6 / 3, 2 / 8 / 2, etc.)

The maximum number of columns in a row is 12, while the minimum width of an individual column is 1.

Adding Columns

If your design requires additional sections, you can add columns to an existing row.

To add a column:

1. Select the row you want to modify.
2. Open the Column Structure section of the Properties panel.
3. Click + Add New.

The new column is added to the far right of the row. The Email Builder automatically adjusts the widths of the existing columns to maintain the 12-column layout.

If the maximum number of columns has been reached, the + Add New option is no longer available.

Resizing Columns

Column widths can be adjusted to create custom layouts.

To resize a column:

1. Select the row.
2. Drag the divider between two columns.
3. Release the divider when the desired width is reached.

As one column grows, the neighboring column automatically adjusts to maintain the 12-column grid.

Removing Columns

Columns can be removed when they are no longer needed.

To remove a column:

1. Select the row.
2. Select the column you want to remove.
3. Click the Delete icon.

When a column is deleted:

• Adjacent columns automatically expand to fill the available space.
• If the first column is removed, the column immediately to its right expands.
• The Delete option is hidden when only one column remains.

If you accidentally remove a column, use Undo to restore it.

Spacing Between Columns

Rows containing multiple columns can be styled using Cards Style.

The Spacing option adds space between columns, making layouts easier to read and creating a more modern card-based appearance.

To adjust spacing:

1. Select the row.
2. Open the Cards Style section.
3. Increase or decrease the Spacing value.

Rounded Column Corners

Cards Style also allows you to round the corners of every column within a row.

To adjust rounded corners:

1. Select the row.
2. Open the Cards Style section.
3. Adjust Cards Rounded Corners.

You can apply the same radius to all corners or enable More Options to customize each corner individually.

Note: Microsoft Outlook does not support rounded image corners. Images may display with square corners when viewed in Outlook.

Vertical Alignment

Rows automatically expand to match the height of the tallest column.

When columns contain different amounts of content, shorter columns may display extra space above or below their content.

Vertical Alignment controls where content is positioned within the available space.

Available options include:

• Top
• Middle
• Bottom

For example, if one column contains an image and the other contains a longer block of text, Middle alignment centers the image vertically within the row, while Bottom alignment aligns it with the bottom of the text.

Best Practices

• Start with the simplest column layout that meets your design needs.
• Use consistent spacing between columns for a clean, professional appearance.
• Preview multi-column layouts on mobile devices to verify readability.
• Use Vertical Alignment when columns contain different amounts of content.
• Use the Undo feature if you accidentally resize or remove a column.