> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/mini-banner.md).

# Mini banner

<figure><img src="/files/3fUTeAsUbZ4CWLYInhQL" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

<figure><img src="/files/m9aVIlVTJbWRqxk8Jadw" 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="/files/9oihDA89mZD4qYOXZ6Xm" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/p669uDHP7jPv6gqGZSCh" alt=""><figcaption></figcaption></figure>

## **Section settings**

### **General**

<figure><img src="/files/LNK1vjOSn5MSdXAtAfJP" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/3uztsgX616uZCt4dYxu0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2laWRpu4FT05HdHFtjiK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wxuA2Lbg5dsOLvuPjNoa" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/a4LmgfXN72CfBT26JhJi" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/0tqQZ3rbtZAv9cBUtuGC" 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="/files/mS4lHiBDiJ7oqwiBWV7b" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ipWG9T6BMd8t04mDbpRl" 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="/files/PvDCGXjIxKQZzqgByrhs" 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="/files/QDoPNlcYaCeGg6YLLdk8" 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="/files/7oi619yo1eKiEkZWo5NW" alt=""><figcaption></figcaption></figure>

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