> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/banners/split-banner.md). # Split banner Two banners side by side, each with its own image, heading and button — or one banner across the full width. Split banner is the section for a choice: women's and men's, new in and on sale, shop and read. Two images sit side by side, each with its own heading and button, and on mobile they stack without you doing anything. ### How to add {% stepper %} {% step %} #### Add the section In the theme editor, click **Add section → Split banner**. {% endstep %} {% step %} #### Add one or two banners Use **Add block → Banner**. Two is the maximum. With two blocks each takes half the width; with one it fills the section edge to edge. {% endstep %} {% step %} #### Fill each half Set the **Image**, then the **Offer subheading**, **Heading**, **Text** and the button, and give the half its own **Link** so the whole area is clickable. {% endstep %} {% step %} #### Set the height **Height mode → Percents** is the default — 70% of the screen height on desktop, 60% on mobile. **Pixels** fixes it between 500 and 1600 px. **Adapt to image** lets the images set it. {% endstep %} {% step %} #### Decide how the copy appears **Show content only on hover** is **on** by default here, so the text is revealed when the cursor is over a half. Turn it off if the headings need to be visible at all times. {% endstep %} {% step %} #### Make the text readable Each half has its own **Overlay** color, gradient and opacity (70% by default). Tune them separately — the two images are rarely equally bright. {% endstep %} {% endstepper %} ### Good to know {% hint style="info" %} **Show content only on hover is on out of the box.** This surprises people: they fill in the headings, look at the preview and see only images. Move the cursor over a half and the copy appears. On mobile there is no hover, so the content is always shown. {% endhint %} **One block fills the width.** Delete one of the two banners and the remaining one stretches across the whole section — handy when you want a single hero that still carries the Split banner styling. **The halves stack on mobile.** Below 768 px the two banners sit one above the other at full width, and the rounded corners move with them: on desktop the corners facing each other are squared off, on mobile the rounding moves to the top of the first banner and the bottom of the second. **There is no separate mobile image.** Both halves use the same file on every screen, and on mobile each one becomes a wide full-width block. Choose images whose subject survives both crops, or pick a focal point that sits in the middle. **The buttons are outlined by default** and the blocks use an inverted color scheme, which assumes light content over darker imagery. **Background animation** is available with **Parallax**, **Zoom in** and **Zoom out**. There is no **Sticky** option in this section. See [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md). ### Customization ideas * Use the two halves as a gendered or age-based split at the top of the homepage, each linking to its own collection. * Put a product shot on one side and an editorial or about-us image on the other — one half sells, the other builds the brand. * Turn **Show content only on hover** off and add a **Context image** (a logo or seal) above each heading for a collaboration announcement. * Set **Height mode → Pixels** at 500 px and use the section as a two-up promo strip between collection rows. * Keep a single block and use Split banner as a full-width image banner with hover-revealed copy. ### Best practices * Give both halves the same amount of copy — an unbalanced pair reads as a mistake. * Make the two images consistent in color temperature and crop; they are seen as one picture. * If the section is the first thing on a page, turn hover content off. A visitor who has not scrolled yet will not hover. * Check mobile: the two halves become two full-width banners, which is a lot of screen. Shorter pixel heights work better there. *** ### Related * [Image banner](/docs/avante-themes/sections/banners/image-banner.md) * [Banner grid](/docs/avante-themes/sections/banners/banner-grid.md) * [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md) * [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md) * [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/sections/banners/split-banner.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.