Get Started Get Started

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.

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.