College Hero

For use in the College Home template and the College Hero container.

The full-width College Hero uses one image to tell a powerful visual story. This hero image includes a place for distinct college messaging and space for six links to related pages.

College Hero screenshot

Visual demo

Widget standards

A layout is needed for this widget.

Do:

Use a hero image with the following dimensions: 1800x540 - Ratio: 10:3.
Use a mobile image with the following dimensions: 420x560 - Ratio: 3:4.

Do NOT:

Use a College Hero widget on pages that do not have a layout for it.

Adding video or rotating images

Did you know you can add a video or rotating images to the college hero widget? Read the instructions here.

Written instructions

1. Open the page you'll be editing.

2. Find the College Hero Widget and drag it over into the College Hero container at the top of the page.

Screenshot of: Find the College Hero Widget and drag it over into the College Hero container at the top of the page.

3. Click "Edit" on the College Hero Widget.

Screenshot of: Click

4. Make sure Template is set to "Card."

Screenshot of: Make sure Template is set to

5. Add the name of your college in the Heading field.

Screenshot of: Add the name of your college in the Heading field.

6. In the Description field, include a brief statement of selling points for the college (unique opportunities, rankings, successes, etc.). Recommend max 300 characters.

Screenshot of: In the Description field, include a brief statement of selling points for the college (unique opportunities, rankings, successes, etc.). Recommend max 300 characters.

7. Click on select image to add the hero image. Images must be 1800 x 540 pixels. You'll select your image from the folders in the DAM.

Screenshot of: Click on select image to add the hero image. Images must be 1800 x 540 pixels. You'll select your image from the folders in the DAM.

8. Click on select image to add the mobile featured image. Mobile images are 420 x 560 pixels. You'll select your image from the folders in the DAM.

Screenshot of: Click on select image to add the mobile featured image. Mobile images are 420 x 560 pixels. You'll select your image from the folders in the DAM.

9. Enter your Call To Action link text in the Link One Text field. Recommended max 30 characters.

Screenshot of: Enter your Call To Action link text in the Link One Text field. Recommended max 30 characters.

10. If using a CMU-affiliated link, select Same Window. If using an outside-CMU link, select New Window.

Screenshot of: If using a CMU-affiliated link, select Same Window.
If using an outside-CMU link, select New Window.

11. Enter your link text for ADA compliance to the "Link One ADA Title" field.

Screenshot of: Enter your link text for ADA compliance to the

12. Select or add your link address. Page within the site, will take you to the page tree for selection. In the External URL field, include full URL of link outside of cmich.edu.

Screenshot of: Select or add your link address.
Page within the site, will take you to the page tree for selection.
In the External URL field, include full URL of link outside of cmich.edu.

13. Click "Save."

Screenshot of: Click

Save and send

If you'd like to continue working on this page, but need to save your progress, click Save as Draft.
If you're finished making changes to the page, and the page is ready for review, click Send for Approval.

Screen capture of the buttons for Send for Approval and Save as Draft in Sitefinity

Table of Contents