Overview
You can add a banner, or full-width featured image, to the top of almost any page for your department website in WordPress. In this guide we provide instructions for adding a banner to the homepage or other pages of your website.
An image banner is required for the homepage but is optional for all other pages. You can also optionally add a video banner to the homepage.
Setting the homepage for a department website
Each department website can have one designated homepage. To set a different page as the homepage:
Quick guide
- Publish the page you want to use for the homepage.
- In the left menu, select Settings and then select Reading.
- Click the Homepage field and select a different page.
- Click Save Changes at the bottom.
Detailed guide (with screenshots)
- Publish the page you want to use for the homepage.
- In the left menu, select Settings and then select Reading.
- Click the Homepage field and select a different page.
- Click Save Changes at the bottom.
Adding an image banner to the homepage
The homepage is the only page where an image banner is required.
Guidelines
Follow these guidelines for an optimal banner appearance:
-
The image size should be 2000 x 1150px. It's okay if your image isn't exactly 2000 x 1150px, but try to ensure that the image isn't too much smaller and that it has a 16:9 aspect ratio. Otherwise, WordPress will automatically crop the image to fit the banner area.
-
Avoid putting critical information in the center and in the lower portion. These areas may get covered by the department title and menu bar. Longer department titles may cover a larger portion of the image than the example above.
How to add a banner
Quick guide
- Open the homepage in the editor.
- Add the featured image:
- If there is no featured image: In the Settings sidebar, click Set featured image.
- If you want to replace the current featured image: In the Settings sidebar, hover over the current featured image and select Replace.
- Upload a new image or select an existing image from the Media Library, and then click Set featured image.
- Save your changes to the homepage.
Detailed guide (with screenshots)
- Open the homepage in the editor.
- Add the featured image:
- If there is no featured image: In the Settings sidebar, click Set featured image.
- If you want to replace the current featured image: In the Settings sidebar, hover over the current featured image and select Replace.
- Upload a new image or select an existing image from the Media Library, and then click Set featured image.
- Save your changes to the homepage.
Adding a video banner to the homepage
In addition to the image banner, which is mandatory for the homepage, you can optionally add an ambient video. An ambient video is a background video that plays in a loop without audio: this video can set the ambience or atmosphere for your homepage.
Note that visitors will only see the video on a desktop or larger tablet: if they visit your website on a mobile or smaller tablet, they will see the image banner.
Guidelines
Follow these guidelines for an optimal banner appearance:
- The video file must be an .mp4 file and, like image uploads, is limited to 5 MB.
- To stay under 5 MB, your video may need to be smaller than 2000 x 1150px, but try to maintain a 16:9 aspect ratio.
- To reduce the video file size and optimize streaming performance, remove all audio tracks and keep the video length below 30 seconds.
- Avoid putting critical action in the center and lower edge of the video. These areas of the video will be covered by the department title and menu bar on the website. Longer department titles may cover a larger portion of the video than the example above.
If your video is larger than 5 MB or you need other video editing assistance, DTS can help you:
How to add a video banner
Quick guide
Step 1: Upload the ambient video to WordPress and obtain the URL
- In the left menu, click Media > Add New Media File.
- Click Select Files.
- Select your video and click Upload.
- Once the upload completes, click on it. Then, click Copy URL to clipboard.
Step 2: Add the ambient video to the homepage
- Open the homepage in the WordPress editor.
- Make sure you already added the image banner (you can follow the instructions in the previous section, "Adding an image banner"). This step is necessary because viewers on smaller screens will see the image banner instead of the video.
- In the Settings sidebar, scroll to the bottom. In the Ambient Video URL field, paste the URL that was copied onto your clipboard.
- Don't see this field? Make sure that the page you're on is set as the homepage, and that the template is set to Default template. The field also may not show up in the editor if you are in Rewrite & Republish mode.
- Save and view your changes. If you see the featured image instead of the video, expand the width of your browser window.
Detailed guide (with screenshots)
Step 1: Upload the ambient video to WordPress and obtain the URL
- In the left menu, click Media > Add New Media File.
- Click Select Files.
- Select your video and click Upload.
- Once the upload completes, click on it. Then, click Copy URL to clipboard.
Step 2: Add the ambient video to the homepage
- Open the homepage in the WordPress editor.
- Make sure you already added the image banner (you can follow the instructions in the previous section, "Adding an image banner"). This step is necessary because viewers on smaller screens will see the image banner instead of the video.
- In the Settings sidebar, scroll to the bottom. In the Ambient Video URL field, paste the URL that was copied onto your clipboard.
- Don't see this field? Make sure that the page you're on is set as the homepage, and that the template is set to Default template. The field also may not show up in the editor if you are in Rewrite & Republish mode.
- Save and view your changes. If you see the featured image instead of the video, expand the width of your browser window.
Adding an image banner to other pages
The default header for all other pages is the department title against a gold background. You can optionally customize this header with an image banner on the following page types:
- Default
- Content Detail
- Chaptered Page
Image banners are not available for listing pages (Event Listing, News Listing, Person Listing, and Video Listing).
Guidelines
Follow these guidelines for an optimal banner appearance:
-
The image size should be 2000 x 1150px. It's okay if your image isn't exactly 2000 x 1150px, but try to ensure that the image isn't too much smaller and that it has a 16:9 aspect ratio. Otherwise, WordPress will automatically crop the image to fit the banner area.
-
Avoid putting critical information along the lower portion and upper edge. These areas may get covered by the menu bar, page title, and link if used. Longer page titles may cover a larger portion of the image than the example above.
How to add a banner: Chaptered Page
How to add a banner: Default or Content Detail template
Quick guide
Step 1: Set the featured image
- Open the page in the editor.
- Add the featured image:
- If there is no featured image: In the Settings sidebar, click Set featured image.
- If you want to replace the current featured image: In the Settings sidebar, hover over the current featured image and select Replace.
- Upload a new image or select an existing image from the Media Library, and click Set featured image.
Step 2: Add the Hero Program component
- Click the + button and select Hero Program.
- Don't see this component? Type Hero Program into the search bar or click Browse all.
- (Optional) You can fill out the Link and Description fields or leave them blank.
- Save and view your changes.
Detailed guide (with screenshots)
Step 1: Set the featured image
- Open the page in the editor.
- Add the featured image:
- If there is no featured image: In the Settings sidebar, click Set featured image.
- If you want to replace the current featured image: In the Settings sidebar, hover over the current featured image and select Replace.
- Upload a new image or select an existing image from the Media Library, and click Set featured image.
Step 2: Add the Hero Program component
- Click the + button and select Hero Program.
- Don't see this component? Type Hero Program into the search bar or click Browse all.
- (Optional) You can fill out the Link and Description fields or leave them blank.
- Save and view your changes.