7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. Email Design

How We Did It: Converting the Tuts+ Emails Into Campaign Monitor Templates

Scroll to top
Read Time: 7 mins
This post is part of a series called How We Made Our Shiny New Envato Tuts+ Emails.
How We Did It: Building the New Tuts+ Email Templates

In the first two parts of this case study series, we’ve seen how the new Envato Tuts+ emails were designed, then built as static HTML/CSS deliverables. In this final piece of the puzzle, I’ll show you how we converted those files into Campaign Monitor templates.

At this stage there were a couple of team members involved in the process: Cameron and me. Cam took charge of integrating the digests into Campaign Monitor, I handled the newsletters, which I’ll be explaining in this post.

1. Prepare Your Files

Nicole delivered a series of files at the end of the build process, including HTML, CSS, and image assets. Together, they catered for a number of different email types, so I needed to take only the bits necessary for the newsletter template and work from there.

Tip: Download the source files if you want to follow along.

Local Hero

Currently, the paths within the files are all relative. There are a couple of links to CSS files, some links within those to images, and they all point around the local file directory as we see it. For example:

When we upload our files at the end of the tutorial, Campaign Monitor will recognise all these paths and alter them accordingly.

2. Start at the Top

Our process is this: we’ll take all the static bits of our email template and swap them out for dynamic snippets wherever possible. Scrolling down, the first culprit I find is around line 73: a link to the web version:

That link will be different every time, so let’s switch it for CM’s dynamic <webversion>:

Easy as that. Next!

3. More Important Links

The <webversion> which we just took care of is one of a few important links made available by Campaign Monitor. While we’re in the mood, let’s make use of one or two others. The email preferences paragraph can be found at around line 346, and looks like this:

Let’s use <preferences> and <unsubscribe> to make that section dynamic:

There are a couple of other important links, such as <forwardtoafriend>, but we won’t be making use of them in this case.

4. Single Lines

The next thing we need to attend to is the main email heading.

tuts email headingtuts email headingtuts email heading
Heading and sub-heading

Around line 87 you’ll find it marked up like so:

Paragraphs, with classes of heading and h1 or h2 (thanks email HTML). Each one of these needs to be editable from within Campaign Monitor, so, given that we’ll only ever need to edit the text content and nothing else, we can use the <singleline> template element:

The paragraphs remain perfectly intact, we’ll just add an editable region within each one. Each singleline has an optional label attribute, which will be helpfully displayed from within the Campaign Monitor editor:

5. Multi Lines

For content which is a little more complex than headings and straplines, we’ll use the <multiline> element. On line 134 you’ll find the content of our “first article” which we’ll use as an introduction for each email:

Let’s make these two sections dynamic:

These follow the same pattern as before: editable regions, with optional labels–but this time they allow us a WYSIWYG editor:

6. Editable Images

Scroll down to line 168 and you’ll find an image within a table cell, all on its own:

This will be part of a repeatable section (which we’ll deal with in a minute) so let’s first make this image dynamic. I don’t like using the word “simply” in tutorials, but in this case I’ll let it slide: simply add the editable attribute to the image tag. Done!

The width attribute is required, but the src (which gives us a default image) is optional, as is our friend the label attribute.

With that done, the editor allows us to remove the default image, upload a new one, add alt text, and (crucially) add a link.

“The hard data says: emails with images convert almost twice as well.” – Chris Hexton, CEO and Co-founder of Vero

Note: bear in mind that if we choose to remove the image completely, the containing markup will remain. This can result in large padded areas without content, so consider how you markup your images in the design.

7. Repeatable Areas

That image is part of a section which we want to be able to repeat as many times as needed. It begins on line 146 and ends on line 176, with the comments:

As we did earlier with other areas, we need to make the heading within this section a <singleline> and the content a <multiline>, so do that before going any further.

To make this whole chunk repeatable, we wrap the necessary bits in a <repeater> element:

This will give us some extra controls in the Campaign Monitor editor, allowing us to duplicate the section, move it (useful for reordering), or delete it.

Note: the <repeater> must container either a <singleline>, a <multiline>, or an <img editable>.

Another note: you can’t nest <repeater> elements!

8. Layout

Now for a repeatable section with a difference. It’s a topic-specific section, and each topic has one, with the appropriate topic colour.

In the case of our translation project newsletter, sometimes we might feature a Photography & Video section, along with Code, and Game Development. Sometimes we may skip Code. Sometimes we might feature all nine topics. So what’s the best to organise this? Enter the <layout> element.

We can use multiple layout elements within a single <repeater> block, so that each time we duplicate the block we’re given a choice of layouts. In our case, we want to choose from the available topics, so our markup will look a little like this:

There you’ll see layout elements, each with a unique label.

Important: don’t use escaped HTML entities (like &amp; rather than &) within the layout labels.

Begin on line 183 by wrapping our topic blocks in a <repeater>. Then wrap each of the topic blocks in a <layout label=''> element, being sure to assign them unique labels.

Now, once we upload everything to Campaign Monitor, the editor will give us all our layout options when we want to repeat a section:

9. Upload to Campaign Monitor

All our hard work is done, now we need to upload our files to Campaign Monitor in order to use our template in an email campaign!

In your Campaign Monitor dashboard go to Templates > Import.

Next, enter a name for your template, select your finished HTML file, then select all other necessary assets (CSS and images) as one zip file. 

Your files will be uploaded and processed which will take a moment. Styles will be optimised (some inlined, some injected into the <head> of the HTML), and paths will be updated. When that’s all done, your template will be available to select when you start a new campaign!


That wraps up this email case study; an insight into how we designed and built the Envato Tuts+ emails. I hope you enjoyed following the process, and if you’re in need of email inspiration for your next project be sure to check out the latest email templates available on Envato Market!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.