Homepage Header Spot
Note: when the "Header Overlay" check box is selected for a page, the "Billboard Overlay Color" option will add an opaque color overtop of your header image or background video.
The home page offers three display options:
- Rotator: rotating slide of images
- Header Image: a static fullwidth image
- 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
If a rotator is assigned to a page, the images will display as slides. The title and caption are optional and will display as an overlay. The button uses the Button Text field.
- Design Lines - Selecting this option for the rotator will display the custom designed lines in front of the slide image.
- For individual slides, if the title has text in a span wrap that text will display in cursive. eg. "Your <span>story</span> matters." the "story" text will be in cursive.
- Universal Buttons Link List - placing a link list slug in this field will replace each slide button with master slide buttons (used for image slides only as the video slides display a play button for the video).
- I'm New/Watch buttons - managed under Content > Link Lists > Home Rotator Buttons
Help Site - How To Resize And Crop Your Images Online
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.
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: 2732px by 1100px (double for retina). If the header text field is used for the page 2732px by 1556px tall is the recommended image size.
- Resolution: 72 px/inch - Save for Web
- Format: .JPG or .PNG
Correctly size your Header Images before uploading them to the website.
Help Site - How To Resize And Crop Your Images Online
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.
If the header text field is used for the page 2732px by 1556px tall is the recommended image size.
To use the styled headings in the example, check out subpage styles info here.
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. 2732 width x 1537 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.