Multistep Hero Banner

The Multistep Hero Banner Module helps you create an interactive, step-by-step experience that guides visitors through questions, choices, and personalized results. Highlight your key questions, selectable options, engaging content, and call-to-action buttons with a smooth and intuitive navigation flow.

Fully responsive and highly customizable, this module is designed to simplify user journeys, improve visitor engagement, and deliver a seamless guided experience across desktop, tablet, and mobile devices.

Key Features Multistep Hero Banner Module :

1. Modern Hero Banner Design  :  Create a professional first impression with a clean, eye-catching layout.  

2. Interactive two-step navigation :  Navigate visitors through two interactive steps with a smooth, intuitive flow that makes discovering relevant solutions simple and engaging.   

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

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

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

6. Customizable questions and answer options : Easily customize questions and answer options to create engaging, relevant, and personalized user journeys that match your website goals.  

How to Set Up the Multistep Hero 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 "Multistep Hero Banner" and drag and drop the module into the desired location on your page.

Module Defaults Options:

Layout ID :

Heading & Description: 

Stats Content  :

Easily manage statistical content with custom numbers and supporting text. Highlight key achievements, business milestones, and important metrics. Present valuable information in a clear and engaging way. 

Step Content:

Customize your Step 1 column content by adding unique call keys, titles, descriptions, and other relevant information for each item. Use lowercase letters, numbers, and dashes without spaces for call keys (example: website). Make sure every Step 1 item has a unique key and that the same key is used in its corresponding Step 2 questions to display the correct content. If you want a Step 1 choice to go directly to the final answer, enable Final Answer Recap for that item. In this case, you do not need to create a corresponding item in Step 2, as visitors will be taken directly to the final answer.

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, Description & CTA Setting :

Customize the typography, font size, colors, spacing, and alignment for headings, descriptions, and CTA buttons. Fine-tune the appearance of each element to match your website's branding and maintain a consistent design across the module.

Stats Content Setting :