# Image with text

Use the **Image with text** section to combine a feature image side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks.

* Add a featured **Image** and **Content blocks**.
* Customize the **layout** and change the **container color** for alternate looks.

> Check out the related [Video with text section](/eclipse/sections/video-with-text.md).

<div><figure><img src="/files/wW7J1WsxvTn45SeWmm47" alt=""><figcaption><p>Image with text</p></figcaption></figure> <figure><img src="/files/JKTXGxErRkvDohJsLrIj" alt=""><figcaption><p>Section with container color</p></figcaption></figure></div>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

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

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Set up image

***

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

&#x20;

`Click Image with text section to find settings`

<table><thead><tr><th width="174">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image.</td><td></td></tr><tr><td><mark style="color:blue;">Mobile image</mark></td><td>Select or upload an alternate image to display on mobile devices.</td><td></td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Crop the image to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the image's width and height (W:H).</td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr><tr><td><mark style="color:blue;">Image link</mark></td><td>The page or URL that you want the link to go to. Visitors are redirected when they click the image.</td><td></td></tr></tbody></table>

### Change image layout

***

After uploading an image, adjust the **width** and **position**. Use the **Breathing room** option to add space around the image.

&#x20;

`Click Image with text section to find settings`

<table><thead><tr><th width="170">Setting</th><th width="347">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop image width</mark></td><td>Set the maximum width of the image on desktop.</td><td><strong>35 - 70</strong> %<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 50</mark></td></tr><tr><td><mark style="color:blue;">Desktop image position</mark></td><td>Position the image to the left or right of the text content.</td><td><strong>Left of content</strong><br><strong>Right of content</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Mobile image position</mark></td><td>On mobile, show the image before or after the text.</td><td><strong>Image first</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Image second</strong></td></tr><tr><td><mark style="color:blue;">Image breathing room</mark></td><td>Use the slider to add spacing around the image. Set the slider to 0 to display the image at the full width and height of the image area.</td><td><strong>0-60</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 0</mark></td></tr></tbody></table>

## Add content blocks

***

Click **(+) Add block** to add text and image content to the section. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<div><figure><img src="/files/y6QvuNTjUyDpm7r7AO5y" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ilLCbPLKSa8N4nzH3WMB" alt=""><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#heading-block">/pages/1RQDWwxKzKWmtVBL177n#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#text-block">/pages/1RQDWwxKzKWmtVBL177n#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Overline text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#overline-block">/pages/1RQDWwxKzKWmtVBL177n#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#button-block">/pages/1RQDWwxKzKWmtVBL177n#button-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#image-block">/pages/1RQDWwxKzKWmtVBL177n#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#spacer-block">/pages/1RQDWwxKzKWmtVBL177n#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#divider-block">/pages/1RQDWwxKzKWmtVBL177n#divider-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#liquid-block">/pages/1RQDWwxKzKWmtVBL177n#liquid-block</a></td></tr></tbody></table>

### Change content layout

***

Change the width and alignment of all content blocks.

&#x20;

`Click Image with text section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at full width of the screen or set a custom width. <br><br>Under <em>Section</em>, you can also set the section width.</td><td><strong>Full width</strong><br><strong>Custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Use the sliders to set the maximum width (in pixels) of the section content.</td><td><strong>200 - 1000 px</strong></td></tr><tr><td><mark style="color:blue;">Content position</mark></td><td>For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.<br><br>The horizontal and vertical placement applies when there's enough room in the content area.</td><td></td></tr><tr><td><mark style="color:blue;">Text alignment</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Left</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Center</strong><br><strong>Right</strong></td></tr></tbody></table>

## Change container color

***

Change the **Container color scheme** to show a background color for the content area.

You can add and define different color schemes in Theme settings > Colors. [Learn more](/eclipse/sections/overview/section-styles.md#section-colors)


---

# 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/eclipse/sections/image-with-text.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.