Documentation Journey Optimizer B2B Journey Optimizer B2B Edition Documentation

Structure components structure-components

Last update: Tue Sep 09 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Content Design Tools

CREATED FOR:

User

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. Divide each component into columns to form each content block that you need.

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 a 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 a 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

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.

Drag a structure onto the canvas {width="800" modal="regular"}

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.

Structure component toolbar {width="150"}

Tool

Name

Usage

{width="40"}

Enable conditional content

Enable conditional variants for the component. Learn more

{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

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.

Display options for content component {width="400" modal="regular"}

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

Show only on desktop devices - Choose this setting when you want to display the component on desktop devices and exclude it for mobile devices.
Show only on mobile devices - Choose this setting when you want to display the component on mobile devices, such as phones and tablets, and exclude it for desktop devices.

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.

Structure component set as the header {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

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.

Do not stack columns on mobile {width="250"}

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

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

Background color picker {width="300"}

Background image

Move the toggle selector to enable the background image settings.

Background image settings {width="250"}

Choose the asset source type and select the image file:

Marketo Engage Assets

Choose this type to browse and select an image asset from the Journey Optimizer B2B Edition library or from the connected Market Engage instance.

Browse the available image assets {width="700" modal="regular"}

From the dialog, you can choose an image from the selected repository. Click Select to add the asset.

There are tools available to help you locate the asset that you need:

Click the Filter icon on the top left to filter the displayed items according to your criteria.
Enter text in the Search field to filter the displayed items for a match of the asset name.

{width="700" modal="regular"}

Experience Manager Assets

Choose this type to browse and select an image asset from a configured Experience Manage Assets repository.

From the Select Assets dialog, choose an image using the available tools to locate the asset that you need and click Select.:

Change the Repository at the top right.
Click Manage assets at the top right to open the Assets repository in another browser tab and use AEM Assets management tools.
Click the View type selector at the top right to change the display to List View, Grid View, Gallery View, or Waterfall View.
Click the Sort order icon to change the sort order between ascending and descending.

{width="700" modal="regular"}
Click the Sort by menu arrow to change the sort criteria to Name, Size, or Modified.
Click the Filter icon on the top left to filter the displayed items according to your criteria.
Enter text in the Search field to filter the displayed items for a match of the asset name.

{width="700" modal="regular"}

Import media

Choose this type to select a file from your system and import it into the Journey Optimizer B2B Edition asset library.

In the Upload image dialog, drag and drop a file from your system to the file box. The maximum file size is 100 MB.

Import an image file to the {width="450"}

The file names of the selected images are displayed in the dialog. Asset file names must be unique (across folders), and if a file with the name already exists, a message is displayed. Names can have a maximum of 100 characters, and cannot contain special characters (such as ;, :, \, and |).

Click Import.

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.

Background image settings {width="250"}

Other styles

You can apply other structure component styles to adjust its display in the email message or landing page.

Border

On the right panel with the Styles tab selected, expand the Border section and set the options to display a border for the component:
Move the toggle to the right to enable the border display options and set them according to your design criteria:
- To set the Border color, select the checkbox 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, you can use the color slider and the color field to select the color.
{width="300"}
- To set the Border size (line width), click the up and down arrow icons to increase or decrease the number of pixels.
- To set the Border style, choose a value from the list of standard CSS border-style values.
- To determine where the border is displayed, select each Border position checkbox.
{width="250"}
For the Border radius, set the numerical value according to the curve you want for the corners.

A value of 0 (default) produces a squared corner.

Margin

On the right panel with the Styles tab selected, expand the Margin section and set the options for margin spacing within the structural component. This style replicates the CSS margin parameter, which controls to the space outside a component border, separating it from other components. It creates a gap around the component to influence its positioning and the layout of surrounding content.

Set the margin values in pixels according to your design needs. You can set the margin for all sides, the top-botton, the left-right, or each side of the component independently:

All sides - To set one value to apply to all sides, clear the Different margin for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

{width="250"}
Top-bottom - To set the top and bottom margins to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.
Left-right - To set the left and right margins to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

{width="250"}
Independent - To set each margin to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

{width="250"}

Advanced

To apply additional CSS-compliant attributes with values, use the Advanced style settings. You can change the values of the existing attributes, or add new ones. The styling is applied to the component using the CSS inheritance model for parent-child components (elements).

The displayed attributes reflect the styles that are currently defined for the component. You can change the values according to CSS definitions. Click the Add (+) icon to add a new style attribute for the component.

Advanced styles {width="250"}

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.

Column toolbar {width="500"}

Tool

Name

Usage

{width="40"}

Clear column

Clear the content in the column.

{width="40"}

Enable conditional content

Enable conditional variants for the column. Learn more

{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

The columns 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%).

NOTE

Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.

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.

Columns number setting {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.

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

Column styles

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

Background

Background color - Select the checkbox 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, you can use the color slider and the color field to select the color.

{width="300"}
Background image - Move the toggle selector to enable the background image settings.

{width="250"}

Choose the asset source type and select an image file.

Border

On the right panel with the Styles tab selected, expand the Border section and set the options to display a border for the component:
Move the toggle to the right to enable the border display options and set them according to your design criteria:
- To set the Border color, select the checkbox 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, you can use the color slider and the color field to select the color.
{width="300"}
- To set the Border size (line width), click the up and down arrow icons to increase or decrease the number of pixels.
- To set the Border style, choose a value from the list of standard CSS border-style values.
- To determine where the border is displayed, select each Border position checkbox.
{width="250"}
For the Border radius, set the numerical value according to the curve you want for the corners.

A value of 0 (default) produces a squared corner.

Alignment

Expand the Alignment section and choose the vertical alignment that you want to use: top, middle, or bottom. This style translates to a standard vertical-align CSS style and affects positioning within the containing component.

Vertcal alignment styles {width="250"}

Margin

Set the margin values in pixels according to your design needs. You can set the margin for all sides, the top-botton, the left-right, or each side of the component independently:

All sides - To set one value to apply to all sides, clear the Different margin for each side checkbox. Click the up and down arrow icons to increase or decrease the number of pixels.

{width="250"}
Top-bottom - To set the top and bottom margins to the same value, set the Locked icon between the top and bottom settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.
Left-right - To set the left and right margins to the same value, set the Locked icon between the left and right settings. Click the up and down arrow icons for either to increase or decrease the number of pixels.

{width="250"}
Independent - To set each margin to an independent value, set the Unlocked icon between the top and bottom settings and between the left and right. For each setting, click the up and down arrow icons for either to increase or decrease the number of pixels.

{width="250"}

Advanced

Advanced styles {width="250"}

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.

Access the content layers {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.

Column components displayed in the visual design space {width="800" modal="regular"}