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 dark overlay on the header image. This is helpful if you're displaying text overtop of the image. This is also available for the following modules: events, articles and blogs.
- Header Tagline - will add an optional description 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 934px tall. If the "header text" field is used for the page, the image size may need to increase in height and depend on how much content you place in that 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.
NOTE - This is a looping/muted background video so the video should be kept short in size/length (under 30 seconds).
Rotator
If a rotator is assigned to a page the images will display as slides. The title and caption or optional and will display as an overlay. The button uses the Button Text field.
Images should be 2,732px wide by 1,540px tall.
Note - There is a "Slide Overlay" checkbox that will allow you to assign the dark overlay option to specific rotator slides.