Hero Section
A full-width hero with eyebrow, heading, description, and call-to-action buttons. Use a background image or video, an overlay, or a slide carousel.
How to add it
Edit a page, open the module picker, and search for Hero Section. Drop it into a drag-and-drop area, then fill in the fields below. See the theme modules page for how the modules look together.
Fields
Fields are grouped as they appear in the editor. Indented rows belong to the group above them.
| Field | Type | Notes |
|---|---|---|
| Text | Group | |
| Eyebrow Text | Text | Short kicker line shown above the heading, for example: ISO 9001 Certified Machine Shop. Leave blank to hide. |
| Heading | Text | Default: Catchy and Descriptive Headline. |
| Description Text | Text | |
| Call to Action | Group | |
| What type of CTA? | Dropdown | Options: HubSpot CTA, Link, None. Default: none. |
| CTA | Call to action | |
| Link | Link | |
| Button Style | Dropdown | Options: Primary, Secondary, Tertiary. Default: primary. |
| Link Text | Text | Default: Button Text. |
| Additional Buttons | Group | Optional extra buttons shown next to the main call to action, for example a secondary Browse Catalog button. Repeatable. |
| Button Text | Text | Default: Learn More. |
| Button Link | Link | |
| Button Style | Dropdown | Options: Primary, Secondary, Tertiary. Default: secondary. |
| Background | Group | Why do I need two background images? Mobile devices have very narrow screen widths so it is often not ideal to load large background images for these sizes. Using a square cropped image for mobile only will prevent image distortion and slow loading times on mobile devices. |
| Background image - Desktop | Image | |
| Background image - Mobile | Image | 500px x 500px 1000px x 1000px (retina) |
| Parallax Background | Toggle | Note: Parallax background images need to be as tall as the device height to prevent zoomed and blurry images. 500px x 1000px 1000px x 2000px (retina) Default: off. |
| Video (mp4) | File | If a video is added, all image settings above will be disabled. |
| Overlay Color | Color | |
| Hero Style | Dropdown | Static: single background image (default). Crossfade: background images cycle behind the static heading/description. Carousel: full slides, each with its own image, heading, description, and button. Options: Static, Crossfade Background, Carousel. Default: static. |
| Slides | Group | Used by Crossfade (image only) and Carousel (full slide content) styles. Ignored in Static mode. Repeatable. |
| Slide Background Image | Image | |
| Slide Heading | Text | Carousel style only. |
| Slide Eyebrow | Text | Carousel style only. |
| Slide Description | Text | Carousel style only. |
| Slide Button Text | Text | Carousel style only. Leave blank to hide the button on this slide. |
| Slide Button Link | Link | Carousel style only. |
| Carousel Settings | Group | |
| Autoplay? | Toggle | Default: on. |
| Autoplay Speed (seconds) | Number | Default: 6. |
| Transition Style | Dropdown | Options: Fade, Slide. Default: fade. |
| Show Dots? | Toggle | Default: on. |
| Show Arrows? | Toggle | Default: on. |
| Crossfade Settings | Group | |
| Crossfade Speed (seconds) | Number | Default: 6. |
| Text Animation | Group | Animates the eyebrow, heading, description, and button in on load (and on each slide change for Carousel). |
| Enable Animation? | Toggle | Default: off. |
| Animation Style | Dropdown | Options: Fade Up, Fade In, Slide In From Left. Default: fade_up. |
| Animation Duration (seconds) | Number | Default: 0.8. |
| Stagger Delay Between Elements (seconds) | Number | Default: 0.15. |
| Style | Group | |
| CTA Alignment | Text alignment | |
| Settings | Group | |
| Heading text color | Color | |
| Eyebrow Style | Group | Adds a visual treatment around the small eyebrow line above the heading. |
| Style | Dropdown | Options: Plain, Left Border, Badge, Flanking Lines. Default: plain. |
| Eyebrow Accent Color | Color | Text color for Plain/Flanking Lines; border or badge text color for Left Border/Badge. |
| Badge Background Color | Color | Only used when Style is set to Badge. |
| Description text color | Color | |
| Banner padding in pixels - desktop | Number | Default: 100. |
| Banner padding in pixels - mobile | Number | Default: 50. |
| Text alignment | Dropdown | Options: Left, Center, Right. Default: center. |
| Text Max Width | Number | The number you set will be in pixels |
| Text Drop Shadow? | Toggle | Default: off. |
| Constrain Text Width? | Toggle | Default: off. |
| Heading Level | Dropdown | Use Heading 1 when this is the page's main title (default). Choose Heading 2 or 3 when the module appears further down a page that already has a Heading 1, so the page keeps one H1 for SEO. Options: Heading 1, Heading 2, Heading 3. Default: h1. |