# Image with text columns

![image](https://docs-assets.foxecom.app/sleek-theme/Group%205185_tnDPo0VE.png)

The Image with text columns section lets you display a large image next to multiple columns where each includes an image alongside text content. 

It's a visually appealing way to showcase features, products, services, or any other information in a structured and engaging format.

## How to add the Image with text columns section

<Hint type="success">

Steps

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Image with text columns.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit the Image with text columns section

### Section settings

#### General

Furthermore, you can change the **Gap** between text columns and image to None/ Extra small/ Small/ Medium/ Large/ Extra large, and **Vertical alignment** to Top/ Middle/bottom to achieve a balanced appearance within the section.

![image](https://docs-assets.foxecom.app/sleek-theme/image_AIAA0KKY.png)

#### **Image**

Add an **Image** or image link (Connect dynamic source) that you prefer for your Image with text columns section.

You can also adjust **Desktop image placement** to Image first/ Image second.&#x20;

<Hint type="info">

Note: **Image first** is the default mobile layout

</Hint>

![image](https://docs-assets.foxecom.app/sleek-theme/image_NFdmglam.png)

#### **Content settings**

Add the content you want in the **Heading** to attract customers' attention

* Leave it blank if you do not want to display it&#x20;

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl&#x20;
* Display md&#x20;
* Display lg
* Display xl&#x20;

![image](https://docs-assets.foxecom.app/sleek-theme/image_8rzILE0P.png)

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](page://881208ae-2f89-43e8-af10-fa298a8100d2#highlight-text)

Use the provided text fields to add a suitable **Subheading** and **Text**.

* Leave them blank if you do not want to display them

You can also change the **Description size** to Small/ Base size/ Large to make the content look balanced on your website.

![image](https://docs-assets.foxecom.app/sleek-theme/image_cykXqgVp.png)

#### Grid settings

These grid settings allow you to modify the layout and alignment for the text Column blocks.

Change the **Text alignment** to Left or Center.&#x20;

You are able to adjust the **Number of columns on desktop** from 1 to 3 columns and **Column gap** between the text Column blocks.

![image](https://docs-assets.foxecom.app/sleek-theme/image_IhAlVm8V.png)

#### Mobile layout

You can **Enable swiping on mobile** or display the collections in a 2-grid column layout.

![image](https://docs-assets.foxecom.app/sleek-theme/image_pgAD8OTM.png)

### Block settings

In the **Image with text columns** section, you can add multiple **Column** blocks.

![image](https://docs-assets.foxecom.app/sleek-theme/image_ybOWdCJx.png)

Add an **Image** that you prefer to display on each Column block.&#x20;

You can adjust the width of the image in the **Image width** field:

* Full width of column
* Extra large
* Large
* Medium
* Small

![image](https://docs-assets.foxecom.app/sleek-theme/image_bjEY38On.png)

Add the content you want in the **Heading** and **Description** for the Column block.

* Leave them blank if you do not want to display them

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl&#x20;
* Display md&#x20;
* Display lg
* Display xl&#x20;

and the **Description size** to:

* Small
* Base size
* Large

![image](https://docs-assets.foxecom.app/sleek-theme/image_S4EZYU5K.png)