Placing blocks side by side in columns
By default, blocks in the drag & drop editor are stacked vertically. Using a columns block, you can place them side by side. This allows you to drag a different content block into each column.
Adding a columns block
Click on the outside of your newsletter and drag the ‘Columns’ block to the desired position. You can then drag other blocks into the columns, such as ‘Text’, ‘Image’, ‘Video’, ‘Header’, and ‘Divider’.
Setting two, three, or four columns
Select the columns block
Click on the columns block in your newsletter. A green border will appear around the block.
Formatting individual columns
Under Columns → Design, you can configure the formatting for desktop and mobile. You always start with the desktop display:
- Under ‘Box’, you set the background colour and margins for the entire block and for the individual columns. At the top, under ‘All columns’, you can format all columns at once. Below that, you can configure this per column, from ‘First column’ through to the last.
- Under ‘Container’, you adjust the colour and margins for the outside of the block.
Adjusting the width of a column
In your newsletter, hover your mouse over the column divider and drag the green line to the left or right.
You cannot completely fix the height of columns. This is because different email clients take up slightly more or less space when displaying text.
Adjusting the display on mobile phones
On a mobile phone, columns are stacked vertically by default. For example, if you have an image block in the left column and a text block in the right column, the phone will first display the image across the full width and the text block below it, also across the full width.
You can adjust this via Columns → Design under the phone icon:
- Tick ‘Do not stack, show like on desktop’ to keep the column layout on mobile.
- Tick ‘Hide this block on mobile’ to not show the columns block on mobile at all.
Moving, copying, or deleting a columns block
Click inside the columns block to show the green border. It contains the following icons, among others:
- Arrow: move the entire columns block up or down.
- Cog: open the block settings.
- Double square: copy the columns block.
- Cross: delete the entire columns block.
If you delete the columns block using the cross icon, all blocks inside the columns will also be deleted.
The icons in the grey bars belong to the individual block inside the column. You can use these to move, copy, or delete only that specific content block, rather than the columns block itself.
Making an image smaller using a columns block
An image in the ‘Image’ block always fills the full width. If you want to display an image smaller, place it in the narrow middle column of a columns block: