Scrolling Banner

The Scrolling Banner block displays a continuously moving text banner—ideal for announcements, promotions, shipping notices, or live updates. It creates dynamic visual interest without requiring user interaction.

Settings

The Scrolling banner supports the following settings:

• Enable full width: Expand the block to 100% of the viewport width, ignoring the site’s maximum content width.
• Block class: Add a custom CSS class for spacing, layout overrides, or custom styling (e.g., mt-6, pb-4).
• Background: Set a solid or gradient background color.
• Or, use image: Apply a background image using a preset from Theme Settings > Style scheme settings > Background Image Schema.
• Enable background fixed: When enabled, the announcement bar background remains stationary while the page content scrolls over it (Parallax effect). If disabled, the background scrolls normally with the page.

All four settings above follow: Blocks → Overview → General Settings

Scrolling content

• Direction: Scrolling direction, with 4 options:
  • To left – scrolls from right to left
  • To right – scrolls from left to right
  • To up – scrolls from bottom to top
  • To down – scrolls from top to bottom
• Height: Overall height of the scrolling area. When direction is vertical (To up or To down), set this to 0 to enable automatic height based on content.
• Interval: Time interval (in milliseconds) between scroll animations—controls scrolling speed.
• Horizontal alignment: Determines the horizontal positioning of the content within the scrolling area. Options usually include Left, Center, Right, or no set (default).
• Vertical alignment: Determines the vertical positioning of the content within the scrolling area. Options usually include Top, Middle, Bottom, or no set (default).
• Enable automatically background: When enabled, this feature synchronizes the background style (color, gradient, or image) of a specific target element with the scrolling pane, ensuring visual consistency.
• Target: Specifies the CSS selector (Class or ID, e.g., .section-announcementbar) of the external container that should share the background with the scrolling pane. If left blank, it defaults to synchronizing with the current node's own container.

Child blocks

There is only one scrolling pane block, and only blocks with other content can be added below each scrolling pane. Multiple scrolling panes can be freely added or deleted.

Scrolling pane

• Block class: Assigns a custom CSS class to the scrolling pane container for targeted styling. Supports responsive utility classes like mt-1, px-5, m-md, etc., following Tailwind-like syntax (e.g., m = margin, p = padding, t/b/l/r = top/bottom/left/right, x/y = horizontal/vertical). Desktop-specific variants use -md-* suffixes.
• Background: Sets the background style of the scrolling pane. Choose from preset options or select Custom CSS to define gradient colors or advanced styles via inline CSS.
• Color: Forces all child elements inside the scrolling pane to inherit this specified color (hex code supported, e.g., #FFFFFF). Useful for overriding default text or icon colors within the scroll area.
• Horizontal: Controls the horizontal alignment of content inside the scrolling pane. Options include left, center, right, or no set.
• Vertical: Controls the vertical alignment of content inside the scrolling pane. Options include top, middle, bottom, center, or no set.

Scrolling pane child blocks

The Scrolling pane supports the specific blocks illustrated in the image below. Please refer to the visual guide for the complete list of compatible block types available for this section.

For detailed configuration options regarding sub-blocks, please consult the official documentation at Blocks.