In this tutorial, we’ll cover how to create an email template in MailWizz using a Postcards template. We’ll go over how to add the images and code generated by Postcards in a MailWizz template.
Prerequisites
- MailWizz app/account that’s already set up
- Designmodo account
- Text editor for code
Video Version
Steps
Step 1: Gather the tags you want to use
MailWizz allows you to add tags to an email template. Tags look like [COMPANY_FULL_ADDRESS] and what they do is replace the tag with values that are specific to the recipient or sender. In the company address tag, that tag would be replaced with the company’s full address when the email is sent.
There are many tags you can use in MailWizz and two are required: the company’s full address tag and an unsubscribe link tag.
You can see the full list of available tags in the create email template page.
In this tutorial, we’ll be using the required tags.
Step 2: Create a Postcards template and export it
Go to the Postcards app and make a template. I created a simple one using the pieces Header 7, Content 4, Feature 5, Call to Action 1, and Footer 1. You can use any type of template.
After the pieces are ready, we want to add the tags to our template. We’re going to be editing the footer only for this template because that’s where we’re going to add the company full address and unsubscribe tag.
To update the footer, click on the footer section. That will open a new menu on the right side. This menu has options to change what you see in the footer like images or text.
In the Contact Us section, replace the address with the [COMPANY_FULL_ADDRESS] tag. This will be changed to the sender’s full address when the email is sent.
Next, update bottom link, which was an email. Change the text from the email to “Unsubscribe” and in the URL I put in the [UNSUBSCRIBE_URL] tag. This tag will be changed to the unsubscribe URL set by MailWizz.
Finish all the changes and now it’s ready to go. Press the export button in the top right corner and export the template. Extract the zipped files into a folder you can work with. Your folder should look like this:
If you open the index.html file in your browser, you should see the template you created.
Step 3: Upload the zip file directly to MailWizz
To let MailWizz handle all the image uploading and setting of the URLs in the code, you can upload the zip file directly into Mailwizz and the app will handle everything.
Go to the MailWizz templates list and press the “Upload Template” button.
Select the zip file you just downloaded from Postcards and upload it. Once it’s done uploading, you’ll see that the template was imported into MailWizz with all the images and code working as intended.
To learn how to manually upload and update each image, continue onto the next step.
Step 4: Create a MailWizz template using Postcards template code
To create a template in MailWizz, go to the templates page and press the “create new” button. It should take you to this page:
This is where you create an email template that MailWizz can use. This screenshot isn’t the default view, I pressed the “Source” button that’s highlighted in yellow. This opens the code editor so you can edit the HTML. If you don’t press this button, the editor is a white background.
Next, add the code from the Postcards template to this template. Open the index.html file you downloaded in a text editor like Notepad++. It should look like this:
Copy that code and replace everything in the MailWizz template with it. Your MailWizz template should now look like this:
Name your template and scroll to the bottom and press save. Afterward, you can preview the template in the top button that says “Preview.” It should look something like this:
That’s great but not perfect. If you sent this email no one would suspect anything was wrong. We know what’s wrong though, there are no images. Next, we’ll add images to the email template.
Step 5: Add the images to the template
As you may recall, the Postcards template gave us an index.html file and a folder full of images. We want to add those images to the MailWizz app and update the code so it uses those images.
To add images to the MailWizz app, press the image button in the template editor.
That’ll open a new window that looks like this:
Press the “Browse Server” button and that’ll open another new window that looks like this:
Drag and drop your images in the image folder all at once. After you add the images to the folder it should look like this:
To use these images in your code, you have to find the link that MailWizz generated that points to each image. To do this, right-click the image, and press “Get info” like this:
That’ll open a new window. There you can find the URL of the image in the “Link” part.
Right-click the link’s text and press “Copy link address.” This will copy the URL of the image into your clipboard. Now you have the URL needed to update images in the code.
Go back to the editor and press the “Source” button. To change the images, we have to manually go through each image that’s in the email template and update the source.
The first image is called “button-app-store-dark.png” so we have to find this image in the code. Press “control + f” to activate the search option in the editor and type in “button-app-store-dark.png.” It should look like this:
Now replace the “images/button-app-store-dark.png” with the URL generated by MailWizz. It will look like this:
If you save it and preview the template again, you’ll see the template with the image.
And there you go, that’s how to add images to your email template.
The steps to add images to the template are as follows:
- Create a template and press the image button.
- Press the browser server button to see the server folder where the images will be uploaded.
- Upload images to the server.
- Copy the image URL generated by MailWizz.
- Find where the old image source is and replace it with the new one from MailWizz.
Go through each image and follow the steps to replace the old image source with the new. Sometimes there are multiple places where a source is defined and you’ll have to update the image source multiple times.
After the images are added, your template is ready to go. You can now create a campaign and use the template you just created for an epic email campaign!
What we covered
- How to add MailWizz tags in the Postcards editor.
- How to create a MailWizz email template using Postcards code and images.
- How to upload images to the MailWizz app and update the code to use those images.