Choose your content type

  1. In the email you just created, click Add email content.

  2. The Create your email page loads. You can choose from a few options:

Design from scratch

When starting from scratch in the email editor, use the options below to define your content.

  1. In the Create your email page, select Design from scratch.

  2. Add structure and content to your email.

  3. Add images.

  4. Personalize your content.

  5. Review links and edit tracking.

Import HTML

You can import existing HTML content to design your email. The 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
There are no constraints on the .zip file structure. However, references must be relative and fit with the tree structure of the .zip folder.
  1. In the Design your template page, select Import HTML.

  2. Drag and drop the desired HTML or .zip file (or select a file from your computer) and click Import.

NOTE
When the HTML content is uploaded, your content will be in Compatibility mode. In this mode, you can only personalize your text, add links, or add assets to your content.

You can make desired changes to the imported content using the visual email editor tools.

Choose a template

There are two types of templates to choose from.

  • Sample templates: Marketo Engage offers four out-of-the-box email templates.

  • Saved templates: These are templates you created from scratch using the Templates menu, or an email you created and chose to save as a template.

Choose one of the out-of-the-box templates for a head start on your email template design.

  1. The Sample templates tab is open by default.

  2. Select the template you want to use.

  3. Click Use this template.

  4. Edit the content as desired using the visual content designer.

  1. Click the Saved templates tab and select the desired template.

  2. Click Use this template.

  3. Edit the content as desired using the visual content designer.

Add structure and content

  1. To start creating or modifying content, drag and drop an item from Structures onto the canvas. Edit its settings 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.

    NOTE
    Each column size cannot be less than 10% of the total width of the structure component. Only empty columns can be removed.
  2. From the Contents section, drag over desired items and drop them into one or more structure components.

  3. Each component can be customized via the Settings or Style tabs. Change the font, text style, margin, and more.

Add fragments

  1. To access your fragments, select the Fragments icon ( Fragments icon ) in the left navigation.

    Select a fragment

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

TIP
If you want the fragment to occupy the entire horizontal layout within the email, add a 1:1 column structure and then drag and drop the fragment into it.

After the email is saved, it appears in the Used By tab of the fragment details page. Fragments added to an email template are not editable within the template; the source fragment defines the content.

Add Assets

Add images that are stored in the Images and Files section of your Marketo Engage instance.

NOTE
You can only add images in the new designer, no other file types at this time.
  1. To access your images, click the Asset selector icon.

  2. Drag and drop the desired image into a structure component.

    NOTE
    To replace an existing image, select it, then click Select an asset in the Settings tab on the right.

Layers, settings, and styles

Open the navigation tree to access specific structures and their columns/components for more granular editing. To access, click the Navigation tree icon.

The example below 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.

  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 adjust the padding. Click the Lock icon to break synchronization.

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

  4. Repeat these steps as needed to adjust the alignment and padding for the other columns in the component.

  5. Save your changes.

Personalize content

Tokens work in the new editor the same way they work in the old, but the icon looks different. The example below outlines adding a first name token with fallback text.

  1. Select the text component. Place the cursor where you want the token to appear and click the Add personalization icon.

  2. Click the desired token type.

  3. Find the desired token and click the icon (clicking the + icon instead adds a token with no fallback text).

    NOTE
    “Fallback text” is the new editor term for default value. Example: {{lead.First Name:default=Friend}}. It is recommended in case there is no value for the person in the field you choose.
  4. Set your fallback text and click Add.

  5. Click Save.

Edit URL tracking

Sometimes you don’t want to enable the Marketo Tracking URL on a link in an email. This is useful when the destination page does not support URL parameters and may result in a broken link.

  1. Click the Links icon to display all URLs in your email.

  2. Click the pencil icon to edit tracking for any desired links.

  3. Click the Tracking Type drop-down and make your selection.

    Track without mkt_tokActivates tracking on the URL without use of the mkt_tok query string parameter in the destination URL
    Track with mkt_tokActivates tracking on the URL with use of the mkt_tok query string parameter in the destination URL
    Do not trackDisables tracking of the URL
  4. Optionally, you can give the URL a label or add Tags.

  5. Click Save when done.

Check Alerts

As you design your content, alerts are displayed on the top-right of the screen when key settings are missing.

There are two types of alerts:

Warnings

Warnings refer to recommendations and best practices, such as:

  • The opt-out link is not present in the email body: While unsubscribe links are a requirement, adding them to the body of your email is a best practice.
NOTE
Adding an unsubscribe option is not required for Operational Emails (non-marketing).
  • Text version of HTML is empty: You must define a text version of your email body for when HTML content cannot be displayed.

  • Empty link is present in email body: Verify all links in your email are correct.

  • Email size has exceeded the limit of 100KB: For optimal delivery, make sure the size of your email does not exceed 100KB.

Errors

Errors prevent you from sending or testing the email until they are resolved:

  • Subject line is missing: An email subject line is required.

  • Email version of the message is empty: This error occurs when the email content has not been configured.

Test your email

When your message content is defined, you can use test profiles to preview it, send proofs, and control how it renders in popular desktop, mobile, and web-based clients. If you inserted personalized content, you can check how it’s displayed in the message using test profile data.

To preview your email content, click Simulate content, then add a test profile to check your message using the test profile data.

Next pageEmail Template Authoring

Marketo Engage