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 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 760px tall If the "header text" field, video or rotator is used, the recommended image size is 2,732px wide by 1,220px tall.

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

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 and works with the slide link/url.

Images should be 2,732px wide by 1,220px tall.  

NOTE - There is a "Slide Overlay" checkbox that will allow you to assign the dark overlay option to specific rotator slides.