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:
