On the left hand side of the editor, you will find different elements categorized in tabs, such as the Structures tab. You can set up the format of your message under this tab.
Click on Structures to see the following options:
- Rows: Rows can consist of multiple columns and are used to structure an article block. Elements are placed in a row, such as text and image(s). A row is always placed in a section.
- Sections: a section is a part of the message which consists of row(s). If you want to create (visually) different article blocks, you give each block its own section.
Rows
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.
Sections
When you start a message from a blank canvas, it will consist of at least one section. You can structure your message into multiple sections.
When you select a section on the canvas, you will see the following options appear next to your section:
Icon | What it does |
Move Drag the section to the desired spot. |
|
Duplicate Create a copy of your section with the duplicate function. |
|
Switch layout Switch the order of the content within your section. Select the desired layout for the block, such as an image above your text instead of next to your text. The layout will change, but the content will stay the same. |
|
Save as block Save a section you have created as a block for future use. |
|
Delete Delete an entire section including all elements. |
When do you use multiple sections?
In certain situations it would prove useful to structure your message in multiple sections:
- You can create an article block from a section and save it for future use. The best way to do so is to create a separate section for the article that you would like to save as a block.
- You, your colleague or your partner has created content blocks for you to use. If you want to use these, you first have to place a section in your message. Then you can select the block under Content.
Section settings
Desktop
When you select a section, the following settings will appear on the left hand side:
- Background color: a background color can be set on section level. The difference with a background color in the general settings is that this background color is set for the entire message, unless indicated otherwise in a section. Here's an example where the background color in the general settings is set to orange, the background color in the section is set to blue and the background color of the row is set to white:
- Enable background image: you can show a background image instead of a background color if desired.
- Alignment: the section is center aligned by default just as the rest of your message, but you can align it to the left or right as well.
- Border style: give your section a border. You can choose between none, solid, dotted and dashed. Here's an example of a dashed border:
Mobile
Settings
These settings are similar to the settings of a row. The only difference is that you apply these settings to an entire section. This can be more efficient when you want to show certain content to specific group(s) through A/B testing for example.
- 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. You will now see an icon appear next to the section at the top left:
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.