# Banner with thumbnails

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FzD9qHaQ9T6M04PxkTdXw%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-02-26_%25D0%25B2_17.41.37.png?alt=media&#x26;token=d99be175-f220-4e7c-a745-ddc8f4e16839" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fj2rvkvcOS8OZjukxFwAo%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-02-26_%25D0%25B2_17.42.29.png?alt=media&#x26;token=f5b60bde-c27d-4fd9-839a-83ad4eb42f89" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

**`Section`** → **`Banner with thumbnails`**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FrxwIKMjhJN9fcB0dpmfj%2Fbanner-with-thumbnails.png?alt=media&#x26;token=4ba0aac0-cb20-4d12-b893-89db31e17560" alt=""><figcaption></figcaption></figure>

## **Section settings**

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FtvKXlwpNoj9d7Wr6JP2C%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-02-26_%25D0%25B2_17.45.57.png?alt=media&#x26;token=ae123a4a-fbbb-4c76-a7ff-81b6ced3ca4e" alt=""><figcaption></figcaption></figure>

1. **`Label`** - setting allows you to set the section label;
2. **`Heading`** - setting allows you to set the section heading;
3. **`Text`** - setting allows you to set the section text;

### **Colors**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fmr5KwNJ7pYzwYltU0xZu%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-02-26_%25D0%25B2_17.49.23.png?alt=media&#x26;token=e1657504-2d5c-47c9-a690-7e71673add0b" alt=""><figcaption></figcaption></figure>

1. **`Background`** - section background color;
2. **`Label`** - section label color;
3. **`Text`** - section text color;
4. **`Tab button background (active)`** - tab background color when it is active;
5. **`Tab button color (active)`** - tab text color when it is active;
6. **`Tab button background`** - tab background color;
7. **`Tab button color`** - tab text color;

### Layout

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FgbNNsZTAp5y9YYmS4uPu%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-02-26_%25D0%25B2_17.56.16.png?alt=media&#x26;token=1d555647-fafe-49ec-87cb-05884b32a0f6" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - allows you to set the width of the container: 1400px, 1920px, full width, or inherit the general 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**.

## Block settings

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FLi5vUZb2CWl5YsD1wAlz%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-02-26_%25D0%25B2_17.59.19.png?alt=media&#x26;token=2ec31fbe-b9dd-4d81-8469-bf80d2b8de58" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - block heading text;
2. **`Media type`** - you can choose the type of media: image, HTML 5 video, YouTube/Vimeo;
3. **`Image desktop`** - you can set a picture for the desktop (”Image” media type);
4. **`Image mobile`** - you can set a picture for the mobile (”Image” media type);
5. **`HTML 5 desktop video`** - you can set an HTML 5 video for the desktop (”HTML 5 video” media type);
6. **`HTML 5 mobile video`** - you can set an HTML 5 video for the mobile (”HTML 5 video” media type);
7. **`Youtube/Vimeo desktop video url`** - you can set the url for Youtube/Vimeo video for desktop (media type "YouTube/Vimeo");
8. **`Youtube/Vimeo mobile video url`** - you can set the url for Youtube/Vimeo video for mobile (media type "YouTube/Vimeo");