# 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](https://help.fluorescent.co/eclipse/sections/video-with-text).

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FI0lz1gTdwAkwyWZmdhA2%2Fimage-with-text.jpg?alt=media&#x26;token=dc94c33d-2132-489c-9708-709ac68834fb" alt=""><figcaption><p>Image with text</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F1ytKgkDSDFZy6o1bWr7X%2Fimage-with-text-color.png?alt=media&#x26;token=be30c2b6-44e0-4f1b-ad77-90a67936628e" 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](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) 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="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#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="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F2bJuQwRSZ37zWPCfgEVZ%2Fcontent-blocks-add.png?alt=media&#x26;token=b226c9a1-d607-4439-8f9a-325707fb411f" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNBntxSpdVe98DZrI1ykk%2Fcontent-blocks-left.png?alt=media&#x26;token=85ae78d7-8b34-41c6-a957-498bc5352db4" 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="../overview/content-blocks#heading-block">#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="../overview/content-blocks#text-block">#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Overline text</strong></mark></td><td><a href="../overview/content-blocks#overline-block">#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td><a href="../overview/content-blocks#button-block">#button-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td><a href="../overview/content-blocks#image-block">#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="../overview/content-blocks#spacer-block">#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td><a href="../overview/content-blocks#divider-block">#divider-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td><a href="../overview/content-blocks#liquid-block">#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](https://help.fluorescent.co/eclipse/overview/section-styles#section-colors)