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
<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Your editable text will go here. </div>
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.
<table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="#2980B9" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width" style="margin:0 auto !important;" width="600">
<tr>
<td height="50"></td>
</tr>
<tr>
<td style="text-align:center;">
<a href="#"><img height="45" src="images/logo.png" style="border:0;margin:0;" width="247"></a>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#3498DB" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="1" style="font-size:1px;line-height:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:36px;font-family:'Raleway',Arial,Sans-serif;color:#FFFFFF;text-align:center;">
Your Headline Here!
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;text-align:center;line-height:24px;">
<div class="mktoText" id="mkto-header-description" mktoName="Header Description">
Consectetur adipiscing elit. Aenean mollis diam sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus
risus vel condimentum lacinia. Sed viverra suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width-inner" style="margin:0 auto !important;" width="600">
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td><img alt="" height="250" src="images/placeholder-image-1.jpg" width="560"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;line-height:32px;">Lorem
ipsum dolor sit amet</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:24px;">
<div class="mktoText" id="mkto-article-description" mktoName="Article Description">
Consectetur adipiscing elit. Aenean mollis diam
sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus risus vel condimentum lacinia. Sed viverra
suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#56cfd2;line-height:24px;font-weight:600;">
<a href="#" style="color:#3498db;text-decoration:none;">Read More ›</a>
</td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td class="smaller-header-text" style=
"font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;text-align:center;line-height:32px;">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table align="center" bgcolor="#3498DB" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #2980b9;border-left:solid 1px #2980b9;border-top:solid 1px #2980b9;border-bottom:solid 5px #2980b9;border-radius:3px;"
width="200">
<tr>
<td style=
"font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;line-height:24px;text-align:center;padding:10px 20px;">
<a href="#" style="color:#FFFFFF;text-decoration:none;"><strong>Button</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
<!-- Sectionn End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td style="text-align:center;">
<span style="font-size:12px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:20px;">© Your Company. All rights reserved.<br>
<a href="#" style="color: #989898">Unsubscribe</a> </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
Images
To define an image, wrap your image in this code:
<div class="mktoImg" id="mkto-article-image" mktoName="Article Image" mktoImgLink="http://www.jennamolby.com"> // Your image </div>
I only have one image in my example template, so my image code will now look like this:
<div class="mktoImg" id="mkto-article-image" mktoName="Article Image" mktoImgLink="http://www.jennamolby.com">
<img alt="" height="250" src="images/placeholder-image-1.jpg" width="560">
</div>
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:
<meta class="mktoColor" id="textColor" mktoName="Main Text Color" default="#FFFFFF">
<meta class="mktoColor" id="mkto-header-bg-color" mktoName="Header BG Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-text-link" mktoName="CTA Text Link Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-button-bg-color" mktoName="CTA BTN Bg Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-button-border-color" mktoName="CTA BTN Border Color" default="#3498DB">
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta class="mktoColor" id="mkto-header-bg-color" mktoName="Header BG Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-text-link" mktoName="CTA Text Link Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-button-bg-color" mktoName="CTA BTN Bg Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-button-border-color" mktoName="CTA BTN Border Color" default="#3498DB">
<style type="text/css">
span.preheader {
display: none;
height: 0;
margin: 0;
}
@media only screen and (max-width: 480px) {
.device-width {
width: 90% !important;
height: auto !important;
min-width: 380px !important;
margin: 0 auto !important;
}
.device-width-inner {
width: 85% !important;
height: auto !important;
margin: 0 auto !important;
}
.mobile-hide {
display: none !important;
}
.mobile-nav {
padding: 10px 20px !important;
height: auto !important;
display: table-row !important;
width: 100% !important;
}
.mobile-center {
text-align: center !important;
}
.mobile-small-text {
font-size: 18px !important;
}
.mobile-center-table {
float: none !important;
margin: 0 auto !important;
}
.text-center {
text-align: center !important;
}
.padding-top {
padding-top: 20px !important;
}
.center-image {
margin: 0 auto !important;
}
.logo-small {
width: 200px !important;
height: auto !important;
}
.smaller-header-text {
font-size: 22px !important;
}
.image-full-width {
width: 100% !important;
height: auto !important;
}
.section img {
width: 100% !important;
height: auto !important;
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:400,400italic,500,600,800,700,300,200);
</style><!--[if mso]>
<style>
span, td, table, div {
font-family: Arial, serif !important;
}
</style>
<![endif]-->
<title></title>
</head>
<body style="background-color:#f5f5f5;margin:0;padding:0;">
<table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="${mkto-header-bg-color}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width" style="margin:0 auto !important;" width="600">
<tr>
<td height="50"></td>
</tr>
<tr>
<td style="text-align:center;">
<a href="#"><img height="45" src="images/logo.png" style="border:0;margin:0;" width="247"></a>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#3498DB" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="1" style="font-size:1px;line-height:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:36px;font-family:'Raleway',Arial,Sans-serif;color:#FFFFFF;text-align:center;">
Your Headline Here!
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;text-align:center;line-height:24px;">
<div class="mktoText" id="mkto-header-description" mktoName="Header Description">
Consectetur adipiscing elit. Aenean mollis diam sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus
risus vel condimentum lacinia. Sed viverra suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width-inner" style="margin:0 auto !important;" width="600">
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td><img alt="" height="250" src="images/placeholder-image-1.jpg" width="560"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;line-height:32px;">Lorem
ipsum dolor sit amet</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:24px;">
<div class="mktoText" id="mkto-article-description" mktoName="Article Description">
Consectetur adipiscing elit. Aenean mollis diam
sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus risus vel condimentum lacinia. Sed viverra
suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#56cfd2;line-height:24px;font-weight:600;">
<a href="#" style="color:${mkto-cta-text-link};text-decoration:none;">Read More ›</a>
</td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td class="smaller-header-text" style=
"font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;text-align:center;line-height:32px;">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table align="center" bgcolor="${mkto-cta-button-bg-color}" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px ${mkto-cta-button-border-color};border-left:solid 1px ${mkto-cta-button-border-color};border-top:solid 1px #2980b9;border-bottom:solid 5px ${mkto-cta-button-border-color};border-radius:3px;"
width="200">
<tr>
<td style=
"font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;line-height:24px;text-align:center;padding:10px 20px;">
<a href="#" style="color:#FFFFFF;text-decoration:none;"><strong>Button</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
<!-- Sectionn End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td style="text-align:center;">
<span style="font-size:12px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:20px;">© Your Company. All rights reserved.<br>
<a href="#" style="color: #989898">Unsubscribe</a> </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
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:
<meta class="mktoString" id="textHeader" mktoName="Text Header" default="Edit Me">
Here’s the code for my example:
<meta class="mktoString" id="mkto-header-text" mktoName="Header Text" default="Your Headline Here!">
<meta class="mktoString" id="mkto-article-header-text" mktoName="Article Header Text" default="Lorem ipsum dolor sit amet">
<meta class="mktoString" id="mkto-article-cta-url" mktoName="Article CTA URL" default="http://jennamolby.com/my-article">
<meta class="mktoString" id="mkto-article-cta-text" mktoName="Article CTA Text" default="Read More">
<meta class="mktoString" id="mkto-centered-text-header" mktoName="Centered Text Header" default="Lorem ipsum dolor sit amet">
<meta class="mktoString" id="mkto-centered-text-cta-url" mktoName="Centered Text CTA URL" default="http://jennamolby.com/my-other-link">
<meta class="mktoString" id="mkto-centered-text-cta-text" mktoName="Centered Text CTA Text" default="Button">
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.
<table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="${mkto-header-bg-color}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width" style="margin:0 auto !important;" width="600">
<tr>
<td height="50"></td>
</tr>
<tr>
<td style="text-align:center;">
<div class="mktEditable" id="logo">
<a href="#"><img height="45" src="http://jennamolby.com/Marketo_Email_Templates/images/logo.png" style="border:0;margin:0;" width="247"></a>
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#3498DB" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="1" style="font-size:1px;line-height:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:36px;font-family:'Raleway',Arial,Sans-serif;color:#FFFFFF;text-align:center;">
${mkto-article-header-text}
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;text-align:center;line-height:24px;">
<div class="mktoText" id="mkto-header-description" mktoName="Header Description">
Consectetur adipiscing elit. Aenean mollis diam sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus
risus vel condimentum lacinia. Sed viverra suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width-inner" style="margin:0 auto !important;" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="mktoContainer" id="mkto-container">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td>
<div class="mktoImg" id="mkto-article-image" mktoName="Article Image" mktoImgLink="http://www.jennamolby.com">
<img alt="" height="250" src="http://jennamolby.com/Marketo_Email_Templates/placeholder-image-1.jpg" width="560">
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;line-height:32px;">${mkto-article-header-text}</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:24px;">
<div class="mktoText" id="mkto-article-description" mktoName="Article Description">
Consectetur adipiscing elit. Aenean mollis diam
sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus risus vel condimentum lacinia. Sed viverra
suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#56cfd2;line-height:24px;font-weight:600;">
<a href="${mkto-article-cta-url}" style="color:${mkto-cta-text-link};text-decoration:none;">${mkto-article-cta-text} ›</a>
</td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td class="smaller-header-text" style=
"font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;text-align:center;line-height:32px;">${mkto-centered-text-header}</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table align="center" bgcolor="${mkto-cta-button-bg-color}" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px ${mkto-cta-button-border-color};border-left:solid 1px ${mkto-cta-button-border-color};border-top:solid 1px #2980b9;border-bottom:solid 5px ${mkto-cta-button-border-color};border-radius:3px;"
width="200">
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;line-height:24px;text-align:center;padding:10px 20px;">
<a href="${mkto-centered-text-cta-url}" style="color:#FFFFFF;text-decoration:none;"><strong>${mkto-centered-text-cta-text}</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td style="text-align:center;">
<span style="font-size:12px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:20px;">© Your Company. All rights reserved.<br>
<a href="#" style="color: #989898">Unsubscribe</a> </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
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).
<tr class="mktoModule" id="mkto-article" mktoName="Article">
<tr class="mktoModule" id="mkto-centered-module" mktoName="Centered Section">
<table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="${mkto-header-bg-color}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width" style="margin:0 auto !important;" width="600">
<tr>
<td height="50"></td>
</tr>
<tr>
<td style="text-align:center;">
<div class="mktEditable" id="logo">
<a href="#"><img height="45" src="http://jennamolby.com/Marketo_Email_Templates/images/logo.png" style="border:0;margin:0;" width="247"></a>
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#3498DB" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="1" style="font-size:1px;line-height:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:36px;font-family:'Raleway',Arial,Sans-serif;color:#FFFFFF;text-align:center;">
${mkto-article-header-text}
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;text-align:center;line-height:24px;">
<div class="mktoText" id="mkto-header-description" mktoName="Header Description">
Consectetur adipiscing elit. Aenean mollis diam sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus
risus vel condimentum lacinia. Sed viverra suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width-inner" style="margin:0 auto !important;" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="mktoContainer" id="mkto-container">
<tr class="mktoModule" id="mkto-article" mktoName="Article">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td>
<div class="mktoImg" id="mkto-article-image" mktoName="Article Image" mktoImgLink="http://www.jennamolby.com">
<img alt="" height="250" src="http://jennamolby.com/Marketo_Email_Templates/placeholder-image-1.jpg" width="560">
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;line-height:32px;">${mkto-article-header-text}</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:24px;">
<div class="mktoText" id="mkto-article-description" mktoName="Article Description">
Consectetur adipiscing elit. Aenean mollis diam
sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus risus vel condimentum lacinia. Sed viverra
suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#56cfd2;line-height:24px;font-weight:600;">
<a href="${mkto-article-cta-url}" style="color:${mkto-cta-text-link};text-decoration:none;">${mkto-article-cta-text} ›</a>
</td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>
<tr class="mktoModule" id="mkto-centered-module" mktoName="Centered Section">
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td class="smaller-header-text" style=
"font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;text-align:center;line-height:32px;">${mkto-centered-text-header}</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table align="center" bgcolor="${mkto-cta-button-bg-color}" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px ${mkto-cta-button-border-color};border-left:solid 1px ${mkto-cta-button-border-color};border-top:solid 1px #2980b9;border-bottom:solid 5px ${mkto-cta-button-border-color};border-radius:3px;"
width="200">
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;line-height:24px;text-align:center;padding:10px 20px;">
<a href="${mkto-centered-text-cta-url}" style="color:#FFFFFF;text-decoration:none;"><strong>${mkto-centered-text-cta-text}</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td style="text-align:center;">
<span style="font-size:12px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:20px;">© Your Company. All rights reserved.<br>
<a href="#" style="color: #989898">Unsubscribe</a> </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta class="mktoColor" id="mkto-header-bg-color" mktoName="Header BG Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-text-link" mktoName="CTA Text Link Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-button-bg-color" mktoName="CTA BTN Bg Color" default="#2980B9">
<meta class="mktoColor" id="mkto-cta-button-border-color" mktoName="CTA BTN Border Color" default="#3498DB">
<meta class="mktoString" id="mkto-header-text" mktoName="Header Text" default="Your Headline Here!">
<meta class="mktoString" id="mkto-article-header-text" mktoName="Article Header Text" default="Lorem ipsum dolor sit amet">
<meta class="mktoString" id="mkto-article-cta-url" mktoName="Article CTA URL" default="http://jennamolby.com/my-article">
<meta class="mktoString" id="mkto-article-cta-text" mktoName="Article CTA Text" default="Read More">
<meta class="mktoString" id="mkto-centered-text-header" mktoName="Centered Text Header" default="Lorem ipsum dolor sit amet">
<meta class="mktoString" id="mkto-centered-text-cta-url" mktoName="Centered Text CTA URL" default="http://jennamolby.com/my-other-link">
<meta class="mktoString" id="mkto-centered-text-cta-text" mktoName="Centered Text CTA Text" default="Button">
<style type="text/css">
span.preheader {
display: none;
height: 0;
margin: 0;
}
@media only screen and (max-width: 480px) {
.device-width {
width: 90% !important;
height: auto !important;
min-width: 380px !important;
margin: 0 auto !important;
}
.device-width-inner {
width: 85% !important;
height: auto !important;
margin: 0 auto !important;
}
.mobile-hide {
display: none !important;
}
.mobile-nav {
padding: 10px 20px !important;
height: auto !important;
display: table-row !important;
width: 100% !important;
}
.mobile-center {
text-align: center !important;
}
.mobile-small-text {
font-size: 18px !important;
}
.mobile-center-table {
float: none !important;
margin: 0 auto !important;
}
.text-center {
text-align: center !important;
}
.padding-top {
padding-top: 20px !important;
}
.center-image {
margin: 0 auto !important;
}
.logo-small {
width: 200px !important;
height: auto !important;
}
.smaller-header-text {
font-size: 22px !important;
}
.image-full-width {
width: 100% !important;
height: auto !important;
}
.section img {
width: 100% !important;
height: auto !important;
}
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:400,400italic,500,600,800,700,300,200);
</style><!--[if mso]>
<style>
span, td, table, div {
font-family: Arial, serif !important;
}
</style>
<![endif]-->
<title></title>
</head>
<body style="background-color:#f5f5f5;margin:0;padding:0;">
<table bgcolor="#F5F5F5" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="${mkto-header-bg-color}" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width" style="margin:0 auto !important;" width="600">
<tr>
<td height="50"></td>
</tr>
<tr>
<td style="text-align:center;">
<div class="mktEditable" id="logo">
<a href="#"><img height="45" src="http://jennamolby.com/Marketo_Email_Templates/images/logo.png" style="border:0;margin:0;" width="247"></a>
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table bgcolor="#3498DB" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="1" style="font-size:1px;line-height:1px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:36px;font-family:'Raleway',Arial,Sans-serif;color:#FFFFFF;text-align:center;">
${mkto-article-header-text}
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;text-align:center;line-height:24px;">
<div class="mktoText" id="mkto-header-description" mktoName="Header Description">
Consectetur adipiscing elit. Aenean mollis diam sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus
risus vel condimentum lacinia. Sed viverra suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="device-width-inner" style="margin:0 auto !important;" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="mktoContainer" id="mkto-container">
<tr class="mktoModule" id="mkto-article" mktoName="Article">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td>
<div class="mktoImg" id="mkto-article-image" mktoName="Article Image" mktoImgLink="http://www.jennamolby.com">
<img alt="" height="250" src="http://jennamolby.com/Marketo_Email_Templates/placeholder-image-1.jpg" width="560">
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td class="smaller-header-text" style="font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;line-height:32px;">${mkto-article-header-text}</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:24px;">
<div class="mktoText" id="mkto-article-description" mktoName="Article Description">
Consectetur adipiscing elit. Aenean mollis diam
sit amet leo lacinia aliquet. Duis lacinia placerat dignissim. Aenean vel interdum ligula. Etiam tempus risus vel condimentum lacinia. Sed viverra
suscipit orci non ornare. Maecenas arcu massa, porta et eros ac, vehicula sodales mi.
</div>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#56cfd2;line-height:24px;font-weight:600;">
<a href="${mkto-article-cta-url}" style="color:${mkto-cta-text-link};text-decoration:none;">${mkto-article-cta-text} ›</a>
</td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
</td>
</tr>
<tr class="mktoModule" id="mkto-centered-module" mktoName="Centered Section">
<td>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px #dcd9d9;border-left:solid 1px #dcd9d9;border-top:solid 1px #dcd9d9;border-bottom:solid 5px #dcd9d9;border-radius:3px;" width="100%">
<tr>
<td style="padding:25px;">
<!-- Section Start -->
<table border="0" cellpadding="0" cellspacing="0" class="section" width="100%">
<tr>
<td class="smaller-header-text" style=
"font-size:26px;font-family:'Raleway',Arial,Sans-serif;color:#595959;font-weight:600;text-align:center;line-height:32px;">${mkto-centered-text-header}</td>
</tr>
<tr>
<td height="15"></td>
</tr>
<tr>
<td>
<table align="center" bgcolor="${mkto-cta-button-bg-color}" border="0" cellpadding="0" cellspacing="0" style=
"border-right:solid 1px ${mkto-cta-button-border-color};border-left:solid 1px ${mkto-cta-button-border-color};border-top:solid 1px #2980b9;border-bottom:solid 5px ${mkto-cta-button-border-color};border-radius:3px;"
width="200">
<tr>
<td style="font-size:16px;font-family:'Open Sans',Arial,Sans-serif;color:#FFFFFF;line-height:24px;text-align:center;padding:10px 20px;">
<a href="${mkto-centered-text-cta-url}" style="color:#FFFFFF;text-decoration:none;"><strong>${mkto-centered-text-cta-text}</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</table>
<!-- Section End -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25"></td>
</tr>
<tr>
<td style="text-align:center;">
<span style="font-size:12px;font-family:'Open Sans',Arial,Sans-serif;color:#989898;line-height:20px;">© Your Company. All rights reserved.<br>
<a href="#" style="color: #989898">Unsubscribe</a> </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Questions?
Send them to me via email, send me a tweet @jennamolby, or leave a comment