How to create a newsletter template your marketing team will love

Published on October 2, 2014 by Tomas Gregovsky

Do your CMS editors need to simply (that is, without knowing html, css and other fancy web technologies) create and send out newsletters every week? Do they additionally want to have these newsletters neatly archived on your website, tied nicely to your existing website theme? If you answer these questions with a resounding “Yes!”, there are a few useful tools and functions in Magnolia to get the job done quickly, while keeping everyone happy.



First, you’ll need your html prototype for your newsletter. The web is full of resources on how to write a proper html email, usually full of tables and inline styles (I'm sure you know how to use Google, but here is one of my favorite resources).

The use case here is to have your newsletter accessible both on email and via the browser, on your website (“Having trouble reading this email? Click here”...). So to ease you gently into the topic, let’s start with this requirement, as it’s the simplest part: let’s create a new newsletter template on our website.

We’ll extend our custom home or stkHome (to keep our branding, meta-navigation, footer, etc as inherited areas). Then we’ll wipe out (override) the list of existing components in this new home template and create a new availableComponent in areas > main > areas > content that goes by the name of newsletterTextImage. Of course, we can add or extend others like linkLists or teasers, but for now, let’s work with this one. We’ll also extend stkTextImage and add your custom dialog (for title, text, image, button) and ftl.



FTL (my templating language of choice - you can also use JSP or others, but I can guarantee it to you that FTL is simpler and easier to use in the long term) should be “email ready” (tables, inline css and other goodies) because we will use it in email rendering and also in the website.



Of course we can also change our mainArea.ftl and others, depending on our newsletter layout. But for now, we have a new working template (don't forget siteDefinition availability) with one newly available component. So far so good -  it’s pretty much just like your regular template.

And now the magic bit comes in. In this template we can define “variations” and change templates depending on file extensions. Let’s imagine that the default variation for all pages is “html”, which means that if we have a page, then the extension “.html” is connected with this default variation. Now if we create a new variation called “email” and change the url to then we can rewrite some properties, for example templateScript main.ftl, with something more “email ready”. Variations work with the same logic as extends, so if you need to rewrite ftl for contentArea as well, then you have to create a whole tree below (areas > main > areas > content).






And that’s all. Well, almost. But editors are now able to create a simple newsletter and render it as web content or email.


If you are using an external campaign tool like Campaign Monitor or Infusionsoft, just open your new newsletter on your public instance of Magnolia, go for the source code and copy it all. Then just put this code into your tool (maybe you will also have to add some elements to code, like the “unsubscribe” button if you’re using e.g. Campaign Monitor). On the opposite end, there’s tools like InfusionSoft  that will be injecting “unsubscribe” and some more text to the bottom of your email automatically, so you don’t have to care and can just send the html. Or maybe you are using one of Magnolia’s integrations for such tools, such as the Newsletter module, which can also help you with this part of the work. :)

This post should cover a basic functionality overview and give you something to build on. Frontend developer, page-crafter, template designer or whatever your job title is: let your imagination loose and show us what kind of amazing newsletters you can create!


{{item.userId}}   {{item.timestamp | timestampToDate}}

About the author Tomas Gregovsky

Tomas Gregovsky is a web and front end developer with 15 years of experience. He joined Magnolia three years ago and focuses on the development of Magnolia’s websites. In his free time, he likes to spend time with his family and friends, snowboard and watch American football. He mostly blogs about using Magnolia as a front-end developer.

See all posts on Tomas Gregovsky