Email authoring

Last update: February 5, 2025

Learn how to create, personalize, and preview emails in the new Marketo Engage Email Designer.

PREREQUISITES
In order to access the new email designer, your Marketo Engage subscription must be migrated to the Adobe Identity Management System (IMS). If yours hasn’t been yet and you’d like to request it be expedited, please contact the Adobe Account Team (your account manager), or Marketo Support.

Create an email

Emails from the email designer can only be created in the Design Studio and referenced in Smart Campaigns/Lists, or created/used directly in Email Programs at this time.

  1. Log in to Marketo Engage via the Adobe Experience Cloud.

  2. In My Marketo, select Design Studio.

  3. In the tree, select Emails (New Editor).

  4. Click the Create email button.

  5. Enter an email name and a subject line. Click Create.

  1. Log in to Marketo Engage via the Adobe Experience Cloud.

  2. Find and select (or create) your Email Program.

  3. You have two options to create a new email. Right-click on the name of your Email Program and select New local asset, or click the +New Email button in the Email box on the dashboard. In this example, we’ll do the former.

  4. Select Email (New Editor).

  5. Enter an email name and a subject line. Click Create.

That’s it. Now it’s time to design your email.

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.