Overview
A scrolling marquee is a dynamic element that creates a smooth, continuous scrolling effect for text or images across your page. It’s perfect for showcasing announcements, promotions, or highlights, adding visual interest and drawing attention to key information.
Marquees are especially effective for grabbing attention at first glance, making them a popular choice for banners and headers in e-commerce and marketing-focused websites.
The scrolling marquee element is available within the "Scrolling Marquee - Brands" page section, which is located in the "Images" category of the Page Sections library in the builder:
It can also be added to an existing section via the Elements Popup from the "Basic" category. To do so, click the blue ➕ sign above/below an existing element depending on where you want it added. Next, find the "Scrolling Marquee" element in the Basic category and click on it to add:
📝 The "Scrolling Marquee" element cannot be added within complex structured sections such as Product Grid and Content Carousel. Also, it's not possible to add the element within itself.
Options & Settings
After the Scrolling Marquee element has been added, click on it (1) to access the options and settings in the sidebar.
📝 Standard element settings such as: Background, Border, Shape, Box shadow, Spacing and Advanced settings are also included.
Under the "Items" tab you can:
Edit / Duplicate / Delete each item (2)
Drag & Drop items into a different order (3)
Add new item(s) by clicking the "+ Add New Item" button (4)
Under the "Layout" tab you can:
Set the "Vertical Alignment" for items in the marquee (Top / Middle / Bottom).
📝 If all items in the marquee are of equal height, this setting will have no effect.Set the "Item per Row" value for items in the marquee
📝 Infinite scrolling only works when the 'Items per row' value equals or exceeds the number of items added to the Scrolling Marquee element.Adjust the "Item Spacing" using preset options (S / M / L / XL) or choose "Custom" to set a specific px value with the slider or input box.
Choose the "Animation Direction" (Left / Right) for the items.
Set the "Animation Speed" (1x / 2x / 3x) value.
Toggle on/off the "Pause on Hover" setting (enabled by default). When on, the item(s) in the marquee will pause when hovered over.
📝 On Tablet and Mobile edit modes, only the following settings are available in the "Layout" tab. Spacing and Visibility tabs are also available:
Vertical Alignment
Item per Row
Item Spacing
Editing Items in the Marquee
The Image element is used for all items in the marquee by default. To edit an item within the marquee, simply click on one then use the sidebar settings to apply your desired edits:
To use a different element for any item in the marquee, delete the existing image element. Then click the "+ Add Element" to add a new element of your choosing from the Elements Popup:
📝 Because the marquee scrolls continuously, some items may not appear in the mobile editor view.
Editing the Marquee on Mobile
When editing the Scrolling Marquee on mobile, some items may appear off-screen in the builder. This happens because the marquee element itself cannot be scrolled inside the editor due to technical limitations.
If you need to edit an item that isn’t visible in the mobile builder, you can use one of the following workarounds.
Option 1: Select the Item in Desktop View
Switch the builder to Desktop view.
Select the marquee Item you want to edit by clicking on it in the builder.
Switch back to Mobile view.
The item will remain selected, allowing you to adjust its settings in the Sidebar, even if it isn’t visible on screen.
If you want to confirm the visual changes, you can check them using Preview mode.
Option 2: Temporarily Reorder the Item (Mobile View)
Another option is to temporarily move the item within the marquee.
In Mobile view, drag the item up or down in the Page Structure panel.
This will change the order of the items and bring different ones into view in the builder.
Edit the item as needed.
Drag the item back to its original position once you’re done.
This method allows you to access items that are otherwise outside the visible area of the mobile builder.