---
title: Two Column Hero Banner
description: Two Column Hero Banner
---

# Two Column Hero Banner

[Overview](https://www.struto.io/strutocx-theme-documentation)

[Getting Started](https://www.struto.io/strutocx-theme-documentation/getting-started-cx)

[Theme Settings](https://www.struto.io/strutocx-theme-documentation/theme-settings-cx)

[Global Header](https://www.struto.io/strutocx-theme-documentation/global-elements-cx-header)

[Global Footer](https://www.struto.io/strutocx-theme-documentation/global-elements-cx-footer)

Modules

- [CTA Banner](https://www.struto.io/strutocx-theme-documentation/modules-cta-banner)
- [Hero Banner](https://www.struto.io/strutocx-theme-documentation/modules-hero-banner)
- [Two Column Hero Banner](https://www.struto.io/strutocx-theme-documentation/modules-two-column-hero-banner)
- [Featured 3 Column Icon & Text](https://www.struto.io/strutocx-theme-documentation/modules-featured-3-column-icon-text)
- [Featured Clients Slider](https://www.struto.io/strutocx-theme-documentation/modules-featured-clients-slider)
- [Statistics](https://www.struto.io/strutocx-theme-documentation/modules-statistics)
- [Standard Video](https://www.struto.io/strutocx-theme-documentation/modules-standard-video)
- [Standard Cards Two Column Content](https://www.struto.io/strutocx-theme-documentation/modules-standard-cards-two-column-content)
- [Standard Description](https://www.struto.io/strutocx-theme-documentation/modules-standard-description)

Sections

[Support](https://www.struto.io/contact-us)

[Licence](https://www.struto.io/strutocx-theme-documentation/licence-agreement-cx)

#### Two Column Hero Banner

![two-column-hero-banner](https://www.struto.io/hs-fs/hubfs/strutoCX/sections/two-column-hero-banner.png?width=840&height=429&name=two-column-hero-banner.png)

###### Module Description:

The Two Column Hero Banner module offers a hero section split into two columns, typically combining text with an image or video, providing a dynamic introduction to your page.

 

 

###### Module Resources:

| Module Resources |   |
| --- | --- |
| CSS | two-column-hero-banner.css (located in /modules/two-column-hero-banner-module) |
| JS | None required for this module. |

 

 

###### Module Demo:

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Anders Grové",
    "url" : "https://www.struto.io/strutocx-theme-documentation/author/anders-grové"
  },
  "dateModified" : "2025-05-19T14:45:58.342Z",
  "datePublished" : "2025-03-28T14:51:32.000Z",
  "headline" : "Two Column Hero Banner",
  "mainEntityOfPage" : {
    "@id" : "https://www.struto.io/strutocx-theme-documentation/modules-two-column-hero-banner",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.struto.io/hubfs/Struto%20Microsite/Images/Struto-logo-grey-expanded_7june2019.svg"
    },
    "name" : "Struto"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "VideoObject",
  "contentUrl" : "https://stream.mux.com/T3cbgxRge202V2oS1W4TRUGl01ms02bMutmliZevSy7KOM/capped-1080p.mp4",
  "dateModified" : "2025-05-19T11:31:24.168Z",
  "duration" : "PT2M21S",
  "height" : 720,
  "name" : "Two Column Hero Banner - edited",
  "thumbnailUrl" : "https://165931.fs1.hubspotusercontent-na1.net/hubfs/165931/Two%20Column%20Hero%20Banner%20-%20edited.mp4/medium.jpg?t=1747654284168",
  "uploadDate" : "2025-05-19T11:28:31.905Z",
  "width" : 1280
}
```