Hero Region

The hero region is the area at the top of your home page that has a large, featured image with the capability of including text and a link. The image is created as an image gallery asset, even if there is only one image in the space.

Hero Image Specifications

• Large Image Size: 1960 x 700 (for full-width options)
• Small Image Size: 960 x 380 (for inset option)

Use One Main Image

Unless you are using a slideshow on your home page strictly as a visual element, we discourage the use of clickable "carousels," where each image links to a story or other piece of content. Statistics show that carousels have very low conversion rates in general, and users don't click on anything past the first slide more than 80 percent of the time. 

So, your best bet if you are using the hero region as a promotional area would be to have one main image with text, and to update that area regularly to promote what is important at a given time.

If the hero is simply a visual element and does not link to anything, a slideshow is an acceptable alternative to a single static image. In either case, it's good practice to update your hero image gallery.

Note: In your index page properties, if you choose 'Shorter Height' when configuring the Hero Region options, the image depth will be trimmed by about 50 pixels at the top AND the bottom of the image. Be aware of that when selecting images for the Hero Region and deciding whether to use 'Shorter Height.'

Headline / Subhead Text

Be careful when choosing headline and subhead text for the hero region. It is best to write headlines to fill up the space in an appealing fashion.

Maximum title length:

• Your headline should be no longer than 4 lines for vertical layouts, 1 line for horizontal.
• Your subhead should be no longer than 2 lines for vertical layouts, 1 line for horizontal.

Try selecting different Hero Types in site configuration to see how your headline and subhead appear.

Hero Layouts

There are a few different design options for the hero, which allow for placement of text to be left justified, right justified, or centered. A few tips for choosing a hero layout type:

• Not all layout options allow for text positioning (only vertical layouts).
• Try selecting different Hero Types in site configuration (config.pcf) to see how your headline and subhead appear.

Examples:

 

See the Hero page for more details on the different hero types.