Email template authoring
After you create an email template, use the visual designer to author the structural and content components in your email template.
Add structure and content structure-content
-
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 fragments
In the visual content editor, the Fragments icon is displayed on the left. The following example outlines steps to add fragments to the template content.
-
To open the fragments listing, select the Fragments icon (
You can:
- Sort the listing.
- Browse, Search, or Filter the listing.
- Switch between Thumbnail and List views.
- Refresh the list to reflect any of the recently created fragments.
-
Drag and drop any of the fragments into the structural component placeholder.
The editor renders the fragment within the section/element of the email structure.
The content of the fragment is dynamically updated within the structure to show how the content appears in the email.
After the email is saved, it appears in the fragment details page when you select the Used By tab in the summary. Fragments added to an email template are not editable within the template — the source fragment defines the content.
Add assets
In the visual content editor, select the Assets icon (
The following example outlines steps to add assets to the template content:
-
To open the assets library, click the Assets icon.
From the asset selector, you can directly select assets stored in the source library.
-
Add a new asset by dragging and dropping the image asset into a structure component.
For more information about using assets from your source type, see Add assets to your content.
-
Replace an existing image asset by selecting it on the canvas and click Select an asset in the image source tools.
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 message (email and SMS), 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.
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.
View options
Leverage the view and content validation options that are available in the visual designer.
-
Zoom in/out on the content across preset zoom options.
-
Switch viewing the content across Desktop, Mobile, or Text-only/Plain-text.
- Click the Eye icon for content preview across devices.
- Select one of the out-of-the-box devices or enter custom dimensions to preview the content.
More options
From the More … menu at the top of the email designer, you can take the following actions:
- Reset template - Click this option to clear the visual designer canvas to a blank slate and restart building content.
- Save as fragment - Save all or portions of the template as a fragment to be reused across multiple emails or email templates. You provide a name and description for the fragment and save it to the list of available fragments.
- Change your design - Return to the Design your template page. From there, you can choose to design your template from scratch or use an existing template to restart the design process.
- Export HTML - Download the content in the visual canvas to your local system in HTML format packaged as a zip file.