| Datadef element | Presence | Description |
|---|
| ... > Jumbotron/Videotron > Aspect ratio | - Page header
- Page heading
- Page sections
| Used to set the aspect ratio of the jumbotron or videotron: - auto - the aspect ratio is set according to the dimensions of the content laid over the image or video.
- maximize - the jumbotron or videotron will be sized to occupy all available screen space in the browser window.
- 3:2 - common native aspect ratio for photos.
- 16:9 - common native aspect ratio for videos.
- custom - select this option to set a custom aspect ratio.
|
| ... > Jumbotron/Videotron > Custom aspect ratio (w:h) | - Page header
- Page heading
- Page sections
| Appears only if 'Aspect ratio' is set to 'custom'. Provide the aspect ratio in w:h format, with a colon separating the width value from the height value. |
| ... > Jumbotron > Background image | - Page header
- Page heading
- Page sections
| Applies only to jumbotrons. Identifies the image to be used as the header background. Tips: - Large images look best here (1600 to 2000 pixels wide), but be mindful of the balance between image quality and file size. Page load time can be affect by heavy images.
|
| ... > Videotron > Video | | Applies only to videotrons. Identifies the video to be used as the header background. Tips: - Videos in mp4 format offer the greatest browser compatibility.
- Large videos can significantly affect page load times. Be mindful of playback duration and resolution (720p is usually sufficient).
- Large videos can be optimized for the web with Handbrake.
|
| ... > Videotron > Still frame image | | Applies only to videotrons. Identifies the image to be displayed when the background video cannot be loaded or played. Tips: - Use the first frame of the background video as the still frame image.
- Ensure the image dimensions match the video dimensions.
|
| ... > Videotron > Loop video | | Indicates whether the video will loop playback. |
| ... > Jumbotron/Videotron > Content alignment | | Aligns the additional header content to either left or center. |
| ... > Jumbotron/Videotron > Overlay value | - Page heading
- Page sections
| Indicates the color value of the jumbotron/videotron overlay: - dark - applies a dark overlay with light text.
- medium - applies a medium overlay with light text. A slight drop shadow is also applied to the text to enhance readability and color contrast.
- light - applies a light overlay with dark text.
|
| ... > Jumbotron/Videotron > Additional content | | Provide any additional content here to be displayed in the page header below the masthead. Accessibility note: do not insert headings here when working with page headers. You can achieve the look of headings using the provided wysiwyg styles. Refer to 'Styling wysiwyg content'. |
| ... > Jumbotron/Videotron > Width | - Page heading
- Page sections
| Indicates the width of the heading background image or video. - container - the background image or video with is constrained to the page container width, which varies depending on screen size:
- Large: 1170px
- Medium: 970px
- Small: 750px
- window - the background image or video width matches the width of the browser window.
Note: this option is not compatible with page layouts containing secondary navigation or sidebar elements.
|