# Banner animation scale

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F6t3ca4et7CToBgoKoRPi%2F2024-03-0809-48-37-ezgif.com-gif-to-webp-converter.webp?alt=media&#x26;token=f763b216-f0b7-4a46-bcb9-2d806c09f2fe" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FRIDfxK16nt8Oyho8ivQG%2F2024-03-0809-51-08-ezgif.com-gif-to-webp-converter.webp?alt=media&#x26;token=b1c5cd8b-23f7-4cc8-bf28-ab8f0c08df16" alt=""><figcaption></figcaption></figure>

With this section, you can show a banner with text content, a countdown timer, or media content (image, HTML5 video, Youtube/Vimeo). Scale animation will be performed to manifest the section.

## **Adding a Section**

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Banner animation scale`**.

## **Section settings**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FRF2AbKSEC1knmVhU5XDR%2FUntitled%203.png?alt=media&#x26;token=dc20aa95-5f2a-4915-b707-7b93ec6a6415" alt=""><figcaption></figcaption></figure>

1. **`Enable rounded corners`** - the setting allows you to add rounded corners for the container;

### Colors

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FHOCct3bFHeQ7lHZp388r%2FUntitled.png?alt=media&#x26;token=f1dc8145-2f96-46a4-ae24-7d2da74414e3" alt=""><figcaption></figcaption></figure>

1. **`Section background`** - background color setting;
2. **`Text content background`** - background color for the content;
3. **`Enable glass effect`** - the setting allows you to add glass effect for the text content background;
4. **`Text`** - text color setting;
5. **`Link`** - \*\*\*\*setting link text color;
6. **`Button background`** - setting the background color of the button;
7. **`Button label`** - setting button label color;
8. **`Button border`** - setting the color of the button border;
9. **`Button background (hover)`** - setting the background color of the button on hover;
10. **`Button text (hover)`** - setting button label color on hover;
11. **`Button border (hover)`** - setting the button border color on hover.
12. **`Overlay`** - overlay color for media content;
13. **`Image border color`** - the color of the border that can be added to the media content;

### Layout

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FxrIR7GsniqTTzePFMeFa%2FUntitled%20(3).png?alt=media&#x26;token=5be25273-3bbe-47b2-94f1-2a69396b03d8" 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**

**Block limit** - `1`

The section contains three different types of blocks (banner options): `Full-width` and `Countdown timer`.

### **Block** Wide Media

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FsO8ewqHLIOAI9W9TeHI8%2FUntitled%2014.png?alt=media&#x26;token=b24ad03e-ce0e-4d50-b1bd-b6fe47594d0d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FqIJ6N7F730qj9VCZ2HlA%2FUntitled%2015.png?alt=media&#x26;token=31ccd1bd-d936-4ff7-b3f5-8cab020d9ab1" alt=""><figcaption></figcaption></figure>

1. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
2. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
3. **`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.
4. **`Label`** - field for **Label**;
5. **`Heading`** - field for **Heading**;
6. **`Text`** - field for **Text**;
7. **`Button label`** - a field for the label content of the button;
8. **`Button link`** - the **URL** field for 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. **`Overlay opacity`** - **overlay** transparency adjustment;
11. **`Overlay color`** - setting allows you to select the color of the overlay;
12. **`Image desktop`** - choose a picture to be displayed on the **Desktop**;
13. **`Image mobile`** - choose a picture to be displayed on the **Mobile**;
14. **`Image border width`** - the setting allows you to set the size of the border;
15. **`Image border indent`** - the setting allows you to set the indent of the border;

### Video

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FOxqmKVxQDADzCCjJA7qT%2FUntitled%208.png?alt=media&#x26;token=2926f994-1b1f-4372-9e3b-df62b841a2ff" alt=""><figcaption></figcaption></figure>

1. **`HTML5 Desktop Video`** - a field to add an **HTML5** Video to be displayed on the **Desktop**;
2. **`HTML5 Mobile Video`** - a field to add an **HTML5** Video to be displayed on the **Mobile**;
3. **`Youtube/Vimeo Desktop Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Desktop**;
4. **`Youtube/Vimeo Mobile Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Mobile**.

