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.
Great looking template! Looking forward to seeing the MailChimp version.
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?
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.
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
Check your email. I sent the reply and instructions, along with an updated template to you.
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?