SR Hero Two Col 01
SR Hero Two Col 01 is a great header for your pages.
Module Overview - SR Hero Two Col 01
This module is a combination of headers, subheaders, cards, images, and buttons
An ideal use case for SR Hero Two Col 01 is showcasing products on your pages with a CTA to convert your visitors.
Module Settings Walkthrough
You can edit the following items within the Styles tab:
- Layout: page or full-width
- Container width: minimum, narrow, wide, maximum
- Grid Margins
You can edit the following items within the Design Settings tab in each of the columns:
- Background option: image, video, color, custom, gradient
- Column Size- Documentation
For SR Hero Two Col 01, most settings are focused on the header(s), body description, and feature cards.
Setting custom classes and ID
At the very top of the content section, you have the ability to add custom classes and an ID to the module.
Getting into the SR Hero Two Col 01 Module, there are two columns. The Left Column and the Right Column. Each of these columns contains the same settings and fields.
Image, Header, and Content
The first content settings you see when editing SR Hero Two Col 01 are the Image, heading, and content.
You can have as many headers as you want. You can even choose which Size they are: H1, H2, H3, H4, H5, H6, P.
You can also choose the Display Size to L, XL, XXL, XXXL
You also have an option to create a sub-header or description
Editing the CTA
You can have as many CTAs as you want. Each CTA gives you the option to set:
- CTA Type: Hubspot CTA, Button, or Modal
- CTA Style: Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, Outline, Custom, or None.
- Button Text
- Link: External, Content, File, Email address, or Blog.
- Link Type: No follow.
- CTA Size: Small, Default, or Large.
- Add Icon
Editing the media
Media Type: Image, Video, or None. The various media types have various properties:
- Image Loading
- Video File
- Video Max Height
- Loop Video
How to Use SR Hero Two Col 01 - See it Live
- Sprocket Rocket Module page- You can see the module used live