...
- Use as the first block on a page, to display the H1/page title and catch the users attention with a large photo, video, or background pattern.
- The hero layout is typically determined by the page's level in the hierarchy
- Primary, top-level pages → jumbotron
- e.g. program landing pages like FTMBA page
- Secondary, subpages or other important pages → 50/50
- e.g. program career, major, or curriculum pages like Accounting Major page
- Tertiary or informational pages (or pages that don't have good photo options) → pattern
- e.g. contact, tuition, or webinar/podcast pages , like PMBA Tuition page
- The limited-use layouts are used on a case-by-case basis.
- Primary, top-level pages → jumbotron
...
- Microtitle (optional - use sparingly)
- add a tagline or a secondary title above the H1
- example: AI Hub for Business
- Supporting copy (optional)
- Character limit: 150 characters max (copy should fit on two lines for desktop)
Randomized photos with captions
- An image caption is displayed in the lower righthand corner for each image.
- Character limit: ~100 characters for each caption
Animated (slideshow)
A photo spans the full page width and a phrase animates on top of it. Additional photos and phrases can be added to create a slideshow effect.
...
- Need a video file for desktop and a separate, smaller video file for mobile.
- The mobile version should be the same video clip, just compressed so it is a smaller file that is more likely to load on mobile.
- FIle type: mp4
- Length can vary; recommend no longer than 1 minute to keep user attention
- Desktop
- File size: 15MB max
- Dimensions: 1920x1080px
- Mobile
- File size: 10MB max
- Dimensions: 1280x720px
Implementation
- Use when using a with the Hero - News block to hide breadcrumbs from the Newsroom page. (
- Add this block and choose "Hide breadcrumbs"; then add the Hero - News block below
- See Additional Notes at the bottom for a special use case.
ACF Fields
Choose a layout:
...
- Poster Image - 2400x1600, aspect ration 16:9
- Preview video is muted.
- You need a video file for desktop and a separate, smaller video file for mobile
- Full video is an overlay, and you need one video for desktop and a separate video for mobile
- You can escape the overlay by: clicking the X button, scrolling, clicking outside of the video, or using the ESC key
- Can add a vtt file for close closed captions
- Can add copy for the play full video button or leave it empty and the button will automatically read "Play full video"
...