Banner With Navigation

This section helps you show the banner with the navigation . You can go to Theme sections > Add section > Banner With Navigation and configure it.

HEADING OPTIONS

Heading design: There are totally 14 heading designs.
Heading align: Align the title to the left, center, or right.
Heading: Enter the content of the heading.
Enter a icon name: Go to LineAwesome to get the icon that you want to show on design 6.
Subheading: Enter the content of the subheading.
Space bottom (px): This allows you to change the space between the heading and conten

GENERAL OPTIONS

Enable border: Turn on this option to show the border on the section.

Please follow this video below for details about the heading options and general options:

OPTIONS BANNER IMAGE

It helps you configure the banner with options for Banner positon, Banner width(both on Desktop, Tablet), Banner padding(both on Desktop, Tablet), Image ratio, Image size, Image position, Image hover effect and Banner effect when hover.

It helps you configure the navigation with options for Navigation item width, Padding inner(both on Desktop & Mobile)
Menu: This option allows you to add the menu navigation

DESIGN OPTIONS

Layout: You can choose between Container, Wrapped Container and Full width. Besides, you can also upload a background image, choose a background color, or a background gradient for the layout.
Margin, Padding: You are allowed to change both of them for both on Mobile & Desktop devices.

2.1. Banner item(Parent)

GENERALS

Image item: This option allows you to upload an Image both on (Mobile & Desktop)
Banner link: Make the banner 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 image.

CONTENT POSITION OPTIONS

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

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

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

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

2.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 button 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 button. You can select one of them.

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

Form width: Enter the width of the form newsletter (both on Mobile & Desktop). And the default is 100% (Unit: px).
Newsletter design: There are totally 9 heading designs.
Newsletter input align: Align the content to the center or left.
Helps you configure the style of the form newsletter with options for Newsletter size, Input color, Border color, Button color, Button background color, Button hover color, Button hover background color, Margin bottom(both on Mobile & Desktop devices).
Hidden on mobile: This option allows you to hide the form newsletter block on the mobile device.
Animation: There are many animations for the form newsletter. You can select one of them.

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

PreviousBanner Parallax NextBlog

Last updated 1 year ago