Hero Sections

Hero Sections

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:

  • Hero
  • Split Hero

Hero

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.

Example

Hero regular

Split Hero

The Split Hero separates text and images into two columns.
It comes in several types:

  • with content left/right
  • with content left/right overlayed
It also has Outlook background image support, but only for the main, full width image. The Split Heros with a semi-transparent overlay only have a colour fallback, which you can control with the bgcolor="" attribute.

Example

Hero split

Customisation

You can easily change the looks of a Hero by changing its background, text, spacing, and buttons/images.

  • Background colour — change the HEX colour inside the bgcolor="" on the wrapping row table
  • Background image — change the image path in the background="" attribute, as well as in the src="" of the v:fill element, for Outlook 2007 - 2017.
  • Buttons/Links — see the Button component framework docs
    • Note: some Hero sections use a linked image button, which has a hover-xyz class that animates it in some email clients. Make sure to keep that in your CSS, if using such buttons.
  • Top/bottom inner spacing — change the value in the height="" attribute, as well as the font-size and line-height CSS values, on the spacer <td>
Note: Split Heros with Overlayed content have a hero-split-play class on the column with the background image. This allows for adding a semi-transparent background on it, for mobile. If using such a Hero section, make sure you don't foget to include that class.

Outlook Background Image Notes

Image Sizes

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.

Content Height

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.

In Chrome:

  • right-click the section, then click Inspect.
  • the exact element that was clicked will be highlighted in the code from the window that pops up. For example, this is what you might see when inspecting the HERO 2 section:



  • we're interested in the cell with our background image. It's easy to spot: it's the one with the background="" attribute, and the first thing inside it is the Outlook VML code (green text in example)
  • place your mouse over it, and Chrome will highlight the section on-page, showing you a tooltip with the dimensions of that element. In our example, you can see it's 700px wide by 500px high:



  • finally, we just need to update the height of the v:rect element in our code, to match the height the inspector reported above:

Again, only do these steps if your content has increased the height of a section. Also, do not change any other layout-related attributes in the VML code, such as the width - it will break the template in Outlook.