# Promo image

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/Q2Xfg3l6fJMidZ0V9BPq/Untitled.png" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

**`Customizer`** → **`Add Section`** → **`Promo image`**.

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/vwcpInbQcBowctwbs44p/promo-image1.png" alt=""><figcaption></figcaption></figure>

## **Section settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/Ppa318RKX6jXr6FVHgRK/Untitled%202.png" alt=""><figcaption></figcaption></figure>

1. **`Grid layout`** - the setting is responsible for the location of a larger image or for the images to be the same;

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/z5EQue7HLHdRlbJ6QyrY/Untitled%203.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/dqiSapK3cMM75P8qzyY1/Untitled%204.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/NowrWaU0vPWdKJqfHyID/Untitled%205.png" alt=""><figcaption></figcaption></figure>

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/uIScsiKb0I7hkRBVXAId/Untitled%206.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## **Blocks settings**

### Grid image

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/XYeAkNj67TuBUggW0afy/Untitled%207.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/8QfWCO1neqcCOAWLcCsw/Untitled%208.png" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - you can set a title for the block;
2. **`Text`** - you can set a text for the block;
3. **`Image desktop`** - you can set a picture for the desktop;
4. **`Image mobile`** - you can set a picture for mobile extensions, if the picture is not set it will be used on the desktop;
5. **`Link`** - you can set the link for the block;

**Colors**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/1EvZJrwYV22RxPldjXK6/Untitled%209.png" alt=""><figcaption></figcaption></figure>

1. **`Text`** - you can set the color for the text.;
2. **`Overlay`** - you can set the color for the Overlay;
3. **`Overlay opacity`** - you can set transparency for the Overlay.

## **Additional Information**

1. A section can have a maximum of 2 blocks.
2. If a section uses one block, then the block image is automatically stretched to the full width of the section.