Column Overview

The Column element allows you to segment content into one or more columns. You can break down a content area into multiple columns to better space and align images, text, buttons, and other content. Each column gives you the option to customize its coloring, spacing, visibility, and more. Columns can help organize the content in your emails so that your emails are easier to read and visually appealing.

How to Add the Column Element to Your Template

To add the Column element to your email template, ensure you are in the Content section. Then, click the COLUMN icon and drag it onto the email body. 

Properties of the Column Element

You can choose to customize the Column element in Desktop or Mobile mode. However, the Mobile mode does not contain all the styling options. Specifically, the Mobile mode does not allow you to have multiple columns within one row. If your template has multiple rows within a column, the Mobile mode will break each column out into its own row.

Columns

The Columns section allows you to choose how many columns are in your row and how they’re spaced. You can have up to 4 rows and can choose pre-determined spacing. Once they’re added to your email body, you can further adjust how wide each column is.

Column Properties:

You can click into each of the columns to change their properties. For the columns, you can customize the following: 

• Background color: The color behind the text, image, button, etc.

• Padding: Add spacing between the border of the column’s box and the content inside of it, used to separate items more clearly. You can toggle on “More Options” to customize the padding on the top, right, left, and bottom.

• Border: Add a box around a column to differentiate it from other columns. You can adjust the size, color, and format of the border.

Row Properties

You can also customize the row that holds the columns. For the rows, you can customize the following: 

• Background color: You can set a color as the background of the row. When you add padding to the row, the background color will be between the columns and the border of the row.
• Content Background Color: You can select a background color for the content in your email.  This can help to improve readability, create cohesive branding, and better match the background of the email client of the recipient. Read more about background colors and their impact here.
• Background Image: You can select an image or video to fill in your column. Once you upload it, you will be able to adjust its settings and position.
• Padding: Add spacing between the border of the row and the outside of the column, used to separate items more clearly. You can toggle on “More Options” to customize the padding on the top, right, left, and bottom.

Responsive Design

With responsive design, you can customize your emails to ensure they display properly across different devices. Columns can be tailored to display perfectly or be hidden so that they don’t display on a certain device. To customize the email for a specific device, click on the desktop icon or mobile icon, or select the Desktop or Mobile tab at the bottom left of the editor body. You can edit different aspects of the column based on the device the recipient is using to view the email.

Under the responsive design section, you can hide the column(s) on a desktop or mobile device. When either "Hide on Desktop" or "Hide on Mobile" is toggled on, the column(s) will appear faded within the email template, making it and the elements within it invisible to participants depending on whether they are viewing the email on a desktop or a mobile device. 

For Mobile devices, instead of having the email elements stacked on top of each other in their own rows, you can toggle on “Do Not Stack on Mobile” so that the elements in your email will appear in one row with multiple columns.