# 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="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQyZCzKgqMpBwm6ZUgsig%2Fimage-text-split.jpeg?alt=media&#x26;token=eacd83eb-decd-4a0c-9118-f64d568d0452" alt=""> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FRi3p4ZWPvo3gv3WWWDPi%2Fimage-text-split-b.jpeg?alt=media&#x26;token=29333db9-29a2-4aa8-b96f-b6170408a42f" 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](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% 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](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#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](https://help.fluorescent.co/stiletto/general/image-guide/theme-image-settings#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="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQfyhAqrKJfP6pxkP9LWz%2Fcontent-blocks-add.png?alt=media&#x26;token=da68fb05-2293-4195-b4bd-450af5c1d782" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQmsKeHtAcZpIlRxsDxVL%2Fcontent-blocks.png?alt=media&#x26;token=fda6bf79-81ae-4a18-97df-13c0c0e2d8ad" 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="../content-blocks#accent">#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="../content-blocks#heading">#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="../content-blocks#text">#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="../content-blocks#button">#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="../content-blocks#image">#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="../content-blocks#video-player">#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="../content-blocks#divider">#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="../content-blocks#spacer">#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](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero)\
> [Image hero split](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero-split)\
> [Image with text split](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text-split)\
> [Slideshow](https://help.fluorescent.co/stiletto/sections/theme-sections/slideshow)\
> [Grid](https://help.fluorescent.co/stiletto/sections/theme-sections/grid)