Fragment authoring

Last update: March 6, 2025

After you create a fragment, use the visual editor to author the structural and content components in your fragment.

Add structure and content

  1. To start your content design, drag an item from the Structures and drop it onto the canvas.

    Add as many items from Structures as you need and edit the settings for each in the pane on the right.

    TIP
    Select the n:n column component to define the number of columns of your choice (between three and 10). You can also define the width of each column by moving the arrows below the column.

    Drag a structure onto the canvas and adjust the settings

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

  2. Expand the Contents section and add as many elements as you need into one or more structure components.

    Drag a content element onto the canvas and adjust the settings

  3. If needed, you can make additional customizations for each component in the Settings or Style tabs.

    For example, you can change the text style, padding, or margin of each component.

  4. To add conditional content and adapt the content to the targeted profiles based on conditional rules, select a content component and click the Enable conditional content icon in the component toolbar.

    For more informantion, see Conditional content.

Add assets

In the visual content editor, select the Marketo Engage Assets ( Marketo Engage Assets icon ) icon or the Experience Manager Assets ( Marketo Engage Assets icon ) icon in the left navigation bar. From the asset selector, you can directly select assets stored in the source library.

NOTE
If you are provisioned with Adobe Experience Manager as a Cloud Services, you have access to the repositories for both Marketo Engage Design Studio and Adobe Experience Manager Assets as a Cloud Service when your user account has the required permissions. These repositories are separate and not in sync. You can use image assets from either source.

  • Add a new asset by dragging and dropping the image asset into a structure component.

    Drag a Marketo Engage asset onto the canvas and adjust the settings

  • Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.

    Select an asset from the source library

For more information about using assets from your source type, see Use assets for content authoring.

As you work with the content in the visual designer, you can access the layers/containers and elements using the Navigation tree. Click the Navigation icon to display the tree to the left of the canvas.

Access the content layers

The following example outlines steps to adjust padding and vertical alignment inside a structure component composed of columns.

  1. Select the column in the structure component directly in the canvas or using the Navigation tree displayed at the left.

  2. From the column toolbar, click the Select a column tool and choose the one that you want to edit.

    You can also select it from the structure tree. The editable parameters for that column are displayed in the Settings and Styles tabs on the right.

    Column components displayed in the visual designer

  3. To edit the column properties, click the Styles tab on the right and change them according to your needs:

    • For Background, change the background color as needed.

      Clear the check box for a transparent background. Enable the Background image setting to use an image as the background instead of a solid color.

    • For Alignment, select the Top, Middle, or Bottom icon.

    • For Padding, define the padding for all sides.

      Select Different padding for each side if you want to fine tune the padding. Click the Lock icon to break synchronization.

    • Exapnd the Advanced section to define inline styles for the column.

    Change the styles for the selected column

  4. If needed, repeat these steps to adjust the alignment and padding for the other columns in the component.

  5. Save your changes.

Personalize content

Journey Optimizer B2B Edition uses an inline simple syntax that allows you to create expressions with personalized content enclosed by double curly braces {}. You can add multiple expressions in the same content or field without restrictions.

Examples:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

When processing the content, Journey Optimizer B2B Edition replaces the expression with the data contained in the Experience Platform database. So, the first example becomes Hello John Doe.

The following example outlines steps to personalize content using lead/account attributes and system tokens.

  1. Select the text component and click the Add personalization icon in the toolbar.

    Click the Personalize icon

    This action opens the Edit Personalization dialog.

  2. Click + or … to add a token to the blank space.

    Construct personalized text using tokens

  3. Click Save.

Enable custom fields

When an email or email template author adds the fragment, the fragment content is locked by default. Any changes to the published fragment are automatically propagated to all content assets where the fragment is used. When you designate a parameter for a component in the fragment as editable, the email or template author can specify a custom field value that is specific to their needs. This customization flag is limited to image, text, and button visual components.

For example, if you design a reusable banner that includes a clickable button, you can designate the URL parameter for the button as editable. Email authors can then use a URL that is more specific to their email campaign. With these customizable fields, Marketers can manage and personalize content without the need to create entirely new content blocks or disrupt the inherited updates from the original fragment.

  1. In the visual content editor, select the image, text, or button element where you want to enable customization.

  2. In the component details on the right, select the Editable fields tab.

  3. Click the Enable edition option toggle and set the editable fields.

    Enable editable fields for a fragment image component

    You can enable customization for the displayed fields, which depend on the component type and the parameters defined in the fragment.

    Change the toggle to an enabled state for each field where you want to allow customization.

  4. Click Overview to review all the editable fields and their default values.

    Review the editable fields and their default values

  5. Save your changes.