Hero image widget

About



Want to put a large, powerful image at the top of your page? The hero image widget is perfect for grabbing the audience's attention and expressing your organizational brand with a strong visual that represents your site.

Design


 

There are two modes of display for this widget. The examples below show a variation of simple view and advanced mode.

Simple View


 

Hero image headline

This is the hero image text.

Button

 

Advanced mode


Hero image headline

This is the hero image text.

Button

How to


Drag the hero image widget from the right column onto the page.

Dragging hero image widget to content area

 

Choose Edit to select an image for both desktop and mobile view from your image library. The desktop image will default to mobile if there is no mobile image selected. 

You can also choose to keep the image stationary when scrolling.

Hero Image Settings

 


 

Simple View

Use the default settings, known as "Simple View" below to add a title, a subhead or button on top of your image. You will also have the option to change the height and positioning of your image. Save your settings. 

Additional hero image settings in simple view

 


 

Advanced Mode  Hero Advanced Mode On

If you need more flexibility around the text color and positioning, as well as background color, turn on the "Advanced Mode". Use WYSIWIG editors to customized title and subhead.

Hero Title in WYSIWYG Editor
Hero Subhead in WYSIWYG Editor

Select the text and background color.

Hero image - select text and background text

Select the position of the text.

Hero image - select text positioning

Change the height (desktop and mobile) and positioning of your image.

Hero image - Desktop and mobile height settings

If needed, add a button label and link. Save your settings. 

Hero image - Button attributes



Additional Information


Heading option

This is widget gives you the option to have an H1 header overlaying your hero widget, rather than having it in the body of your webpage. One H1 is needed on every page for SEO. To make the hero title an H1, simply check the box when editing the widget!

Tips   

- This widget should be used just below the top navigation, at full-width, spanning across the entire width of the page.

- Images with landscape orientation will work best for the stationary scrolling option.