FineLine - Email Template - 30 Layouts 8 Colors

FineLine - Email Template - 30 Layouts 8 Colors

FineLine 1.26

FineLine is a massive collection of ready-to-use, feature-packed, and professional-looking email templates, in 30 layouts, 8 colors, and 3 backgrounds (a total of 720 plain templates). An additional of 720 modified templates each has been added for MailChimp, Constant Contact, and Campaign Monitor users, bringing the total number of templates to 2880.

The 30 layouts represent four groups of the most common email messages, giving you all the possible elements you might need that you can mix n’ match in your email campaigns.

A Summary of What You’ll Get

  1. Four groups of plain templates in 30 layouts, 8 color themes, and 3 backgrounds (a total of 720 plain templates);
  2. 2160 modified extra templates (720×3) that works great in MailChimp, Constant Contact or Campaign Monitor;
  3. 144 extra variants of the standard header and footer, which allow you to integrate your company/newsletter name and/or logo in several ways;
  4. Useful elements like the HTML-editable button, lists, tables, etc. and even the option to embed a video;
  5. 35 PSD files that give you complete control in tweaking the look of the layouts, buttons, or image containers;
  6. Detailed instructions in the documentation to make customizing the templates fast and easy

Four groups, 30 layouts

The 30 layouts are divided into four groups of common email types:
  • The simple, single message email (8 layouts)
  • The flexible newsletter (11 layouts)
  • The versatile product gallery (5 layouts)
  • The detailed message email (6 layouts)

Here are the 30 templates (links to an example color theme):

The detailed message email

  1. The Twitter-Forward focus message (with big buttons to follow on Twitter or forward message to a friend)
  2. The video-link and testimonial message (button and images, plus a testimonial and a video link)
  3. The large images detailed message (short description with full-width images for every feature/benefit)
  4. The newsletter-like detailed message 1 (with image, text, and button for every feature of product/service)
  5. The newsletter-like detailed message 2 (mirror image of layout 1)
  6. The complete detailed message (with a list, table, testimonials, images, and link to video)

The flexible newsletter

  1. The 140 newsletter 1 (140×140 preview images, text, with no button)
  2. The 140 newsletter 2 (mirror image of layout 1)
  3. The full-width newsletter (540×230 full-width images, text, with no button)
  4. The 250 newsletter 1 (250×250 preview images, text, with no button)
  5. The 250 newsletter 2 (mirror image of layout 1)
  6. The 140+B newsletter 1 (140×140 preview image, with button, list, and table)
  7. The 140+B newsletter 2 (mirror image of layout 1)
  8. The full-width+B Newsletter 1 (540×230 full-width image with button on one side)
  9. The full-width+B Newsletter 2 (540×230 full-width image with button at the bottom of entry)
  10. The 250+B newsletter 1 (250×250 preview image with button)
  11. The 250+B newsletter 2 (mirror image of layout 1)

The simple, single message email

  1. The blogpost 1 (with 2 images and author avatar + description)
  2. The blogpost 2 (mirror image of layout 1)
  3. Simple message with a button (text plus button)
  4. Straight, plain message (no buttons or images)
  5. Simple announcement for a product (with a list and button)
  6. The complete single message 1 (with an image, button, list, and table)
  7. The complete single message 2 (mirror image of layout 1)
  8. The single video message (embedded video which plays in some email clients)

The versatile product gallery

  1. The 140×3 product gallery (140×140 images, 3 columns, 2 sections)
  2. The 160×3 product gallery (160×160 images, 3 columns, 3 sections)
  3. The 250×2 product gallery (250×250 images, 2 columns, 3 sections)
  4. The 110×4 product gallery (110×110 images, 4 columns, 3 sections)
  5. The 80×5 product gallery (80×80 images, 5 columns, 3 sections)

Example Inbox Screenshots

(NOTE: The inbox screenshots you’ll see when you click the ‘Screenshots’ button above (beside the ‘Live Preview’ button) are larger and have a better quality than the screenshots you’ll see below, so I suggest you view them instead of the ones here (they’re all the same).)Here are some screenshots of selected templates, as they appear inside various inboxes of the most common email clients:FineLine has been thoroughly tested and maintains a consistent look across all the major email clients.

2160 modified templates for MailChimp, Constant Contact, or Campaign Monitor use


These extra 2160 modified templates give you the ability to automatically create emails that already have MailChimp’s or Campaign Monitor’s proprietary tags, or otherwise plug it in Constant Contact with no worries.

