website logo
Login
⌘K
Sprocket Rocket Help Center
First Steps
Setup
HubSpot Permissions
Installing Sprocket Rocket
Adding a Custom Installation
Page Builder
Creating a Page
Saving a Layout
Using Custom Modules
Custom Theme Previews
Templates
Website Templates
Landing Page Templates
System Templates
Blog Templates
Modules
Installing Modules
Updating Modules
Creating Global Modules
Navigation
Hero
Footer
Columns
Tabs
Offers
Cards
Bling
Elements
Theme
Theme Styles
Global Site Header and Footer
Custom Fonts
Creating a child theme
Custom CSS
Users
Adding Users
FAQ
How can I change my page theme/template?
Can I upgrade my Sprocket Rocket Pro Theme to the new version?
Why are some modules on my Sprocket Rocket App locked?
How to customize a column size
What's the difference between Sprocket Rocket Pro and Sprocket Rocket Theme?
Do I need a HubSpot account?
jQuery version security issue
How to add users to your HubSpot Portal
Misc
Branding Setup
Marketplace Theme
Docs powered by archbee 

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

Available on:

  • Sprocket Rocket Pro

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)
Document image



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 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.

Document image

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.

Updated 30 Dec 2022
Did this page help you?
Yes
No
UP NEXT
SR Two Col 05
Docs powered by archbee 
TABLE OF CONTENTS
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
Module Settings Walkthrough
Module Settings
How to Use SR Two Col 03 & 04 - Live Examples