Scrolling banner
Overview
The Scrolling Banner section allows you to display promotional messages, announcements, offers, and other short content in a continuously scrolling marquee-style layout.
The section supports multiple content blocks, optional images, clickable blocks, customizable typography, scrolling direction and speed, hover pause functionality, borders, buttons, responsive spacing, and theme color schemes.
Section Configuration
Button Settings
| Setting | Description |
|---|---|
| Button Label | Defines the text displayed on the section button. |
| Button Link | Specifies the URL where the button should navigate. |
| Button Type | Controls the visual style of the button. Options include Primary, Secondary, Styled, and Link/Underline. |
| Button Case | Controls the text case of the button label: None, Uppercase, Capitalize, or Lowercase. |
| Open Link in New Tab | When enabled, the button link opens in a new browser tab. |
Banner Settings
| Setting | Description |
|---|---|
| Heading Size | Controls the size of the banner heading. Options include H5, H6, Large, Medium, and Small. |
| Heading Weight | Controls the font weight of the banner heading from Thin to Black. |
| Heading Case | Controls the text case of the heading: None, Uppercase, Capitalize, or Lowercase. |
| Heading Tag | Defines the HTML heading level used for the heading from H1 to H6. |
| Heading Font Family | Allows the heading to use the default font or the body font family. |
| Heading Color Style | Controls the color preset applied to the heading. |
| Heading Link Style | Defines the styling applied when the heading contains a link. |
| Text Size | Controls the size of supporting banner text: Large, Medium, or Small. |
| Text Weight | Controls the font weight of the supporting text. |
| Text Case | Controls the case of the supporting text. |
| Text Font Family | Allows the supporting text to use the default or heading font family. |
| Text Color Style | Controls the color preset applied to the supporting text. |
Grid Settings
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Defines the spacing between banner content items on desktop. |
| Mobile Grid Spacing | Defines the spacing between banner content items on mobile devices. |
Default values:
- Desktop: 50px
- Mobile: 30px
Marquee Settings
| Setting | Description |
|---|---|
| Show Border | Enables or disables the border around the scrolling marquee content. |
| Scroll Direction | Controls the direction of the scrolling content: Right-to-Left or Left-to-Right. |
| Scroll Speed | Controls how quickly the banner content scrolls. The value is measured in seconds. |
| Pause on Hover | When enabled, the scrolling animation pauses when the user hovers over the banner. |
| Desktop Bottom Margin | Controls the bottom spacing below the marquee on desktop. |
| Mobile Bottom Margin | Controls the bottom spacing below the marquee on mobile. |
Default values:
- Border: Enabled
- Direction: Right-to-Left
- Speed: 15 seconds
- Pause on Hover: Enabled
Layout Settings
| Setting | Description |
|---|---|
| Container Layout | Controls the width of the section. Options include Page Width, Contained Content, and Container Fluid. |
| Border Style | Defines the border position when the marquee's own border is disabled. Options include None, Top, Bottom, or Top & Bottom. |
| Container Size | Controls the maximum desktop container width as a percentage. |
| Color Scheme | Applies a predefined theme color scheme to the section. |
Container Layout Options
- Page Width – Uses the theme's standard page-width container.
- Contained Content – Keeps the content within a constrained content area.
- Container Fluid – Allows the section to extend across the available width.