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:
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.
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:
- Content Background Option: Color, Image, Custom
- Menu Title
- Menu Title Color
- 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
- Display Size
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