Use rows in the email editor

In the email editor, every email is made of rows. A row is a horizontal band that splits the email from top to bottom. Each row has one to four columns, and blocks such as headings, text, images and buttons sit inside those columns.

The Layers panel on the left lists this order as Row › column › block.

Add a row

1. Click Rows on the left

   The panel has two groups: Empty rows and Pre-made rows. You can type what you need in Search rows.

2. Drag an empty row for a blank layout

   Drag a one, two, three or four-column row from Empty rows onto the email. A blue area saying Drop row here shows where it will land.

3. Click a pre-made row for a ready section

   Pre-made rows are grouped as Header, Text, Cover, Image and text, Products, Promotion, Event, App and Quote. A pre-made row you click goes at the end of the email, just above the footer, and is selected. To put it somewhere else, drag it between rows. Pre-made rows take their fonts and colours from Global settings.

Select, move and duplicate a row

Move the mouse just outside the row's left edge and click the Row tag that appears. The row gets a blue frame and a toolbar appears above it: Move up, Move down, Duplicate, Add to saved blocks and Delete. If GrafAI is on, the toolbar also has a GrafAI button. On the keyboard, ⌘D on a Mac or Ctrl+D on Windows duplicates the row, and Alt with the up or down arrow moves it.

Row settings

When a row is selected, the panel on the left shows its settings:

• Columns: number of columns, preset widths (such as half and half, or one third and two thirds), custom widths in per cent, Column gap, Space between items and Vertical alignment. Click one of the column buttons in this section and that column is selected, with its own settings in the panel.
• Spacing: the space above, below and on both sides of the row. Use it to give sections room to breathe. All sets the four sides with one value, Axis sets top-bottom and left-right as pairs, and Sides sets each side on its own, the same as a block's padding.
• Background: the row's Background colour and Background image. With Full width on, the colour splits in two: Outer background reaches both edges of the email, and Inner background sits behind all the columns. To colour a single column, select the column and use Column box.
• Corners and border: border width and colour, and corner radius.
• Mobile: Stack on mobile, Reverse order on mobile, Hide on mobile and Hide on desktop.
• Show to: shows the row to everyone or only to contacts who match a condition. See Show email content by contact.

Column settings

Click an empty part of the column, or click a line such as Column 1 in the Layers panel. The panel on the left shows that column's settings: width in per cent, Vertical alignment, Column box, Inner spacing, Duplicate column and Delete column.

Column box gives the column a background colour, a corner radius and outer spacing, which turns it into a card. Inner spacing keeps the content away from the edges of the card. Duplicate column copies the column with its blocks right next to it, and Delete column removes it with its blocks; the last column in a row cannot be deleted.

Adjust for mobile

Switch to Mobile in the top bar and the panel says You are editing for mobile. In this view, Spacing, Space between items and, on a stacked row, Column gap change mobile only; desktop stays as it is. A field with no mobile value uses the desktop value. Reset clears the mobile value.

When columns stack on mobile, Widths, Custom widths and Vertical alignment have no effect on mobile, so the mobile view hides them. If the columns don't stack, these fields show in the mobile view too and change desktop as well.