Add columns
In EasyEditor, drag the Columns block onto the canvas.
Select the block.
In the Settings panel:
For Number of columns, choose one to four columns.
To add more than four, enter a value in Custom. The maximum is 16.
For Visibility, you can choose visibility options for the columns block. Expand the visibility drop-down menu and choose to Show on all devices, Show only on mobile devices, or Show only on desktop devices.
For Mobile device settings, expand the drop-down menu and choose either Stack content (recommended for narrow screens) or Do not stack content.
Select SAVE.
Edit the column width
To change the width of your columns, drag the divider to the left or right.
Reverse stacking direction on mobile
By default, columns stack from left to right on mobile. You can reverse this order by editing the campaign source code.
This method requires basic HTML knowledge. Alternatively, you can create separate Columns blocks for desktop and mobile and control them using visibility settings. The stacking direction is controlled by the dir attribute of the column block. By default, this is set to ltr (meaning left to right). Changing this to rtl reverses the direction in which the columns stack on mobile.
These instructions assume some familiarity with HTML. Another option is to use separate columns for mobile and desktop view, with the relevant visibility settings.
Reverse stacking direction
While editing your campaign, expand the UTILITIES drop-down menu and select Edit source.
Place your cursor inside the code box, then use Ctrl + F (Cmd + F on a Mac) on your keyboard to bring up the search function. Enter a search term to help you locate the column you want to edit, for example, some of the text it contains, or an image title.
Once you find the correct column, look for ee-type="container" and Data-title="columns" in the preceding code. Then locate the dir="ltr" attribute.
Edit ltr to read rtl. Make sure you don’t remove the quotation marks, or make any other changes to the code.
Select EDIT DESIGN to return to the EasyEditor design view.
The column you have edited has reversed direction. Drag the content to its original position to restore your desktop design.
Select PREVIEW > Mobile > Portrait. The stacking direction of the column has reversed.
After changing the stacking direction, you can no longer edit column widths.
If you need different layouts on desktop and mobile, we recommend using separate Columns blocks with visibility settings. This approach avoids source-code edits and makes future changes easier.
Use the Spacer block
Use Spacer blocks to add vertical space between elements.
Add a spacer
In the left menu, go to Build > Layout.
Drag the Spacer block into your email campaign, page or form.
Select the block.
In the Settings panel, you can choose the spacer height by using the defaults or entering a custom height in pixels.
Select SAVE.
Troubleshoot column display issues on mobile devices
If columns do not display as expected on mobile, check the following.
Check mobile device settings
Select the Columns block.
Go to Settings > Mobile device settings.
Confirm whether Stack content or Do not stack content is selected.
If Do not stack content is selected, columns remain side by side on small screens. This can cause cramped or misaligned content.
Check column stacking order
Columns stack in the same order as the desktop layout.
If the reading order is incorrect on mobile, you can:
Reorder the content in the Columns block, or
Reverse the stacking direction in the source code by changing
dir="ltr"todir="rtl".
If desktop and mobile require different content orders, duplicate the block and use visibility settings instead.
Use visibility settings for mobile-specific layouts
If a layout works on desktop but not on mobile:
Duplicate the block.
Set one block to Show only on desktop devices.
Set the other block to Show only on mobile devices.
Adjust the mobile version so it displays more clearly on smaller screens.
This approach is useful when you need to:
Move a button below an image or text on mobile
Simplify complex multi-column layouts
Adjust spacing or padding for mobile
Change content order on mobile
Avoid complex nested layouts
Avoid deeply nested column structures. They can be difficult to manage on mobile.
If a section does not stack correctly, split it into separate Columns blocks instead of nesting multiple column layouts.
Fix alignment issues with buttons or images
If buttons, images, or text shift on mobile:
Check that the Columns block is set to Stack content
Simplify the layout where possible
Create a mobile-only version of the block
Adjust spacing and padding for mobile readability
In many cases, a dedicated mobile version provides the most reliable results without affecting the desktop design.