Header Background

The header area offers three display options:

  1. Rotator: rotating slide of images
  2. Header Image: a static fullwidth image
  3. Header Background Video: looping video

Click below for an overview of each option.

Rotator

Homepage Rotator

Navigate to Media > Rotators > click to edit the Home Rotator

Rotator Size and Details

  • Image Size: 1400px by 600px (for retina images you can use 2800px by 1200px)
  • Resolution: 72 px/inch
  • Format: .JPG or .PNG

For best results, correctly size your rotator images before uploading them into the Home Rotator.

Add Rotator to Any Page

A rotator is a series of images, usually between three and six, that rotate as a slideshow. You can either add a new rotator or edit the existing home rotator. To do this go to Media > Rotators > Add a New Rotator

If you are creating a new rotator, name your rotator and choose the transition time, which is the amount of time it will stay on each slide before switching to the next slide. You can then assign the new rotator to a page, or you can leave this empty and add it to a page later.

In the below image, the rotator that is being edited would be assigned to the Live Stream page.

Each step 1-7 correlates with 1-7 in the image below.

1. Enter in the first image or video you would like to appear on your rotator. Each slider requires a Image/Video and the image/video must be already uploaded to your Media Module.

2. If you have a page/event/sermon/etc. that this slide is about, you can select that page to autofill all the information in step three. This step is optional and you can instead just fill in the information manually in step three. 

3. Give each slide a title, caption, and link (if it's not already filled in from step two). A title is important and the caption is optional and will be shown on top of the photo.
The link is where the person will be taken if they click on the slide. Click "Open link in new window" if you want the user to be taken to a new window when they click on the slide.

4. If you'd like a button that connects to the Link in step three, put the text you'd like the button to have here.

5. This will add the overlay color to the image.

6. If you publish the slide it will immediately be shown on any page that implements this rotator. You can also choose to publish slides at a later date by filling in "Schedule a publish status change". This option is useful if you are currently using the rotator, but do not want a certain slide to show up until a later date.

7. Save your slide! Follow steps 1-6 for all additional slides you would like to add to your rotator.

If you wish to add the rotator to a page that you did not add in the beginning then click to that page and add the rotator in the field "Rotator".

Note: If there is a header image in use on a page, it will not display if a rotator is assigned.

Header Image

Static Header Image

Navigate to Content > Pages > click to edit the Index page > "Header Image" field

The Header Image for the home page offers the ability to display a single static fullwidth image. You have two header image size options for pages. The default header image size and the "Header Large" option. To use the large option, you will need to check the "Header Large" box.

  • Page Header Image Dimensions: 1400px by 340px (for retina images you can use 2800px by 680px)
  • Page Header Large Image Dimensions: 1400px by 980px (for retina images you can use 2800px by 1960px).  This option will show the image at a full height minimum and will grow if the header text/content are larger than the screen height.  This option displays the header image/video at the min height setting.  The rotator slides will display at a static higher pixel setting.
  • Page Header Image Dimensions if using a background video: 1400px by 600px
  • Resolution: 72 px/inch - Save for Web
  • Format: .JPG or .PNG
  • Header Overlay - This checkbox will add the site dark overlay with opacity.  This option allows text to be more visible with lighter images.

Correctly size your Header Images before uploading them to the website.

Header Text

In your page settings, the "Header Text" field can be used to add a text overlay to your header image or background video. This is a full content editor, so you can add text, links, buttons, etc.

Header Background Video

Looping/Muted Background Video

Navigate to Content > Pages > Index > "Header Background Video" field

Header Background Video Size and Details

  • Size: 16:9 aspect ratio (ie. 1400 width x 682 height)
  • Format: The video must be MP4/H264

Note: The background video is a looping/muted video with no controls, so the video should be shorter in size/length.

Add Background Video to Home Page

Your video needs be loaded in the field titled "HEADER BACKGROUND VIDEO (MP4/H264)". You can either place your cursor in the field to select an existing video from the dropdown menu or choose the "upload a new video" option. The video must be MP4/H264 formatted and should have a 16:9 aspect ratio.

You'll also want to make sure a header image is added, since this will be used for some mobile devices as well as a desktop computer while the video is loading. We recommend using the first still of the video as the header image.

Add Background Video to Any Page

A background video is available to any page that includes the section HEADER BACKGROUND VIDEO (MP4/H264) in the page editor. Just go to the desired page editor and follow the same steps listed above.

The page will automatically display the page title at the top of the content area.  The checkbox "Hide Page Title" removes the title from the page.