# Image with text icons

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FHrM7ZZFFqZ2R6COxjvlC%2F2025-04-04_13-12-02.jpg?alt=media&#x26;token=42d61033-7b8f-4904-81a9-df0d6416d111" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

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

## General Settings

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FHKB1k1RhIBapz06BlD8e%2F2025-04-04_13-12-40.jpg?alt=media&#x26;token=7da1c289-2128-446e-b334-f11fc4aff22e" alt="" width="286"><figcaption></figcaption></figure>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **Image**
* **Media size** - Adapt to image / Square (1:1) / Portrait (3:4) / Landscape (4:3) / Landscape (5:3.5) / Wide (16:9)
* Image width
* Column gap
* Desktop image placement - Left / Right ( Image first is the default mobile layout. )
* Vertical alignment - Top / Middle / Bottom
* Content alignment - Left / Center / Right

### Icon width text

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2Fx3Mr5GdQNLDd2PIbSuix%2F2025-04-04_13-13-17.jpg?alt=media&#x26;token=df1882c8-9957-4f90-b4c7-f0785d387b1c" alt="" width="283"><figcaption></figcaption></figure>

* **Layout column** - 1 column / 2 columns
* **Item heading size**
* **Icon background** - None / Square / Circle
* **Icon width**
* **Button style**
* **Show arrow icon**

### Colors

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/q5JGiEgYLIMdvtxGUu3L/img-c.jpg" alt=""><figcaption></figcaption></figure>

* **Background**
* **Text color**
* **Icon background**
* **Icon color**

### Section padding

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/n2xL6bjz1tYl76g1pebr/padding-c.jpg" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Image with text icons**
2. **Add Block. >** Select block you want
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FpWLu3ubknkK9kfA1mNVw%2F2025-04-04_13-14-44.jpg?alt=media&#x26;token=9b42ae7f-fb4a-4fb0-a178-9013fc8e46f7" alt="" width="287"><figcaption></figcaption></figure>