Versatile Newsletter 2 – 9 layouts, modular system
by admin

Versatile Newsletter v2 is a professional HTML Email Template

Highlights

• 9 prebuilt layouts + various types of other layouts can be built easily thanks to the included layout creation system
• supports all email clients: from Yahoo Mail, Gmail, Hotmail to Thunderbird, Outlook 2003 & 2007, MailChimp, Campaign Monitor, Apple Mail etc
• 2 versions for each layout: one with embeded css and one with inlined css. The embeded css versions are very easy to edit
  and can easily be converted to inline css using the link to an online service provided in the documentation
• other color schemes can easily be created
• modular layouts – easy to add and remove content
• layout creation system – build a newsletter general layout complete with placeholder images and dummy text
  in minutes, writing little to no source code but using a copy-paste pre written code approach instead. More info on this below.
• extensive documentation
• png and psd source files

The layouts – see full preview here

The Layout Creation System

Click the link below in a new tab to see a test run of the layout creation system and how you can create a complete newsletter in under 6 minutes.

The layout creation system was designed with a clear goal in mind: allow people to focus on the most important part of the newsletter – the content – by providing a way to easily create and kind of layout, that works in all major email clients, in minutes…

What the layout creation system is? A collection of code snippets, placeholder images and dummy text that allow you to mock-up any design in minutes in 4 easy steps:

1. Select a Base File (the shell that will hold the modules that will contain the actual newsletter content)
   • save it as a new html file
   • read in documentation how to customize it if needed
2. Add Modules (precoded tables used to create different colomn structures) inside the base file
   • add the modules in the base file starting from the comment <!- START MAIN CONTENT . ADD MODULES BELOW ->
   • add module dividers or
     ’s between the modules to create space
3. Add content in the modules
   • add your actual texts and pictures
   • use the placeholder images in /placeholders and the text from /placeholders/lorem-ipsum.txt for fast mock-up if you don’t have the final text or pictures available
4. Finish
   • copy your html file along with the /images and /placeholders folders to another location
   • host all images on a server and change all paths to absolute paths in the layout file
   • inline the css using the online service provided
   • test and send

To edit the precoded layouts you start from step 2, adding or removing modules and content as needed.

This system is so simple that I gave it to people with no knowledge of html and just follwing the instructions and copy pasting code they where able to create fairly complex layouts in under 15 minutes.

Documentation

The documentation is extensive and takes you step by step through creating / modifying and
customizing different html email layouts. The documentation also has a section with general
tips of what to take into account when building any kind of html email.

Files included

• 9 coded newsletter layouts with embeded css
• 9 coded newsletter layouts with inline css
• layout creation system:
  • 1 html file with source code for all base files
  • 1 html file with source code for all available modules
  • 1 html file source code for all the available stylings for content
  • 2 html newsletter base files
  • 24 placeholder images of different sizes
  • 1 text file with dummy text text
• 1 .png and 1 .psd source files
• 8 individual layer sources
• extensive documentation

Fonts used

• Myriad Pro – for the logo
• Arial – everything else

Help

I’m confident that between the semantic html mark-up, the commented and nicely formatted source files and the extensive documentation you won’t have any trouble setting up this newsletter template!

But if you have questions or encounter problems I am always willing to help you out; just send me a message through the contact form on my user page.

My files

Html Templates

Flash

Newsletter Templates

Graphic Files