Make a stunning first impression with Hero Banner Pro, a flexible and modern hero section designed for high-converting landing pages and websites. This module lets you highlight your product, service, or brand message with engaging headlines, call-to-actions, visuals, and performance-driven counters.
With 3 ready-to-use layouts (Layout 1, Layout 2, and Layout 3), you can instantly switch designs to match your website’s style — no coding required. Built for responsiveness, customization, and ease of use, Hero Banner Pro ensures your hero section looks great on every device.
Key Features of a Hero Banner ProModule :
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.
Search for "Hero Banner Pro" and drag and drop the module into the desired location on your page.
Layout ID :
Easily enhance navigation by adding an ID to the target section and using the same ID in an anchor link. This enables a smooth scrolling effect when users click a Call-to-Action (CTA) button, improving the overall user experience.
Layout Options :
Effortlessly highlight different with the “Hero Banner Pro” module — perfect for presenting solutions by role, industry, or workflow. This interactive tabbed layout lets visitors explore content without leaving the page, boosting clarity and engagement. With a streamlined design and easy customization, it keeps information well-structured and accessible on any HubSpot landing or website page.
Options :
Layout 1 – A clean two-column design featuring a heading, description, and call-to-action on the left, paired with an image on the right.
Layout 2 – A content layout with a heading, description, CTA, and an integrated counter section for showcasing key stats.
Layout 3 – A two-column design with a heading, description, CTA, and counter section on the left, balanced by an image on the right.
Heading & Description
Add and customize your main heading and supporting description text. Ideal for introducing your product, service, or key message.
CTA Show/Hide
Toggle the Call-to-Action button(s) on or off. Useful when you want a clean banner without buttons.
CTA
Configure your call-to-action button(s) with custom text, link, and style settings. Perfect for driving clicks and conversions.
Image Column Show/Hide
Show or hide the image/media column in the layout. Ideal if you want a text-only banner. It's show only in layout 1.
Image Column
Upload and manage the main banner image or illustration that appears in your layout.
Left Side Below Image Enable (Layout 1 only)
Enable or disable the secondary image option below the main content on the left side.
Left Side Below Image (Layout 1 only)
Upload and manage the secondary image that displays under the main content column when enabled.
Module Setting :
Adjust the margin, padding, container width and background colors 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 :
The Heading & Description Settings in Hero Banner Pro allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.
CTA Setting :
The CTA Setting offers full control over your call-to-action design, allowing you to customize typography for both desktop and mobile, adjust spacing, set background styles, configure borders with radius options, apply text transformations, enable box shadows, and fine-tune alignment—ensuring your CTA buttons are visually appealing, responsive, and conversion-focused.
Desktop Typography – Customize font style, size, weight, and color for desktop view.
Mobile Typography – Optimize CTA text appearance for mobile devices.
Spacing – Adjust margins and padding for perfect button positioning.
Background – Choose colors or gradients for the CTA background.
Border – Define border style, width, and color.
Border Radius – Round the edges for softer or pill-style buttons.
Text Transform – Apply uppercase, lowercase, or capitalize styles.
Box Shadow Enable – Add depth and emphasis with shadows.
Alignment – Control the CTA button’s alignment (left, center, right).
List Section Setting :
The List Section Setting allows you to design visually appealing layouts by customizing background styles, borders, and corner shapes, while also giving control over spacing, alignment, and maximum width—ensuring the section remains structured, responsive, and aligned with the overall page design. It's only show in layout 2 & 3.
Background – Customize section background with solid colors or gradients.
Border – Define style, thickness, and color for section borders.
Corner – Adjust border radius for rounded or sharp section edges.
Spacing – Control padding and margins for balanced layout.
Alignment – Position content left, center, or right for best visual impact.
Max Width – Set the maximum width to maintain consistency across devices.
List Content Setting :
The List Content Setting gives you control over both the main numeric values and their supporting subtext, allowing you to style statistics like user counts, percentages, and achievements in a way that makes them stand out while ensuring the descriptive text remains clear and consistent. It's only show in layout 2 & 3.
Desktop Typography – Adjust font size, weight, color, and style for larger screens.
Mobile Typography – Customize text appearance specifically for mobile devices.
Text Transform – Control capitalization (uppercase, lowercase, capitalize).
Image Column Setting :
The Image Column Setting allows you to control the visual appearance of the image used in the right column. You can adjust the Height to define how tall the image should appear, configure the Corner options to set border-radius for sharp or rounded edges, and manage Spacing to control the padding or margin around the image, ensuring it aligns perfectly within the layout. It's only show in layout 1 and 3.
Left Side Image :
The Left Side Image setting lets you control the appearance and placement of the image displayed on the left side of the layout. You can adjust the Height/Width to resize the image proportionally and use the Position option to align it precisely within the section, ensuring it complements the heading and description for a balanced design.
We hope you enjoy using our hero 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.