Creating Marketo Emails

Marketo emails are created using HTML templates that include special mkto attributes. These attributes define which parts of the email can be edited by marketers directly from the Marketo editor.

Templates allow developers to control the structure of the email while enabling content editors to modify text, images, and other components without touching the code.

For the complete reference on Marketo email template syntax, see the official documentation.

Creating an Email Template

1. Navigate to Design Studio
2. Go to Email Templates
3. Click New > New Email Template
4. Upload or paste your HTML template
5. Approve the template

Once approved, the template will be available when creating new emails.

Using Modules (Reusable Sections)

Marketo supports reusable modules that users can add, remove, duplicate, and reorder directly from the email editor.

Modules are defined using mktoContainer and mktoModule.

The mktoContainer element defines the wrapper that contains all modules in the email.
Each module inside the container must be defined using the mktoModule class.

This container is the area where modules can be added, reordered, duplicated, or removed in the Marketo editor.

While Marketo technically allows multiple containers, most templates use a single mktoContainer that includes all modules to keep the editing experience simpler.

Example:

<table class="mktoContainer" id="modules">
  <tr class="mktoModule" id="hero">
    <td>...</td>
  </tr>
  <tr class="mktoModule" id="content">
    <td>...</td>
  </tr>
  <tr class="mktoModule" id="footer">
    <td>...</td>
  </tr>
</table>

This allows marketers to manage content blocks visually in the email editor.

Tip

Most email templates follow this structure:

Wrapper table
└ mktoContainer
├ mktoModule (hero)
├ mktoModule (content)
├ mktoModule (cta)
└ mktoModule (footer)

Making Content Editable

Marketo allows specific parts of the email to be editable using mkto classes.

These attributes define which elements marketers can modify in the Marketo editor.

Editable Text

Use mktoText to create editable text blocks.

<div class="mktoText" id="introText">
  This text can be edited in Marketo.
</div>

Editable Images

Use mktoImg to allow marketers to change images.

<img class="mktoImg" id="heroImage" src="hero.jpg" alt="Hero image">

Editable HTML Sections

Use mktoSnippet or mktoHTML when you want to allow editing of larger blocks of content.

<div class="mktoSnippet" id="footerSnippet">
  Footer content
</div>

Global Template Variables

Marketo templates can define global variables using <meta> tags. These variables allow users to configure global settings such as colors, fonts, or visibility.

Example:

<meta class="mktoColor" id="primaryColor" default="#5851db" mktomodulescope="false" />

Variables defined this way can control styles or content across the entire email template.

Controlling Module Visibility

Marketo allows you to control how modules appear in the email editor using additional attributes.

mktoAddByDefault

By default, modules are automatically added to the email when a template is selected. To prevent a module from appearing automatically, use the mktoAddByDefault attribute.

<tr class="mktoModule" id="ctaModule" mktoAddByDefault="false">
    <td>...</td>
</tr>

When mktoAddByDefault="false":

• the module will not appear in the email by default
• users can add it manually from the module list

This is useful for optional sections such as:

• secondary CTAs
• extra content blocks
• promotional banners

Example combining both attributes:

<table class="mktoContainer" id="modules">
  <tr class="mktoModule" id="heroModule" mktoAddByDefault="true">
    <td>
      <div class="mktoText" id="heroText">
        Hero content
      </div>
    </td>
  </tr>

  <tr class="mktoModule" id="optionalModule" mktoAddByDefault="false">
    <td>
      <div class="mktoText" id="optionalText">
        Optional content block
      </div>
    </td>
  </tr>
</table>

In this example:

• heroModule appears automatically when creating the email
• optionalModule is available but must be added manually

mktoActive

The mktoActive attribute controls whether a module is available in the editor.

<tr class="mktoModule" id="oldModule" mktoActive="false">
    <td>...</td>
</tr>

When mktoActive="false":

• the module will not appear in the module picker
• it cannot be added to new emails
• existing emails using the module will continue working

This is useful when:

• deprecating modules
• replacing modules with newer versions
• maintaining backward compatibility

Hiding a Template from the Template Picker

If a template should not appear when creating a new email, it can be hidden using the following meta tag:

<meta class="mktoTemplateHidden" value="true" />

This is useful for:

• internal templates
• base templates used by other templates
• deprecated templates

Email Styling

Email styling has significant limitations due to inconsistent support across email clients.

To ensure compatibility:

• Use inline styles
• Avoid complex CSS
• Use table-based layouts

These practices help maintain consistent rendering across clients such as Gmail, Outlook, and Apple Mail.

Caution

Email clients have limited CSS support, especially Outlook, so testing emails across multiple clients is recommended before publishing campaigns.

Common mkto Attributes

Marketo templates rely on specific attributes to define editable elements and configuration options.

The most commonly used attributes include:

Attribute	Description
mktoText	Creates editable text areas
mktoImg	Allows images to be replaced
mktoHTML	Editable HTML content
mktoSnippet	Allows insertion of reusable snippets
mktoContainer	Defines a container for modules
mktoModule	Defines a reusable module section
mktoBoolean	Boolean variable (true/false toggle)
mktoString	Editable text variable
mktoColor	Color selector
mktoNumber	Numeric variable

Marketo Email Best Practices

Marketo has several rules that can easily break email templates if not followed:

• id values must be unique for all mkto elements
• modules should be direct children of the mktoContainer
• modules should be placed inside a <table> layout
• global variables (<meta>) must be defined in the <head>
• avoid hiding modules using display: none

Do’s and Don’ts

Keep modules as direct children of the container

✅ DO

<table class="mktoContainer" id="modules">
    <tr class="mktoModule" id="hero">...</tr>
</table>

❌ DON’T

<table class="mktoContainer" id="modules">
  <tbody>
    <tr class="mktoModule" id="hero">
      <td>...</td>
    </tr>
  </tbody>
</table>

or

<table class="mktoContainer" id="modules">
  <div>
    <tr class="mktoModule" id="hero">
      <td>...</td>
    </tr>
  </div>
</table>

Ensure every module has a unique id

✅ DO

<tr class="mktoModule" id="contentBlock">
    <td>...</td>
</tr>
<tr class="mktoModule" id="ctaBlock">
    <td>...</td>
</tr>

❌ DON’T

<tr class="mktoModule" id="content">
    <td>...</td>
</tr>
<tr class="mktoModule" id="content">
    <td>...</td>
</tr>

Use table-based layouts for modules

✅ DO

<table class="mktoContainer" id="modules">
  <tr class="mktoModule">
    <td>...</td>
  </tr>
</table>

❌ DON’T

<div class="mktoContainer">
  <div class="mktoModule">...</div>
</div>

Wrap all modules inside a mktoContainer

✅ DO

<table class="mktoContainer" id="modules">
    <tr class="mktoModule" id="hero">...</tr>
</table>

❌ DON’T

<table>
    <tr class="mktoModule" id="hero">...</tr>
</table>

Use mktoAddByDefault="false" for optional modules

✅ DO

<tr class="mktoModule" id="promo" mktoAddByDefault="false">...</tr>

❌ DON’T

<tr class="mktoModule" id="promo" style="display:none;">...</tr>

Define template variables in the <head>

✅ DO

<head>
    <meta class="mktoColor" id="primaryColor" default="#000000" />
</head>

❌ DON’T

<body>
    <meta class="mktoColor" id="primaryColor" />
</body>