If you’re using the Newsletter plugin for WordPress and you’d like to create an email template using the Postcards, read on! This tutorial will guide you through how to do it.
Overview
Using the Newsletter plugin, we’re going to create a new email template using Postcards. We won’t be covering how to install the Newsletter WordPress plugin or get it running or anything other than creating a new email template with Postcards.
Prerequisites
- Designmodo account.
- WordPress website with Newsletter WordPress Plugin set up.
- Text editor that can open HTML files.
Video Version
Steps
Step 1: Take a Look at Newsletter Tags
Most email sending services have some a tagging system that allows email senders to customize the contents of their emails. The customization is necessary because there are situations where you have to send each recipient a unique piece of content such as name or email address.
Newsletter is no different and has its own tagging system with tags that look like: {name}. More information about Newsletter’s Tags can be found at this link.
In this tutorial, we’ll be adding two tags to the Postcards template: {name} and {unsubscription_url}.
Step 2: Create the Template in Postcards and Add Tags
Go to the Postcards app and create a template. It’s simple; just select options on the left side and select which pieces you want in your template. I created a simple template that looks like this:
Once your template is created, you can add custom tags in the content area.
The {name} tag will go in the header section and the {unsubscription_url} tag will be in the footer area.
In the header area, update the text from “App is available for iOS and Android” to “Hey {name}, App is available for iOS and Android.”
To do this, click on the header area in the middle section, and that’ll open up a new menu on the right. After the menu opens, click on the title submenu to edit the text. This is what your screen should look like:
As you can see, the title was changed based on text that’s in the input area. Next, we’ll do the same thing with the unsubscribe URL tag.
This is what my footer looks like with no changes:
There is a link at the bottom, which is an email. Change the text to “Unsubscribe” and the URL to {unsubscription_url}.
Click the footer and press the “Column #2” option and scroll to the bottom. Under “LINK #2” change the text and URL to “Unsubscribe” and “{unsubscription_url}.” Your screen should look like this:
Now we’re done making changes to the template, and we can export the files.
Press the “Done” button on the right side menu and then select “Export” in the top right corner. That’ll open two options, select “Download ZIP.” Make sure the “Host images online” option is selected. It should look like this:
This option lets you use Designmodo’s servers to serve the images rather than hosting and serving the images yourself.
Press “Download ZIP” and extract the files somewhere. You should see something like this:
If you open the index.html file in your browser, you should see the template you just created.
We now have everything we need to upload the email template in Newsletter.
Step 3: Create an Email Template in Newsletter
Open the index.html file in a text editor. Do this by right-clicking the index.html file and selecting “Open with Notepad++”. It looks like this:
This is the code that Postcards generated. You don’t have to understand the code; you just have to copy and paste it.
Back in the Newsletter dashboard, we want to create a new newsletter. Go to the create new newsletter page, and that’ll take you to the select a theme page. Select “Raw HTML” Theme. Your screen should look like this:
That’ll take you to a code editor that looks like this:
Copy the code from the index.html file and replace everything in the Newsletter editor with it. Your editor should look like this:
Press the save button and then the eyeball button at the top to preview your theme. You should see this:
And there you go, the Postcard template was successfully imported to the Newsletter plugin.
At this point, you have a theme ready to go to use in email newsletters.
What we covered
- How to edit the text content in the Postcards app and export it.
- How to create a raw HTML template in the Newsletter WordPress Plugin and add Postcards template code to it.