Adding Rotators to a Page

A Rotator is a slideshow element that displays multiple images or content slides in rotation. It’s perfect for showcasing featured content or highlights with smooth transitions.

Rotators are commonly also referred to as 'sliders', 'rotating banners'.

To add a Rotator to a page:

• Open the page editor by navigating to Dashboard > Website > Pages > Create a New Page or click the existing page.
• Click the “Insert” button in the left panel.
• Under the “Layout” heading, drag and drop the "Rotator" element into the page editing area (typically into a section) on the right.

• You can then choose to add Sections or Images into the Rotator as slides.
• You can also edit the text content or add other elements to the Rotator Sections.

Rotator Options

• Add a new slide: Click on an existing slide and move the mouse cursor to the icon "" at the bottom. It will turn into an "Add New Slide" button.

Click the "" icon in the "Rotator" label, and then click "Edit".

• Auto Rotate Time: Set how long each slide should be shown before automatically moving to the next one (in seconds). If set to 0, the rotator will not rotate automatically.

• Auto Rotate Direction: Choose whether the slides should rotate forwards or backwards when auto-rotation is on.

• Group Size: Decide how many items to show at once on desktop.

• Mobile Group Size: Choose how many items to display at once when viewed on mobile.

• Space Between Items (PX): Set the spacing between slides (in pixels). This is helpful if you’re showing more than one item at a time.

• Start at Random: Turn this on if you want the rotator to start with a random slide each time the page loads. Otherwise, it’ll always start with the first slide.

• Transition: Customize the way slides transition from one to the next, including the Transition Animation, Transition Easing, and Transition Speed.

• Position Step: Choose how many slides the rotator moves each time the "next" or "previous" button is clicked.

• Minimap Variant: Pick a style for the minimap (the navigation dots) below the rotator.

• Arrow Variant: Set the look for the rotator’s navigation arrows.

• Align Items: Aligns items vertically when they vary in height, keeping things looking tidy and consistent.

Sizing of Items

A commonly asked question with rotators is "Why are some of the images shifting in size, cut off or leaving blank space / blank area?".

The height of the rotator is set to the maximum height of the tallest item within the rotator.

To prevent blank spaces at the top or bottom of items, ensure that all items are of equal height.  Check each image or section and compare the height and padding of each.  Ensure that there are no additional line breaks, spaces or paragraphs.