Lesson

Design Your Email Layout

Build Your Email Structure

You'll structure your email by creating a series of rows. Each row contains one or more columns. You will place editor blocks into these columns to add content to your email.

Rows

In the Email Drag & Drop Editor, rows represent the structure of the email content. A row is a horizontal container that contains columns. Columns are what ultimately are filled with content to create your email.

You can add or remove rows to adjust the structure of your email. The row selector gives you a choice of rows with different numbers and distributions of columns. You can always adjust a row later to add columns or change how they're laid out.

Columns

Each row can have one or more columns to split the content into smaller sections. Columns let you create multiple content areas side-by-side in your email.

A single column in a row can contain multiple blocks that will stack on top of one another.

New row between two completed rows showing 4 empty columns
The newly created row here shows 4 empty columns. You can see what filled columns look like in the rows above and below.

Adding and Resizing Columns

Usually you'll choose a row with the right number of columns, but you can always insert more if needed. To add a column to an existing row:

  • Step 1: Go to the row properties.
  • Step 2: Scroll down to Customize Columns and select +Add New.

You can also change the size of each column by dragging the bars between columns. The size of the columns will always add up to a total of 12 units.

Column Style Settings

You can adjust column style settings for each, individual column. To change the background color of the column, adjust the padding, or add a border:

Step 1: Scroll down to the Row Properties section of the editing panel on the right-hand side of the Drag & Drop Editor.

Step 2: Click on the column you want to edit in the Customize Columns section.

Step 3: Adjust your column settings as desired.

Walkthrough

In the video below, the email designer adds borders to each individual column in the row.

The Column Background color setting will override all other background colors.