# Mini banner

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F7IJXhnJZTYmyI7z9xCku%2FUntitled.png?alt=media&#x26;token=390ea1ff-86e3-4966-b180-8264e56bf1fb" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FvxxRbkUC6HmLOtfrWtx9%2FUntitled.png?alt=media&#x26;token=dadcc670-1628-4ea9-8a3d-3901545702dd" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Mini banner`**.

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FMAQC4T0cuKaFD8qRhnDS%2FUntitled%201.png?alt=media&#x26;token=363bc614-8a6f-4263-a722-9a3397c6a90f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FGDnJd9xcW5m5Inef74ia%2FUntitled%201.png?alt=media&#x26;token=742efeeb-6ce0-45c5-8289-4b5aae2fb131" 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%2FcKsG1ziUEUmRjPRANNbi%2FUntitled%202.png?alt=media&#x26;token=b87becc8-0a71-44fe-9a17-b5298a0ce7f4" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FExJHL4JTlf7jCoJ34ueU%2FUntitled%203.png?alt=media&#x26;token=8ade75de-3f1f-4019-85a4-3ebecd557af8" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F8Z6ZSjIMDgc45Cqy5fPi%2FUntitled%204.png?alt=media&#x26;token=d132cd8f-619d-44ec-8278-d686eb0afe05" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FLKETyNQwUBUj5GJLHjvW%2FUntitled%202.png?alt=media&#x26;token=af1cf825-e60e-43ac-9c37-7262d3b80a18" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F3ii4CjuOSvo7T6dCEg7T%2FUntitled%203.png?alt=media&#x26;token=76650255-a8ec-470e-81d2-6905da76bf36" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FKPGJC6RngI2ALLE7zmVN%2FUntitled%204.png?alt=media&#x26;token=ad55bd4b-670b-405d-a37c-1dc49056c387" alt=""><figcaption></figcaption></figure>

1. **`Enable rounded corners`** - you can specify rounded corners for the section and indents on the sides;
2. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
3. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
4. **`Media type`** - selector for choosing the type of media content to be displayed. Available types are:
   * **`Image`** - a normal image will be displayed;
   * **`HTML5 video`** - **HTML5** video will be displayed;
   * **`Youtube/Vimeo`** - a video from the **YouTube** or **Vimeo** platform will be displayed.
5. **`Label`** - field for **Label**;
6. **`Heading`** - field for **Heading**;
7. **`Text`** - field for **Text**;
8. **`Button label`** - a field for the label content of the button;
9. **`Button aria-label`** - field for **aria-label**, this field is needed to improve **accessibility**, people using **screen readers** will hear the purpose of this button;
10. **`Button link`** - the **URL** field for the button;
11. **`Image desktop`** - you can set a picture for the desktop;
12. **`Image mobile`** - can set mobile image, if not selected will be desktop image;

### Video

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FeKwdZsWZSqXl9QxCezN2%2FUntitled%205.png?alt=media&#x26;token=b76514bc-6856-45bd-b4fb-fd33cfceaaba" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FjJRhccxPS62espo3ZOrb%2FUntitled%205.png?alt=media&#x26;token=33409c68-655b-43b8-bab4-14c4ec26b26c" alt=""><figcaption></figcaption></figure>

1. **`HTML5 desktop video`** - you can choose a video for your desktop, only work with 'HTML5 video' media type;
2. **`HTML5 mobile video`** - you can choose a video for your mobile, by default, there will be a picture from the desktop, only work with 'HTML5 video' media type;
3. **`Youtube/Vimeo desktop video url`** - you can set YouTube/Vimeo video URL for desktop, only work with "YouTube/Vimeo video" media type;
4. **`Youtube/Vimeo mobile video url`** - you can set YouTube/Vimeo video URL for mobile, by default, there will be a picture from the desktop, only work with "YouTube/Vimeo video" media type;

### **Alignment**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F0zvd1k9UZtkDZd09y4q4%2FUntitled%206.png?alt=media&#x26;token=d0ef6efe-916d-41de-8c06-0982936cb12b" alt=""><figcaption></figcaption></figure>

1. **`Content alignment desktop`** - content position selector within the block. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
2. **`Content alignment mobile`** - content position selector within the block on the mobile. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
3. **`Block alignment`** - block position selector. A block can have 3 positions.
   * **`Left`** - block’s positioning on the left side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Right`** - block’s positioning on the right side of the container.

### Color

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FZg5WZsrswMoQgbfeinvH%2FUntitled%207.png?alt=media&#x26;token=443bfd06-623a-4e35-b5af-6eaf39bdfd9f" alt=""><figcaption></figcaption></figure>

1. **`Section beckground`** - you can set the background for the section;
2. **`Label`** - you can set the color for the label;
3. **`Text`** - you can set the color for the text;
4. **`Button background`** - you can set the background for the button;
5. **`Button label`** - you can set the color for the button label;
6. **`Button border`** - you can set the color for the button border;
7. **`Button background (hover)`** - you can set the background for the button on hover;
8. **`Button label (hover)`** - you can set the color for the button label on hover;
9. **`Button border (hover)`** - you can set the color for the button border on hover;
10. **`Overlay`** - you can set the color for the overlay;

## Blocks settings

### Logo

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FD9nf4zn9cVzWKKITrZhf%2FUntitled%208.png?alt=media&#x26;token=aef02d2d-f8f6-41b9-84d7-1908d9bdfd25" alt=""><figcaption></figcaption></figure>

1. **`Image`** - you can set a picture for the Logo;