The Kinetic Text Banner section is a dynamic feature that allows you to display text with animated effects on your store. This eye-catching banner can help draw attention to important messages or promotions, making your online store more engaging for visitors.
How to add this section:
To add this section to your store;
Click on 'add section' which can be found in your left sidebar.
Scroll down, or search for 'Kinetic text banner', then click on the section.
Done, your section is added.
Section settings:
To view the section settings click on the section:
Color Scheme: Choose the color scheme for the kinetic text banner, giving it the desired appearance that matches your store's theme.
Background Opacity: Adjust the transparency level of the banner's background to control how much it blends with the rest of the page content.
Animation Effect: Select the type of animation effect you want for the text in the banner, adding movement or special transitions to make it more visually appealing.
Text Speed: Control the speed at which the text moves when the "text from left" or "text from right" animation is enabled, letting you set the pace of the text animation.
Space Between Text: Set the amount of spacing between individual text elements when using the "text from left" or "text from right" animation, allowing you to fine-tune the layout and presentation.
Width: Choose between two options for the banner's width:
Boxed Width: The banner will be contained within the page width.
Full Width: The banner will extend across the entire width of the page.
Enable Custom Minimal Height: This option enables you to set a specific minimum height for the section, allowing you to customize its appearance further.
Custom Minimal Height: When "Enable custom minimal height" is active, this option lets you input a specific height value for the kinetic text banner section.
Content Position: If the "typewriter" animation effect is enabled, you can choose the position of the text content within the banner section. This option helps you control the layout and alignment of the text when it appears on the page.
Text Font Size: Choose the font size for the text in the kinetic text banner.
Custom Text Font Size: When "Enable custom font size" is active, you can specify a specific font size for the text in the kinetic text banner. For example, you can set it to 80 pixels.
Text Font: Select text fonts from primary or secondary fonts. This font will be used specifically for the typewriter effect.
Text Font Weight: For the "typewriter text" animation effect, choose the font weight (e.g., regular) for the text in the kinetic text banner. This option allows you to define the thickness or boldness of the text characters during the typewriter animation.
Text Font Size: Choose the font size for the text in the kinetic text banner.
Banner height: Control the height of the section for mobile.
Bottom spacing desktop/mobile:
Set the spacing on the bottom for desktop and mobile.
That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.
How to configure Kinetic text:
When you add Kinetic text banner it adds one Kinetic text by default, ofc you can add more and delete according to your need.
To edit lets begin by clicking on the text block:
Kinetic Text: Enter the specific text you want to display in the kinetic text banner. This text will be animated based on the chosen animation effect.
Text Font: Select the primary or secondary font for the text in the kinetic text banner.
Text Font Weight: For the "text from left" or "text from right" animation effect, choose the font weight (e.g., regular) for the text in the kinetic text banner. This option allows you to define the thickness or boldness of the text characters during the animation.