Featured Header(Video & Image)

January 29, 2019

Featured Image Header Example – Image Background Example – Video Background Example

Requirements

  • This component is available only on the Home Page and Landing Page Templates within the Faculty and Department theme.
  • UBCO ACF Component Restrictions plugin is deactivated.

Recommended Usage

A Featured Header Image or Video is a large banner image or video generally placed on the start of a web page that depicts an overview of the page’s content.

Component Fields:
Featured Header has a Header Type field to specify whether it’s an image or video. Image Header has Image Background and Mobile Image Background fields. Video Header type has a field to select the video background. Common fields include Overlay Bottom Gradient, Title, Message, Button Link and Show Down Arrow Overlay.

Recommended Hero Image dimensions are 1920×780 px.  Recommended Specs for the looping video header is an MP4 file, 720p, no audio channel. Keep file size as low as visually acceptable (6mb max) to ensure that the webpage loads quickly on all web browsers.

Interactivity:
Featured Headers can have a black or blue overlay bottom gradient that will help emphasize the Title, Message and the button. If set to display the Down Arrow, a bouncing down arrow icon will be placed on the bottom centre of the featured header. If the button link is specified, it will have a background colour change on mouse hover.

Mobile/Tablet:
On mobile devices, the Image Header will display the specified mobile version of the featured image which is a square.

How to add a Featured Header

  1. Featured Header is only available on the Home page and Landing Page templates
  2. Under Featured Header, select the type of header you would like to use, Image or Video background
  3. If Image Background, specify the Image Background and the Mobile Image Background.
  4. Choose the Overlay Bottom Gradient
  5. Add your Title, Message and the Button Link.
  6. Show or Hide the Down Arrow Overlay.
  7. Click Preview to test and make edits as necessary.
  8. Publish/Update when ready to go live.

Featured Header: Image Background

Featured Header: Video Background

Do’s and Don’ts

  • BE CONCISE.
  • Avoid having too many frames for the video header.
  • Select images in a way, the title or message doesn’t go over the faces of people in the image.
  • Images should be optimized for the web.
  • Keep the video file size as low as visually acceptable (6mb max) to ensure that the webpage loads quickly on all web browsers.

Posted in , ,