How to edit the

Hero

Soybean field

IANR Media

Written by: Keith McGuffey | IANR Media

The Hero is the area at the top of your page which displays the page title and breadcrumbs. By default, this area has a grey background with breadcrumbs under the navigation bar and displays the title as a heading. We can add images and more descriptive text using the 'Hero' feature in our 'Edit' options.

To edit the Hero region:

Go to the page and click the 'Edit' tab. Scroll to the bottom and click 'Hero'.

Location of Edit button
Find the Edit button.
Location of Hero button
Scroll to the bottom and click 'Hero'.

Select the Hero size.

It is recommended that you use the dcf-hero-md Hero size on main menu pages and the smaller dcf-her-sm Hero size on sub menu pages.

Add a Hero title and optional subheads.

If you do not specify a title in the Hero, the page title will be used.

Upload a Hero image and include a description of the image in the 'Alternative text' field.

The Alternative text increases accessibility for your site. The recommended image size is 1600 x 900 pixels for the large hero and 1800 x 600 pixels for the medium hero, when minimal cropping is needed.

Add an optional photo credit.

The photo credit runs down the right side of the Hero.

Location of Edit button
Fill out the fields and include a photo.

If applicable, remove any old Hero code in the HTML editor and uncheck 'Hide page title' in the Publishing Options.

Click 'Save'.

That's all! The Hero should display at the top of your page. In the example, we used the field names to show how each field displays. The Hero includes breadcrumbs, so be sure your page is correctly placed in your page under the 'Site hierarchy' in the Edit options.

Location of Edit button
Our Hero!

Pro Tip: Crop the image so that the main focus is within the center third of the image. Here's an example of a staff photo that was used as a Hero.


Was this page helpful? *