# Image with text icons

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FnzpCLw5bM1ZWKqGWnaZE%2Fimg-i.jpg?alt=media&#x26;token=2b052507-5df0-4aef-a9c7-6c9a670886ed" 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

<div><figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FsDhkHZ30CLD8NTP132d7%2Fimg-1.jpg?alt=media&#x26;token=a35a43f6-49f4-4fef-bce0-646e772e768c" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FWE7Vtq4fqv1x16M9D4Mz%2Fimg-2.jpg?alt=media&#x26;token=090d4d92-5e4a-4a15-a328-6739d7c6afc1" alt=""><figcaption></figcaption></figure></div>

* **Width** - With of this section 3 options : Container / Stretched / Full width
* **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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FLYQmowQsYnqPmw4MyTQH%2Fimg3.jpg?alt=media&#x26;token=9e8246be-e5d1-4c73-bdbb-da4d45911b2d" alt=""><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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FhjjOV02r5AHHAx1NF3Vi%2Fimg-c.jpg?alt=media&#x26;token=87a56e11-80fe-4fb7-8e8a-8b4bb094720d" alt=""><figcaption></figcaption></figure>

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

### Section padding

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fc0cazMLYpU5yjLuS4vGl%2Fpadding-c.jpg?alt=media&#x26;token=d8c91b56-445e-4ea5-bbc5-f825cf08e577" 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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FnQOEgteRo3hFsSN8dMbu%2Fimg-b.jpg?alt=media&#x26;token=3377cd16-3b6f-4f0c-a2c9-88e96fae60cf" alt=""><figcaption></figcaption></figure>
