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?
Hero
Visual demo
Widget guidelines
Do:
- Find an 1800x540 px image that captures the page.
Do NOT:
- Use the same image again on the page.
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.
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 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. A photo is still required for your Hero Video. On mobile devices, images display instead of videos.
10. Click Select images from library.
11. Select your 1800 x 540 px image(s) and click Use selected when finished.
12. To include a video, click the + under Video (for desktop and tablet).
13. Click Select a video from library.
14. All Hero videos must be under 2 MB, an aspect ratio of 16:9, and have a maximum length of 10 seconds.
15. Click Use selected.
16. Optional: Click the + to add a featured link. This link will be displayed more prominently than the quick links in your Hero widget.
17. After clicking the +, enter the link you want to feature or select the internal page or content to link.
18. In the “Text to display” field, enter the text you want shown for the featured link.
19. 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.
20. Click Insert link.
21. Enter text in the “Featured Link ADA Title” field.
22. Click the + to add your first quick link: Link #1.
23. Enter the URL you want to link or select the internal page or content.
24. In the “Text to display” field, enter the text you want shown for the quick link.
25. 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.
26. Click Insert link.
27. Enter text in the “Link #1 ADA Title” field.
Tip: Repeat the steps to add one to five more quick links.
28. Click Save.
