Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

A lot of people use Mailchimp for email marketing. The marketing platform, which began as an email service provider (ESP) back in 2001, has millions of users. And it’s popular with both small businesses and entrepreneurs as well as larger companies. So, whether it’s for an employer or a client, there’s a good chance you’ll work with Mailchimp at some point in your email marketing career.

To get the most out of the platform, email developers can learn to build Mailchimp templates that others can easily edit and customize for different campaigns.

Earlier in my days as an email developer, I worked with Mailchimp all the time. The platform does have its own templating language. But it’s pretty easy to get the hang of it. If you already know how to code basic HTML emails, all you need to do for Mailchimp templates is add some attributes in key places to make things editable and you’re off and running.

In this developer tutorial, we’ll show you how to build a Mailchimp template for a single-column email that includes a full-width image, a block of text, and a button. You can get a lot of mileage out of a simple template like that. And you’ll learn how to code it in four easy steps.

Why create your own Mailchimp templates?

If you’re working as a freelance email developer or at a digital agency, learning how to code responsive Mailchimp email templates is a smart move. So is learning email frameworks like the Mailjet Markup Language (MJML). The goal of this continuous learning is to diversify your skillset as a coder of emails.

Like many other ESP platforms, Mailchimp has a lot of its own pre-built templates that its users can choose from. If you need something super quick and extra easy, that’s always an option. These pre-made templates let non-coders quickly do things like add a logo or adjust fonts and colors.

However, if you want to take complete control of design and layout, coding your own Mailchimp templates lets you bring unique ideas to life while sticking to your brand’s style guidelines and avoiding the pitfall of email designs that look similar to other brands’ campaigns.

Mailchimp currently has two email builders to choose from: the Classic Builder and the New Builder. Both options have drag-and-drop capabilities. However, you’ll need to use the Classic Builder if you want to code your own Mailchimp template. Once that’s done, others can use your editable template.

Common Mailchimp email template attributes

As mentioned, Mailchimp has its own templating language. That includes basic attributes for editable areas of an email. Each of these content sections begins with mc:edit=.  I suggest using Mailchimp’s conventional names because it keeps things clear and consistent.  Plus, if you switch templates and your naming conventions match, the content will repopulate.

Here are some of the most common naming conventions:

• mc:edit=”header” – for coding email header sections
• mc:edit=”footer” – for email footers
• mc:edit=”header_image” – for the section with you hero image or main visual
• mc:edit=”body” – for the section including your main body copy
• mc:edit= “sidecolumn” – for right or left columns

There’s also mc:hideable, which gives you and others the ability to hide or remove elements from the template. And there’s mc:repeatable, which makes it easy to duplicate blocks or elements in the email.

In this tutorial, we’re keeping it simple with a single-column email. And simple doesn’t mean uncool. One-column emails are a good way to start taking a mobile-first approach to email design.

One thing to keep in mind about these attributes… Mailchimp says you should avoid nesting editable elements inside of other editable content areas. Otherwise, things could get messy and confusing.

Four steps to build your own Mailchimp templates

Before we dive in, I should mention that I am not using

s in this example. It’s built with tables and rows instead to make it easier to keep track of everything. Yes, this might bloat the code a little, but it shouldn’t be a major concern.

First, here’s a look at the email templated we’re going to build:

Megan’s single-column Mailchimp template

Here’s the complete code (which includes base code I grabbed from goodemailcode.com):

See the Pen
Untitled by Kasey Steinbrinck (@kasey-steinbrinck)
on CodePen.

Now, let’s break things down into the different elements of the email template.

Step 1: Making editable areas

To make it possible to edit sections of the email template once you’re done coding, you’ll need to add mc:edit to each of those elements. Keep in mind that any code you nest inside the container with the edit attribute will show in Mailchimp, which can get tricky. We’ll cover this more when we go over buttons.

Coding the image

When you want to add editable graphic blocks to Mailchimp templates, you’ll place the edit attribute within the element. Here’s how it looks:

Important info about images: If you’re using high-resolution (2x) images for retina displays, you must set the size in Mailchimp’s image settings. If you don’t, the image will blow out to full-size in Outlook inboxes. To avoid this, simply set the image width and Mailchimp automatically calculates the right height.

Coding the text

Next, let’s look at how we add an editable section for the email copy:

Heading 1

Yeah, but your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should. Checkmate… Hey, you know how I’m, like, always trying to save the planet? Here’s my chance. Did he just throw my cat out of the window?

Coding the CTA button

As you can see, adding mc:edit=”body” is the only thing that differs from basic HTML email coding. And it’s all you need to do to make an editable text block in Mailchimp templates. Don’t forget, using conventional names like “body” will make switching templates easier if needed.

Now let’s check out the code for the button link in our Mailchimp email template. This can get a little bit more complex. Sometimes, I’ve ended up having to use the source editor to wade through extra code and make some edits, because the button doesn’t display quite right. This could be challenging if you don’t have much HTML coding knowledge.

After some fiddling, this is the code I’ve come up with:

Read More

The button has rounded corners everywhere but Outlook. I consider rounded corners a progressive enhancement. So, that doesn’t bother me.

Step 2: Making areas hideable

The ability to hide or remove certain elements from an email template can be very useful. For example, let’s say you’re sending out an email that doesn’t have any imagery or doesn’t need a CTA button because it’s only informational.

With Mailchimp templates, you can use the mc:hideable attribute. Add this to any element you want to keep hidden. For example, to hide the image, you would add mc:hideable on the

to make it possible to hide the entire row:

,

When someone edits your Mailchimp template, they’ll need to hover over an element to hide it. But sometimes there’s a bit of a problem. The icon you click to hide the element is blocked, which makes it impossible to accomplish.

To fix this, add the following CSS in your