> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/banners/image-with-text.md).

# Image with text

**Image with text** puts a picture on one side of the page and a text column on the other, so a photo and the words explaining it are read together. It is the section to use when the message needs a heading, a sentence or two, and a button, and the wording must stay readable rather than compete with the image behind it. Shoppers meet it on the homepage or on landing pages, usually below the hero, where it introduces a collection, explains a brand promise, or points to a campaign page.

Because the text sits beside the image instead of on top of it, this section works with busy photography that would make an overlay banner hard to read.

<figure><img src="/files/3eAZdonNloh1lCg2EWby" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template where the banner should appear, usually the homepage.
3. Click **Add section** and choose **Image with text** from the **Banners** group.
4. Upload the image, then fill in the heading and description blocks.
5. Add a button block and point it at the collection or page the message is about.
   {% endhint %}

*Result:* the image and the text column sit side by side on desktop and stack on mobile, following the alignment settings below.

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-settings" id="general-settings"></a>

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far the section spreads across the screen.</p><ul><li><strong>Stretch width</strong>: the content runs close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the content lines up with the page width set in <strong>Theme settings > Layout</strong>, so it matches the sections around it.</li><li><strong>Full width</strong>: the section fills the whole browser window and resizes with it.</li></ul> |
| **Color scheme**  | The background and text colors of the section. Schemes are defined in **Theme settings > Colors**, so switching scheme is the quickest way to separate this banner from the section above it.                                                                                                                                                                                                                                                           |

#### Image <a href="#image" id="image"></a>

| Setting                    | Description                                                                                                                                                                                                                                                                                                                        |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**                  | The picture shoppers see beside the wording, sharpest at ***(696px x 500px recommended)***. Choose a photo that shows the product or the idea the text is talking about.                                                                                                                                                           |
| **Image width**            | How much of the section the picture takes, leaving the rest to the text. Widen it when the photo carries the message, narrow it when the wording does.                                                                                                                                                                             |
| **Desktop image position** | <p>Which side of the wording the picture sits on, on wide screens.</p><ul><li><strong>Left</strong>: shoppers see the photo first, then read.</li><li><strong>Right</strong>: shoppers read first, then see the photo. Alternate the two when you stack several of these sections, so the page does not look repetitive.</li></ul> |

#### Content settings <a href="#content-settings" id="content-settings"></a>

| Setting                        | Description                                                                                                                                                                                                                                                                                                                                                        |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Background color**           | The color behind the text column. Use it to lift the wording off the page when the section colour scheme leaves image and text looking like one block.                                                                                                                                                                                                             |
| **Desktop vertical alignment** | <p>Where the text column sits against the height of the picture.</p><ul><li><strong>Top</strong>: the wording starts level with the top of the image.</li><li><strong>Middle</strong>: the wording is centred against the image, the safest choice for short text.</li><li><strong>Bottom</strong>: the wording ends level with the bottom of the image.</li></ul> |
| **Content alignment**          | <p>Where each line of text starts inside its column.</p><ul><li><strong>Left</strong>: easiest to read for anything longer than a few words.</li><li><strong>Center</strong>: suits a short headline and a single button.</li><li><strong>Right</strong>: pulls the wording towards the image when the image is on the right.</li></ul>                            |
| **Column gap**                 | <p>The space between the picture and the text column.</p><ul><li><strong>No gap</strong>: image and text touch, for a solid, magazine like block.</li><li><strong>Small</strong> and <strong>Medium</strong>: keep the two visibly related but separate.</li><li><strong>Large</strong>: gives the wording room to breathe on wide screens.</li></ul>              |

#### Section divider <a href="#section-divider" id="section-divider"></a>

| Setting          | Description                                                                                                                                               |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin horizontal line at the section edge. Turn it on when this banner and its neighbour share the same background colour and run into each other. |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------ |
| **Top**    | Space added above the banner. Increase it when the section before this one sits too close. |
| **Bottom** | Space added below the banner. Increase it when the next section feels cramped against it.  |

### Block settings <a href="#block-settings" id="block-settings"></a>

#### Heading, Subheading, Description <a href="#heading-subheading-description" id="heading-subheading-description"></a>

| Setting                              | Description                                                                                                                                                                                                                                                           |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading, Subheading, Description** | The three pieces of wording in the text column: the line shoppers read first, a short label above it for context, and a sentence below spelling out the detail.                                                                                                       |
| **Width**                            | <p>How much horizontal room the wording is allowed to take.</p><ul><li><strong>Fit</strong>: the text stays only as wide as the words themselves.</li><li><strong>Fill</strong>: the text spans the full width of the column, which suits longer sentences.</li></ul> |
| **Typography - Preset**              | The font, size, and weight of the wording, taken from the presets in **Theme settings > Typography**. Editing the preset there restyles every element built on it, which keeps the store consistent.                                                                  |
| **Background**                       | Puts a solid panel behind the wording. Turn it on when the text sits over a coloured area and needs separating from it.                                                                                                                                               |
| **Background color**                 | <p>The colour of that panel. Pick one with enough contrast against the text, or the panel makes the wording harder to read than it was without it.</p><p><em>Note: only appears when <strong>Background</strong> is enabled.</em></p>                                 |
| **Corner radius**                    | <p>How rounded the corners of that panel look. Higher values soften the shape, 0 keeps the corners square.</p><p><em>Note: only appears when <strong>Background</strong> is enabled.</em></p>                                                                         |
| **Padding top/bottom**               | Breathing room above and below the wording. Increase it when the text presses against the edge of its panel.                                                                                                                                                          |

#### Button <a href="#button" id="button"></a>

| Setting            | Description                                                                                                                                                                                                                                                                                                                                       |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label**   | The words shoppers click. Leave it empty and no button is shown at all, which leaves the banner with nothing to act on.                                                                                                                                                                                                                           |
| **Button link**    | Where that click takes shoppers, usually the collection or page the wording is about.                                                                                                                                                                                                                                                             |
| **Button type**    | <p>How much the button stands out.</p><ul><li><strong>Primary</strong>: a solid, filled style for the one action you most want taken.</li><li><strong>Outline</strong>: a bordered style for a secondary action.</li><li><strong>Link</strong>: plain underlined text, for a quiet option that should not compete with the main button.</li></ul> |
| **Spacing bottom** | Space left under the button. Increase it when the button sits too close to whatever follows it.                                                                                                                                                                                                                                                   |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see a picture and a text column side by side on desktop, stacked on mobile with the image above the wording.
* An empty **Button label** removes the button, so the banner becomes read only. Fill it in whenever the message has a destination.
* Changing **Desktop image position** flips the banner without moving any blocks, which is the quick way to vary a page that stacks several of these sections.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Banners](/velare/customize-your-pages/banners.md): the group this section belongs to
* [Image with text overlay](/velare/customize-your-pages/banners/image-with-text-overlay.md): the version that places the wording on top of the picture
* [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and font presets come from
* [Layout](/velare/set-up-your-store/layout.md): the page width that **Fixed width** follows


---

# 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 dynamically by asking a question.

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

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/banners/image-with-text.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.