Triangle
home
Contensis Content Management System (CMS) Getting started with the CMS Layouts, features and formatting User guides Permissions and roles Unit web coordinators Common Contensis errors
Support Requesting a new website
Team FAQs
A-Z
home

Rotating features can be used to highlight key marketing activities, for example, encourage open day sign ups or event registration. These work particularly well on homepages, spanning the full width of your screen. It is for our standard left side menu webpage design that the majority of our pages use.

  • Use them to point users to key information
  • Use one or more items in your rotation sequence
  • Use this control on any web page and in any column wider than 30% of your page
  • Avoid using more than three slides in any one sequence
  • Change the slide order by using the up/down arrows

rotation example

View a live example of the rotating feature

 

Preparation

For each slide, you'll need the following:

  • Title*
  • Sub text
  • Image*
  • Image alt text*
  • Link destination*
  • Link title/hover text*
  • To determine whether your image is dark or light (if dark, a dark blue gradient will be applied to the image; if light, a white gradient will be applied)

* Required field

Image specifics

Make sure:

  • every image in your sequence uses the same image dimensions
  • the focal point is on the top/right (your messaging will be on the left)
  • file sizes aren't too large - ideally under 400kb (think about page load times)
  • you select whether you're using a dark or light image (this will change the text colour accordingly and add an opaque background to increase contrast/legibility)
  • images are relevant to your messaging
  • you use a larger image than the space you're trying to fill - this will ensure your images look as good as possible across all devices
  • your images are landscape or square - portrait imagery may not have the desired results
 

Instructions

  1. In edit mode of your page, place your cursor where you want your rotating feature
  2. Find /SharedResources/Razor/Rotating-Feature in the project explorer
  3. Drag and drop Rotating-Feature.cshtml into your page
  4. Input the control settings - "Add item" to add another slide to your rotation sequence
  5. Save settings
  6. Save and preview your page - how does your rotating feature look?

Control settings

Title

  • Each slide needs a title - this must grab attention
  • Be clear and concise
  • Ensure your title is relevant to the link destination

Text

  • Elaborate a little on where your slide links to
  • Be as brief as possible
  • If you want your text to have a border box around it, add the word keyline to the Additional styles field

CTA link

  • Browse for a CMS page you'd like to link to
  • Or link to an external URL
  • Add title/hover text to give context to screen reader users

Image

  • Upload your images and approve them before inserting your control
  • Image sizes can vary, however, two recommendations are:
    • 950px wide by 300px high for full width banners
    • 1000px wide by 666px high for 30% column of full width page
  • Provide a relevant and descriptive alt text to aid screen reader users
 

Examples

A number of sites are using the rotating feature, here are some examples: