Built-In Email Wrapper Reference¶
This document includes reference information for the built-in email wrappers.
default¶
This is a plain wrapper without any styling. It does support preview text.
Template
{% if preview_text %}<span style="display:none;font-size:0px;color:#fff;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">{{ preview_text }}</span>{% endif %}<p>{% block content %}{% endblock content %}</p>
Text Template (blank)
Unsubscribe Text
{% include "unsubscribe.txt" %}
Unsubscribe HTML
<p>{% include "unsubscribe.html" %}</p>
Template with Sidebar¶
This mobile-friendly wrapper includes a call-out box in the right upper corner of the email in desktop widths, and then becomes a single-column format for mobile widths with the call-out box at the top.
It uses mailing templates to allow campaigners to edit the content fields without touching the underlying formatting of the mailing. The custom fields used in this mailing template are sidebar_text, featured_image, link_url, signature and references, and appear in the Content section of the mailing Compose screen for easy editing.
The featured image and buttons are automatically linked to the URL entered in the link_url field.
The call-out box only displays if there are values for the sidebar_text or featured_image fields.
Visuals:
- Desktop view
- Mobile view
- Map of the mailing template created by this email wrapper
- Mailing Compose screen Content section
Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<style type="text/css">
p { margin: 1em 0;line-height: 150%; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-wrap: break-word;}
li, code { margin: 1em 0;line-height: 150%; }
code { color: #8c0404; }
.appleLinks a { color:#dd0000; text-decoration: none; }
.appleLinks a:hover { text-decoration: underline; color: #be0000; }
[class="ak-pagemargins"] { width: 30px; }
[class="ak-mainbody"]{
color: #4b4b4b;
line-height: 150%;
overflow-wrap: break-word;
}
[class="ak-mainbody"] a, [class="ak-innerbody"] a, a {
color: #dd0000;
text-decoration: none;
}
[class="ak-mainbody"] a:hover,[class="ak-innerbody"] a:hover, a:hover {
text-decoration: underline;
color: #be0000;
}
[class="ak-mainbody"] a[class="ak-button"] {
-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;
}
[class="ak-mainbody"] a[class="ak-button"]:hover {
background-color: #be0000 !important;
}
[class="ak-sidebar"] {
width:280px;
color: #4b4b4b;
overflow-wrap: break-word;
margin-left: 15px;
}
[class="ak-sidebar"] p {
line-height:125%;
}
[class="ak-mainbody"] a img {
border: 0;
}
[class="ak-sidebar"] img {
max-width: 260px;
{% if custom_fields.sidebar_text|is_nonblank %}{% else %}margin-top: 15px;{% endif %}
}
[class="ak-social"] {
border: 0;
height: 25px;
padding: 0;
margin: 0;
}
sup { vertical-align: top; position: relative; top: -0.5em; }
sub { vertical-align: baseline; position: relative; top: 0.4em; }
@media only screen and (max-device-width: 480px), (max-width: 640px){
[class="ak-mainbody"],[class="ak-innerbody"] {
font-size: 16px !important;
line-height: 150% !important;
}
[class="ak-pagemargins"] {
width: 20px !important;
}
[class="ak-mainbody"] {
border-top: 0 !important;
}
[class="ak-sidebar"] {
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
display: block !important;
}
[class="ak-header-logo"] {
max-width: 80% !important;
padding: 0 !important;
}
td[class="ak-topmargin"] {
height: 8px !important;
line-height: 0% !important;
font-size: 0 !important;
}
img { max-width: 100% !important; }
}
</style>
</head>
<body bgcolor="#e7ebed" color="#4b4b4b" style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 150%; -webkit-font-smoothing: antialiased; height: 100%; -webkit-text-size-adjust: none; width: 100% !important; margin: 0; padding: 0;color:#4b4b4b;">{% if preview_text %}<span style="display:none; font-size:0px; color:#fff; line-height:0%; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">{{ preview_text }}</span>{% endif %}
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #e7ebed; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; margin: 0 auto; padding:0;"><tbody><tr><td width="5%" style="min-width:5px; font-size:0px;"> </td><td width="90%"><table width="700" cellspacing="0" cellpadding="0" border="0" style="background-color: #e7ebed; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; max-width: 700px!important; margin: 0 auto; line-height:150%; border-collapse: collapse;">
<tbody>
<tr>
<td style="background-color: #e7ebed; width:30px; font-size: 0; margin: 0; padding: 0;" class="ak-pagemargins" width="30"> </td>
<td valign="top" style="background-color: #e7ebed; margin: 0 auto; padding: 12px 0 8px 0; text-align: center; line-height:100%;"><img width="168" height="37" style="margin: 0; padding: 0; max-width: 100%; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-color: #647d8b; font-size: 24px; font-weight: bold; line-height: 100%; text-align: center; height: 37px; width: 168px;" alt="ActionKit" src="https://s3.amazonaws.com/demo.actionkit.com/images/actionkit_header_logo.png" class="ak-header-logo" /></td>
<td style="background-color: #e7ebed; width: 30px; font-size: 0; margin: 0; padding: 0;" class="ak-pagemargins" width="30"> </td></tr><tr class="ak-mainbody"><td style="background-color: #ffffff; width: 30px;" class="ak-pagemargins" width="30"> </td>
<td valign="top" align="center"><table cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; max-width: 700px!important; min-width: 100%; width: 100%;" class="ak-innerbody">
<tbody>
<tr>
<td valign="top" style="background-color: #ffffff; height: 12px;" class="ak-topmargin"> </td>
</tr><tr><td valign="top" style="background-color: #ffffff;color: #4b4b4b; font-size: 15px; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; line-height: 150%;" class="ak-mainbody" color="#4b4b4b">
{% if custom_fields.sidebar_text|is_nonblank or custom_fields.featured_image %}
<table class="ak-sidebar" style="max-width: 300px; width: 300px;" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td>
<table style="box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; margin-bottom: 5px; min-width: 220px;" cellspacing="0" cellpadding="0" bgcolor="#eeeeee">
<tbody>
<tr>
<td style="padding: 0 16px; text-align: center; line-height: 125%; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-wrap: break-word;">
{% include_tmpl custom_fields.sidebar_text %}
{% if custom_fields.featured_image %}<a href="{% include_tmpl custom_fields.link_url %}"><img src="{% include_tmpl custom_fields.featured_image %}" alt="Take Action!" width="260" height="183" /></a><br>{% endif %}
<p><a class="ak-button" style="-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;" href="{% include_tmpl custom_fields.link_url %}"> Take Action! </a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
{% endif %}
{% block content %}{% endblock content %}
<p style="text-align: center;"><a class="ak-button" style="-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color: #dd0000; display: inline-block; padding: 0 22px; margin-bottom: 10px; line-height: 200%; height: 32px; color: #fff; font-size: 16px; font-weight: bold; text-transform: uppercase; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; text-decoration: none;" href="{% include_tmpl custom_fields.link_url %}"> Take Action! </a></p>
{% if custom_fields.signature %}
<p>Sincerely,<br>
{% include_tmpl custom_fields.signature %}
</p>
{% endif %}
{% if custom_fields.references|is_nonblank %}<br>{% include_tmpl custom_fields.references %}{% endif %}
</td></tr><tr><td style="background-color:#ffffff; height: 30px;" colspan="3"> </td></tr></tbody></table>
</td>
<td style="background-color: #ffffff; width: 40px; width: 30px;" class="ak-pagemargins" width="30"> </td>
</tr>
<tr>
<td valign="top" style="background-color: #e7ebed; height: 30px;"> </td>
<td valign="top" style="background-color: #e7ebed;"> </td>
<td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
</tr>
<tr>
<td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
<td style="background-color: #e7ebed; text-align: center;">
<img src="https://s3.amazonaws.com/demo.actionkit.com/images/actionkit_header_logo.png" class="ak-header-logo" width="107" alt="ActionKit" style="font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-color: #fff; font-size: 18px;">
<br><br><a href="#link_to_facebook"><img class="ak-social" src="https://s3.amazonaws.com/demo.actionkit.com/images/ak-facebook.png" width="46" height="25" style="width: 46px; height: 25px; padding: 0; margin: 0;"></a><a href="#link_to_twitter"><img class="ak-social" src="https://s3.amazonaws.com/demo.actionkit.com/images/ak-twitter.png" width="42" height="25" style="width: 42px; height: 25px; padding: 0; margin: 0;"></a><a href="#link_to_pinterest"><img class="ak-social" src="https://s3.amazonaws.com/demo.actionkit.com/images/ak-pinterest.png" width="42" height="25" style="width: 42px; height: 25px; padding: 0; margin: 0;"></a><a href="#link_to_instagram"><img class="ak-social" src="https://s3.amazonaws.com/demo.actionkit.com/images/ak-instagram.png" width="46" height="25" style="width: 46px; height: 25px; padding: 0; margin: 0;"></a><a href="#link_to_tumblr"><img class="ak-social" src="https://s3.amazonaws.com/demo.actionkit.com/images/ak-tumblr.png" width="36" height="25" style="width: 36px; height: 25px; padding: 0; margin: 0;"></a><a href="#link_to_youtube"><img class="ak-social" src="https://s3.amazonaws.com/demo.actionkit.com/images/ak-youtube.png" width="44" height="25" style="width: 44px; height: 25px; padding: 0; margin: 0;"></a><br>
<br>
<p style="font-family: font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; color: #4b4b4b;">
Your Organization<br>
Your Street Address<br>
Your City, State ZIP Code<br>
©2017 Your Organization. All rights reserved.<br>
{% block unsubscribe %}{% endblock %}</p></td>
<td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
</tr>
<tr>
<td style="background-color: #e7ebed; width: 30px; height: 30px;" class="ak-pagemargins" width="30"> </td>
<td valign="top" style="background-color: #e7ebed;"> </td>
<td style="background-color: #e7ebed; width: 30px;" class="ak-pagemargins" width="30"> </td>
</tr>
</tbody>
</table>
</td><td width="5%" style="min-width: 5px; font-size: 0px;"> </td></tr></tbody></table>
<br>
</body>
</html>
Text Template (blank)
Unsubscribe Text
{% include "unsubscribe.txt" %}
Unsubscribe HTML
<a href="{{ unsub_page_url }}">You can unsubscribe from this mailing list at any time.</a>