Understand the Columns block
The Columns block allows you to structure your template layout by adding rows with one or more columns. Each column can hold any combination of content blocks, including text, images, and buttons.
The Columns block controls the following levels of layout:
Column layout – The number of columns and their relative widths within the row.
Column Properties – The appearance and spacing settings for each individual column, including background color, padding, and border.
Row Properties – Settings that apply to the entire row, including background color or image, and container padding.
Before you start
Outlined below are important factors to know before working with the Columns block.
The Columns block must be added to the canvas before content blocks can be placed inside it.
Column layout can be changed after content has been added, but this may affect how existing content is arranged.
Row Properties apply to the full row behind all columns. Column Properties apply only to the individual column selected.
Add a Columns block
You can add a Columns block to either an email template or a landing page template.
In an email template
Follow the steps below to add a Columns block to an email template.
In the left navigation menu, click Campaign Management Tools.
Click Channels, then click Emails.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Columns block from the panel onto the template canvas.
The row is added to the canvas with a default single-column layout. The right-side panel updates to show the row settings.
In a landing page template
Follow the steps below to add a Columns block to a landing page template.
In the left navigation menu, click Campaign Management Tools.
Click Components, then click Landing Pages.
Open the template you want to edit and click Designer.
Click the Content tab in the right-side panel.
Drag the Columns block from the panel onto the template canvas.
The row is added to the canvas with a default single-column layout. The right-side panel updates to show the row settings.
Select a column layout
Follow the steps below to choose the number and arrangement of columns in a row.
Click the Columns row in the canvas to select it.
In the right-side panel under Columns, select a layout from the predefined options. Layouts include single-column, two-column equal split, and various unequal arrangements.
To adjust column widths manually, drag the column dividers in the canvas preview to the desired proportions.
📌 Note: Column widths are set as percentages of the total row width. The total across all columns must always equal 100%.
Configure Column Properties
Column Properties allow you to customise the appearance and spacing of each individual column. Settings are applied per column using the column tabs in the right-side panel.
Follow the steps below to configure the properties for a column.
Click the Columns row in the canvas to select it.
In the right-side panel under Column Properties, click the tab for the column you want to configure — for example, Column 1 or Column 2.
Configure the following settings as needed.
Setting | Description |
Background Color | The color displayed behind content within the selected column. Select a color using the color picker or enter a HEX code. |
Padding | The space between the column content and the column edges. Padding can be applied to all sides equally, or set independently for the top, bottom, left, and right sides. |
Border | A visible boundary around the column. Configure the border color, width, style (Solid, Dotted, or Dashed), and which sides the border appears on. |
To add an additional column to the row, click the + button next to the column tabs.
To remove a column, click the delete icon next to its tab.
📌 Note: Adding or removing columns after content has already been placed in the row may cause content to move or restack. Review the canvas after making changes.
Configure Row Properties
Row Properties apply to the entire row behind all columns, including background color or background image settings and container padding.
Follow the steps below to configure the Row Properties.
Click the Columns row in the canvas to select it.
In the right-side panel, scroll to the Row Properties section.
Configure the following settings as needed.
Setting | Description |
Background Color | The color displayed behind the entire row, behind all columns. Select using the color picker or enter a HEX code. |
Container Padding | The space around the outside of the entire row container. |
Add a background image to a row
Row Properties also allow a background image to be applied behind the row content. Images can be sourced from an uploaded file, the Image Library, or the stock image search.
Follow the steps below to add a background image to a row.
Click the Columns row in the canvas to select it.
In the right-side panel, scroll to the Row Properties section.
In the background image area, select the image source: Upload Image to upload a new image file, or More Images to browse the Image Library or stock images.
Once an image is selected, configure the following display settings.
Setting | Options | Description |
Container Width | Content Width / Full Width | Controls the width of the background image behind the row. Content Width fills only the content area of the row. Full Width spans the full width of the template, edge to edge. |
Repeat | None / Repeat / Horizontal / Vertical | Controls whether and how the image repeats if it is smaller than the container. None displays the image once, centered. Repeat fills the container in all directions. Horizontal repeats along the horizontal axis only. Vertical repeats along the vertical axis only. |
Position | — | Controls where the background image is anchored within the container. Setting the position to 50% aligns the center of the image with the center of the container. |
⚠️ Warning: Background images do not render in all email clients. Ensure a background color is set as a fallback and plan your design accordingly.
Configure responsive design
The responsive design setting allows you to hide individual columns on desktop or mobile views, so different layouts can be shown depending on the device.
Follow the steps below to configure responsive design for a column.
Click the Columns row in the canvas to select it.
In the right-side panel under Column Properties, click the tab for the column you want to configure.
Scroll to the Responsive Design section.
Turn on Hide on Desktop or Hide on Mobile as needed.
📌 Note: When a column is hidden in a view, it is greyed out in the Designer canvas so you can see which columns are affected. The column and its content are still present in the template, they are only hidden when rendered on the specified device type.
Enable Display Conditions on a Columns row
Display Conditions allow the entire row to be shown or hidden for specific recipients based on their profile data.
Follow the steps below to enable Display Conditions on a Columns row.
Click the Columns row in the canvas to select it.
Click the checkmark icon in the row's inline toolbar. The Display Condition section appears at the top of the right-side panel.
Configure the condition to control which recipients see this row.
📌 Note: Display Conditions are also referred to as Dynamic Content. Refer to the Template Designer – Display Conditions article for full guidance.
Things to know
Outlined below is additional information about working with the Columns block.
Content placement in columns
The Columns block always creates at least one column. Content blocks such as Text, Image, and Button are placed inside columns, not directly into rows. For a single full-width content area, use a single-column layout.
Changing column layout after adding content
You can change the column layout after adding content to the columns. Doing so may cause content to restack or move between columns, so it is recommended to set your column layout before adding content.
Removing a column
To remove a column, click the Columns row to select it, then in the Column Properties section click the delete icon next to the column tab you want to remove. The remaining columns redistribute the available width.
Hiding a column on mobile
When a column is set to hide on mobile, the column and all content inside it will not be displayed when the template is viewed on a mobile device. The column remains visible in the Designer canvas but is shown greyed out to indicate it is hidden on that view.