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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/space/sections/content-and-media/split-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.