Banners and Sliders

7 min readUpdated 1 March 2026

Banners and sliders are prominent visual elements that typically appear at the top of your pages. They engage visitors immediately and drive conversions through compelling imagery and calls to action. Banners can display a single image, a single video, or a multi-image carousel (slider).

Adding a Banner or Slider

1Navigate to the page where you want to add the banner
2Click the '+Add Element' icon in the page header bar
3Drag the Banner icon to your desired location on the page
4Upload your media — images or videos from YouTube/Vimeo
5Fill in the title, description, and button fields as needed
6Adjust the settings and click 'Apply'

Editing an Existing Banner

Hover over the banner thumbnail and click the edit icon. From here you can change images, update titles and descriptions, set button text and links, and configure alt text for accessibility.

Banner Properties

Each banner slide supports a title (with heading style options for SEO), description text, alignment (left, centre, or right), a call-to-action button with a custom link, and alt text for accessibility. You can also enable parallax scrolling effects and auto-loop playback for video banners.

Height and Sizing

Desktop and mobile heights can be set independently, allowing you to optimise the banner for each device. Enable '100% screen height' to make the banner fill the entire viewport, or set a custom pixel height. Corner radius adjustments allow for creative styling such as rounded edges.

Slider Settings

When you add multiple slides, the banner becomes a slider. Three transition types are available: horizontal, vertical, and fade. The 'Slide Time' setting controls how long each slide displays — adjust this based on the amount of text visitors need to read. Navigation arrows and bottom dot indicators help users browse between slides.

Design Customisation

Styling options include overlay colours with adjustable transparency, text background options, title and description sizing, button styling, and hover animations. Use the Style Editor for site-wide banner consistency, or customise individual banners through their settings panel.

Use high-resolution images (at least 1920px wide) for crisp banners on all screen sizes. Keep text concise and ensure strong contrast between your overlay and text colours for readability.