Header Background
Overview
For the header area, you have three options available: static image, muted/looping background video or image rotator.
These four additional fields in the pages module are available for use in the header area:
- Header Overlay - will add a customized screen/overlay effect to the header image. This is helpful if you're displaying text overtop of the image and will screen to the blue color.
- Header Tagline - will add an optional sub heading below the page title
- Header Text - can be used to add text over top of a header image or background video. This field works the same as the content editor, so you can add header text, links, buttons, etc.
- Hide Page Title - will remove the page title/description
Static Image
The page "Header Image" field populates the header background image. If a header video is present, this image will be the preview image while the video is loading and also serves as the fallback for devices that do not support video.
Images should be 2,732px wide by 864px tall and 2,732px wide by 1,152px tall if you use the rotator option. The height may need to vary depending on how much content you enter into the header text field.
If the page "Header Overlay" field is checked, the header area will display the site dark overlay option.
Background Video
Using the field "Header Background Video (mp4/h264)" will replace the background image with a background video. The video must be MP4/H264 formatted video and should have a ratio of 16:9.
If a header video is loaded in, the "header image" field will show as the preview image while the video is loading and also serves as the fallback for devices that do not support video.
NOTE - This is a looping/muted background video so the video should be kept short in size/length (under 30 seconds).
Rotator
Media > Rotators
If a rotator is assigned to a page, the images will display as slides. The title, caption and button/link are optional and will display as an overlay. The button uses the Button Text field and works with the slide link/url.
NOTE - There is a "Slide Overlay" checkbox that will allow you to assign the dark overlay option to specific rotator slides.