Header Background

Overview

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.

If the Header Text wysiwyg field is used it will display as an overlay and replaces the header title and optional page description heading.

If the "Hide Page Title" is checked the page title/description will not display on the page.

Page Header Image: 2,732px wide by 1,320px tall.  If you select the "Header Full Height" option images should be  2,732px wide by 1,720px tall.

Header Full Height:  When this page field is checked the page will display the header at full screen height.

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.

Scrolling Button

The class "scrollto" can be added to a button/link on the page/header text to move the user to a specific anchor on the page.  The scrollto class must have the anchor id added to the link in order to scroll. eg <p style="text-align: center;"><a class="btn btn-default btn-lg scrollto" href="#csec-home-locations">Times &amp; Locations</a></p>

You may have to look at the page source code to get the id of any given area on a page.