FineLine has also been tested with other email service providers, such as Benchmark email, StreamSend, iContact, and Aweber. In each of these ESPs, there is an option to upload or paste the code of your own template, so you can just upload your chosen edited FineLine template or do a copy-&-paste of its code, to use it in your ESP.

The default header and footer company name & logo for FineLine comes as a single sliced image. However, your email projects might come with different name and logo setups, so there are 3 variations you could also use instead of the default header/footer:
  1. Header2/Footer2 --Logo as image, name as HTML text
  2. Header3/Footer3 --Name only as HTML text
  3. Header4/Footer4 --Name only as image

3 variations x 8 color themes x 3 backgrounds give you 72 variations for the header, and also for the footer; giving you a total of 144 additional headers and footers.

Useful email elements

The ‘HTML-editable button’

This unique FineLine feature (to my knowledge) allows you to edit the text and size of the button right inside the text editor, helping you create emails faster (no need to slice a new button image in Photoshop).

It also has the side benefit of making your button readable and visible when images are turned off by default (as what a lot of email clients do).

Video
One template (the single video message template) enables you to embed a video in a page using HTML5 <video> tags, which allow your clients to play videos right in their inbox (if their email clients could play them).

Other email elements
Other HTML elements also featured are lists, tables, and blockquotes (for testimonials).

35 PSD files

There are 8 PSDs for each of the layouts and buttons of each color theme (16 total), and a color-generator.psd if you’re keen on coming up with your own color theme.

The rest (18 PSDs more) are the image container PSDs--they allow you to easily insert your own image, so that you can maintain the Polaroid-like effect you see in the images used in the template.

Detailed Documentation

Lastly, step-by-step instructions in the documentation should help you modify the templates or the images quickly and easily.Some of the topics covered are:
  • How to change the colors of the buttons
  • How to add a row, column, or change the appearance of the tables
  • How to create your own color theme

List of Some Fixed Email Client “Bugs”

You won’t have a problem with these typical “bugs” from popular email clients, as they’re fixed in FineLine:
  • Outlook 2007: 1px border/padding added to table cells (more info here)
  • Hotmail: background color and alignment issues (more info here)
  • Hotmail: headings turned into green (more info here)
  • Gmail: Phone numbers treated as text links (more info here)
  • iPhone/iPad: minimum font size (more info here)
These and other email client issues were painstakingly dealt with while FineLine was being created. (If you still catch something though, please let me know.)

That’s all, folks!

If you need some help as you work with FineLine, please don’t hesitate to let me know by shooting me a message, and I’d be glad to help you as much as I can.

Also, if you liked FineLine, please rate it and/or leave a nice comment for me. Thank you very much! :)

Updates

FineLine 1.26 – 20 October 2012
  • Optimized code some more for all the Campaign Monitor templates

FineLine 1.25 – 11 October 2012

  • Modified code for some of the MailChimp templates
  • Optimized code for all the Campaign Monitor templates
  • Edited the documentation to reflect these changes

FineLine 1.24 – 08 September 2012

  • Optimized code for all the MailChimp templates
  • Optimized code for all the Campaign Monitor templates
  • Edited the documentation to reflect these changes

FineLine 1.23 – 06 July 2012

  • Modified the code of all the Campaign Monitor templates, to make each design element completely editable in Campaign Monitor’s visual editor
  • Edited the documentation to reflect these changes
  • Optimized the code for some of the plain, MailChimp, and Constant Contact templates

FineLine 1.22 – 15 June 2012

  • Modified the code to some of the MailChimp templates
  • Edited documentation to reflect the changes

FineLine 1.21 – 27 May 2012

  • Removed the recent Hotmail ‘bugfix’ for special characters (see update 1.01), as it’s already fixed by Hotmail (thanks McM00d for the heads up)
  • Modified the MailChimp templates to make them completely editable in every way possible through MailChimp’s Custom Template Builder
  • Edited documentation for additional instructions in using the MailChimp templates

FineLine 1.2 – 12 May 2012

  • Additional 720 modified templates for Constant Contact users
  • Edited documentation to show how to use these extra 720 templates

FineLine 1.1 – 26 April 2012

  • Campaign Monitor-tagged templates – additional 720 templates
  • MailChimp-tagged templates – another 720 templates more
  • Edited documentation to show how to use these extra 1440 templates

FineLine 1.01 – 22 April 2012

  • Fixed a recent Hotmail ‘bug’ of replacing special characters with an oversized image (more info here)
  • Added style="display:block;" on some images for a more consistent look across some email clients
  • Modified some text and links in the documentation to make it clearer and more helpful

Share this

Previous
Next Post »