Skip to content
Split banner
Section overview
The Split banner section provides a horizontally split layout with one side for content and the other for media (images or videos). It offers a flexible and visually appealing way to showcase content alongside visual elements.
Common use cases
- Feature product announcements with an image on one side
- Create promotional banners with compelling visuals
- Highlight special collections or seasonal offerings
- Welcome customers to your store with an engaging split layout
Usage tips
- Use images or videos that contrast well with the text overlay for better readability
- Customize different blocks for each half of the split layout
- For mobile optimization, upload specific mobile background images when necessary
- Keep text concise and use appropriate alignment settings for best readability
- Consider using the gradient overlay option when placing text over busy images
- Test the section at different screen sizes to ensure proper responsiveness
Section settings
| Setting | Description |
|---|---|
| Vertical spacing | Controls the height of the banner section across different device sizes |
| Color scheme | Sets the background and text color theme for the entire section |
| Border color | Determines the color of any borders applied to the section |
| Border position | Controls where borders appear (top, bottom, both, or none) |
| Enable margin | When enabled, applies horizontal margin to the section content |
| Enable max width | Limits the width of text content for better readability |
| Visibility | Controls whether the section appears on all devices, only mobile, or only desktop |
Block settings
Content
The Content block allows you to add text, images, videos, and buttons to either side of the split layout. Each banner alternative section can have up to 4 content blocks.
| Setting | Description |
|---|---|
| Heading | The main title text for the content block |
| Content | Rich text area for descriptive content or promotional messaging |
| URL | Optional link that makes the entire block clickable |
| Desktop background image | Background image displayed on desktop devices |
| Mobile background image | Optional different image optimized for mobile devices |
| Video background | Optional video to display instead of or alongside images |
| Show entire image | When enabled, displays the full image (object-contain) instead of cropping to fill |
| Show video on mobile | Controls whether video backgrounds appear on mobile devices |
| Button label | Text displayed on the primary call-to-action button |
| Button URL | Destination link for the primary button |
| Button color | Style and color variant for the primary button |
| Secondary button label | Text for an optional secondary call-to-action button |
| Secondary button URL | Destination link for the secondary button |
| Secondary button color | Style and color variant for the secondary button |
| Color scheme | Background and text color theme for this specific content block |
| Text color | Override to force light or dark text regardless of the color scheme |
| Enable gradient | Adds a subtle dark gradient behind text for better readability over images |
| Enable background overlay | Applies a colored box behind the text based on the color scheme |
| Vertical alignment | Controls where content appears vertically (top, middle, bottom) |
| Horizontal alignment | Controls where content appears horizontally (left, center, right) |