Because all good things must come to a great end
The template comes with several footers, designed for a wide varitey of use cases. They all include common things like a logo, address, social icons, and, of course, legal text/unsubscribe links.
Footers also use a Divider component from Acorn, which you can customise just like a spacer.
Logo and social icons come first, separated with a divider from the legal text.
Logo and address or legal text come first, followed by the social icons and copyright text.
A balanced, centered mix of the first two footers.
Add more text to your footer, and also provide a call to action button.
Short, centered, straight to the point.
With AppStore Buttons
This variation includes App Store buttons, if you need to remind subscribers to download your mobile apps.
Footer 6 Logo Left/Right
A two column version of Footer 5, with the logo to the left or right.
Links & Text
Links and text styles can be changed via inline CSS.
Talking about links, Unsubscribe in the ESP-integrated versions uses the platform's special unsub link code, so you're covered out of the box. However, if you're using StampReady to build a layout for some other platform, remember to add your provider's code as the URL.
Logo & Images
Simply change the
width="". For retina images, keep the
width="" defined by the template, and use an image that is double the width and height of the placeholder image.
Change the HEX colour inside
bgcolor="" on the
<td class="px-sm-16" align="center" bgcolor="#EEEEEE"> <table class="container" cellpadding="0" cellspacing="0" role="presentation" width="600"> <tr> <td class="px-sm-8" align="left" bgcolor="#232323" style="padding: 0 24px;"> ... </td> </tr> </table> </td>
Footers use #EEEEEE for the 'outside' colour (basically, the email body), and #232323 or #FFFFFF for the inside of a section. When using the integrated versions, such as MailChimp or StampReady, you need not worry about this: controls for changing them are provided through their UI.
Top & Bottom Spacing
line-height: value on the
<div class="spacer line-height-sm-0 py-sm-8" style="line-height: 24px;">‌</div>
For spacing on mobile, we generally use the
py-sm-8 class, that sets the spacer to be 16px high. You can change it to one of the other mobile spacing classes in Acorn. Learn more about spacers in Acorn.