Define Row Layout

Add rows to define the layout of your email before you begin adding content. You can drag and drop rows or blocks anywhere within the design. When you select a row or block, icons display to remove or duplicate it if necessary. Select rows with predefined column structures, then add, remove, or resize columns. Rows and columns determine where you can place blocks in the email.

Once you have configured rows and columns, see Blocks for instructions on adding content to your rows.

Rows

Rows serve as containers for blocks and are crucial for mobile responsiveness. The Row Properties allow you to apply design elements to multiple blocks at once. Rows automatically adjust to the size of the recipient’s display. To preview the row behavior for a different display size, click the Desktop or Mobile icon in the upper left corner of the canvas.

Click the Rows tab to select rows with different column configurations to drop into your design. You can adjust the size and number of columns later if necessary.

You must select a row in your design to make changes to it. Click outside the content area to select the entire row. To reposition it, click its Move icon, then drag it to its new location.

Once you select a row, the following Row Properties are available in the sidebar:

Backgrounds

• Row background colour: Set the background colour for the entire row.
• Content area background colour: Specify the background colour for just the content area within the row.
• Row background image: Use the toggle to choose an image to use as the background for the row. You can repeat, center, or fit the image to the background. Apply the background image to the entire row or just the content area.

Borders

• Content area border: Set a border around the content area with customizable colour, width, and style.
• Content area rounded corners: Add rounded corners to the content area.

Layout

• Vertical align: Choose the vertical alignment for blocks within the row. If your columns contain different types of blocks that might have different heights (such as text and images), vertical alignment can help you manage empty space efficiently.
• Stack on mobile: Toggle off to prevent blocks in the row from stacking vertically on mobile devices.
• Stack order on mobile: Reverse the order of blocks when they stack vertically on mobile devices.
• Hide on: Make the row invisible on either mobile or desktop devices.

Columns Structure

Columns give you flexibility in organizing and designing your layouts. You can add or remove columns, resize them, and align their blocks. You cannot reorder them. The builder specifies column width in terms of column numbers, not pixels. Emails support up to six columns, with a minimum column width of 2.

Edit a column

1. Select a row.
2. Navigate to the Columns Structure area on the Rows tab of the sidebar.
3. To add columns, click + Add New. Each new column is added to the right of the row. Adding a new column shrinks the column to its left to accommodate it. If that column is already at its minimum width, the next available column resizes instead.

To delete a column, select the column in the sidebar and click Delete next to the column number. The builder distributes the deleted column’s width to the nearest remaining columns. If there is only one column, you must delete the entire row to remove it.

Border

Borders can help delineate content and draw attention to specific elements in your design. You can set borders for both rows and individual blocks, such as buttons. You can apply borders to all sides or specify different borders for each side.

If a row has multiple columns, you must set borders for each column individually.

1. Click outside the content area to select the entire row.
2. The sidebar displays a menu showing the columns in the row. Choose the one you want to modify.
3. Toggle More Options on to specify which sides of the element will have borders and choose from various styles, sizes, and colours.

Padding

You can customize padding options for both rows and individual blocks. By default, you can set the padding around all sides of an element simultaneously.

1. Select the element.
2. Navigate to the Padding section in the sidebar.
3. Under All sides, click the plus or minus signs to apply or remove padding uniformly around all elements within the row.
4. Toggle More options on to apply padding to each side individually.