SR Gallery 01
This module renders a heading, optional rich text description, and a fixed asymmetric collage of four images with color overlays and a lightbox click to enlarge.
Each image sits in a differently sized column, creating a varied, asymmetric grid rather than an even one. Pick this over SR Gallery 02 when you want an uneven, staggered visual layout instead of a uniform grid; it needs exactly four images to fill all slots correctly.
Use cases
- Asymmetric photo collage
- Product shots grid
- Lifestyle image showcase
- Team culture photo wall
- Portfolio highlight grid
- Visual homepage break
Where it fits
- Included with: PRO
- Page sections: Gallery, Media, Content
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. |
| Background Video Tablet | File | Repeats: min 0, default 1. This background video will only be used on tablet devices. |
| Background Video Mobile | File | Repeats: min 0, default 1. This background video will only be used on mobile devices. |
| 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. |
Heading Repeats: min 0, default 0.
| 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 |
Image One › Image
| Field | Type | Notes |
|---|---|---|
| Image | Image | |
| Overlay | Color |
Image Two › Image
| Field | Type | Notes |
|---|---|---|
| Image | Image | |
| Overlay | Color |
Image Three › Image
| Field | Type | Notes |
|---|---|---|
| Image | Image | |
| Overlay | Color |
Image Four › Image
| Field | Type | Notes |
|---|---|---|
| Image | Image | |
| Overlay | Color |
Style tab
Change log
| Version | Change |
|---|---|
| 2.3.0 | Accessibility improvements |
| 2.2.0 | Added responsive background options |
| 2.1.1 | Increase default image size |
| 2.1.0 | New lightbox library |
SR Element Video
This module renders a single video from one of three sources: an uploaded HTML5 video file, an embed code or oEmbed URL, or a HubSpot-hosted video, with optional poster image or oEmbed thumbnail and playback controls for autoplay, loop, mute and controls visibility.
SR Gallery 02
This module renders an optional heading, rich text description, and up to six gallery images, each with its own color overlay and per-image column width, breakpoint, offset, and order settings.