Digital Meaning

  • services
  • plans
  • playbook
  • Work
  • People
  • Thoughts Blog
  • let us help

Apr 05 2012

Written by Guest Contributor · About: Email Marketing

Page Curl, a free Campaign Monitor email template

Page Curl is a modern and clean email template designed to be used in Campaign Monitor’s awesome template editor. (A MailChimp version is coming soon. Follow us on Twitter and Facebook to be notified of its release.)

The Page Curl HTML email template is being offered as a free download for a limited time (while in beta testing.) We are writing up some easy to follow instructions and hope to have the whole package available for purchase on ThemeForest within the month. Until then, you can download the Page Curl template to use in your email campaigns. This template is NOT shareware. You can download it and use it for yourself, but don’t resell it or claim you designed it and sell it to your client.

[slideshow]








[/slideshow]

Features

  • Only 1 background image! Some janky email clients ignore or remove the background-image CSS property, so the only one I used is the white highlight behind the email. If it fails, no big deal.
  • A single flexible layout that utilizes the Campaign Monitor editor to add, remove and edit the sections and rows of this template. Don’t want the 3-column row? Delete it. Want 5 rows of the 2-column section? Click the Add button. Simple.
  • Facebook Like and Twitter sharing buttons.
  • 640px actual width – 600px content width. The extra 20px on each side are to keep the content away from the edges of mobile devices and make it easier to read and less cramped looking.
  • Tested using Campaign Monitor’s Spam and Design test. Passed and looks good.
  • Twitter feed pulls in latest tweets from your Twitter RSS feed (we recommend only 1 post, but it does stack.) This is technically different than the timeline you are used to seeing. You will need this URL in the CM editor: //api.twitter.com/1/statuses/user_timeline.rss?screen_name=XXXX (replace the last 4 X’s with your Twitter handle, like this: //api.twitter.com/1/statuses/user_timeline.rss?screen_name=digitalmeaning)
  • The Twitter avatar is the same size (128x128px) as the one found on your Twitter profile. You can link directly to it (not recommended), or download it and use the CM editor to replace ours.
  • I use PNGs for the shadows so that you can switch the background color easily. Again, Lotus Notes 7 and below, and old Outlook don’t like PNGs and may show a faint blue overlay on them. Also, Internet Explorer 6 and early versions of 7, don’t support PNGs, so any user viewing this on those browser will suffer (I mean, see a faint blue overlay.)

Known issues

  • Lotus Notes 6.x? I have no intentions of hacking at this email’s code for that really old email client. But, if you know of an easy fix and are willing to share it, I’m willing to try it out.

Download:

Included in the download are a read-me file, all web-ready images used, 2 PSD templates (for the navigation flag and the CTA button), and, of course, the HTML email file. (336kb download)
[download id=”1″]

Code problems or suggestions?

If you notice any problems with the code or have some suggestions for us, leave your comments below.

The images you see in this template are by Kevin Zimarik Photography and used with permission for the sole purpose as placeholders in this template.

The tables you see in this email template were designed and hand crafted by John Beck of John Beck Paper & Steel, Edwardsville, IL.


Comments

  1. Scott Kindred says

    April 5, 2012 at 8:47 pm

    Great looking template! Looking forward to seeing the MailChimp version.

  2. Alan Sands says

    April 22, 2012 at 4:08 am

    I like it. Not too “designery”, so I can modify it and use it for different purposes.

    Does it work with MailChimp or MailMonk though?

    • Tristan says

      April 22, 2012 at 1:35 pm

      Thanks!

      It should be pretty easy to update and modify since each row is in its own table. Delete, rearrange, duplicate, all of it is easy to do in a text editor/Coda/Dreamweaver to make it work for you. The shadows are in their own cells that retain their height even if you choose to remove the shadow images. So, in the end, you could duplicate the 2-column row 4 more times while deleting the rest to make am email that has 10 equally spaced content areas for clients that have retail/ecommerce. While there are 2 styles in the email (side-by-side columns of equal width, and the single rows like 1/3 + 2/3), I would recommend choosing one style. So if you like the columns, use columns throughout. But, that’s your call.

      MailMonk… Is that for real? I visited their site and I see more Lorem Ipsum than real text, like the site is in dev mode. Maybe I caught it at a bad time. Either way, there will be a plain HTML version coming soon too, which should work fine in most systems.

  3. Alasdair says

    June 6, 2012 at 3:00 pm

    Hi.
    Great template, looking forward to using it. I am not really that good in Dreamweaver, but have some basic knowledge, but I have a few questions if you could help please:
    – How can I create a text only box?
    – How can I move the boxes around – e.g. add a 2 column row below a 1/3 single row?
    – I really want to add a CTA gif button in the columns, but I can’t seem to get this to work. Can you do this?

    Many thanks

    • Tristan says

      June 9, 2012 at 11:32 pm

      Check your email. I sent the reply and instructions, along with an updated template to you.

  4. Rizwan says

    October 7, 2012 at 5:58 am

    Hi Tristan,

    I just loved your template. I was all set to use this template for CM until I found that I can’s send my campaigns for free :/ I have 500+ subscribers. Man! I spent like 5 hours+ in tweaking the template according to my needs! (of course after adding links to digital meaning in the footer etc)

    I’m planning to use Mail Chimp now. Can you please email me the normal (without CM tags) HTML template?


About

Tristan Denyer is an engineering manager solidly rooted in front-end development and UX design. He is humbled by the learning that comes from seeing things from the customer's point of view. Tristan is a former front-end designer and managing partner at Digital Meaning.

More On Email Marketing

Two Free Digital Ads B2B Marketers May Be Overlooking

November 06 2019 by Pauline Kalil

Why B2B Marketers Must Stop Spamming

August 29 2019 by Arthur Vibert

Digital Meaning

Your strategic B2B marketing firm and creative support team.

Get to Know Us

  • services
  • people
  • plans
  • thoughts (blog)
  • playbook
  • why us
  • our work

Keep in Touch

  • Made in San Francisco
  • p: 415.985.6270
  • LinkedIn Icon
  • Twitter Icon
  • services
  • people
  • plans
  • thoughts (blog)
  • playbook
  • why us
  • our work

© 2022 · Digital Meaning · All Rights Reserved.