How to Upload an Email Template in Campaign Monitor

In this tutorial, we’ll be creating a custom email template in Campaign Monitor using a Postcards template.

Prerequisites

• A Designmodo account
• A Campaign Monitor account
• Ability to edit HTML code

Steps

1. Create and export a Postcards template

The main thing we need is a Postcards template for the HTML file.

In the Postcards app, create a template. Mine looks like this:

It consists of a Header 7, Content 4, Feature 5, Call to Action 1, and a Footer 1.

Next, we want to export this and use the HTML code that’s generated.

In the top right corner of the app, press “Export” and press “Download as zip”

There will be an option called “Host images online.” Make sure this option is checked. Your screen should look like this:

Press “Download Zip” and extract the file into a folder. My folder looks like this:

If you open this file in your browser, you should see the Postcards template you just created.

Now we have to edit parts of the HTML file to fit the Campaign Monitor requirements.

2. Edit the HTML file to add the required tags

When adding an HTML file to Campaign Monitor, you must have two tags in your HTML code.

You need an unsubscribe tag and an editable region tag.

We will also be adding a personalization tag to add some dynamic content like the recipient’s first name to the email.

To add these, we need to edit the HTML file directly.

Open up your index.html file in a text editor. I’m using Visual Studio Code so my file looks like:

The area I want to add the unsubscribe tag to is in the footer. My footer has an email tag so there’s some text that says “mailto” and if I search for that text I’ll find the area of the code to add my unsubscribe tag.

I opened my find text option by pressing “control + f” and typed in “mailto” to see:

Next, I’ll replace the entire <a> tag with my unsubscribe link from Campaign Monitor and add text.

Next, I’ll add the editable area tag somewhere close because it’s required but I don’t want to have it as a useable part of the template.

Next, I want to add the [firstname] tag to the subheading. I’ll search for the subheading by pressing “control + f” and searching for the subheading text which starts with “Co-ordinate campaigns.”

I’ll add the [firstname] tag with a fallback option in the first part of the text.

Now our HTML file is ready. Save the file and go to your Campaign Monitor dashboard.

3. Create a template in Campaign Monitor

In your Campaign Monitor dashboard, click your profile icon in the top right corner and then click “My templates.”

If you’re using the agency version, the templates button will be in the top navigation under your profile icon. They both take you to the same page.

Next, press “Upload your own HTML.”

That will take you to a page where you name your template and can upload your HTML file.

Once this is done, press “Add template.”

That will then take you to your templates page that looks like this:

At this point, your template is ready to go!

You can’t send yourself a test email so to test the template, you have to send yourself a campaign.

What we covered

1. How to create and export a Postcards template.
2. How to edit the template’s HTML code to add Campaign Monitor tags.
3. How to create a template in Campaign Monitor using the Postcards HTML file.