Email message authoring
After you add a new email asset to a journey action node, you can define the content for the email message.
Click Edit email content in the Details tab on the right panel.
This action launches the email design tools, where you can choose how you want to design your email from the following options:
-
Design your email from scratch using the Email Designer interface.
-
Import existing HTML content from a file or a .zip folder.
-
Select an existing template from a list of built-in or custom email templates.
After you create and personalize the email content, you can export the content for validation or for later use. Click Export HTML to save the content as a .zip file that includes your HTML and assets.
Design your email from scratch design-from-scratch
Use the visual content design space to define the structure and content of the email. By adding and moving structural components with simple drag-and-drop actions, you can design the shape of the reusable email content within seconds.
- From the Design your template home page, select the Design from scratch option.
- Add structure and content to the email message.
- Add image assets to the email message.
- Personalize the email content.
- Review and update links.
When your content is done, click Simulate content at the top to check rendering. You can choose the desktop or mobile view.
When you are satisfied with the content, click Save.
Import existing HTML content
Imported content can be:
-
An HTML file with an incorporated style sheet
-
A .zip file that includes an HTML file, the style sheet (.css), and images
note note NOTE There are no constraints on the .zip file structure. However, references must be relative and fit with the tree structure of the .zip folder. The images are always uploaded to the connected Marketo Engage assets repository. If you want to manage the image files in Experience Manager Assets, upload them separately in that app interface and change the image links in the email designer.
To import a file containing HTML content:
-
From the Design your template home page, select the Import HTML option.
-
Drag and drop the HTML or .zip file containing your HTML content and click Import.
<table> tag as the first layer in an HTML file can cause style loss, including background and width settings in the top layer tag.You can personalize the imported content as needed with the visual email editor tools.
Select a template
You can choose from:
-
Sample templates. The Journey Optimizer interface offers 20 out-of-the-box email templates that you can choose from.
-
Saved templates. Use a saved custom template that you either created from scratch using the Templates menu or saved from an email in a journey using the Save as content template option.
Use the Select design template section to start building your content from a template. You can use a sample template or a saved custom email template from your Journey Optimizer B2B Edition instance.
On the Design your template home page, the Sample templates tab is selected by default. To use a custom template, select the Saved templates tab.
The list of all email templates created on the current sandbox displays. You can sort them by Name, Last modified, and Last created.
Select the template that you want from the list.
After selection, this displays a preview of the template. In preview mode, you can navigate between all the templates of one category (sample or saved, depending on your selection) using the right and left arrows.
When the display matches what you want to use, click Use this template at the top right of the preview window.
This action copies the content into the visual content designer, where you can edit the content as needed.
ÃÛ¶¹ÊÓƵ Journey Optimizer B2B Edition offers a selection of email templates offered out-of-the-box, which can be used for creating emails and email templates.
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 information, see Conditional content.
Add fragments
A visual fragment is a reusable design component that can be referenced by multiple content assets across ÃÛ¶¹ÊÓƵ Journey Optimizer B2B Edition. It is usually a block of content that can be pre-created and quickly inserted to make authoring quicker and more consistent.
The following example outlines steps to add fragments as you author your 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.
The editor renders the fragment within the section/element of the email structure.
note tip TIP To add the fragment so that it occupies the entire horizontal layout within the email, add a 1:1 column structure and then drag and drop the fragment into it. The content of the fragment is dynamically updated within the structure to show how the content appears in your content.
Editable fields in customizable fragments
A visual fragment can include editable fields that you can customize. Custom fields allow you to modify parameters when you incorporate the fragment into your content and create a tailored experience without affecting the original fragment. The frament author can design the fragmant for customization of text, image, and button components. If an included fragment contains components with editable fields, you can change the default values to customize it for your content.
-
Select the fragment component.
The Settings displayed on the right include and editable fields with the default values.
-
Change any editable field as needed.
After the email is saved, it appears in the fragment details page when you select the Used By tab in the summary.
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 curly braces {}. You can add multiple expressions in the same content or field without restrictions.
Examples:
Hello {{lead.firstName}} {{lead.lastName}}Hello {%= lead.mktoName ?: "Marketer" %}
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.
-
Add a token by clicking the plus ( + ) symbol next to it.
If you want to add the token with a fallback (default text that appears when that field is not available for a lead), click the More icon ( … ) and choose Insert with fallback text.
-
Add any additional tokens or other static text that you want to include.
-
Click Save.
The personalization scripting is displayed in the visual design space. You can select it to make changes when needed.
Edit linked URL tracking
-
Click the Links icon (
-
If needed, click the Edit (
You can also add Tags for a link.
View options
Leverage the view and content validation options that are available in the visual email editor.
-
Zoom in/out on the content across preset zoom options.
-
Switch viewing the content across Desktop, Mobile, or Text-only/Plain-text.
- Click the View 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 design space, you can take the following actions:
- Reset email - Click this option to clear the visual email designer canvas to a blank slate and restart building your content.
- Save as fragment - Save all or portions of the email 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 email page. From there, you can choose another template to restart the design process, or choose to design the content from scratch in a black canvas.\
- Save as content template - Save the email body as an email template to be reused across multiple emails or email templates. You provide a name and description for the template and save it to the list of saved email templates.
- Export HTML - Download the content in the visual canvas to your local system in HTML format packaged as a zip file.
Check and test the email preview-test
When your message content is defined, you can use test profiles to preview it, send proofs, and control its rendering in popular desktop, mobile, and web-based clients. If you inserted personalized content, you can preview how this content is displayed in the message using test profile data.
To preview the email content, click Simulate content and then add a test profile to check your message using the test profile data.
