Multi Column Banner - Simple¶
A two-column hero: a content-rich left column (tag, caption, headline, description, feature list, buttons, video button, stats, trusted logos, social proof) paired with a right column that holds an image, video, HubSpot video, or a form. Best for: page hero headers, lead-gen banners (text + form), product intros (text + image/video), and split feature sections.
📷 Hero image
Target file: assets/img/multi-column-banner-simple/hero.webp
A two-column hero captured edge to edge. The left column stacks a tag pill, a bold headline with one word highlighted in the Secondary color, a short paragraph, and two buttons (a solid Primary button beside a lighter secondary button); the right column shows a rounded product image. Sit both columns over a Light or dark background. Captured at desktop width so the split is clear.
At a glance¶
Hero Two-column Lead-gen
- What it does: renders a responsive two-column banner. The left column stacks any mix of optional blocks (tag, caption, title, description, feature list, buttons, video button, stats row, trusted logos, social proof); the right column shows an image, a video, a HubSpot video, a form, or nothing (which collapses the banner to one column).
- Best used for: a text-plus-form lead-gen hero, a classic text-plus-image split, a product intro with credibility stats or logos, or a single-column centered headline.
- Not the right fit if: you need slides that rotate through several message + media pairs (use Multi Column Banner - Slider), a single centered hero with no media column (use Single Column Banner - Simple), or a form-first layout (use Banner with Form).
- 🔗 Live demo: (add demo link)
Add it to your page¶
- In the HubSpot page editor, click Add and search for Multi Column Banner - Simple.
- Drag it to the top of your page.
- Open Click to update content › Left column and type your Title, then enable description, buttons, and any extras you want.
- Open Right column and set Right column display type to
image,video,form, orhubspot_video_embed(ornonefor a single-column hero). - On the Style tab, set the column split under Layout settings › Width, then style each element.
Design recipes¶
Each recipe is a look plus the exact fields to reproduce it.
Content on the left, a HubSpot form on the right.
📷 Result
Target file: recipe-text-form-lead-gen.webp
The two-column hero with copy and buttons on the left and a HubSpot form card on the right, split into two equal columns. Capture the full width so both columns are visible.
| Field | Set to |
|---|---|
| Right column › Right column display type | form |
| Right column › Form | select your form |
| Layout settings › Width › Column width | 1fr 1fr |
| Form › Form style › Style | form-2 |
A classic hero with an image beside the copy.
📷 Result
Target file: recipe-text-image-split.webp
The hero with copy on the left and a rounded square image on the right. Show the rounded corners and the even split at desktop width.
| Field | Set to |
|---|---|
| Right column › Right column display type | image |
| Right column - Image › Ratio of image | aspect-1by1 |
| Right column - Image › Round corner of image | round-xl |
| Layout settings › Width › Arrangement | left_right |
Content with a credibility stat grid and an avatar cluster.
📷 Result
Target file: recipe-stats-social-proof.webp
The left column showing a three-column stat row with big numbers in the Primary color, plus an overlapping avatar cluster as social proof below. Capture at desktop width with the stats and avatars in frame.
| Field | Set to |
|---|---|
| Left column › Add stats row | on |
| Left column › Add social proof row | on |
| Layout settings › Stats layout settings › Columns › Desktop | 3 |
| Stats › Stat › Text color | Primary |
No media column, everything centered.
📷 Result
Target file: recipe-single-column-centered-hero.webp
The banner collapsed to a single centered column - title, description, and a centered button row - with no media on the side. Capture the whole hero at desktop width.
| Field | Set to |
|---|---|
| Right column › Right column display type | none |
| Layout settings › Alignment › Title | center |
| Layout settings › Alignment › Button | center |
"I want to..." quick reference¶
| Goal | Setting |
|---|---|
| Lead-gen banner (text + form) | Right column › Right column display type = form + select form |
| Image beside the text | Right column › Display type = image |
| Single-column centered hero | Right column › Display type = none + alignment = center |
| Swap column order | Layout settings › Width › Arrangement = right_left |
| Change the column split | Layout settings › Width › Column width (e.g. 7fr 3fr) |
| Stack columns earlier | Layout settings › Width › Responsive breakpoint for stacking = mini_tablet |
| Highlight a word in the title | Title › Highlight style + wrap the word in <span> |
| Outlined / image-filled title | Title › Text style = stroke / image_text |
| Full-screen hero | Layout settings › Make section in full viewport |
| Add a play-video button | Left column › Video button type (youtube / vimeo / hubspot) |
| Add credibility stats | Left column › Add stats row |
| Add a logo strip | Left column › Add trusted logos row + upload logos |
| Add avatar social proof | Left column › Add social proof row + avatars |
| Inset rounded banner card | Outer box › Update settings + round corner + shadow |
| Glow background | Section background › Type = radial gradient, or Style › Add radial glow |
Field reference¶
The editor is organized into a Content tab and a Style tab. Full field lists are grouped exactly as they appear in HubSpot. (373 fields total - expand each group as needed.)
Content tab¶
Section background settings
| Field | Type | Options | Default |
|---|---|---|---|
| Type | choice | none / color / gradient / image / video / radial_gradient | none |
| Upload background image | image | - | - |
| Video | file | - | - |
Click to update content - Left column
| Field | Type | Default |
|---|---|---|
| Add caption title / Caption title | boolean / text | off |
| Add tag / Tag | boolean / text | off |
| Title | text | - |
| Add description / Description | boolean / richtext | off |
| Add features list / Features list | boolean / repeater | off |
| Add button / Buttons | boolean / repeater | off |
| Add stats row / Stats row | boolean / repeater | off |
| Add trusted logos row / Trusted logos | boolean / repeater | off |
| Add social proof row / Avatars | boolean / repeater | off |
| Video button type | choice | no_video |
Buttons (per button): Type (link / cta / drag_to_section), Style (btn-1 to btn-8), Title, optional Icon.
Click to update content - Right column
| Field | Type | Options | Default |
|---|---|---|---|
| Right column display type | choice | none / image / video / form / hubspot_video_embed | none |
| Form | form | - | - |
| Image | image | - | - |
| Upload a video | file | - | - |
| HubSpot video | videoplayer | - | - |
Developer use only
Add custom css here: per-module CSS injection field.
Style tab¶
Color scheme
| Field | Options | Default |
|---|---|---|
| Color scheme | light / dark | light |
Drives the section's surface and text tokens. Set the background Type to none (shown as "Default (scheme)") to let the scheme supply the background colour.
Section background settings
- Color / Gradient: token color (default
none) or token gradient (defaultbg-gradient-1). - Image / Video: overlay style (
none/bg-overlay-1tobg-overlay-6) and focal position. - Radial gradient: direction plus a fade color and a background color.
- Blur: toggle + amount. Parallax: toggle + scale + speed.
- Radial glow (x2): two soft glows, each with a color (default Secondary / Tertiary), one of 9 positions, size, and opacity.
Section divider settings
Divider type: none / shape / border / shadow.
- Border divider: from top/bottom/both, width, color (default Tertiary).
- Shadow divider: regular / light / dark / custom shadow with x/y/blur/spread/color.
- Shape divider: 25 shapes, top/bottom/both, flip/invert, color or gradient, responsive heights.
Section spacing settings
| Field | Options | Default |
|---|---|---|
| Top | top-y-0 to top-4xl | top-l |
| Bottom | bottom-y-0 to bottom-4xl | bottom-l |
| Left | left-x-0 / left-m / left-l / left-xl | left-m |
| Right | right-x-0 / right-m / right-l / right-xl | right-m |
Top and Bottom also accept custom, which reveals Custom top / Custom bottom number fields for desktop, tablet, and mobile (defaults 80 / 60 / 40).
Layout settings
- Width: column split (default
1fr 1fr), stacking breakpoint, arrangement (left_right/right_left), and column vertical alignment. - Gap between column: separate desktop / tablet / mobile gap.
- Section wrapper container and Inner content container: width + alignment control.
- Alignment: independent left/center/right for tag, caption, title, description, button, video button, stats, logos, and social proof.
- Maximum content width for element: per-element width cap + alignment.
- Stats / Trusted logos layout settings: columns and gaps per breakpoint.
- Make section in full viewport: vertical alignment + mobile height behavior.
Preset Settings (key groups)
Each of these has its own typography, color, and spacing fields:
- Title: show as h1-h6 or custom size (default
h1, 105 / 70 / 55), color / gradient, highlight style, and text style (none/stroke/image_text). - Caption title, Tag, Description, Features list, Button, Video button.
- Stats: number typography (token/gradient color, letter spacing) + label typography.
- Trusted logos: intro label + logo width, alignment, idle opacity, and hover effect (
remove_grayscale/increase_scale). - Social proof: avatar size, overlap, border, and label styling.
Right column media & form
- Right column - Image / Video: ratio or custom responsive height, round corner (default
round-xl), and shadow. - Form: style preset (
form-1/form-2/form-3, defaultform-2), background, spacing, round corner, border, shadow, and full-width submit option.
Outer box
Optional wrapper around the hero: responsive Spacing, Round corner (default --round-xl), and Shadow (none / light / dark / regular).
Tips & gotchas¶
One module, single or split
Set Right column display type to none and the banner collapses to a single centered column, so you do not need a separate module for a text-only hero.
Column split needs a right column
Column width and Arrangement apply only when a right column is shown. With display type none they have no effect.
Stack earlier on tablets
If the two columns feel tight on tablets, set Responsive breakpoint for stacking to mini_tablet so they stack sooner.
Related modules¶
- Multi Column Banner - Slider: the same split layout as a synced content + media carousel.
- Single Column Banner - Simple: a single centered hero with no media column.
- Banner with Form: a hero built specifically around a lead-capture form.