The Rows panel includes different types of structural elements for your message. They allow you to create different sections of the message. Why different sections? Can’t you just have different content blocks within the same section? You can, but that won’t always work. Rows with different structures allow you to organise content in a way that is different from the preceding and following rows.
For instance, you may need…
- a single-column row with a hero image to introduce your online store’s new promotion
- a three-column row below it to display some of the store’s best-selling products;
You may also need to have different rows, even if they have the same structure, if you want them to have different row or content background colour.
Instead, if you need to switch to a different number of columns for an existing row, you’ll be able to do so by using the “Customise Columns” widget inside the row’s properties.
Selecting a row will switch the properties panel to the row and column settings. The editor provides great flexibility and customisation at both the row and column level.
To make message creation even easier and faster, you can clone entire Rows (for example, a picture, a button and a text block) with all of their settings and blocks. This allows what email designers call modular design: you create a module and then replicate it n times in the message.
Managing columns within rows
When you select a row, the row properties will have a “customise columns” section, where you can manage the columns inside that row, and apply additional settings.
Adding a column
Clicking on + Add new action will add a new column inside the row. The New Column is always added to the far right, with default size 2. The widget will automatically find the best resize option to adapt to the addition of a new column. The Minimum column width is 2, and rows can have a maximum of 6 columns. When the maximum number of columns is reached, the + Add new action disappears.
Deleting a column
A column can be removed from a row by clicking the Delete action in the top-right of that Column properties. When a column is deleted, the nearest column on the left gets its width. If the deleted column is the first on the left, the right column will take the width. If there is just one column, the Delete action is not visible.
Resizing columns
Columns can be resized by dragging the divider icon between two columns to the left or to the right. The stage will reflect the change in real-time as the user resizes the column, to preview the result even before letting go of the divider.
Other column settings
Additional settings at the column level within a row allow control on background colour, padding and borders for the selected column.
Selecting rows and content
When you mouse over the message in the message editing area of the editor (the stage), the following happens...
- You mouse over a block of content (a button in the example below): the editor shows you an icon on the right side that allows you to drag that block of content elsewhere.
- You click on a block of content, and the editor will:
- Show you two icons on the stage, which allow you to remove or clone that block of content.
- Change the properties section on the right side of the editor to display a series of properties that you can set for that block of content.
3. You mouse over an area that is free of content, i.e. the row in which the content is located. The editor will highlight it and show you an icon that allows you to drag that entire row elsewhere on the stage.
- You click on a row, and the editor will:
- Deselect any block of content that had been previously selected.
- Select the row, and show you two icons that allow you to remove or clone the entire row and all its content. You could also see a third icon that allows you to save the row for later use, if the feature has been enabled.
- Change the properties section on the right side of the editor to display a series of properties that apply to that column within the row. A row can contain more than one column.
