> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text-split.md).

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

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

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

Click the section to edit general **section styles**, like colors, width, and padding.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Set up feature image</h2>

***

* 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>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

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

<h2 align="center">Add content blocks</h2>

***

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>

<h2 align="center">Section layout</h2>

***

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

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

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

<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
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:

```
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.