SR Two Col 03 & 04

SR Two Col 03 & 04 are perfect modules for combining text with a compelling image, GIF, or video.

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

You can edit the following items within the design settings section:

• Layout: page or full-width
• Container width: minimum, narrow, wide, maximum
• Top-bottom padding: default, no padding, small padding, large padding, custom padding
• Background option: image, video, color, custom, gradient
• Text align: right, left, center, justified
• Text color: auto, primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, custom
• Border styles: none, solid, dotted, dashed, double
• Responsive settings:
  • Tablet: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)
  • Mobile: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)





Module Settings

For SR Two Col 03 & 04, most settings are focused on the header(s), visuals, text, and CTA.

Full-width header and content

The first settings you see when editing SR Two Col 03 & 04 are for a full-width content section above the two columns. Here you can add a header, designate its style and display size, and add rich text.

You don't have to use this if you don't want to. Most instances we've seen do not choose to add text in these fields.

Editing the full-width section above the two columns in SR Two Col 04.



Editing the left and right columns in SR Two Col 03 & 04

Customizing the left and right columns in these two modules focuses on the visual, text, and CTA. You can also set column widths and add tablet- and mobile-specific breakpoints to further ensure you're delivering a great experience for non-desktop visitors.



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.