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


---

# 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/keystone/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.