1. Home
  2. Postcards
  3. Integrations
  4. How to Upload an Email Template in Mailerlite

How to Upload an Email Template in Mailerlite

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

Prerequisites

  • A Designmodo account
  • A Mailerlite account
  • A text editor that can open HTML files

Steps

1. Create a Postcards template with Mailerlite tags

The first thing we need is a Postcards template with Mailerlite tags in them. We want to add the tags in the first step so we don’t have to edit the code later.

We’ll be adding two tags here, the unsubscribe tag and the name tag. They look like:

{$unsubscribe}

{$name}

In the Postcards app, I created a template that consists of a Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1. It looks like this:

How to Upload an Email Template in Mailerlite

Let’s first add the name tag to the Header.

Click the Header image to open up the options to edit it and then click the “Text” field.

Create a Postcards template with Mailerlite tags

In the text editor that appears, add the name tag to the start of the text like this:

Text editor

That will update the preview on the left side.

Press “Done” in the top of the side menu and then scroll to the Footer and click it.

Done

Click “Column #2” and scroll until you find where the email is defined.

Update the “Text” field to “Unsubscribe” and add the unsubscribe tag to the “URL” input.

Unsubscribe

Press “Done” and then export this file by pressing the “Export” button in the top right corner.

Press “Download as zip” and make sure you have the “Host images online” option selected so you don’t have to upload the images manually.

Your screen should look like:

Host images online

Extract your index.html file into a folder you can work with. It should look something like:

Extract your index.html file

2. Create a custom campaign in Mailerlite

In your Mailerlite dashboard, go to the Campaigns page and click “Create campaign.”

Create a custom campaign in Mailerlite

Fill out the form and then click “Next: CONTENT.”

Next: CONTENT.

In the email design options, select “Custom HTML editor.”

Custom HTML editor

In the next page, select “Paste in code.”

Paste in code

The next page will look like:

Visual Studio Code

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

Index.html file

Copy everything in this file and paste it into the Mailerlite editor.

Your screen should look like:

Mailerlite editor

Next, press the “Settings” button at the top.

Make sure the “Automatically add footer” option is unselected if you don’t want to add Mailerlite’s footer.

Settings

Next, press “Done editing” in the top-right corner.

At this point, your custom HTML email campaign is ready to go!

I sent myself a test email and it looks like:

HTML email campaign

The name isn’t showing in the text area because this is just a test email but the unsubscribe URL works.

What we covered

  1. How to create a Postcards template with Mailerlite tags.
  2. How to create a custom HTML email campaign in Mailerlite.
Updated on April 17, 2020
Was this article helpful?

Related Articles