Magazine Newsletter Template

box-magazine-newsletter

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.

2015-03-18_14-17-34

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="http://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

The index-newsletters.html version of the Magazine newsletter template comes with several elements. Let’s have a look at them.

1

1. Logo

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

A [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.

3. Menu/navigation

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.

2

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 [wpmlcontent] shortcode.

3

7. First content area/Main column

The first content area is populated by [newsletters_content id="1"].

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_size, thumbnail_align, thumbnail_hspace and 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.

4

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:

5

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.

Earn Money by Referring People

Refer customers to us with your affiliate link and earn commission on sales from your link.

Sign Up

Pin It on Pinterest