Large and bold, with bulletproof background images
A Hero section is a great way to draw attention to key information, an image or a product. Each of our templates come with several predesigned hero sections, separated into two types:
The 'regular' Hero section has a full width background image, overlayed with centered content.
It has background image support for most email clients (Outlook included), and includes a background colour fallback for cases when the image might not be loaded. See more in Customisation.
The Split Hero separates text and images into two columns.
It comes in several types:
You can easily change the looks of a Hero by changing its background, text, spacing, and buttons/images.
For sections that support background images, it is recommended that you use a background image that has dimensions as close as possible to the dummy image the template provides. This will ensure that background images in Outlook will look just like in Gmail or Apple Mail.
It is very important that, if you want to use larger images, you preserve the aspect ratio of the dummy image the template provides. Failure to do so will result in skewed background images in Outlook 2007-2017.
Template sections are designed so that if you add more text (thus increasing the section's height), you will not run into issues.
However, because Outlook background image support needs to rely on Microsoft's Word rendering engine (that has very poor HTML support), there are a few caveats regarding this.
If you add content that increases the height of a section and you don't update your VML-fallback image size, Outlook will show the fallback background colour of that cell or table.
If you do have such lengthy content and need to change the VML fill height, there's a simple way of finding out the exact new height of you section. You can check this height with your browser inspection tools, after you've added all your content in the hero.