A banner component is a versatile UI element used to highlight key messages, promotions, or branding on a website. It provides a visually appealing way to capture user attention and drive engagement.

Key Features of a Banner Pro Module :

1. Multiple Layouts

• Offers flexibility with various design structures banners.

• Can accommodate different content types like text, images, and pop video.

2. CTA Popup with Video

• A call-to-action button that triggers a video popup.

• Enhances user engagement by presenting multimedia content without leaving the page.

3. Background Video Banner

• A dynamic banner featuring an autoplay video as the background.

• Helps create a more immersive experience, perfect for storytelling or branding.

4. Two-Column Content with Video

• A hybrid layout that pairs descriptive content with an embedded video.
• Useful for product showcases, tutorials, or company introductions.

How to Set Up the Banner Pro Module in HubSpot :

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

Select the page where you want to apply the module.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

For the Banner Pro, select your preferred layout (e.g., Layout 1, Layout 2, or Layout 3). Easily rearrange event cards within the chosen layout to achieve the perfect content flow and visual arrangement, ensuring a seamless and engaging user experience.

Options : 

• Layout 1 : The layout features a heading, description, and multiple CTAs with link and popup options, along with an image for a dynamic and engaging design.
• Layout 2 : The layout includes a heading, description, and CTA. In the right column, you can add a HubSpot or YouTube video for an interactive user experience.
  
• Layout 3 : The layout features a heading, description, and CTA, with the option to add a background video for a dynamic and engaging visual experience.
  

Banner Content : 

Users can add or remove jQuery JavaScript as needed, providing flexibility to enhance functionality or optimize performance based on their requirements.

Module Style Options: 

Module Setting :

Adjust the margins, padding, background colors, and container width to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Heading & Description Setting :

Users can customize the module’s spacing and adjust the typography for the heading and description. This includes modifying the color, font size, weight, and line height for both mobile and desktop views, ensuring a personalized and visually cohesive design across all devices.

CTA Setting :

Easily adjust typography and spacing for both desktop and mobile views. Enhance your design with custom colors, borders, rounded corners, and hover effects for a polished and interactive user experience.

Image Column :

Easily customize the image height, alignment, spacing, and rounded corners to achieve the perfect look for your design. It's available in layout 1.

Popup Setting :

Effortlessly adjust typography and spacing for both desktop and mobile views. Enhance your design with custom colors, borders, rounded corners, and hover effects for a visually appealing and interactive experience. It's available in layout 1.

Video Column Setting :

Easily customize the video height, corners, background, and spacing to match your design preferences. Available in Layout 2.

We hope you enjoy using our banner pro module to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.