Column Management

  • Updated

Column management in the Email and Landing Page Composer gives you flexible control over how content is laid out within your designs. By working with rows and columns, you can create structured layouts, adjust spacing, and align content to ensure it displays clearly and consistently.

How Column Management Works

Each row in the composer is divided into 12 equal column units. You can combine these units to create up to 6 columns per row, with a minimum width of 2 units per column. This grid system ensures that columns always align correctly across your design.

For example, you might create:

  • Two equal columns (6 + 6)
  • Three equal columns (4 + 4 + 4)
  • A narrow sidebar with wider content (3 + 9)

Column Management layout examples

With column management, you can:

  • Resize columns by adjusting how many grid units each column uses.
  • Add or remove columns within a row to refine your layout.
  • Align content vertically within columns for cleaner designs.

Using Column Management

  1. Add a row to your design, then choose the initial column layout for that row.

Adding a row and columns in the composer

  1. Adjust column widths by dragging the column dividers in the sidebar. Widths are defined by column units, not pixels.
  2. Add a column using the + Add new button. New columns are added to the right. Nearby columns automatically resize to make room.
  3. Remove a column by clicking Delete in the column properties. The space from the deleted column is redistributed to adjacent columns.
  4. Limits:
    • The maximum number of columns in a row is 6.
    • The minimum column width is 2 units.
  5. Restrictions:
    • Columns cannot be reordered.
    • The + Add new button is hidden once the maximum number of columns is reached.
    • The Delete option is not available if only one column exists.

Notes

  • If you accidentally delete a column, use Undo to restore it.
  • Column widths are always defined by grid units, not fixed pixel values.

Vertical Alignment

Vertical alignment is a row-level setting that is especially helpful when columns contain content of different heights, such as images alongside text.

By default, content aligns to the top of each column. If one column is taller than another, this can leave uneven empty space. You can instead align content to the middle or bottom of the row to create a more balanced layout.

Vertical alignment examples

Was this article helpful?

Have more questions? Submit a request