Rotating Banners can be used on any content type with a WYSIWYG editor, using OC Rotating Banner and OC Slides content types. Slideshows on homepages are created differently and may require expert consultation.
Use page-level rotating banners to indicate different sections of your site. Here, for example, our demo site has a rotating banner to showcase the various library branches of the council. We have seen successful examples of them used in the top WYSIWYG Editor of OC Landing Pages, where they can give the section a different look and feel.
You can place rotating banners into any WYSIWYG content using the rotating banner icon in the WYSIWYG Editor and selecting the banner you would like to add to the page. The WYSIWYG will pull a list of all the banners created within that site. In the WYSIWYG Editor, the banner will present as a green widget.
There are two ways to organize your banners; you could either create all banners in a dedicated folder in the site tree, or you may prefer to create each banner as a direct child page of the page they are added to.
How to Create an OC Rotating Banner
- Right-click in your site tree where you wish to place your banner and select Create page.
- Select OC Rotating Banner as the content type.
- Fill out the necessary fields.
- Publish the page.
- Right-click on the OC Rotating Banner page you just made in the site tree.
- Select Create page and choose the OC Slide content type.
- Fill out the necessary fields on the OC Slide page.
- Repeat this process for each slide in your rotating banner. You can re-order the slides by dragging and dropping them in the site tree.
Remember, accessibility-friendly banners have no more than five slides!
What to Include on Your OC Rotating Banner
Use the following information to fill out the OC Rotating Banner fields.
Field |
Function/Display |
Page Name |
The name of your rotating banner. It’s best to make this descriptive as you’ll be using it to select your rotating banner later in the WYSIWYG. |
Banner layout |
The text placement on your banner – either in a strip along the bottom of your banner or in a floating box. |
Max number of slides to show |
The maximum number of slides your banner can display. You can have as many OC Slide child pages as you’d like for your OC Rotating Banner page, but only this number of images will be shown once your banner is published. |
Banner animation |
How you’d like banner slides to transition from one image to another. |
What to Include in Your OC Slide Fields
Use the following information to fill out the OC Slide fields.
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 |
Add feature image |
Main image for the slider. The image needs to be at least 1140 px wide x 350 px high, with a file size of up to 500 KB. |
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
Page-level rotating banners are the width of the page content area. The ideal properties for these are:
- Image size: 1140 x 350 pixels
- Image format: For most images, JPEG. If your slider contains text, PNG
- File size: Up to 500 KB
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 rotating banners for your homepage