Banner animation scale

The Banner Animation Scale section lets you create a bold and animated banner that scales on scroll for an eye-catching effect. It supports images and videos as background, making it perfect for showcasing a product, promotion, or collection in a visually dynamic way. You can also add a countdown timer to highlight limited-time offers or upcoming launches. This section combines strong visuals with smooth animations to create an engaging and modern storefront experience.

Adding a Section

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

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. 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

  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;

  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

  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;

  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

  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.

PreviousBanner animation headingNextBanner with thumbnails

Last updated