HubSpot module documentation
Content Utility Banner
A full-width banner with an image or logo at the top, text in the middle, and a link or CTA at the bottom. Built for the band across the top of a page, though the spacing controls let it work as a narrow strip lower down too.
Install it
- Open the Content Utility Banner listing in the HubSpot Template Marketplace.
- Click Install, and pick the account you want it in.
- In the page editor, open the module list, search for Content Utility Banner, and drag it where you want it.
Installed modules live in your Design Manager under Marketplace. You do not need to edit anything there to use the module.
Set up the content
Everything you type sits under Banner content in the Content tab.
| Field | What it does |
|---|---|
| Banner Image | The image or logo shown above the text. Leave it empty to start the banner with text. Add alt text, which is how screen readers and search engines read the image. |
| Content info | The headline and body copy, as rich text. Heading levels you set here are the ones that end up in the page, so keep one h2 per banner rather than styling a paragraph to look like a heading. |
| CTA or Link | Choose which kind of action sits at the bottom. |
| Content_CTA | The HubSpot CTA to use, when you chose CTA. |
| Link | The destination, when you chose Link. Email addresses are turned into mailto: automatically. |
| Link Label | The text on the link. Defaults to Learn More. |
Style it
Under the Styles tab, everything is grouped under Banner.
Color
- Override Theme Font Color is off by default, so the banner inherits your theme's text colour. Turn it on only when the banner sits on a background your theme colour cannot be read against.
- Content_Color is the text colour used when the override is on.
Background
- Background Image sits behind the whole banner. It is different from Banner Image, which sits inside the content.
- Background Parallax is on by default, so the background drifts as the visitor scrolls. Turn it off for a static background, or if the page already has a lot of movement.
- Overlay and Overlay Color put a translucent wash over the background image. This is what keeps text readable on a busy photograph. If your text is hard to read, this is the control to reach for first.
- Module BG Color gives a flat colour instead of an image.
Spacing
Separate top and bottom padding for Desktop, Tablet and Mobile, so a 100px band on a desktop can be 40px on a phone without cramping.
Content Alignment
Centre, left or right.
Common questions
I placed the banner and nothing seems editable.
Everything is there. Open the Content tab and expand Banner content. In versions before September 2026 that group was labelled Content Controller, which was easy to skim past. If you still see the old label, the module updates the next time you install or update it from the marketplace.
The text is hard to read over my photograph.
Turn Overlay on under Styles, Banner, Background and darken Overlay Color. That is what it is for. Changing the text colour usually fixes one screen size and breaks another.
The banner is too tall on phones.
Use Styles, Banner, Spacing, Mobile. The desktop, tablet and phone paddings are separate and all default to 100px.
Can I use it on a blog post?
Not currently. The module is enabled for site pages and landing pages. Tell us if you need blog support and we will look at it.
Support
Email support@freelopers.com. We answer in English, Monday to Friday, 10:00 to 17:30 CET.
Please include the page URL, your browser and device, and the steps that reproduce the problem. Please do not send passwords or API keys.