Structure components structure-components

Use the Structure components in the visual design space to define the structure of your content. By adding and moving structural elements with simple drag-and-drop actions, you can quickly define the shape of your content layout. Each structure component spans the horizontal space and you can stack them to build the layout vertically.

Structure library structure-library

At the top of the Components library, the Structures section displays the available structure components:

Icon

Component

Description

1:1 column

A single column container that fills the width of the space.

1:2 column Left

A two-column container that uses a 1:2 ratio to fill the width of the space. The first (left) column occupies a third of the width and the second (right) occupies the remaining two-thirds.

1:3 column Left

A two-column container that uses a 1:3 ratio to fill the width of the space. The first (left) column occupies a fourth of the width and the second (right) occupies the remaining three-fourths.

2:1 column Right

A two-column container that uses a 2:1 ratio to fill the width of the space. The first (left) column occupies two-thirds of the width and the second (right) occupies the remaining one-third.

2:2 column

A two-column container that uses a 2:2 ratio to fill the width of the space. The left and right columns are equal in width.

3:1 column Right

A two-column container that uses a 3:1 ratio to fill the width of the space. The first (left) column occupies three-fourths (75%) of the width and the second (right) occupies the remaining one-fourth (25%).

3:3 column

A three-column container that uses a 3:3 ratio to fill the width of the space. All three columns are equal in width.

4:4 column

A four-column container that uses a 4:4 ratio to fill the width of the space. All four columns are equal in width.

n:n column

A customizable column structure that fills the space according to the columns that you define. You set the number of columns (between two and ten) and set the width of each column individually. Learn more

Add structure components add-structure-components

When you design the content for your email, landing page, or fragment, add each structure component to construct the layout. Drag an item from the Structures section on the left and drop it onto the canvas. You can use the toolbar to select a column and use the Settings and Styles tabs on the right panel to define the parameters for the selected component or column.

{width="800" modal="regular"}

Component toolbar component-toolbar

The toolbar is displayed in the canvas when you select it in the canvas. The available tools provide an easy way to select a column and apply component functions.

{width="150"}

Tool

Name

Usage

{width="40"}

Enable conditional content

(Emails and fragments) Enable conditional variants for the component.

{width="100"}

Select a column

Select a column by number. When the column is selected, you can apply column settings and styles.

{width="40"}

Duplicate

Create a copy of the component and add it directly below.

{width="40"}

Delete

Remove the component.

Component settings component-settings

After you add a component, it is selected in the visual design space and its properties are displayed in the right panel. The Settings tab is displayed by default. You can also select a structure component at any time to change the settings.

Display options

If you want to exclude the component from desktop or mobile device display, change the Display Options setting. The default, Show on all devices, enables display across all devices.

{width="400" modal="regular"}

Choose another setting to make the component exclusive by device type:

Header and footer

You can designate a structure component as the HTML header or footer in the email message or landing page. With the structure component selected in the canvas, click the Header or Footer option. There can be only one header or footer, and the option is not available if another component is assigned.

{width="600" modal="regular"}

You can remove the header or footer designation by selecting the component and clicking the option to remove it.

Stacked columns stacked-columns

For smaller screens or display windows, the columns in the structure component display as stacked unless you change the default setting. With the multi-column structure component selected, change the Do not stack columns on mobile setting by moving the toggle slider to the right.

{width="250"}

Component styles component-styles

After you add a component, it is selected in the visual design space and its properties are displayed in the right panel. You can also select a component at any time to change the settings and styles.

Background background

With the Styles tab selected in the right panel, use the Background section to define the color and optional image to use as a background for the structure component.

Background color

Select the check box and click the color square to choose a color from the picker. You can choose a color by entering a known RGB, HSL, HSB, or hexadecimal value. Or, use the color slider and the color field to select the color.

{width="300"}

Background image background-image

Move the toggle selector to enable the background image settings.

{width="250"}

Click Select Asset to open the asset selector, where you can choose an image from the Assets library.

Use the Image placement option to choose how the image fills the structure component. The placement settings follow the standard HTML background image fill and alignment attributes.

{width="250"}

Other styles other-styles

You can apply other structure component styles to adjust its display in the email message or landing page. For styling beyond these built-in options, see Add custom CSS for your content.

Columns columns

Use the Select a column tool in the component toolbar to select a column. You can then use the column toolbar to change the column selection, remove the column, or apply conditional content variations for the column. The parameters for the column are displayed in the Settings and Styles tabs on the right.

{width="500"}

Tool

Name

Usage

—

Clear column

Clear the content in the column. See the first tool in the column toolbar figure.

{width="40"}

Enable conditional content

(Emails and fragments) Enable conditional variants for the column.

{width="100"}

Select a column

Select a column by number. When the column is selected, you can apply settings and styles.

Change n:n columns change-nn-columns

The column widths are static for most of the structure components. When you add the n:n column component, you can change the number of columns and the column sizing. The n:n column component starts with five columns of equal width (20%).

With the component selected in the canvas, use the Columns number option in the right panel to change the number of columns. Click the up and down arrow icons to increase or decrease the number of columns, or enter the number in the field.

{width="650" modal="regular"}

In the canvas, move the column sizing icon to adjust the width of the selected column. As you increase or decrease the width, the adjacent column also adjusts so that all columns occupy 100% of the component width.

{width="500" modal="regular"}

Column styles column-styles

With the column selected in the canvas, you can set styles to apply to that column.

Navigation tree navigation-tree

In the visual design space, you can access the structural components, including columns and content, using the navigation tree. Click the Navigation tree icon ( ) on the left to display the tree.

{width="800" modal="regular"}

The Body element is the root of the tree structure. Click any of the components or column child elements in the tree to select it on the canvas. The Settings and Styles tabs on the right display the parameters for that component or column.

{width="800" modal="regular"}