Banner Custom
Here is an amazing section that will help you design the Banners creatively and professionally. It has never been easier to create a banner.
From Theme section sidebar -> Add Banner custom
1. Banner Custom Settings
1. 1.GENERAL OPTIONS
Banner ratio: You can choose between Full screen, Adapt to image, Custom height.
Image size: This option allows you to display Full size image or Auto (This settings apply only if the image ratio is not set to 'Adapt to image').
Image position: You can set position for the Banner image with many selections(This settings apply only if the image ratio is not set to 'Adapt to image').
Space horizontal items: You can set the space between items by horizontal.
Space vertical items: You can set the space between items by vertical.
1.2. DESIGN OPTIONS
Layout: You can choose between Container, Wrapped container, Full width for the banner layout.
Background: You can set the background color for this section.
Background gradient: You can set the background gradient color for this section.
Background Image: You can add an image for the banner section.
Margin, Padding: You are allowed to change both of them for mobile devices.
2.Banner content
2.1.Banner item (Parent)
Each image represents for one banner. You also can configure the banner by clicking on them.
In this block, you can adjust your Banner like height, add image, effect, etc. And the most importance is you can adjust BANNER CONTENT POSITION, BACKGROUND, COLOR, ANIMATION with many options below:
Content align: You can align content to Left, Center or Right.
Content vertical position: If you set vertical < 50%, your content will be located to the Top position and vice versa for > 50% to the Bottom position.
Content horizontal position: If you set horizontal < 50%, your content will be located to the Left position and vice versa for > 50% to the Right position (You need to change the Content width to Auto first).
Overlay color: Overlay means to cover the surface of something with a coating. In other words, it is used to set one thing on the top of another.
Overlay opacity: You can set the overlay opacity value.
Use background content color: This option allows you to disable/enable the background color for block content.
Background color: You can set background color for block content.
Background color opacity: You can set the opacity value for background color.
Content padding: You can set the padding for Block content on desktop or mobile devices.
Border content: You can set color, opacity, style, padding for border content.
Duration animation each block: You can set the time for each block show up.
Time animation delay: Defines the number of time to wait when the animation previous end, before the animation next will start.
Example: If you set 5s for the "Duration animation each block" and 30% for "Time animation delay", each block will show up alternately after 1.5s apart.
Notice: You need to set the Animation for the block content first.
2.2.Text
With this block, you can add a text to the banner image and you can adjust text with many options like Font family, Font size, color, etc.
2.3.Button
This block allows you create a button for the banner, you can customize this button with many options like add a link, style, effect, color, etc.
2.4.HTML
This block allows you to add a HTML codes to the banner.
2.5.Image (Child)
With this block, you can add a Image(child) inside the Image(parent) and you can adjust the Image(child) more creatively.
2.6.Countdown timer
This block help you add the countdown timer and set it very easily just by adding the date countdown into.
2.7.Space HTML
This block allows you to create a separator line for this section.
You can customize some options for Space HTML like Color, Width, Height, Margin.
[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
