Scrolling banner
Overview:
The Scrolling Banner section is designed to showcase continuously moving marquee text in a visually engaging horizontal scrolling layout. It supports multiple text blocks, marquee direction controls, speed customization, typography settings, responsive layouts, color schemes, and spacing controls. This section is ideal for announcements, promotional offers, brand messaging, featured highlights, or attention-grabbing content.
Blocks Configuration
Text Block
The Text block displays scrolling text inside the banner.
Content:
| Setting | Description |
|---|---|
| Text | Defines the scrolling marquee content displayed inside the banner. Supports rich text formatting such as bold and italic styling. |
Section Configuration
Grid Settings:
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Adds spacing between scrolling text items on desktop devices. |
| Mobile Grid Spacing | Adds spacing between scrolling text items on mobile devices. |
Marquee Settings:
| Setting | Description |
|---|---|
| Marquee Text Size | Controls scrolling text size such as H1–H6, Large, Medium, or Small. |
| Marquee Text Weight | Adjusts font thickness ranging from Thin (100) to Black (900). |
| Marquee Text Case | Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Marquee Text Tag | Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Marquee Text Font Family | Allows switching between Default and Body font family styles. |
| Marquee Text Color Style | Applies predefined color styling to marquee text. |
| Marquee Text Link Style | Controls styling behavior of links used inside marquee content. |
| Marquee Direction | Controls scrolling direction such as Right to Left or Left to Right. |
| Marquee Speed | Controls scrolling animation speed. |
| Pause on Hover | Pauses scrolling animation when users hover over the marquee text. |
Layout:
| Setting | Description |
|---|---|
| Container Layout | Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width | Controls the maximum width of the section container on desktop devices. |
Color Scheme:
| Setting | Description |
|---|---|
| Section Color Scheme | Applies a predefined color palette to the Scrolling Banner section background and content. |