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

Styles

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



Module Settings

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.

• Learn more about adding custom CSS
• Learn how to use the module ID



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:
  • Image
  • Size
  • Image Loading
• Video:
  • Video File
  • Video Max Height
  • Loop Video
• None







How to Use SR Hero Two Col 01 - See it Live

1. Sprocket Rocket Module page- You can see the module used live