> 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/banners-with-sticky-content.md). # Banners with sticky content An editorial layout where a text column stays pinned in the middle of the screen while image and video banners scroll past it on both sides. This is the section for a story rather than an offer — a brand page, a material explainer, a collection with a point of view. A single block of text stays pinned in the middle of the screen while images and videos move past it on either side, so the message stays readable for the whole length of the scroll. ### How to add {% stepper %} {% step %} #### Add the section In the theme editor, click **Add section → Banners with sticky content**. {% endstep %} {% step %} #### Write the sticky column The section's own **Subheading**, **Heading**, **Text** and button make up the pinned column. This is the part that stays on screen, so it carries the main message. {% endstep %} {% step %} #### Add the banners Use **Add block → Image** or **Loop video**. Each card has its own heading, text and button. The preset starts with four, alternating sides. {% endstep %} {% step %} #### Set the pin position **Offset** controls the gap between the top of the screen and the pinned column, from 24 to 160 px (120 by default). Raise it if your header overlaps the text. {% endstep %} {% step %} #### Tame long text Turn on **Collapse long text** to clamp the copy to **Visible lines on desktop** (4 by default) and **Visible lines on mobile** (3), with your own **Expand button label** and **Collapse button label**. Each card has the same controls for its own text. {% endstep %} {% step %} #### Check the mobile version **Mobile layout** is **One column** or **Two columns**, and **Mobile navigation** is **Arrows** or **Scrollbar**. {% endstep %} {% endstepper %} ### Good to know **The layout is a three-column track.** On desktop the cards sit in the outer two columns and the text column is placed in the middle, pinned in place while the cards scroll past it. That is why the cards look narrow: each one is a third of the section width by design, not a setting you have missed. **On mobile it becomes a slider.** Below the desktop breakpoint the pinned column stops pinning, the cards turn into a swipeable row, and **Mobile layout** decides whether they show one or two at a time. Test the text length there — what reads as a caption on desktop can fill a phone screen. **The pin accounts for a sticky announcement bar.** If your store runs an announcement bar that stays on screen, the pinned column drops below it automatically; you do not need to add that height to **Offset** yourself. {% hint style="info" %} The section works with no blocks at all — the text column simply centers itself. That makes it a usable way to place a single pinned statement between two other sections. {% endhint %} **Every card has its own collapse settings.** The section's text and each card's text are clamped independently, so you can leave the sticky column fully open and clamp the captions, or the other way round. **Loop video cards have pause and mute controls** with their own position setting, like the other video sections. Sound only starts when a visitor taps the mute control. ### Customization ideas * Alternate **Image** and **Loop video** cards so the fixed message is read against both stills and motion — that is what the preset does. * Use it as a product-story section on a landing page: the pinned column states the promise, the cards show material, construction and care. * Give each card a button pointing at a different collection, and keep the pinned button for the main call to action. * Raise **Offset** to 160 px on templates with a tall header so the pinned heading never collides with the navigation. * Collapse card text to two lines and let the pinned column carry the full copy — the cards then read as captions. ### Best practices * Keep the pinned text short enough to be read in one screen. It is on screen the whole time, which makes a wall of text feel heavier than it is. * Use four to six cards. Fewer and the pinning barely registers; many more and the visitor is held in one section too long. * Keep card images to a consistent ratio — they are seen one after another in the same narrow column. * Write card headings as steps or chapters, not as separate offers. *** ### Related * [Banner grid](/docs/avante-themes/sections/banners/banner-grid.md) * [Banner gallery](/docs/avante-themes/sections/banners/banner-gallery.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/banners-with-sticky-content.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.