# Image with text split

The **Image with text split** section displays a feature images with a feature text block side-by-side.

<div><img src="/files/GvpNwMmXJ3HxRrX5xVi8" alt=""> <figure><img src="/files/y6uWzzNOHmD4ikH1yI81" alt=""><figcaption></figcaption></figure></div>

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Image with text split**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](/stiletto/sections/theme-sections/using-sections.md#section-padding) | [Animation](/stiletto/sections/theme-sections/using-sections.md#section-animations)

&#x20;

### Set up feature image

***

* Add a feature **image** and alternate **mobile image**.
* Change the **image position**
* Change the **image aspect ratio** (shape)
* Make the image a clickable **link** to another page.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Image with text split** section to open the settings.
2. Click **Select image** to upload and select an image file.

   > There are no required images dimensions. We simply recommend uploaded images have a minimum width of **`2500px`** for optimal quality across all devices.
3. To crop the shape of your preview image, set the **Image aspect ratio** to **Square**, **Landscape**, or **Portrait**.

   > The **Natural** setting displays the original shape of your image. The section height will adapt to the image aspect ratio.
4. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
5. Set the **Image position** on the *Left* or *Right* of the section beside the promo content block.
6. (*Optional*) Set the **Image mobile position** to show the image **Above** or **Below** the promo content block.
7. Change the **Image padding** to **Top and bottom** or **All sides** to add space around the image.

   > Change the **Background** color option below, which will display behind the image and within the padding space.
8. Click **Save**.

</details>

&#x20;

`Click section to find settings`

<table><thead><tr><th width="179">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select an image to display as the feature image.</p><p><br>There are no required image dimensions. We recommend a minimum width or height of 2500px.</p></td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the featured image either <strong>Left of content</strong> or <strong>Right of content</strong> on desktop screens.</td></tr><tr><td><mark style="color:blue;">Image mobile position</mark></td><td>Choose to display the featured image either <strong>Above content</strong> or <strong>Below content</strong> on mobile screens.</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Choose to crop the image to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Square (1:1)</strong>, or <strong>Landscape (3:2)</strong>. Select <strong>Natural</strong> to display images in their original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr></tbody></table>

&#x20;

## Add content blocks

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="/files/CySklwWxaSRn3gHtNic2" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="/files/ePWVCmf4HT8QaKrfmkhI" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#accent">/pages/5U2s1qKTve492neoD35D#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="/pages/5U2s1qKTve492neoD35D#heading">/pages/5U2s1qKTve492neoD35D#heading</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="/pages/5U2s1qKTve492neoD35D#text">/pages/5U2s1qKTve492neoD35D#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="/pages/5U2s1qKTve492neoD35D#button">/pages/5U2s1qKTve492neoD35D#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="/pages/5U2s1qKTve492neoD35D#image">/pages/5U2s1qKTve492neoD35D#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="/pages/5U2s1qKTve492neoD35D#video-player">/pages/5U2s1qKTve492neoD35D#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Border</strong></mark></td><td>Add divider between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#divider">/pages/5U2s1qKTve492neoD35D#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="/pages/5U2s1qKTve492neoD35D#spacer">/pages/5U2s1qKTve492neoD35D#spacer</a></td></tr></tbody></table>

&#x20;

## Change layout

***

Change the position of the featured image and the alignment of the content blocks.

&#x20;

`Click section to find settings`

<table><thead><tr><th width="163">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image position</mark></td><td>Choose to display the featured image either <strong>Left</strong> of content or <strong>Right</strong> of content on desktop screens.</td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Align the headings and button to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the text area.</td></tr></tbody></table>

## Section colors

***

Change the colors of the background, text, and button elements.

&#x20;

`Click section to find settings`

<table><thead><tr><th width="204">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>Select the color of the section background.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter multiple lines of text.</td></tr><tr><td><mark style="color:blue;">Buttons</mark></td><td>Select the color of the button background.</td></tr><tr><td><mark style="color:blue;">Solid button text</mark></td><td>If the <strong>Solid</strong> button style is selected in the button block settings, select the color for the button text.</td></tr></tbody></table>

&#x20;

<br>

***

> **Related links**
>
> [Image hero](/stiletto/sections/theme-sections/image-hero.md)\
> [Image hero split](/stiletto/sections/theme-sections/image-hero-split.md)\
> [Image with text split](/stiletto/sections/theme-sections/image-with-text-split.md)\
> [Slideshow](/stiletto/sections/theme-sections/slideshow.md)\
> [Grid](/stiletto/sections/theme-sections/grid.md)


---

# 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.fluorescent.co/stiletto/sections/theme-sections/image-with-text-split.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.