A Complete Guide To Building Custom Marketo Email Templates

If you’re getting more advanced with Marketo, now is the time to invest in a custom Marketo email template. Once you’re clear on your branding, desired layout, and specific functionality needs, a custom template has much more to offer. 

Sure, you have starter Marketo email templates. But they are like training wheels. Limited and only designed to help you get started. If you want to design templates built for long-term use, they definitely fall short. And I’m sure your brand has different email template requirements. Different preferences for structure, layout, editability, and functional elements. 

Marketo’s starter templates are intentionally basic because they must work for everyone. 

To scale your email marketing efforts, you must have email templates that are easily repeatable. They lock in the brand elements so that each template consistently represents your brand irrespective of the content and type of the email campaign. 

All this is possible with custom email templates in Marketo. 

Below is the comprehensive guide to building Marketo email templates, informed by industry best practices and technical insights.

Creating a Marketo Email Template 

If you plan to build email templates in Marketo, you’re in the soup. Designing templates from scratch directly in the platform is not a great user experience. That’s because Marketo’s built-in template editor is code-based only. No drag-and-drop functionality. Meaning you must have technical expertise in writing HTML and CSS code manually. 

Not exactly a user-friendly situation if coding isn’t your thing. Having a reliable partner like Marketo email template services by Email Mavlers relieves you of these challenges. 

Yet, if doing it in-house, it’s better that you design your Marketo email template in a drag-and-drop email builder, expert the HTML code, import it into Marketo, and add special Marketo code to make it editable. 

Going by this route, your email looks great across all devices and email clients without the headache of coding everything yourself. 

Once you’ve imported the HTML code into your Marketo email template, it’s time to add modules, image elements, etc, in the Marketo editor. 

Module Structure

Navigate to the Modules tab to reveal how the different sections of the template are broken down into individual modules. Understand the importance of being intentional and thoughtful with how you:

• Define where a module starts and ends.
• Decide how modules are grouped or combined.
• Arrange the order of modules in the template. 

These choices can simplify your workflow or make it more complicated, depending on how well they’re thought out.

When planning your modules, it’s essential to consider how you build and reuse your emails. Look at some of your recent emails and identify:

• Layout combinations you use repeatedly
• Content structures that appear in multiple emails

Although everything could technically be built by dragging in individual modules, this becomes complex and time-consuming. For instance, manually assembling multiple single elements for a layout takes longer and introduces the risk of inconsistencies.

Instead, dragging in a pre-combined module allows for:

• Faster email builds
• Consistent styling
• No need to double-check spacing or padding

What may look like duplicated modules is an efficiency booster. It helps ensure that emails are both consistent and quick to produce.

Image Elements

Editing images in a Marketo email template using the Marketo editor is pretty simple. 

Double-click any image in your email template, and a pop-up window will appear. This is your main hub for managing that image. In this pop-up, you have several ways to add or change an image: 

• Insert an image from an external URL.
• Upload from your computer.
• Select an image from Marketo’s Design Studio.

Apart from this, you can also:

• Add alt text.
• Enter a link URL.
• Update or add custom styles.

Now, here’s a useful trick. Images in your email templates should be double the display size. For example, if your email is 620px wide, a full-width image should be 1240px wide. While height can be flexible, the width should be exact to ensure clarity, especially on Retina displays.

Inside the pop-up, you’ll also see:

• The image URL (you can replace it).
• Alt text (make sure it’s meaningful—it helps users with visual impairments or those with image loading disabled).
• Link URL.
• UTM parameters (automatically populated in some setups).

There are style rules at the bottom. In most cases, these are preset and don’t need to be edited. However, you can override them if needed.

While uploading directly from your computer is possible, it’s not ideal. Because you can’t choose the destination folder. A better approach is uploading images in bulk to the Design Studio and selecting them from there.

Image Variables 

When an image is selected, you might notice some blue-highlighted values—these are variables. For example, ${image-link-1} and ${utm-campaign}. These are placeholders that get replaced with real values when the email is sent. There are two types of variables:

• Local Variables: Affect only the specific module they’re in. If you duplicate the module, changes won’t apply to the duplicate.
• Global Variables: Shared across the entire email. If updated, all references throughout the Marketo email template will reflect the change.

Remember, if you select a new image from the Design Studio, any existing alt text or URL may be overwritten. So, if you’re using local variables for these, copy and paste them again after selecting a new image.

Rich Text Elements

Clicking into a text section reveals a dotted line. Double-click it, and the WYSIWYG (What You See Is What You Get) editor will appear. That’s the area you use to:

• Edit text directly.
• Insert tokens.
• Add hyperlinks.
• Click the HTML button to view/edit the underlying code.

The pro tip here is to avoid pasting content from an external source to stop bringing in unwanted styles. Either paste into a plain text editor first or, paste directly into the HTML view and apply any necessary formatting there. Typing directly into the editor is fine, but for pasted content, editing in the HTML view ensures cleaner code and fewer issues.

Variables For Alignment, Color, and Padding 

A sidebar with local variables offers powerful tools for controlling design without touching the code. 

Alignment Variables 

Controls alignment—left, center, or right—with a single click.

Color Variables

Set variables for background and text colors. This makes global design changes fast and efficient.

Padding Variables

One of the most useful features—is padding controlled by number variables. Meaning, no digging into HTML code to fix spacing issues. 

Button Elements And Variables 

A button module is usually still a rich text element, so experienced users can tweak the HTML. But most settings—like text, background color, link, and padding—can (and should) be controlled via variables.

Once the button is selected:

• All related variables turn blue.
• You’ll see both local variables (e.g., button text, style) and global variables (like UTM campaign links).

Test, Test, and Then Test Some More!

As we said, designing Marketo email templates with third-party, no-code email design tools is much simpler than doing it in the Marketo editor itself. This way, the templates should be responsive and scale across different email clients by default. These platforms often include built-in preview and testing features.

Still, don’t stop there.

Marketo’s tools for email testing client compatibility of email templates are basic. So, it’s always advisable to use email testing tools like Litmus, Email On Acid, etc., to see first-hand how emails render across multiple email clients and devices. 

Share Article

Follow Us

Return to Previous Page