Magazine Newsletter Template
The Magazine newsletter template can be used with any email/newsletter software but also includes a version specifically prepared for our WordPress Newsletter plugin to make it easy to use. This version comes with all the needed shortcodes in place.
Included in the Package
- Photoshop file (PSD)
- Font files (TTF)
- Images (JPG, PNG, etc)
- Media query version (index.html)
- Fluid version (index-fluid.html)
- Newsletter plugin version (index-newsletters.html)
Installing the Newsletter Template
These installation instructions are mainly for installation and use with our WordPress Newsletter plugin to illustrate the use of shortcodes and other features. For any other email/newsletter software, you shouldn’t have to follow any specific instructions other than just uploading the HTML file or pasting the HTML code into that software.
Add to the Newsletter plugin
Once you have purchased and downloaded the newsletter template, extract the ZIP which contains all the included files as mentioned above.
First, you’ll want to upload all the files in the
images/ folder somewhere on your server via FTP or through the WordPress media uploader accordingly since emails always pull images remotely on the clients’ side.
Once you have uploaded the contents of the
images/ folder somewhere, make a note of the remote, absolute URL to that folder.
Now go to Newsletters > Templates in the Newsletter plugin and click “Add New” at the top. Fill in a title, choose the
index-newsletters.html file which will be uploaded. Alternatively, you can copy/paste the file’s HTML.
The newsletter template is distributed with relative image paths. So the images are
src="images/logo.jpg" for example and you want them to be remote, absolute URLs like
src="https://domain.com/magazine/images/logo.jpg" so that all readers/subscribers can pull the images into their email clients. Now take the URL of where you uploaded the images previously and put that into the “Image Prepend URL” setting/field.
The inline styles are optional and you can apply them if you’d like for cross-client compatibility but it is up to you.
Then save your template and you’re done! If the images appear broken, you know that there is an issue with your image prepend URL or that the images weren’t uploaded correctly.
Using the Different Areas/Elements
index-newsletters.html version of the Magazine newsletter template comes with several elements. Let’s have a look at them.
The logo is a static image included with the newsletter template and can easily be changed or removed under Newsletters > Templates by editing the template in the WYSIWYG editor.
2. View online link
[newsletters_online_url] shortcode is included on the link to automatically generate a view online link accordingly. The text itself is static and can be changed by editing the template.
The menu/navigation is static and can easily be changed by editing the template.
4. Banner image
The banner image is a static image and can be changed by editing the template.
If you’re going to send posts/pages as newsletters, you could change out the banner image HTML by editing the template and replace it with a
[newsletters_post_thumbnail...] shortcode to automatically show the featured image of the post/page accordingly.
5. Subject line
The subject line is automatically populated with the
[wpmlsubject] shortcode. So it will take the subject of the newsletter or the title of the post/page, depending on how you use the template.
6. Main content
The main content area uses the content from the main editor and uses the
7. First content area/Main column
The first content area is populated by
You can create an additional content area by clicking the “Add Content Area” button below the main editor. You can then insert any text, images and formatting as needed. All WordPress, Newsletter plugin and 3rd party theme and plugin shortcodes are fully supported here.
To output posts with images and read more buttons as presented in the screenshot, you may use a
[newsletters_posts...] shortcode. You can set certain attributes on the shortcode such as
thumbnail_class to ensure it displays correctly. Here is an example of a posts shortcode for your newsletter:
8. Second content area/Sidebar
The sidebar can be use for anything really. You can insert images, text, bullet lists, etc. You may want to insert a bullet list of links, a banner advertisement or even more posts/articles. It is up to you really.
The content of the sidebar is populated from the second content area
[newsletters_content id="2"] so you can once again click “Add Content Area” below the main editor to create an additional content area.
To display posts with thumbnails and read more links as illustrated in the screenshot, you can use a
[newsletters_posts...] shortcode such as this example:
Notice in this case how the
thumbnail_size is set to
thumbnail for a smaller image.
9 & 10. Third & Fourth content areas
Here are two more content areas which you can use as needed. Again, click “Add Content Area” below the main editor twice to create editors for
[newsletters_content id="3"] and
[newsletters_content id="4"] accordingly.
To display posts again as illustrated in the screenshot, here is an example
[newsletter_post...] shortcode which can be inserted into each of the content area editors respectively:
11. Contact details
These contact details are static and can be changed by editing the template.
12. Unsubscribe link
The unsubscribe link is automatically generated using the
[wpmlunsubscribe] shortcode of the Newsletter plugin.
13. Social media icons/links
These icons are static and their links are blank so you can edit the template to insert your own Facebook, Twitter, LinkedIn and YouTube URLs as needed or remove some of them if you don’t want them. This can be done by editing the template under Newsletters > Templates using the WYSIWYG editor.