The Scrolling content section allows you to display continuously moving messages, icons, or images across the page. It is useful for highlighting announcements, promotional messages, brand statements, or visual content in an eye-catching scrolling layout.
Click the section name to see the section settings on the right-hand sidebar.
Customize how the content moves across the section.
Speed: Adjust the scrolling speed of the content.
Direction: Choose the direction in which the content moves, such as Right to left.
Pause on hover: Enable this option to pause the scrolling animation when customers hover over the section.
Text uppercase: Enable this option to display the scrolling text in uppercase.
Two-end fade: Enable a fade effect on both ends of the section to create a smoother transition as content enters and leaves the visible area.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Use the typography settings to customize the appearance of text in the scrolling content.
Text font: Choose between the Body and Heading font configured in the theme.
Font size: Adjust the text size on desktop.
Mobile font size: Adjust the text size on mobile devices.
Control the spacing between individual items in the scrolling content.
Spacing between content: Adjust the space between scrolling items on desktop.
Mobile spacing between content: Adjust the space between scrolling items on mobile devices.
Use the Section padding settings to adjust the spacing above and below the scrolling content.
Click Add block and select a Message block to add text to the scrolling content.
You can add multiple Message blocks and combine them with Icon blocks.
The available options include:
Text: Enter the text displayed in the scrolling content. Example: Performance or Welcome to our store.
Outline text: Enable this option to display the text with an outlined style.
The Icon block allows you to add an icon or custom image between scrolling messages.
The available options include:
Icon: Select a predefined icon from the available icon library.
Custom SVG icon: Add your own SVG icon instead of using a predefined icon.
Custom image icon: Upload an image to display as the scrolling icon.
Rounded image: Enable this option to display the custom image with rounded styling.
Icon background type: Select the background style applied to the icon.
Icon height: Adjust the icon or image size on desktop.
Mobile icon height: Adjust the icon or image size on mobile devices.
You can add multiple Message and Icon blocks to build the scrolling sequence. Drag and drop the blocks in the Theme Editor to change their order.