Column Management

Overview

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.

Features

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.

How to Use 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 action" 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 left-most column is already at its minimum width, the next available column will resize.

4. Removing a Column: To delete a column, click the "Delete" action in the column properties at the top-right corner. The width of the deleted column gets distributed to the nearest columns.

5. Limits:

   • For emails, the maximum number of columns is 6.

   • For pages, the maximum number of columns is 12.

   • The minimum column width is 2 for emails.

6. Restrictions:

   • Columns cannot be reordered.

   • The "+ Add new action" button disappears when the maximum number of columns is reached.

   • The "Delete" action 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.

Cards Style

Cards Style is a Row Property that enables you to create space between columns and round the corners of columns within a row.

Add Space Between Columns in a Row

Take the following steps to create space between columns within a row:

1. Enter your design within the application

2. Click on a row within the builder

3. Navigate to the Cards Style section of the Row Properties located on the right-hand side of the screen

4. Navigate to the Spacing option

5. Click the plus (+) symbol to increase the spacing between columns within the row

You successfully added space between columns in a row.

Note: To reduce the spacing between columns in a row, take steps one to four and then click the minus (-) symbol to reduce the spacing.

Round the Corners of Columns in a Row

Take the following steps to round the corners of columns within a row:

1. Enter your design within the application

2. Click on a row within the builder

3. Navigate to the Cards Style section of the Row Properties located on the right-hand side of the screen

4. Navigate to the Cards Rounded Corners option

5. If you'd like to round each corner of the columns within the row equally, click the plus (+) symbol below All corners to round all four corners simultaneously

6. If you'd like to round each corner separately, toggle on More options

7. Click the plus (+) symbol to round each corner individually

You successfully rounded the corners of the columns within the row.

Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.

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 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.