SR Tabs Split Screen 01

An ideal use case for SR Tabs Split Screen 01 is for expounding inter-connected topics through large images alongside texts and buttons.

You may see a preview of how the module works here:



Styles

You can edit the following items within the Styles tab:

• Layout: page or full-width
• Container width: minimum, narrow, wide, maximum
• Top-bottom padding: default, no padding, small padding, large padding, custom padding
• 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)



For SR Tabs Split Screen 01, most settings are focused on the tabs.

Column Alignment

The first setting you see when editing SR Tabs Split Screen 01 is the ability to edit how the columns appear. You may choose Image/Content or Content/Image, depending on which one you want the module to present on each side. The arrangement follows the Left/Right order.



Editing the Tabs

Each tab has the following options to edit:

• Styles
  • Content Background Option: Color, Image, Custom
• Menu Title
• Menu Title Color
• Heading
• Body Text/Description
• Text Color
• CTA button
• Image Heading
• Image Overlay Color



Editing the Heading

Each tab has its own heading. Here are the options available to edit:

• Heading Title
• Size
• Display Size
• Color
• Alignment

Editing the CTA Button

Each tab has its own CTA button. You can have as many CTA buttons as you want

• Each button gives you an option to edit:
  • 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

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