SR Hero Parallax 01
This hero renders a single centered content block with a heading, rich text description, and up to two CTA buttons layered over a full-bleed image or video background, with configurable height.
Pick it over the other hero modules when the background needs to visibly drift or scroll as the visitor moves down the page, since it has a dedicated parallax toggle that other single-column heroes like sr-hero-04 do not emphasize the same way. It expects a background image or video and works best at medium or large height so the parallax motion is noticeable.
Use cases
- Scrolling background hero banner
- Depth effect landing page intro
- Full-bleed video hero with buttons
- Homepage top banner with moving background
- Campaign landing page hero
Where it fits
- Included with: PRO
- Page sections: Hero
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
| Height | Choice | Set to Auto to use the module's top and bottom padding values in the style tab. Options: Auto, Small, Medium, Large, Full. |
| Parallax | Boolean |
Heading Repeats: min 0, default 1.
| Field | Type | Notes |
|---|---|---|
| Heading | Text | |
| Size | Choice | HTML heading size. Options: H1, H2, H3, H4, H5, H6, P. |
| Display Size | Choice | Size that heading is displayed at. 12 options, including Auto, H1, H2. |
| Color | Choice | 15 options, including Auto, Primary, Secondary. |
| Color | Color | |
| Align | Choice | Options: Auto, Left, Center, Right. |
| CSS Class | Text |
CTA Repeats: min 0, default 2.
| Field | Type | Notes |
|---|---|---|
| CTA Type | Choice | Options: HubSpot CTA, HubSpot Payment, Button, Modal. |
| CTA Style | Choice | 26 options, including Primary, Secondary, Tertiary. |
| CTA | CTA | |
| Button Text | Text | |
| Modal Target | Text | |
| Link | Link | |
| Payment link | Payment | |
| Checkout behavior | Choice | Options: Open in a new tab, Sliding overlay. |
| CTA Size | Choice | Options: Small, Default, Large. |
Style tab
Change log
| Version | Change |
|---|---|
| 6.0.0 | Stardust update |
| 5.3.0 | Accessibility improvements |
| 5.2.0 | Added responsive background options |
| 5.1.1 | Added new Link options |
| 5.1.1 | Added conditionals to not show the top bottom padding when height option is selected |
| 5.1.0 | Remove jQuery |
| 5.0.2 | Minor Padding issue fixes |
| 5.0.1 | Fixed text disappearing on module load before scrolling |
SR Hero Form 01
This hero renders a two-column layout with a heading, rich text description, and optional CTA buttons on the left, paired with an embedded HubSpot form on the right that can carry its own heading and description above the fields.
SR Hero Two Col 01
This hero renders two independent side-by-side columns, each with its own media (image or video), heading, richtext description, and CTA buttons, with the left column holding one CTA and the right column holding two.