Background Video
This section helps you to show the video on your site. Background videos are automatically muted to allow autoplay. You can go to Theme sections > Add section > Background Video and configure it.
1. Settings
1.1. GENERAL OPTIONS
Section height: This allows you to set the height for the section.
Use custom height (Desktop, Tablet and Mobile): Turn on this option to use custom height for the background section on desktop, tablet and mobile devices on Section height (Desktop, Tablet and Mobile) option.
Cover image: This option allows you to upload an Image. It's the fallback when autoplaying video is not supported on mobile devices.
1.2. SOURCE VIDEO
The Source video option allows you to choose to show the video from Youtube or upload a file.
If you use Youtube video, you can copy and paste the link video from Youtube to the video url.
If you use Upload file video, you have to go to Shopify admin > Settings > Files > Upload video and copy the link video. Then, you can paste the link video to the upload file.
1.3. CONTENT POSITION OPTION
You can also set the Content align (both on mobile and desktop) and Content width for the content in the section.
Helps you configure the style of the content with options for Content vertical position, Content horizontal position both on Mobile & Desktop
1.4. CONTENT BACKGROUND, COLOR OPTIONS
Helps you configure the style of the content color & content background color with options for Overlay color, Overlay opacity, Background color, Background color opacity.
You can also change the Content padding top/bottom (px), Content padding left/right (px) for both on Moblile & Desktop
Use border content: Turn on this option to use the border content. And you can change the Border color, Background border, Border opacity, Border style and Borderr Padding.
Please follow this video below for details:
1.5. DESIGN OPTIONS
Layout: You can choose between Container and Full width. Besides, you can also choose background color or background gradient for layout.
Margin, Padding: You are allowed to change both of them for both on Mobile & Desktop devices.
2. Text
Input Text: Enter the content of the text.
Remove <br> tag on mobile: Turn on this option to remove <br> on the mobile device.
Helps you configure the style of the text with options for Font-Family, Color Text, Font-Size, Font-Weight, Line-Height, Letter-Spacing, Margin bottom.
Enable font style italic: Turn on this option to use the font style italic.
Enable text shadow: Turn on this option to set the text shadow for the text.
Hidden on mobile: This option allows you to hide the text block on the mobile device.
You can also change the Font-Size, Line-Height, Letter-Spacing, Margin bottom on Mobile too.
Animation: There are many animations for the text. You can select one of them.
3. HTML
Type html: Input the HTML code to here. You can go this link for details about HTML.
Hidden on mobile: This option allows you to hide the HTML block on the mobile device.
Animation: There are many animations for the text. You can select one of them.
4. Button
Button label: Edit button text.
Button link: Make a button clickable with a link.
Open link in: This option allows you to set the link to open in the current window or a new window when a customer clicks on the button.
Helps you configure the style of the text with options for Font Family, Button Icon Width, Button style, Button hover effect, Primary color, Secondary color, Font Size, Font Weight, Letter Spacing, Min Height, Border radius, Padding left/right and Margin Bottom.
Hidden on mobile: This option allows you to hide the button on the mobile device.
You can also change the Button Icon Width, Font-Size, Min-Height, Letter Spacing, Padding left/right and Margin Bottom.
Animation: There are many animations for the text. You can select one of them.
5. Image(Child)
Image (Child): This option allows you to upload an Image.
Image width (Unit: px): Enter the image's width value for both desktop and mobile devices.
Hidden on mobile: This option allows you to hide the image on the mobile device.
Margin bottom (Unit: px): Enter the margin bottom value for both desktop and mobile devices.
Animation: There are many animations for the text. You can select one of them.
Please follow this video below for details:
6. Countdown timer
Date countdown: Enter the date countdown here.
Countdown design: There are two countdown designs. You can select one of them.
Helps you configure the style of the countdown timer with options for Countdown size, Border radius, Border width, Space between items, Number color, Text color, Border color item time, Background item time, Margin bottom(both on Mobile & Desktop devices).
Hidden on mobile: This option allows you to hide the countdown timer block on the mobile device.
Animation: There are many animations for the countdown timer. You can select one of them.
7. Space HTML
This block allows you to add space with color between two blocks of content.
Helps you configure the style of the space HTML with options for Color, Width, Height, and Margin Bottom on both mobile and desktop devices.
Hidden on mobile: This option allows you to hide the space HTML block on the mobile device.
Animation: There are many animations for the space HTML. You can select one of them.
Please follow this video below for details:
[Private Offer] EComposer Partner Plan
Exclusively for Kalles users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
FREE 100% EComposer Standard plan for 6 months (save you $114)
Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
Create advanced sections & add to Kalles with ease
Save up to 50 pages/sections
100+ professional, stunning pre-designed templates
Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for free
Cheers, The4.
Last updated
