Trigger a response from your users
Use CTA sections to encourage your users to click through your emails. The template includes the following call to action sections:
- With AppStore Buttons
- With Background Image
Basic and With Background Image include these layout variations:
- Button & Content Centered
- Button Left / Content Right
- Button Right / Content Left
The Basic call to action section only includes a left/right/center aligned button and content, inside a full width column. You can adjust the background gradient with inline CSS + VML code, and the fallback color with the
bgcolor="" attribute on the parent row table.
With AppStore Buttons
This one uses image buttons instead of text, so you can ask your subscribers to download your app. The product comes with icons for App Store, Google Play, and Amazon included.
With Background Image
Similar to the Basic one, but with an image background. Coded with background image support for Outlook and Windows 10 Mail, too.
Text and buttons can be customised with inline CSS. Checkout the button component in our email framework.
For the image buttons, simply replace the images with your own. Make sure to use retina images like we did, so that they look sharp on mobile.
Change all instances of the dummy image with a URL to your hosted image. There are 2 places you need to do this in: the
background-image inline CSS, and the
src="" of the
<v:image /> element, for Outlook 2007 - 2016.
The AppStore CTA sections use a CSS/VML background gradient image. Simply edit the colours in the inline CSS and in the
color="" attributes from the
<v:fill /> VML tag.
Top & Bottom Spacing
line-height: value on the
<div class="spacer line-height-sm-0 py-sm-24" style="line-height: 32px;">‌</div>
py-sm-24 class sets the spacer to be 48px high on mobile. You can change it to one of the other mobile spacing classes in Acorn. Learn more about spacers in Acorn.
Limitations & Other Notes
MailChimp's editor doesn't update the VML code that Outlook uses to show background images. You need to do this manually by editing the template code, as they don't provide any way of doing it with their online builder.
Currently, no online email builder supports point-and-click changing of CSS gradients. As a result, you will need to do this in code.
For most email clients, simply change the two HEX values in
background: linear-gradient(to right, #6A3093, #A044FF);"
For Outlook, you need to change the two
color="" attributes, and keep in mind that the direction is reversed as compared to the CSS one:
<v:fill type="gradient" color="#A044FF" color2="#6A3093" angle="90" />
StampReady currently removes
color2="" from the VML. Until they fix it, you need to add it back manually after exporting.