# Image with text columns

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F0e8p9taZQ4RFGp8T3iSO%2FGroup%205185.png?alt=media&#x26;token=5b695550-a41a-4750-904e-48a1bf59b163" alt=""><figcaption></figcaption></figure>

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

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&#x20;

{% hint style="success" %}
Steps

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

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FaBhuKLY89pUyUSokguqv%2Fimage.png?alt=media&#x26;token=22463fd5-4a7e-4fe6-bde3-441f8c75ab0d" alt=""><figcaption></figcaption></figure>

#### **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 style="info" %}
Note: **Image first** is the default mobile layout
{% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FptSFNyGC4uixZdPpGUqd%2Fimage.png?alt=media&#x26;token=71e148c3-46f2-4d3d-b7bc-a82d0e8f0a9d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FTvrP3PnEk2pcokQYWZsu%2Fimage.png?alt=media&#x26;token=e3b51038-6e5a-4611-8872-f0c6f25dc83c" alt=""><figcaption></figcaption></figure>

#### Highlight text

[How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#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.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FKfJPuE1vro0nIrsPmelh%2Fimage.png?alt=media&#x26;token=69418011-ec38-4cbd-a3f4-0961ba5225af" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FA8LVL4I3nWJ4gdi5v44s%2Fimage.png?alt=media&#x26;token=927d4d99-a4d0-45da-aa5d-e1152b22b9a3" alt=""><figcaption></figcaption></figure>

#### Mobile layout

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FXdUsVDPJEPMHMLwNKRAQ%2Fimage.png?alt=media&#x26;token=c96c41eb-31bd-4239-9987-9e6791840058" alt=""><figcaption></figcaption></figure>

### Block settings

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FlFPyJvJyr5nTJlnM8ABy%2Fimage.png?alt=media&#x26;token=60d086a2-ea1a-4cd3-9616-63d62ae90726" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F4G45BAKXfzukwUoXMmpz%2Fimage.png?alt=media&#x26;token=b2af9a25-ae00-4f90-b821-6b80c0e43186" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FRjiOR6UuMcVMBDXCNmHx%2Fimage.png?alt=media&#x26;token=05cef82c-199f-4ac7-bd1e-0c7775753150" alt=""><figcaption></figcaption></figure>