Hero example

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
Custom Title
Custom Subtitle

What is a Hero component?

The Hero component gives you the ability to create a block that is full width, with a call to action link, and a link to media. The Hero Banner is ideal for home pages. You are able to add multiple images and have a stationary text box. We recommend using a maximum of four images so the Hero component does not become too busy.

 

How to add a Hero component

  1. Click the edit link at the top of the page

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 
  3. Click the plus icon.
  4. Example of the plus icon with a red square around the icon
  5. Select Hero from the menu

    Choose a hero component

Content 

  1. Click on Add media in the Image Section if you are creating a Hero component with an image.
  2. Select the appropriate image or upload the image to the Image Library.
    Recommended Image Dimensions: Landscape 4:3 - Maximum image size is 4MB

    Add image
  3. Click on Add media in the Video section if you are creating a Hero component with a video.

    Add video
  4. Select the appropriate video or add the URL from Vimeo or YouTube.
  5. Add a Title.
  6. Add a Subtitle.
    Note: The subtitle may not appear in all configurations. The examples above display the best configurations.

    Title and subtitle
  7. Add an internal page or external link (optional).
  8. Add the Button text (optional).
     

Styles

  1. Toggle to the Styles tab. 

    Hero style options
  2. Select the appropriate Styles based on your desired layout. (See below for examples).
  3. Select one of the following Hero styles as applicable:
    • Banner if you added an image
    • Video if you added a video.

      Choose hero styles
  4. Select the amount of additional space you would like above the component. 
  5. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

Save

  1. Click Save.
  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.
  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined

Style Options

Example of a Hero Default 

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
Custom Title

Example of a Hero Banner 

EDI conference break in Geffen Hall, participants walking up the stairs of the courtyard
Custom Title
Custom Subtitle

Example of a Video Hero  

Custom Title