Overview
There are two options for adding a full-width banner to the top of a minisite Page:
- (Required) On the minisite homepage, at the top of the page above the minisite menu
- (Optional) On the minisite's other Pages, just below the minisite menu
Adding an image or video banner to the homepage
Adding an image banner
Quick guide
- Open the homepage in the WordPress editor.
- In the Settings panel (right side), scroll down to "Featured image" and click Set featured image.
- Upload or select an image from your Media Library (aim for 2000 x 1150px, or a 16:9 ratio).
- Save your changes and click Preview > Preview in a new tab. The banner should now display.
Detailed guide (with screenshots)
- Open the homepage in the WordPress editor.
- In the Settings panel (right side), scroll down to "Featured image" and click Set featured image.
- Upload or select an image from your Media Library (aim for 2000 x 1150px, or a 16:9 ratio).
- Save your changes and click Preview > Preview in a new tab. The banner should now display.
Adding a video banner (viewable on desktop/larger screens)
In addition to having an image banner, you can add an ambient video as your homepage banner. An ambient video is a background video that sets the ambience or atmosphere for your homepage without distracting from the page content.
How this will appear to visitors:
- Visitors on desktop/larger screens: the ambient video plays in a loop without audio
- Visitors on mobile/smaller screens: the ambient video is replaced by the homepage's "Featured image"
Quick guide
Step 1: Prepare your ambient video
Your video must be an .mp4 file and less than 5MB. To reduce its size (which will also help avoid 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 your ambient video to WordPress and obtain the URL
- In the left menu, click Media > Add New.
- Click Select Files.
- Select your video and click Upload.
- Once the upload completes, click Copy URL to clipboard.
Step 3: Add your 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 panel (right side), scroll down to the bottom. In the Ambient Video URL field, paste the URL that was copied onto your clipboard.
- Save your changes and click Preview > Preview in a new tab. If you see the featured image instead of the video, expand the width of your browser window.
Banner not displaying?
If the homepage banner is not displaying, make sure that the Page you're adding the banner to was correctly set as the homepage:
Quick guide
- In the left menu, click Settings > Reading.
- In the Homepage field, use the dropdown to select the correct Page.
- Pages that are still drafts do not appear as an option: if the Page you want to select does not appear here, you must publish it first.
- Click Save Changes.
Detailed guide (with screenshots)
- In the left menu, click Settings > Reading.
- In the Homepage field, use the dropdown to select the correct Page.
- Pages that are still drafts do not appear as an option: if the Page you want to select does not appear here, you must publish it first.
- Click Save Changes.
Adding an image banner to other Pages
The topmost area for non-homepage webpages is the department name against a solid gold background, and this is a non-changeable feature of the layout. However, underneath the minisite menu, you can use the Hero Program component to add a full-width banner image (videos are not permitted). The Page title displays at the bottom left of the image.
This feature is only available for Pages using the Default template or Content Detail. Pages using Chaptered Page, News Listing, or People Listing do not use the component system and so cannot display a full-width banner image beneath the minisite menu.
Quick guide
Step 1: Set the featured image
- Open the Page in the WordPress editor.
- In the Settings panel (right side), scroll down to "Featured image" and click Set featured image.
- Upload or select an image from your Media Library (aim for 2000 x 1150px, or a 16:9 ratio).
Step 2: Add the Hero Program component
- Click the + button and select Hero Program from the component dropdown.
- Don't see this component? Type Hero Program into the search bar or click Browse all.
- You can leave the "Link" and "Description" fields blank or fill them out.
- Save your changes and click Preview > Preview in a new tab. The banner should now display.
Detailed guide (with screenshots)
Step 1: Set the featured image
- Open the Page in the WordPress editor.
- In the Settings panel (right side), scroll down to "Featured image" and click Set featured image.
- Upload or select an image from your Media Library (aim for 2000 x 1150px, or a 16:9 ratio).
Step 2: Add the Hero Program component
- Click the + button and select Hero Program from the component dropdown.
- Don't see this component? Type Hero Program into the search bar or click Browse all.
- You can leave the "Link" and "Description" fields blank or fill them out.
- Save your changes and click Preview > Preview in a new tab. The banner should now display.