How to Create Marketo 2.0 Email Templates

The new Marketo email editor allows for more customizations than ever before. You now have the ability to create modules, color pickers, number variables and more, but your email templates need to follow the email template 2.0 syntax in order to take advantage of these features. In this tutorial, I’ll show you how to create a Marketo 2.0 friendly template and how to turn your existing 1.0 email templates to 2.0 email templates.

What’s new?

Before diving into the tutorial, let’s check out what’s new within the 2.0 editor release.

Image elements

This can be used whenever there are images and linked images in your email template. This will pop up a different editor than the traditional rich text editor.

String & number variables

Allow the users of your template to adjust items such as padding, button text, header text and more without editing any code by using string and number variables. When defined the options will appear in the right hand sidebar under variables.

Color

You can now add colour pickers as a variable to your email templates in order to allow users to modify items such as background colors, font colors and CTA colors.

Modules

Email templates can now contain modules which are blocks of content that can be edited, removed, added, and re-arranged.

I will be covering all of these examples in my tutorial, but there are a couple items that I won’t be covering. See a full list of the 2.0 email features and syntax in the Marketo Product Docs.

Example

For this tutorial I will using one of my Free Marketo Email Templates, which are currently configured as 1.0 email templates. Download the HTML to follow along or use one of your existing HTML email templates.

Planning

There are more customization possiblities within Marketo 2.0 email templates than there has ever been before, so it’s important to plan what flexibility or restraints you want to give to everyone using the email template. Some questions you should ask when in the planning phase are:

• Which sections should be editable? Or which sections shouldn’t be editable?
• Which sections would need to be re-arranged, deleted, or duplicated?
• Should colors be editable within the template?
• Should spacing (padding & margins) be editable?

For this example I have chosen to create the following parameters within my Marketo email template, illustrated below.

Start Coding

If you’re using a Marketo template that was configured for the Marketo 1.0 email editor, the first thing you should do is remove the editable DIV everywhere within the email template. Search the code for a DIV with where the class is mktEditable and remove it. Make sure to remove the closing DIV tag as well.

Now we can start to create a 2.0 friendly email template. Since the email template is going to include rich text elements, string variables, color picker options, image options and modules, I like to go through my HTML and add all my rich text areas first, then all the color pickers, etc.

Rich text elements

There are a couple rich text elements that need to be added. Here’s a visual of where the rich text elements will be added in my example template.

This is how you define rich text elements

Each editable area must have a unique ID and a mktoName. The mktoName will be visible when editing emails, so make it something descriptive.

Here’s what my email template code looks like once I add all the rich-text sections.

Images

To define an image, wrap your image in this code:

I only have one image in my example template, so my image code will now look like this:

Color Pickers

The next step is to add any elements that should have a color picker element. To add a color picker as an option in the “variables” sidebar you must define it in the HEAD section like this:

The color picker must had a unique ID, a mktoName, and a default color.

Once the color picker is defined within the HEAD section of the template, you can use the variable throughout the email template using this syntax ${YourVariableName}.

For my example I’m going to add a color picker option to the header background color, the header text color, the CTA link color and the CTA button color.

My updated HEAD code will look like this now that the color pickers have been added.

String Variables

String variables are a great alternative to rich text elements. Rich text elements allow for formatting to potentially get broken when updating a section. Since string variables can only contain text (no HTML) the formatting won’t break. For my example, I’m going to use variables for the headlines for each section, the CTA links, and the CTA text.

String variables are defined in the HEAD section, similar to how color pickers are defined. Here’s the syntax:

Here’s the code for my example:

Modules & Containers

Lastly, I’m going to add modules to my email template. In order for modules to work within an email template, they must be placed in what’s called a container. Only one container is allowed within an email template.

For my template I’m going to add 2 modules and 1 container that “holds” the modules. Since containers can only contain modules, I’m going to add an extra table to my email that will only contain the modules. Remember, modules are blocks that can be duplicated, rearranged and deleted within your email template. So, if you have a newsletter template with 5 sections that are the same, for example, you will only need to define 1 module and add in as many you need within the email editor.

Here’s a visual example of what I’m going to add to my template. The green outlines the container.

Containers can be defined by adding class=”mktoContainer” to a table, td, tr, tfoot, or thead. The container also needs to have an unique id. Here’s what my code looks like with the container added.

Now I’m going to complete my template by adding modules. Modules can be added to table, tr, td, thead, and tfoot. For my example I’m going to add them to the table rows (tr).

The Complete HTML

That’s it! Now the email template will use all the latest and greatest features within the Marketo 2.0 email editor. Here’s the final HTML:

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment