Hero
The Hero widget uses photos or video to create a strong visual introduction. It provides space for key messaging that appears as soon as users land on the page.
What type of of hero are you looking to create?
Example of the Hero widget
Hero
Visual demo
Widget standards
No layout is needed for the Hero widget and you do NOT need to place the Hero widget in a section.
Do:
- Find an 1800x540 px image that captures the page.
Do NOT:
- Use the same image again on the page.
Hero written instructions
1. All Hero widgets are placed under the header. Under the header, click "Add Section".
2. Click Content.
3. Click Hero.
4. Click the Hero widget's green bar.
5. Click the pencil icon.
6. From the dropdown, click the Hero template you'd like to choose.
7. Fill in the "Heading" field.
8. Fill in the "Description" field.
9. Click the + to select one or more images for your Hero. If you select multiple images, they will rotate across different page visits.
10. Select your 1800 x 540 px image(s) and click Use selected when finished.
11. Optional: Click the + to add a featured link. This link will be displayed more prominently than the quick links in your Hero widget.
12. After clicking the +, enter the link you want to feature or select the internal page or content to link.
13. In the “Text to display” field, enter the text you want shown for the featured link.
14. Choose Yes or No to decide whether the link opens in a new window.
Yes: Use for external sites.
No: Use for internal pages within cmich.edu.
15. Click Insert link.
16. Enter text in the “Featured Link ADA Title” field.
17. Click the + to add your first quick link: Link #1.
18. Enter the URL you want to link or select the internal page or content.
19. In the “Text to display” field, enter the text you want shown for the quick link.
20. Choose Yes or No to decide whether the link opens in a new window.
Yes: Use for external sites.
No: Use for internal pages within cmich.edu.
21. Click Insert Link.
22. Enter text in the “Featured Link ADA Title” field.
Tip: Repeat the steps to add one to five more quick links.
23. Click Save.
Hero video
Visual demo
Widget guidelines
• Approved file types: .webm, .ogv, .wmv, .mp4
• Maximum file size: 2 MB
• Maximum duration: 10 seconds
• Aspect ratio: 16:9
All hero videos must be approved by Digital Strategy for duration, file size, aspect ratio, and brand alignment.
Written instructions
1. All Hero widgets are placed under the header. Under the header, click Add Section.
2. Click Content.
3. Click Hero.
4. Click the Hero widget's green bar.
5. Click the pencil icon.
6. From the dropdown, click the Hero template you'd like to choose.
7. Fill out the "Heading" field.
8. Enter text to the "Description" field.
9. To include a video, click the + under Video (for desktop and tablet).
10. Click Select a video from library.
11. All Hero videos must be under 2 MB, an aspect ratio of 16:9, and have a maximum length of 10 seconds.
12. Click Use selected.
13. Click the + to add your first quick link: Link #1.
14. Enter the URL you want to link or select the internal page or content.
15. In the “Text to display” field, enter the text you want shown for the quick link.
16. Choose Yes or No to decide whether the link opens in a new window.
Yes: Use for external sites.
No: Use for internal pages within cmich.edu.
17. Click Insert link.
18. Enter text in the “Link #1 ADA Title” field.
Tip: Repeat the steps to add one to five more quick links.
19. Click Save.
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.
