Homepage Header Spot

The home page 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.


Homepage Rotator

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

Rotator Size and Details

  • Image Size: 1400px by 666px (double for retina)
  • 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 INDEX page (home page).

Each step 1-5 correlates with 1-5 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 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.

5. Save your slide! Follow steps 1-4 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.

  • Image Dimensions: 1400px by 666px (double for retina)
  • Resolution: 72 px/inch - Save for Web
  • Format: .JPG or .PNG

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.

To use the styled headings in the example, check out subpage styles info here.

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 (under 30 seconds is recommended).

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.