Modern Hero Banner

The Modern Hero Banner Module helps you make a powerful first impression with bold, responsive, and customizable hero sections. Designed for flexibility, it includes three unique layouts—growth-focused, people-driven, and digital showcase—giving you the freedom to present your brand exactly the way you want.

Easily update headings, descriptions, images, and call-to-action buttons directly inside HubSpot, without touching code. With mobile-friendly design, adjustable spacing, and complete style control, this module ensures your hero banner always looks sharp and performs seamlessly across all devices.

Whether you’re launching a campaign, showcasing services, or highlighting customer success, the Modern Hero Banner delivers a sleek, high-converting hero section that captures attention and drives results.

Key Features of a Modern Hero Banner Module :

• Multiple Layouts – Choose from 3 distinct hero banner styles.

• Responsive Design – Optimized for all screen sizes, ensuring a flawless experience on desktop, tablet, and mobile.

• Flexible Content Options – Easily update headings, descriptions, and CTAs directly within HubSpot.

• Customizable Visuals – Add images, graphics, or mockups to match your brand identity and campaign goals.

• Engaging Call-to-Actions – Drive conversions with customizable CTA buttons tailored to your business objectives.

• Design Flexibility – Adjust spacing, alignment, and background colors for a unique, on-brand look.

• User-Friendly Editing – No coding required—built for marketers to launch modern hero sections quickly.

• Optimized Performance – Lightweight and SEO-friendly to ensure speed and visibility.

• Versatile Use Cases – Perfect for homepages, landing pages, service showcases, or campaign launches.

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

Module Defaults Options: 

Layout ID :

Layout Options :  

Options:

• Layout 1 – A design featuring strong headlines, supporting visuals, and conversion-ready CTAs.

• Layout 2 – A layout that highlights customer stories, success metrics, and authentic brand connections.

• Layout 3 – A layout ideal for product mockups, services, or campaign highlights with modern presentation.

• Heading Enable
  Toggle the main heading on or off. Perfect when you want a clean hero layout without a large title.

• Enter Heading
  Add and customize the main heading text. Use this space to deliver a strong, eye-catching message.

• Description Enable
  Show or hide the supporting description under your heading. Ideal if you prefer a minimalist design.

• Enter Description
  Add descriptive text below the heading. Great for explaining your value or offering in 1–2 concise lines.

• CTA Show/Hide
  Easily enable or disable the call-to-action button. Useful if you want a hero section that’s informational only.

• CTA
  Customize the CTA text, link, and style. A powerful way to drive visitors toward conversions.

• Left Side Element Enable Layout 1
  Toggle supporting visuals on the left side of the banner. Helpful for adding icons, profile cards, or badges.

• Left Side Element Layout 1
  Upload and manage images or graphics on the left side. Great for showcasing testimonials or team highlights.

• Right Side Elements Enable Layout 1
  Show or hide additional visuals on the right side. Keeps the layout flexible for different campaign needs.

• Right Side Elements Layout 1
  Add images, charts, or mockups to the right side of the banner. Perfect for highlighting growth stats, services, or product previews.

• Right Column Content Layout 2

  • Contents Enable
    Toggle the right column content on or off. Useful when you want a clean hero without extra details.

     

  • Value Text
    Add a bold value number (e.g., “28K”). Great for showcasing achievements, stats, or milestones.

     

  • Sub Text
    Include supporting text under the value. Perfect for explaining what the number represents (e.g., “Happy Customers”).

     

  • Profile Enable
    Turn profile images on or off in the right column. Helpful for adding authenticity and human connection.

     

  • Profile Items
    Upload and manage multiple profile images. Ideal for highlighting teams, customers, or community members.

Module Style Options: 

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 Modern Hero Banner 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 : 

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

Image Column Setting (Layout 2 & 3):

• Image Width
  Adjust the width of the image to fit your design. Helps maintain balance between visuals and text.
• Border
  Add or customize borders around the image. Useful for creating separation or emphasis.
• Spacing
  Control the margin and padding around the image. Ensures proper alignment and breathing space in the layout.
• Border Radius
  Round the corners of the image as needed. Perfect for creating smooth, modern, or card-style visuals.

Elements Image Setting (Layout 1) :

Choose to place the image element at the top left or top right of the banner. Offers flexibility to align visuals with your content flow and overall design style.

Right Col Content/Profiles Setting (Layout 2) :

You can customize the right column content and profile background (border, corners, spacing) and adjust font size, color, line height, and spacing for values and subtext.

We hope you enjoy using our modern hero banner 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.