Overview
You can add a banner, or full-width featured image, to the top of any page for your Dornsife department website in WordPress. In this guide we provide instructions for the following:
- How to set a page as your department website's homepage
- How to add an image banner to the top of the homepage (appears at the top of the page, above the department site menu)
- How to add a video banner to the top of the homepage (appears in place of the image banner on larger screens)
- How to add an image banner to the top of another page (appears at the top of the page but below the department site menu)
An image banner is required for the homepage but is optional for all other pages. A video banner is also optional but is only available for the homepage.
Setting the homepage for a department website
Each department website can have one designated homepage. If you want to change the default and 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 make a selection from the list.
- Click Save Changes at the bottom.
Adding an image banner to the homepage
For optimal display, the featured image for the banner should be 2000px tall and 1150px wide. If you are using an image with smaller dimensions or a different ratio, WordPress may automatically crop how it displays.
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
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. If visitors view your website on a desktop or larger screen, the video will appear in place of the image banner that normally appears on the homepage.
Quick guide
Step 1: Prepare the ambient video
Your video must be an .mp4 file and less than 5MB. To reduce its size (which will also help reduce streaming issues), you should:
- Remove all audio tracks
- Limit the video length to less than 30 seconds
If your video is larger than 5MB and you need assistance editing it down, the Media Services team at DTS can help:
Step 2: 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 Copy URL to clipboard.
Step 3: Add the ambient video to the homepage
- Open the homepage in the WordPress editor.
- 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.
- 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
You can add an image banner to the top of other pages besides the website homepage. Just be aware of the following conditions:
- The image appears beneath the department menu on the homepage
- This is in contrast to the homepage, where the image appears above the department menu on the homepage
- The image banner can be added to pages that use the Default, Content Detail, or Chaptered Page template
- The image banner is not available for pages that use the Event Listing, News Listing, Person Listing, or Video Listing template
For optimal display, the featured image for the banner should be 2000px tall and 1150px wide. If you are using an image with smaller dimensions or a different ratio, WordPress may automatically crop how it displays.
Add an image banner using the Chaptered Page template
Add an image banner using the 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.