### Alignment

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F2cPg0HZcehLC9zzWzFQ7%2FUntitled%209.png?alt=media&#x26;token=19154859-7e83-4eb4-b507-f575d75825c5" alt=""><figcaption></figcaption></figure>

1. **`Content alignment`** - 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 horizontal`** - block horizontal 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.
4. **`Block alignment vertical`** - block vertical position selector. A block can have 3 positions.
   * **`Top`** - block’s positioning on the top side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Bottom`** - block’s positioning on the bottom side of the container.

### **Block** Sale Timer

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FsO8ewqHLIOAI9W9TeHI8%2FUntitled%2014.png?alt=media&#x26;token=b24ad03e-ce0e-4d50-b1bd-b6fe47594d0d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FMK6tOx2To3WZIu6muBMx%2FUntitled%2011.png?alt=media&#x26;token=5c89dfe1-74bc-4ca2-948f-91605b0ed9b9" alt=""><figcaption></figcaption></figure>

1. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
2. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
3. **`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;
4. **`Label`** - field for **Label**;
5. **`Heading`** - field for **Heading**;
6. **`Text`** - field for **Text**;
7. **`Button label`** - a field for the text content of the button;
8. **`Button link`** - the **URL** field for 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. **`Image desktop`** - choose a picture to be displayed on the **Desktop**;
11. **`Image mobile`** - choose a picture to be displayed on the **Mobile**;
12. **`Image border width`** - the setting allows you to set the size of the border;
13. **`Image border indent`** - the setting allows you to set the indent of the border;

### Timer

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F51aIDdBQcTq4nIdkHfT1%2FUntitled%20(3).png?alt=media&#x26;token=1394aa3e-d0ac-47f9-b84c-15091f198ad4" alt=""><figcaption></figcaption></figure>

1. **`Year`** - years of the end of the countdown timer;
2. **`Month`** - month of the end of the countdown timer;
3. **`Day`** - day of the end of the countdown timer;
4. **`Hour`** - hour of the end of the countdown timer;
5. **`Timezone`** - Timezone;
6. **`Timer cell background color`** - setting the background color for the time cell;
7. **`Timer cell color`** - setting the text color for the cells of the countdown.

### Video

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FOxqmKVxQDADzCCjJA7qT%2FUntitled%208.png?alt=media&#x26;token=2926f994-1b1f-4372-9e3b-df62b841a2ff" alt=""><figcaption></figcaption></figure>

1. **`HTML5 Desktop Video`** - a field to add an **HTML5** Video to be displayed on the **Desktop**;
2. **`HTML5 Mobile Video`** - a field to add an **HTML5** Video to be displayed on the **Mobile**;
3. **`Youtube/Vimeo Desktop Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Desktop**;
4. **`Youtube/Vimeo Mobile Video Url`** - field to add a link to **YouTube** or **Vimeo** video to be displayed on the **Mobile**.

### Alignment

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F2cPg0HZcehLC9zzWzFQ7%2FUntitled%209.png?alt=media&#x26;token=19154859-7e83-4eb4-b507-f575d75825c5" alt=""><figcaption></figcaption></figure>

1. **`Content alignment`** - 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 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 horizontal`** - block horizontal 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.
4. **`Block alignment vertical`** - block vertical position selector. A block can have 3 positions.
   * **`Top`** - block’s positioning on the top side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Bottom`** - block’s positioning on the bottom side of the container.

## **Additional Information**

1. When choosing a media type, you must fill in the appropriate setting, for example, if you have selected the **Image** type, then below you will find the setting to upload images;
2. In cases where there are settings for different devices (**Desktop and Mobile**), you can fill in only one of the fields. The filled-out field will replace the empty one. For example, you can only fill in **Desktop**, which will be displayed in the same way for **Mobile** and vice versa;
3. If you set an incorrect date for the timer, the timer will not start and zero values will be displayed;
4. When the timer expires, zero values will be shown.