This MailChimp HTML email boilerplate contains useful repeatable blocks with mc:repeatable and mc:edit attributes.
Imported as a MailChimp Template it gives authors the opportunity to create, duplicate and rearrange different sections in a newsletter.
Check this sized screenshot with all available blocks.
Included:
- 1 column text
- 2 columns text
- Action button
- Banner + optional caption
- 2 columns thumbnails + text
- Image + text column (right or left aligned)
- All the above with inset & background
- Calendar + text (right or left aligned)
The boilerplate is used as a starting point for MailChimp templates at spatie.be.
We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.
You're free to use this package (it's Creative Commons Licensed), but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.
The best postcards will get published on the open source page on our website.
- Download or clone this repository
- Adapt and tweak the HTML and embedded CSS in
email.html
- Make a .zip file containing
email.htmland all*.pngfiles - Go to MailChimp's Templates section
- Select Create template > Code your own > Import zip
- Upload the .zip and name your template
When creating new Campaigns in MailChimp select this layout in the Template step, tab Saved templates.
Compose your email in the Edit step:
- Hover a content section and duplicate blocks with the + at the bottom left
- Change a block type in the dropdown
- Drag blocks to reorder
More info in this MailChimp KB article
- Use images with the exact size. Outlook 2013 doesn't handle the
max-widthstyles, larger images break the layout. - Use line-heights in %, eg.
line-height: 150% - Caution with importing custom webfonts in Outlook 2013: they tend to break the font stack. Include conditional styles with
!importantto avoid Times New Roman / serif body text.
<!--[if mso 15]>
<style type="text/css">
h1, h2, h3, h4, h5, h6,
.headerCell, .footerCell,
.textContent, .textContentLast,
.buttonContent,
.emailCalendarDay, .emailCalendarMonth {
font-family: Arial, sans-serif !important;
mso-line-height-rule: exactly;
}
</style>
<![endif]-->Please see CHANGELOG for more information what has changed recently.
Test with MailChimp's Preview and Inbox Preview functionality. Send test mails to real world mailboxes.
Please see CONTRIBUTING for details.
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
Creative Commons License. Please see License File for more information.