Scrolling banner images

Preparation

For each item in your rotation sequence, you'll need:

• title*
• sub text (optional)
• image*
• ensure your images are already
• link text*
• link destination*

* required field

Instructions

You must add at least one banner in order to add the control to your page!

1. In edit mode of your page, place your cursor where you want the banner
2. Find /SharedResources/Razor/Rotating-Feature.cshtml in the project explorer
3. Drag and drop Rotating-Feature.cshtml into your page (you'll instantly be prompted to add at least one banner)
4. Complete the control settings
5. Save settings
6. Save and preview your page - how does your banner look?

Control settings

Height

• you must manually add the preferred height of your banner
• try a few to see what looks best

Title

• each banner must have a title
• be clear and concise
• you can force a breaking space in your title by using a tilde ~

Text

• additional text is optional
• be clear and concise

Images

• use dimensions to suit the need of the page
• make sure each image in your sequence uses the same dimensions
• main focal point must be on the right
• if you want a portrait banner, upload portrait images
• if you want a landscape banner, upload landscape images

Link text

• use strong verbs (eg learn more, explore life as a student,  reserve your place, book on an open day) not "click here"

Link destination

• browse for the CMS page you'd like to link to
• or link to an external URL

Dark or light?

• add an overlay to increase contrast between your text and image
• for dark images use "dark"
• for light images use "light"

Screenshot of interface