Scrolling Content Banner

The Scrolling Content Banner Module helps you display announcements, promotions, updates, and important messages in a dynamic and attention-grabbing scrolling format. Whether you're showcasing special offers, company news, event highlights, brand messages, this module ensures key information remains visible and engaging for your visitors.

Key Features Scrolling Content Banner Module :

1. Responsive Design: Adjusts seamlessly across devices, from desktops to mobile screens.

2. Pause on Hover :  Allow users to pause the scrolling content when hovering over the banner for improved readability and interaction.

3. Customizable Styles: Fully customizable with CSS variables for themes, fonts, colors, and animations.

4. Performance Optimization: Lightweight animations optimized to ensure smooth interactions without lag.

5. Continuous Scrolling Animation :  Display content in a smooth, uninterrupted scrolling motion to capture attention and keep visitors engaged.

How to Set Up the Scrolling Content Banner Module in HubSpot :

In the main dashboard, navigate to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages’, depending on where you want to add the section. This allows you to choose the appropriate location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Scrolling Content Banner" and drag and drop the module into the desired location on your page.

Module Defaults Options:

Layout ID :

Layout Options :  

For Scrolling Content Banner, choose a layout (e.g., Layout 1 or Layout 2) and rearrange the cards to achieve the desired content flow and visual arrangement.

Heading : 

Content Columns :

Users can customize each column by adding a title, a description to convey key information, an image for visual appeal, and CTA text with a link to drive engagement. Additionally, they can replicate columns as needed to match their content requirements, creating a flexible and visually cohesive layout suitable for various purposes such as showcasing features, services, or products.

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to customize the module's appearance. This flexibility lets you refine the layout and aesthetics, creating a visually appealing, functional, and user-friendly design.

Heading Setting :

Users can customize the spacing of the heading, as well as adjust the typography for the heading. This includes modifying the color, font size, weight, and line height for both mobile and desktop views, allowing for a personalized and visually cohesive design across all devices.