Skip to content
Split banner
Section overview
The Split banner Alternative section provides a versatile banner with a horizontal split layout, displaying content blocks side by side on desktop. It allows for text content on one side and customizable media (images or videos) on the other.
Common use cases
- Showcasing featured products with compelling visuals and call-to-action buttons
- Creating promotional announcements with attention-grabbing media
- Welcoming customers to your store with an impactful introductory message
- Highlighting seasonal campaigns or special offers with dual content blocks
Usage tips
- Use high-contrast images that complement the text overlay for maximum readability
- Leverage different media for mobile and desktop to optimize for each device
- Consider using header overlap for a more immersive design when appropriate
- Keep text content concise and focused for better conversion rates
- Test the section on both mobile and desktop devices to ensure responsive design works correctly
Section settings
| Setting | Description |
|---|---|
| Vertical spacing | Controls the height of the banner section |
| Color scheme | Sets the background color scheme for the entire banner section |
| Custom color | Allows for a custom background color when 'Custom' is selected as the color scheme |
| Border color | Determines the color of any borders applied to the section |
| Border position | Sets where borders appear on the section (top, bottom, both, or none) |
| Enable header overlap | Allows the header to overlap with the banner section |
| Enable margin | Adds 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, mobile only, or desktop only |
Block settings
Content
Content blocks allow you to add text, media, and buttons to each side of the banner. This section supports up to 4 content blocks.
| Setting | Description |
|---|---|
| Heading | The primary heading text for the block |
| Content | Rich text area for descriptive content |
| URL | Link for the entire block (clickable area) |
| Desktop background image | The image displayed on desktop devices |
| Mobile background image | The image displayed on mobile devices (falls back to desktop if not specified) |
| Video background | Optional video to use as the background instead of an image |
| Show entire image | When enabled, displays the entire image (object-contain) rather than covering the space |
| Show video on mobile | Controls whether video backgrounds appear on mobile devices |
| Button label | Text for the primary call-to-action button |
| Button URL | Link destination for the primary button |
| Button color | Style variant for the primary button |
| Secondary button label | Text for the secondary call-to-action button |
| Secondary button URL | Link destination for the secondary button |
| Secondary button color | Style variant for the secondary button |
| Color scheme | Background color scheme for the specific content block |
| Text color | Controls whether text is light or dark to ensure readability |
| Enable gradient | Adds a gradient overlay effect to improve text readability over images |
| Enable background overlay | Adds a background behind the text for improved readability |
| Vertical alignment | Controls where content appears vertically (top, middle, or bottom) |
| Horizontal alignment | Controls where content appears horizontally (left, center, or right) |