|
|
# E-Mail Laouts
|
|
|
|
|
|
## Standard Design
|
|
|
|
|
|
Wie schon erwähnt wurde, besitzt das E-Mail System ein eigenes Template Engine Objekt. Jede E-Mail besteht aus 3 Dateien, die (überschrieben werden können)(dev/email#e-mail-template-für-ein-projekt-setzen):
|
|
|
1. `header.html`
|
|
|
2. `body.html`
|
|
|
3. `footer.html`
|
|
|
|
|
|
Die E-Mail Template basiert auf einem (Open Source Projekt Salted)[https://github.com/rodriguezcommaj/salted]. Ohne Anpassungen sieht die E-Mail mit 2 Absäten so aus (das Logo ist das eingestellte Projekt-Logo):
|
|
|
|
|
|
![screencapture-webmail-pcsg-de-2018-12-10-23_34_31](uploads/3764cacc09ccb1358b1419805fd20526/screencapture-webmail-pcsg-de-2018-12-10-23_34_31.png)
|
|
|
|
|
|
Die Social Icons und der Text im Footer lassen sich leicht über die Sprachvariablen ändern:
|
|
|
1. `templates.mail.body.header.social`
|
|
|
2. `templates.mail.body.footer.text`
|
|
|
3. `templates.mail.body.footer.social`
|
|
|
|
|
|
**Achtugn!** Bitte für die Social Icons keine FontAwesome benutzen!
|
|
|
|
|
|
## Weitere Layouts
|
|
|
|
|
|
Möchte man die E-Mails für z.B. Newsletter schöner machen, kann man die `body.html` überschreiben und mit weiterem Code erweitern:
|
|
|
|
|
|
|
|
|
```html
|
|
|
<!-- ONE COLUMN SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- HERO IMAGE -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td class="padding-copy">
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/responsive-email.jpg" width="500" height="200" border="0" alt="Can an email really be responsive?" style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 500px; height: 200px;" class="img-max"></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 30px;" class="padding-copy">Yes. Email can be responsive, too.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Using fluid structures, fluid images, and media queries, we can make email (nearly) as responsive as modern websites.</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn How →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
<!-- ONE COLUMN W/ BOTTOM IMAGE SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 0 15px;" class="section-padding-bottom-image">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;" class="padding-copy">Mobile opens are at 48%</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 20px 0 0 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">With an increasingly mobile audience, can you really afford to keep sending emails designed for desktop?</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #48CFAD; border-top: 15px solid #48CFAD; border-bottom: 15px solid #48CFAD; border-left: 25px solid #48CFAD; border-right: 25px solid #48CFAD; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Hell No →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- BOTTOM IMAGE -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td style="padding: 50px 0 0 0;" align="center">
|
|
|
<a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/line-graph.jpg" width="500" height="180" border="0" alt="Mobile opens are on the rise" class="img-max" style="display: block; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #666666; width: 500px; height: 180px;"></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
<!-- TWO COLUMN SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TITLE SECTION AND COPY -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<td align="center" style="font-size: 25px; font-family: Helvetica, Arial, sans-serif; color: #333333;" class="padding-copy">How does it work?</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 20px 0 20px 0; font-size: 16px; line-height: 25px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Responsive email works on the same principles as RWD:</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TWO COLUMNS -->
|
|
|
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 0;" class="mobile-wrapper">
|
|
|
<!-- LEFT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Fluid Images</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody"><span style="font-family:Lucida Console, monospace;">max-width:100%</span> is your friend, just like on the web.</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- RIGHT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/fluid-structure.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid structures" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Fluid Structure</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody">You can use percentage-based tables, too. Don’t touch <em>ems</em>, though.</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<!-- TWO COLUMNS -->
|
|
|
<table cellspacing="0" cellpadding="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 0;" class="mobile-wrapper">
|
|
|
<!-- LEFT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/media-queries.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Media queries" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Media Queries</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody">They don’t work everywhere, but when they do…</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!-- RIGHT COLUMN -->
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="47%" align="right" class="responsive-table">
|
|
|
<tr>
|
|
|
<td style="padding: 20px 0 40px 0;">
|
|
|
<table cellpadding="0" cellspacing="0" border="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="center" bgcolor="#ffffff" valign="middle"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank"><img src="img/bulletproof-buttons.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Bulletproof buttons" border="0" class="img-max"></a></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;" bgcolor="#ffffff">Bulletproof Buttons</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;" bgcolor="#ffffff"><span class="appleBody">Don’t use images for buttons. There’s a better way.</span></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
|
|
|
|
|
|
<!-- COMPACT ARTICLE SECTION -->
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
|
<tr>
|
|
|
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 70px 15px;" class="section-padding">
|
|
|
<table border="0" cellpadding="0" cellspacing="0" width="500" style="padding:0 0 20px 0;" class="responsive-table">
|
|
|
<!-- TITLE -->
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 10px 130px; font-size: 25px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy" colspan="2">Resources for learning more</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="https://litmus.com/community" target="_blank"><img src="img/litmus-logo.jpg" alt="Litmus" width="105" height="105" border="0" style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a></td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;" class="padding-meta">Litmus Community</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy">A growing community for email professionals</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Share knowledge, ask code questions, and learn from a growing library of articles on all things email.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="https://litmus.com/community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #F6BB42; border-top: 10px solid #F6BB42; border-bottom: 10px solid #F6BB42; border-left: 20px solid #F6BB42; border-right: 20px solid #F6BB42; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="http://templates.mailchimp.com" target="_blank"><img src="img/mailchimp-logo.jpg" alt="Freddie!" width="105" height="105" border="0" style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a></td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;" class="padding-meta">MailChimp Template Reference</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy">A stunning introduction to email design and coding</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">MailChimp’s Fabio Carneiro unleashes an amazing resource for learning more about all aspects of email design.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://templates.mailchimp.com" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 10px solid #5D9CEC; border-bottom: 10px solid #5D9CEC; border-left: 20px solid #5D9CEC; border-right: 20px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td valign="top" style="padding: 40px 0 0 0;" class="mobile-hide"><a href="http://www.campaignmonitor.com/resources/" target="_blank"><img src="img/campaign-monitor-logo.jpg" alt="Campaign Monitor" width="105" height="105" border="0" style="display: block; font-family: Arial; color: #666666; font-size: 14px; width: 105px; height: 105px;"></a></td>
|
|
|
<td style="padding: 40px 0 0 0;" class="no-padding">
|
|
|
<!-- ARTICLE -->
|
|
|
<table border="0" cellspacing="0" cellpadding="0" width="100%">
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 13px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #aaaaaa;" class="padding-meta">Campaign Monitor Guides</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 0 0 5px 25px; font-size: 22px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #333333;" class="padding-copy">A fantastic library of information</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td align="left" style="padding: 10px 0 15px 25px; font-size: 16px; line-height: 24px; font-family: Helvetica, Arial, sans-serif; color: #666666;" class="padding-copy">Campaign Monitor puts out some amazing resources. These guides, as well as their Ultimate Guide to CSS, are constant companions.</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td style="padding:0 0 45px 25px;" align="left" class="padding">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center">
|
|
|
<!-- BULLETPROOF BUTTON -->
|
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
|
|
|
<tr>
|
|
|
<td align="center" style="padding: 0;" class="padding-copy">
|
|
|
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
|
|
|
<tr>
|
|
|
<td align="center"><a href="http://www.campaignmonitor.com/resources/" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #4FC1E9; border-top: 10px solid #4FC1E9; border-bottom: 10px solid #4FC1E9; border-left: 20px solid #4FC1E9; border-right: 20px solid #4FC1E9; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More →</a></td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
```
|
|
|
|
|
|
![screencapture-webmail-pcsg-de-2018-12-10-23_33_20](uploads/deaa0a5568a767d182fc1bbb527280d8/screencapture-webmail-pcsg-de-2018-12-10-23_33_20.png) |
|
|
\ No newline at end of file |