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.
  • Header Large Height - displays the billboard/header area at the larger screen height.
  • 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 808px tall and 2,732px wide by 1,390px tall if you use the large height 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.

Countdown

NOTE: THIS IS USED ON THE HOMEPAGE

The monklet "Billboard Monklet - Event Countdown" place in the "Header Text" field displays a countdown timer tied to the most recent event from the "Live Event" category.  You can use the find_category inline parameter to display from a specific category.

By default the event website is used for the watch live link, the event title for the button text during the countdown and the summary text for the button text when live.

Settings > Link Lists > "Countdown"

You can override the event text and url options with this link list. This list should only have a single link entry.  The url is used for the watch live link, the description for the timer text and the button text is used with the link for when the event is live.