Fragment authoring
After you create a fragment, use the visual editor to author the structural and content components in your fragment.
Add structure and content design-fragment
-
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.
note tip 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. 
Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.
-
Expand the Contents section and add as many elements as you need into one or more structure components.
-
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.
-
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 (
-
Add a new asset by dragging and dropping the image asset into a structure component.
-
Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.
For more information about using assets from your source type, see Use assets for content authoring.
Navigate the layers, settings, and styles
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.
The following example outlines steps to adjust padding and vertical alignment inside a structure component composed of columns.
-
Select the column in the structure component directly in the canvas or using the Navigation tree displayed at the left.
-
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.
-
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.
-
-
If needed, repeat these steps to adjust the alignment and padding for the other columns in the component.
-
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.
-
Select the text component and click the Add personalization icon in the toolbar.
This action opens the Edit Personalization dialog.
-
Click + or … to add a token to the blank space.
-
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.
-
In the visual content editor, select the image, text, or button element where you want to enable customization.
-
In the component details on the right, select the Editable fields tab.
-
Click the Enable edition option toggle and set the editable fields.
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.
-
Click Overview to review all the editable fields and their default values.
-
Save your changes.
Edit linked URL tracking
-
Click the Links icon on the left to display all the URLs of your content to be tracked.
-
If needed, click the Edit (pencil) icon and modify the Tracking Type or Label.
You can also add Tags for a link.
