# 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)                    |