Using the Columns block

Learn how to use the Columns block in your email campaign, page or form.

Overview

EasyEditor lets you add columns to your email campaign, page or form layout to organise your content.

Insert the Columns block

To use the Columns block:

1. In EasyEditor, drag the Columns block onto the canvas.
   
2. Select the block.
3. In the Settings panel:
   • For Number of columns, select either one, two, three, or four columns. For more than four columns, enter a custom number in the Custom box.
     

     There's a maximum of 16 columns.

   • 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 or Do not stack content.
     

     Stacking content makes viewing easier on narrower screens.

4. 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

If you want to reverse the stacking direction of a column block in mobile view, there is a change you can make to the source code of your campaign. The stacking direction is controlled by the `dir` attribute of the column block. By default, this will be set to `ltr` (meaning left to right). Changing this to `rtl` will reverse 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.

To reverse column stacking direction on mobile:

1. While editing your campaign, select Utilities > Edit source.
2. 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 which will help you locate the column you want to edit, for example, some of the text it contains, or an image title.
3. Once you’ve found the correct column, check the code preceding it for ee-type="container" Data-title="columns", then follow the code until you locate the attribute dir="ltr".
4. Edit ltr to read rtl. Make sure you don’t remove the quotation marks, or make any other changes to the code.
   
5. Select EDIT DESIGN to return to the EasyEditor design view.
6. The column you have edited has reversed direction. Drag the content to its original position to restore your desktop design.
7. Select PREVIEW > Mobile > Portrait. The stacking direction of the column has reversed.

Note that once you change the stacking direction, you can no longer edit the column widths.