Rows form the base of your message and provide a layout. Within rows you will place various elements. A row can consist of multiple columns. You have the following options:
The width of the columns can be set individually. If you were to use a row consisting of two columns, it would look like this:
You can fill these columns with elements. Here's an example:
Select the row on the canvas to see the following options:
| Icon | What it does |
|
Move Drag the row to the desired spot. |
|
|
Duplicate Create a copy of your row with the duplicate function. |
|
|
Delete Delete an entire row including all elements. |
|
|
Switch from element to row to section Click on the left icon to switch from element > row > section. |
Row settings
Desktop
When you select a row, the settings shown below will appear on the left hand side:
Row content
-
Columns: here you see an overview of the columns you have and you can add columns by clicking on the '+' sign. Right below, you can rearrange the order by dragging a column up or down. You can also adjust the width, delete columns and lock them. If you have made changes to the column width, you can reset it by clicking on the button Equal columns.
-
Column spacing: decide on the spacing between the columns. A column without spacing looks like this:
Here's an example of column spacing of 20:
- Use same styling: this option can come in handy when you have multiple columns. You can opt to style one column and automatically give the other columns the same styling by switching this option on.
Column style
- Background color: you can set the background color individually per column. It is white by default, but you can choose a different color by using a color code or by using the color picker.
- Enable background image: you can place a background image in your column. This image will be shown behind the elements that you place in your column.
- Padding: spacing around your columns. It can be set individually for each side (top, bottom, left and right). A padding of 0 is set on all sides by default.
-
Corner radius: create rounded corners and decide how rounded they should be. Corners of a column are only visible when a background color has been set. Here's an example:
-
Border style: give your column a border. You can choose between none, solid, dotted and dashed. Here's an example of a dashed border:
Row style
-
Background color: the background color of a row. It is possible to give the column a different color to the row. Here's an example where the background color of the row is set to yellow and that of the column is set to blue:
-
Enable background image: place a background image in the row. The columns and elements will be layered on top.
- Alignment: the row is center aligned by default just as the rest of your message, but you can align it to the left or right as well.
- Padding:spacing around your row. It can be set individually for each side (top, bottom, left and right). A padding of 10 is set on all sides by default.
- Corner radius: create rounded corners and decide how rounded they should be. Corners of a row are only visible when a background color has been set.
-
Border style: give your row a border. You can choose between none, solid, dotted and dashed. Here's an example of a dashed border:
Mobile
You can adjust padding, column width and the order of the columns for mobile devices.
Settings
Each row has a number of display options:
-
Conditions: should the content be visible to everyone or just to a specific group of receivers? If you have Mail+ Professional, you can choose to show specific content based on the interests of the receivers.
If you have eCommerce, B2B or Automation, it is possible to show content based on a dynamic list.
Click on Select and a popup will appear with your dynamic lists:
Select the desired list or interest and click on OK. At the top left, you will now see an extra icon next to the section or row:
On the left hand side in the settings, you will see the target group or interest.
-
A/B settings: if you want to run an A/B test, select the content (row/section) you want to show in version A or B. At the top left, you will now see in which version this row or section will be shown.
If you want to learn more about A/B testing, read the article: Introduction: Automated A/B testing. - Block editing: you can lock blocks if desired. Locking a block means that only you can edit it and another user cannot. This can be useful when you build a template and you don't want anyone to make changes to the service links for example, such as the unsubscribe link.