Column Management (new Email Composer)

Column management in the builder provides a flexible way to organize and design your layouts. It allows you to resize columns, add or remove them, and align content. This feature gives you control over how to best display different elements within your design.

How It Works

Each row you add has 12 equally sized divisions so you can arrange columns that always line up correctly in your email design. The maximum number of columns is 6, while the minimum column width is 2. This means that you can build rows like these:

Here are some actions you can perform:

• Resizable Columns: Adjust the width of existing columns.
• Add/Remove Columns: Easily add a new column or delete an existing one.
• Content Alignment: Align images and text within a row.

Using Column Management

1. Adding a Row and Columns: Begin by adding a row to your design. You can then define the number of columns you need.

2. Adjusting Width: Use the sidebar to drag column dividers for resizing. The width is defined in terms of column numbers, not pixels.
3. Adding a Column: Use the + Add new button to add a new column to the right-most side. When a new column is added, the nearest column to the left shrinks to accommodate it. If the leftmost column is already at its minimum width, the next available column will resize.
4. Removing a Column: To delete a column, click Delete in the column properties at the top-right corner. The width of the deleted column gets distributed to the nearest columns.
5. Limits:
   • The maximum number of columns is 6.
   • The minimum column width is 2.
6. Restrictions:
   • Columns cannot be reordered.
   • The + Add new button disappears when the maximum number of columns is reached.
   • Delete is not visible if only one column is present.

Notes

• If you mistakenly delete a column, you can use the undo feature to recover it.
• Column width is only specified in terms of column numbers, not in pixels.

Vertical Alignment

While this is a row-level setting, it's particularly useful for managing columns. If your columns contain different types of content, such as text and images, which might have different heights, vertical alignment can help you handle the empty space efficiently.

For instance, suppose one column contains an image and another contains text, and the text column is taller than the image column. By default, both will align to the top, leaving an empty space beneath the shorter column. However, you can choose to align the content in the middle or at the bottom to make the layout more aesthetically pleasing.