Banner animation heading

The Banner Animation Heading section adds a unique and interactive element to your store. It features a zoom-in animation for the heading text that triggers as the user scrolls, creating a modern and engaging visual effect. You can upload a background image or use a solid color to match your branding, and customize the heading text, alignment, and animation speed. This section is perfect for drawing attention to key messages, promotions, or seasonal collections while giving your storefront a dynamic and polished look.

Adding a Section

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

Section settings

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

Colors

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. Heading(before animation) - the setting allows you to set the color for heading(before animation);

5. Text - text color setting;

6. Link - ****setting link text color;

7. Button background - setting the background color of the button;

8. Button label - setting button label color;

9. Button border - setting the color of the button border;

10. Button background (hover) - setting the background color of the button on hover;

11. Button text (hover) - setting button label color on hover;

12. Button border (hover) - setting the button border color on hover.

13. Overlay - overlay color for media content;

14. Image border color - the color of the border that can be added to the media content;

Layout

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

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(Image can be used as background for heading before animation);

13. Image mobile - choose a picture to be displayed on the Mobile(Image can be used as background for heading before animation);

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

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

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

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(Image can be used as background for heading before animation);

11. Image mobile - choose a picture to be displayed on the Mobile(Image can be used as background for heading before animation);

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

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

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

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.