Rotating banners on your homepage can announce specific events, facilities, or other points of interest and are customized and implemented in your site's theme.
Homepage banners will need to be built into your theme by implementing the rotating banner component in the theme's layout and styling the banner in the Styles tab.
Check out this video to learn all about rotating banners on your homepage:
Our rotating banners are built to conform to accessibility considerations, but when styling and creating your homepage banner, you'll need to ensure you're choosing accessible colors and fonts. If you're unfamiliar with how to implement or style your rotating banners so that they continue to meet accessibility requirements, we recommend consulting with our team. To do this, submit a support ticket, and our team will get in touch with the next steps.
Once the rotating banner row is configured, create banner content in the Slideshow folder under Home in the site tree.
If this folder isn't available to you, create it by right-clicking on Home and creating an OC Folder page called 'Slideshow'.
Create homepage banners
- Right-click on the Slideshow folder.
- Select Create Page.
- Select OC Slide.
- Fill out the necessary fields.
- Save and publish for the slide to show in your banner.
Repeat this process for each slide in your rotating banner. You can change the order in which slides appear by re-ordering them in the site tree.
We recommend using five slides or fewer. If you use too many slides, you risk your community missing essential information.
What to include in your OC Slide fields
Use the following information to fill out OC Slide fields when creating slides for the rotating banner.
|
Field |
Function/Display |
|
Page name |
Completes the unique Page URL |
|
Feature title |
The title displayed in the slider caption |
|
Add feature summary |
The text displayed in the slider under the title. Keep the length in mind when adding captions – you don't want users struggling to read extra-long summaries as the slides are switching back and forth. |
|
Add feature image |
Main image for the slider. Image dimensions for the homepage banner slides are determined by the height and width of the container:
Ensure the image file size is up to 500kb. |
|
Add feature link URL |
The link used to direct users to more information |
|
Anchor Image |
The position on the original image that the slider will display e.g. Top Left will apply the slider dimensions from the top left of the original image. |
Image sizes
Homepage banners can be the width of the page content area or the full width of the screen depending on how your theme has been set up.
For banners the width of the content area, the ideal image properties are:
- Image size: 1140 x 350 pixels
- Image format: For most images, JPEG. If your slider contains text, PNG
- File size: Up to 500kb
For full-width sliders, the ideal image properties are:
- Image size: 1920 x 600 pixels
- Image format: For most images, JPEG. If your slider contains text, PNG
- File size: Up to 500kb
We’ll automatically resize images that fall outside of these dimensions, but it’s best to upload images that are at least as big as what we’ve suggested above. When images don't meet these dimensions, they need to be upscaled, resulting in poorly rendered or clipped images.
What else?
- Check out About Rotating Banners for best practices and accessibility tips
- Learn more about page-level rotating banners