How to Build a Full-Width Banner in Hubspot

Designing a clean, modern page layout in Hubspot often starts with a strong full-width banner that sets the visual tone and drives clicks. This guide walks you through creating a flexible banner module you can reuse on any page template.

Below, you will learn how to use images, CTAs, and rich text, and how to combine them into a single reusable section. The steps are based on HubSpot’s design tools so you can customize your own site without custom code.

Why Use a Full-Width Banner in Hubspot

A full-width banner gives your top-of-page content maximum impact. When implemented correctly in Hubspot templates, it helps you:

Highlight a primary promotion or announcement
Create consistent branding across multiple pages
Increase clicks on key calls-to-action
Quickly update hero content without touching code

The process centers on building a dedicated banner module and then inserting it into your templates or pages.

Core Layout Options for a Hubspot Full-Width Banner

There are three main layout approaches you can use in the design manager when building a banner in Hubspot:

An image-only banner
An image with a CTA overlay
An image with both rich text and a CTA overlay

Each option builds on the previous one, so you can start simple and add complexity as needed.

Option 1: Image-Only Banner in Hubspot

This option creates a clean, full-width image banner that can be reused across templates.

Step-by-step: Create the image module

Open the design manager in your Hubspot portal.
Create a new custom module and name it something like Full Width Banner Image.
Add an Image field to the module.
Set the image field to allow content editors to upload or choose any image from file manager.
In the module’s markup, output the image so it stretches across the full container width using your theme’s CSS classes.

Publish the module, then add it to your page template or drag it into a page editor to test how it responds across devices.

Tips for image-only banners

Use high-resolution images optimized for web performance.
Keep file sizes small enough for fast loading in Hubspot.
Choose imagery that leaves space for future text overlays if needed.

Option 2: Hubspot Banner with Image and CTA

This option adds a clickable button overlay, making the banner an immediate conversion element inside Hubspot pages.

Step-by-step: Add a CTA field

Duplicate your image-only banner module in Hubspot, or create a new module and start with the same image setup.
Add a CTA field to the module so users can select any existing call-to-action.
In the module markup, place the CTA markup inside a container positioned over the image (for example, using absolutely positioned elements or flexbox within your CSS).
Ensure the CTA remains readable by adding background overlays or padding where needed.
Publish the updated module and test it in a staging page.

Best practices for image + CTA banners

Use contrasting colors between the image and CTA button.
Keep the CTA label short and action-oriented.
Check accessibility by verifying color contrast and font size.

Option 3: Hubspot Banner with Image, Text, and CTA

The most flexible option is a banner that combines an image background, rich text, and a CTA. This layout lets content editors update headlines and supporting copy directly in Hubspot.

Step-by-step: Add rich text content

In the design manager, start with your image + CTA module or create a fresh module.
Add a Rich text field to the module, labeling it something like Banner Content.
In the module markup, output the rich text area alongside the CTA within a content container that sits on top of the background image.
Use your stylesheet to control text alignment, spacing, and responsive behavior.
Publish and test on different screen sizes to ensure the text wraps nicely and does not hide critical parts of the image.

Content tips for Hubspot text banners

Use a short, clear headline and a single supporting sentence.
Keep the total text block light for better readability.
Align the message directly with your CTA goal.

Creating a Cloneable Hubspot Template with the Banner

Once your banner module is working, the next step is to embed it in a template that can be reused across multiple pages in Hubspot.

How to embed the banner module

Open an existing page template or create a new one in the design manager.
Insert your full-width banner module at the top of the template.
Ensure the row or section is set to span the full width of the page layout.
Save your changes and publish the template.

By using a template-based approach, any new page that uses this layout will automatically include the banner at the top.

Make the banner optional in Hubspot

If you want flexibility across pages, configure the template so editors can:

Toggle the banner module on or off
Swap the module for a different version
Update the image, text, and CTA directly in the page editor

This keeps your design consistent while still giving marketing teams control over their content.

Managing and Updating Your Hubspot Banner Over Time

After your banner is live, keep it fresh and aligned with your campaigns.

Quick update workflow

Open the page that uses your banner module in the Hubspot editor.
Change the image, headline, or CTA in the module fields.
Preview the page to confirm spacing and readability.
Publish the updates and verify on desktop and mobile.

This modular approach avoids editing code and keeps updates simple for non-technical users.

Additional Resources for Hubspot Banner Design

To see the original reference instructions and visuals, review the official resource here: Full-width banner tutorial.

If you need broader strategy support around templates, conversion paths, and implementation, you can also explore consulting options such as Consultevo for deeper guidance on building scalable Hubspot experiences.

By combining reusable modules, clear content fields, and thoughtful visual design, you can create a full-width banner in Hubspot that is easy to manage, visually consistent, and focused on driving results.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`