SR Two Col 03 & 04 are perfect modules for combining text with a compelling image, GIF, or video that supports.
Module Overview - SR Two Col 03 & SR Two Col 04
These two modules feature a combination of headers, body text, visuals, and optional CTAs.
SR Two Col 03 & 04 can be used in combination with each other to create a left-right visual pattern, or two break up text-heavy pages with impactful visuals.
An ideal use case for SR Two Col 03 & 04 is for product pages. The supporting visuals can be used to show a specific feature or process with the corresponding text to go with it.
Module Settings Walkthrough
Design Settings
- ID
- Class
- Layout: page or full-width
- Container Width
- Minimum
- Narrow
- Wide
- Maximum
- Top Bottom Padding:
- Use default values
- No padding
- Small padding
- Large padding
- Custom padding
- Border Top & Border Bottom (checkboxes)
- Background Option
- Color: primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, none
- Image: upload or select an image
- Custom: enter a HEX value and choose the opacity level.
- Gradient: enter HEX values for a "from" and "to" color.
Module Settings
For SR Two Col 03 & 04, most settings are focused on the header(s), visuals, text, and CTA. Watch the quick video below to get the full rundown.
How to Use SR Two Col 03 & 04 - Live Examples
Arcuity's homepage - the cool thing here is the use of the short looped MP4s as the visuals opposite of the text.
Capsim's What We Do page - SR Two Col 03 & 04 create a left-right-left pattern showcasing aspects of the product and accompanying text.
Qualio's Medical Device Solutions page - this is an ideal example of using the two-column layout with great product visuals and corresponding copy to show and tell visitors about your product.