A Hero is a large callout at the top of your site's homepage that can be used to draw a visitor's eyes to critical elements on your site. The word "Hero" originates from the hero-unit, originally developed by Twitter Bootstrap, a web design framework.


The Hero Banner displays your logo, tagline, and optionally, multiple buttons with calls-to-action to access specific parts of your site. 


Here is an example of a Hero Banner:




Adding a Hero Banner to your site:


To add a Hero Banner to your site, click on the pen icon in your site's header and change your logo size to either Normal or Large. You'll see a dropdown appear called "Additional Homepage Settings". Underneath, you can customize the following:

  • Logo: Showing your site's logo is strongly recommended.
  • Background: A large, high quality background is recommended. For photos, the action should be in the middle of the image.
  • Tag and Subtitle: Text that will display under your logo.
  • Buttons: Display up to four links to various content areas on your site in order to direct visitors to your most important content.

Examples
For inspiration when customizing your Hero Banner, take a look at some of our partners that use the hero layout:

The Hero Grid displays five tiles with a background image (or video) and a link to either a post, page, event, or product. 


Here is an example of a Hero Grid:




Adding a Hero Grid to your site:


To add a Hero Grid, click on 'Page Setup' on the front page and then click on 'Show Content Grid (Hero Grid)'.  Always make sure to select an image file for the background of the tile for aesthetic purposes. 


Note that images will need to have an 83:100 aspect ratio to appear without clipping on the Hero Grid in desktop mode (and should fit inside a 55:100 aspect ratio box in order to appear without clipping on mobile). 


Examples

For inspiration when customizing your Hero Grid, take a look at some of our partners that use the hero layout: