How to Upload an Email Template in Mailerlite

In this tutorial, we’ll create 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 included. 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 this:

{$name}

{$unsubscribe}

In the Postcards app, I created a template consisting of Header 7 and Footer 1. It looks like this:

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

Click on the Header to open its editing options, then click the “Text” element.

In the text editor that appears, add the name tag at the beginning of the text, like this:

Now, scroll down and select the Footer.

Find the element where the email link is defined.

Change the “Text” element to “Unsubscribe” and add the unsubscribe tag to the “URL” input.

Wait a few seconds for the auto-save.

Once your design is ready, the next step is to export the HTML from Postcards so you can import it into Mailerlite. Postcards give you two ways to do this through the Export menu:

• Copy Email Code — this is the quickest option. It copies clean, production-ready HTML directly to your clipboard, so you can paste it right away into Mailerlite:
  • Click Export in the top-right corner.
  • Select Copy Email Code.
  • The full HTML will be copied automatically to your clipboard.

• Download as ZIP — this downloads the full HTML package of your email, including the index.html file. Make sure "Host images/fonts online" is enabled before downloading, unless you plan to use your own hosted image and font files.
  • Click Export in the top-right corner and select Download as ZIP.

• Click the "Download as ZIP" button.

• Open the ZIP and extract the contents into a folder.

• Inside the extracted folder, locate the index.html file.
• Open index.html in a text editor such as Notepad, Notepad++, or Visual Studio Code.
• Copy the full HTML code from that file. (CTRL + A - to select all, then, CTRL + C - to copy)

Extract the file into a folder you can work with. It should look something like this:

Now we have everything we need for the custom Mailerlite email campaign.

2. Create a custom campaign in Mailerlite

In your Mailerlite dashboard, navigate to the “Campaigns” page.

You will be redirected to the “Campaigns” page, where you select “Create”.

Next, select "Regular campaign".

After that, you will be redirected to the “Email Design” page. Select “Start from Scratch” and then choose “Custom HTML Editor”.

In the Editor, select "Code from Scratch".

Copy your code from the Postcards template into the Mailerlite Editor.

After you finish making changes, click “Done editing” in the upper-right corner.

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

I sent myself a test email, and it looks like this:

What we covered

1. How to create a Postcards template with Mailerlite tags.
2. How to create a custom HTML email campaign in Mailerlite.