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