Scrollable Hero component

The Scrollable Hero component provides a quick and easy method to showcase multiple ongoing news or announcements within the department or program. The component consists of two parts. The left portion, with a solid color background, housed the Title, Description, and a Button. The right portion is the Image. This component requires at least TWO sets of content (Title and Image) to work. By default, the component requires viewers' interaction to move between heroes. Users can switch between manual scroll (default) and auto-scroll. Read more about this in the Configure Component section.

To load the component

To load Scrollable Hero component onto the page:

  1. Open Side Panel if closed, and then click on Components tab
  2. Drag and drop the Scrollable Hero component.

To configure component

  1. Click on the component to display the edit bar.
  2. Click on the Configure icon (wrench) to display the Configure Panel.
  3. Add a hero item by clicking the + icon. This will display option to author hero item fields.  (Fig. 1)
  1. Drag and drop image from the Side Panel > Assets tab. (Fig. 2)
  2. Populate necessary fields. 

Note: For the URL field, please make sure you use the Path Picker to select the internal page you want to link to. The Path Picker will allow the system to save the link reference information at the back end and can automatically update the page URL when the linked page is moved to other location.

  1. To add more hero items, repeat step 3 - 5. (Fig 3)
  2. To remove hero item, click on "-" icon beside the corresponding hero item.
  3. To enable the auto-scroll feature, toggle Enable auto-scroll from OFF to ON.
    Note: Auto-scroll feature will advance hero after a pre-set wait time. Viewer's interaction is not required. However, if the viewer would like to manually advance to the next hero, he/she can click on the navigation bullets at the lower left corner of the component.
  4. Click Done icon (check mark)

 

Troubleshooting

Where can I find out about recommended image size?
To find out more about the best image size for the Hero component, please consult the Recommended Image Size page.

The component is missing the navigation arrow in the middle and it is missing the auto-scroll navigation bullets.
This is probably due to the incomplete cached component on the page. To fix this issue, follow these steps:

  1. Open the Component Config Panel, and toggle the Enable auto-scroll from OFF to ON. This will refresh the component and switch on the auto-scroll feature. Click Done (checkmark) to exit the Config Panel.
    • If you would like to keep the auto-scroll feature in place,  you can simply publish the page now and skip the steps below.
  2. If you would like to switch to the manual-scroll feature, open the Component Config Panel again, and toggle the Enable auto-scroll from ON to OFF.
  3. Publish the page.