Scrolling Icon with Text
What is the Scrolling Icon with Text section?
The Scrolling Icon with Text section displays a continuously animated ticker bar featuring icons paired with short text labels. It is ideal for highlighting key product features or selling points in a compact, eye-catching scrolling strip.
Main Settings
General
- Heading: Set the title for the section. Optionally enable the rich text field to access text formatting options.
- Make section full width: Enable this toggle to stretch the section to the full width of the screen.
- Animation speed: Control the speed of the scrolling animation, where 1 is the slowest and 10 is the fastest.
- Gap: Set the spacing between individual icon with text items.
- Enable dot separator: Enable a dot separator displayed between each item in the scrolling bar.
Section Height
- Desktop fixed height: Define the fixed height of the section on desktop.
- Mobile fixed height: Define the fixed height of the section on mobile devices.
Colors
The Transparent value is the default and subsequently inherits the value from the global settings.
- Heading color: Set the color of the section heading.
- Section background color: Customize the background color of the entire section.
- Background opacity: Adjust the opacity of the section background color.
- Text color: Define the global text color for the section.
- Image container color: Set the background color of the icon container.
- Background opacity: Adjust the opacity of the icon container background color.
Section Spacing
- Distance from the top: Adjust the spacing above the section.
- Distance from the bottom: Adjust the spacing below the section.
Mobile Example
Icon with Text Block
The Icon with Text block represents a single item within the scrolling bar. Use the Add Icon with Text button to add more items.
Icon
- Image: Upload a custom image to use as the icon.
- Select Icon: Choose an icon from the built-in icon library.
- Align icon to top: Enable this toggle to align the icon to the top of the block.
- More icon settings: Enable this toggle to access additional icon configuration options.
- Icon scale desktop: Define the size of the icon on desktop.
- Icon scale mobile: Define the size of the icon on mobile devices.
- Icon top margin desktop: Adjust the spacing above the icon on desktop.
- Icon top margin mobile: Adjust the spacing above the icon on mobile devices.
Text
- Text: Enter the label displayed next to the icon. Rich text formatting options are available.
- Text scale large screen: Adjust the font size of the text on large screens.
- Text scale mobile screen: Adjust the font size of the text on mobile devices.
Spacing
- Gap: Set the spacing between the icon and the text label.