SR Two Col Slider 01
This module renders a slider of slides, each slide split into two flexible columns that hold an image, video, or lottie animation plus a heading, rich text, and CTA buttons.
Pick it over the static two-column and three-column modules when you need to rotate through multiple two-column message or media pairs instead of showing them all at once, with optional dots, arrows, fade transition, autoplay, and a progress bar. Supply at least two slides since a single slide skips the slider mechanics and just renders as a plain two-column block.
Use cases
- Rotating two-column feature showcase
- Before and after image slider
- Product benefit carousel with media
- Testimonial and image pairs on rotation
- Alternating media and copy slideshow
- Multi-message hero slider
Where it fits
- Included with: PRO
- Page sections: Hero, Features, Media
Editable fields
Content tab
| Field | Type | Notes |
|---|---|---|
| Enabled | Boolean | |
| ID | Text | Assign a ID to the module. |
| Class | Text | Assign a CLASS to the module. |
| Dots | Boolean | |
| Arrows | Boolean | |
| Fade | Boolean | |
| Autoplay | Boolean | |
| Auto Scroll | Boolean | Continuously scrolls the carousel. |
| Scroll Speed | Number | |
| Autoplay Speed | Number | Set to 0 for continuous autoplay. |
| Progress Bar | Boolean | |
| Progress Bar Color | Color | |
| Slider Vertical Align | Choice | Options: Auto, Top, Center, Bottom, Stretch. |
Slides Repeats: default 2.
| Field | Type | Notes |
|---|---|---|
| Column Vertical Align | Choice | Options: Auto, Top, Center, Bottom, Stretch. |
| Slide Class | Text | Assign a CLASS to the slide. |
Slides › Design Setting
| Field | Type | Notes |
|---|---|---|
| Layout | Choice | Options: Default, Small, Large, Full Width. |
| Container Width | Choice | Maximum: 100% of the container. Wide: 83% of the container. Narrow: 66% of the container. Minimum: 50% of the container. Options: Minimum, Narrow, Wide, Maximum. |
| Background Option | Choice | Options: Image, Video, Color, Custom. |
| Background Video | File | Repeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Background Image | Image | Source for background image or before the video loads. |
| Background Overlay Color | Color | Overlay color on top of the image/video. |
| Background Color | Choice | 14 options, including Primary, Secondary, Tertiary. |
| Background Color | Color | For transparent images or before the image/video loads. |
| Text Align | Choice | Options: Auto, Left, Center, Right. |
| Text Color | Choice | Set to Auto to use the default text color. Set to Custom to set a custom text color. 15 options, including Auto, Primary, Secondary. |
| Text Color | Color |
Slides › Design Setting › Features Styles
| Field | Type | Notes |
|---|---|---|
| Style | Choice | Options: Grid, List. |
| Item Width | Number | |
| Gap | Number | |
| Icon Alignment | Choice | Options: Top, Center, Bottom. |
Slides › Column Repeats: default 2.
| Field | Type | Notes |
|---|---|---|
| Media Type | Choice | Options: Image, Video, Lottie, None. |
| Media Padding | Boolean | Padding around the media item. |
| Image | Image | |
| Image Corner Radius | Number | |
| Image Link | Link | |
| Lottie Embed Code | Text | How to add LottieFiles. |
| Content | Rich text | |
| Lead Text | Boolean | Turn on to make the content text larger. |
| Text Align | Choice | Options: Auto, Left, Center, Right. |
| Text Color | Choice | 14 options, including Auto, Primary, Secondary. |
| Custom Column Size | Boolean | |
| CSS Class | Text | Assign a CLASS to the column. |
Slides › Column › Video
| Field | Type | Notes |
|---|---|---|
| Video type | Choice | Options: Embed, HTML Video, HubSpot Video. |
| HubSpot Video | Video player | |
| Embed | Embed | |
| Custom Thumbnail | Image | |
| Video File | File | Repeats: default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers. |
| Video Poster | Image | |
| Show Controls | Boolean | |
| Autoplay | Boolean | |
| Loop | Boolean | |
| Muted | Boolean | |
| Video Accent | Choice | Add a design accent behind your video. Options: None, Design 1, Design 2, Design 3. |
| Video Accent Color | Choice | 11 options, including Primary, Secondary, Tertiary. |
| Custom Accent Color | Color |
Slides › Column › Video › Style Options
| Field | Type | Notes |
|---|---|---|
| Play button color | Color |
Slides › Column › Video › Placeholder text
| Field | Type | Notes |
|---|---|---|
| Video placeholder title | Text | |
| Video placeholder description | Text |
Slides › Column › 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 |
Slides › Column › Features Repeats: default 0.
| Field | Type | Notes |
|---|---|---|
| Description | Rich text | |
| Lead Text | Boolean | Turn on to make the Description text larger. |
Slides › Column › Features › Icon
| Field | Type | Notes |
|---|---|---|
| Icon Type | Choice | Options: Icon, Image, Custom, None. |
| Image | Image | |
| Icon | Icon | |
| Icon Color | Color | |
| Icon Background | Color | Set opacity to 0 to disable the background. |
| HTML | Text | |
| Icon Size | Number | |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Slides › Column › Features › Heading Repeats: 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 |
Slides › Column › CTA Repeats: min 0, default 1.
| 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. |
| Add icon | Boolean |
Slides › Column › CTA › Default
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border | Color |
Slides › Column › CTA › Hover
| Field | Type | Notes |
|---|---|---|
| Background | Color | |
| Text | Color | |
| Border Color | Color |
Slides › Column › CTA › Icon
| Field | Type | Notes |
|---|---|---|
| Icon | Icon | |
| Position | Choice | Options: Left, Right. |
| Purpose | Choice | The purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic. |
Slides › Column › Column Size Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.
| Field | Type | Notes |
|---|---|---|
| Column Breakpoint | Choice | Options: None, Mobile, Tablet, Desktop, XL. |
| Column Width | Choice | 12 options, including 1, 2, 3. |
| Column Offset | Choice | 13 options, including 0, 1, 2. |
| Column Order | Number |
Style tab
Change log
| Version | Change |
|---|---|
| 2.0.2 | Fixed slider arrows styles |
| 2.0.1 | Fixed column text color bug |
| 2.0.0 | Stardust update |
| 1.2.1 | Column breakpoint fix |
| 1.2.0 | Accessibility improvements |
| 1.1.2 | Updated lottie js |
| 1.1.1 | Included slider styles dependecies |
| 1.1.0 | Added slider styles |
| 1.0.1 | Added ID and class field to the module |
| 1.0.0 | Added module |
SR Two Col Gallery 02
This module renders a two column layout with a heading, rich text description, optional CTA button, and a photo gallery of one to four images arranged in a fixed collage pattern on the right side.
SR Two Col TOC 01
This module renders a sticky left-hand table of contents next to a right-hand content area of up to 7 anchor-linked sections, where each section holds one content block such as rich text, an image, a video, a quote, a CTA, or raw HTML.