The Scrolling media with text section allows you to create an engaging layout by combining continuously scrolling text, icons, images or videos, and promotional content.
You can display scrolling messages in multiple rows, place media in the center, and add a heading, description, and call-to-action button to highlight your brand or products.
This section is ideal for showcasing brand messages, product benefits, promotional campaigns, or creating visually engaging content with scrolling effects.
1. Scrolling media with text Section settings
Click the Scrolling media with text section name to see its settings on the right-hand sidebar.
1.1 Appearance
Use these settings to customize the overall appearance and background of the section.
Color scheme: Select the color scheme applied to the section. Click Edit scheme to customize the selected color scheme in the theme settings.
Custom background type: Choose how the section background is displayed:
Inherit: Use the background from the selected color scheme.
Color: Use a custom background color.
Media: Use media as the section background.
Background: Select a custom background color when using the Color background type.
Background gradient: Apply a gradient background. The gradient replaces the background color where applicable.
1.2 Scrolling content
Use these settings to customize the appearance of the scrolling content area.
Divider shape: Select the divider shape used to separate the scrolling content.
Show border: Enable or disable the border around the scrolling content area.
2. Add Scrolling content blocks
Click Add block under the Scrolling media with text section to add a Scrolling content block.
The section supports up to two Scrolling content blocks, allowing you to create multiple rows of continuously moving text and icons.
2.1 Scrolling settings
Use these settings to control the scrolling animation and appearance.
Speed: Adjust the scrolling animation speed.
Direction: Choose the scrolling direction: Right to left or Left to right.
Text uppercase: Display all scrolling text in uppercase letters.
Two-end fade: Apply a fading effect to both ends of the scrolling content.
Transparent background: Enable a transparent background for the scrolling content.
Color scheme: Select the color scheme applied to the scrolling content.
2.2 Typography
Customize the appearance of the scrolling text.
Text font: Choose between Body and Heading fonts.
Font size: Adjust the scrolling text size on desktop.
Mobile font size: Adjust the scrolling text size on mobile devices.
2.3 Spacing
Control the spacing between individual scrolling items.
Spacing between content: Adjust the distance between messages and icons on desktop.
Mobile spacing between content: Adjust the distance between messages and icons on mobile.
3. Add Message blocks
The Message block allows you to add text that moves continuously across the scrolling area.
The available options include:
Text: Enter the message displayed in the scrolling content.
Outline text: Enable this option to display the message using an outlined text style.
For example, you can add messages such as Always, Confidence, and Flexibility to highlight your brand values.
4. Icon block
The Icon block allows you to add visual elements between scrolling messages.
You can use icons to separate text, reinforce brand messaging, or make the scrolling content more visually appealing.
The available options include:
Icon: Select a predefined icon.
Custom SVG icon: Add your own SVG icon.
Custom image icon: Upload an image to use as an icon.
Rounded image: Display the custom image with rounded styling.
Icon background type: Choose the background style applied to the icon.
Icon height: Adjust the icon size on desktop.
Mobile icon height: Adjust the icon size on mobile devices.
5. Add Media block
The Media block allows you to display an image or video within the scrolling content layout.
This media element can be used to highlight a product, lifestyle image, or promotional visual.
The available options include:
Media type: Choose between Image and Video.
Image: Select the image displayed in the media area. A 3200 × 1600 px image is recommended.
Mobile image: Select a separate image for mobile devices. If no mobile image is selected, the desktop image will be used.
Media overlay opacity: Adjust the opacity of the overlay applied to the media.
When Video is selected, you can use video content instead of an image.
6. Add Content block
The Content block allows you to add a heading, description, and call-to-action button over the media.
This is useful for highlighting a promotional message or directing customers to a product or collection.
6.1 Appearance
Color scheme: Select the color scheme applied to the content.
Desktop max width: Set the maximum width of the content area on desktop.
6.2 Heading
Heading: Enter the main heading, such as
Born to move, designed to inspire.Heading size: Select the heading size.
Heading tag: Choose the HTML heading tag, such as H1, H2, or H3. This setting affects the page's heading structure and SEO.
6.3 Text
Text: Enter supporting content or a description below the heading.
Size: Select the text size.
6.4 Button
Button label: Enter the button text, such as
Shop now. Leave this field blank to hide the button.Button link: Select the destination customers will visit when clicking the button.
