Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Kalles - Banner With Navigation

Mie Tran

Written by Mie Tran

Last updated

412 views

On this page


This section helps you show the banner with the navigation.

11.gif

Steps: In the theme editor (Customize) > Add section > Banner With Navigation > Save.

1. Banner With Navigation blocks

Click on Banner With Navigation > ADD BLOCK > choose the block you want to add.

2023-06-14_17-17-57.gif

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

21.gif

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

22.gif

CONTENT BACKGROUND, COLOR OPTIONS:

  • Help you config the color/design for the content box. You can check video below for detail:

1.2. Other blocks (Child)

  • Text: you can add a text to the banner image and you can adjust text with many options like Font family, Font size, color, etc.

  • Button: This block allows you to create a button for the banner, you can customize this button with many options like add a link, style, effect, color, etc.

  • Image (Child): With this block, you can add a Image(child) inside the Image(parent) and you can adjust the Image(child) more creatively.

  • Countdown timer: This block help you add the countdown timer and set it very easily just by adding the date countdown into.

  • Newsletter: you can add a subscribe form here.

  • Space HTML: This block allows you to create a separator line for this section.

You can refer to this video to know more about these blocks:

2. Banner With Navigation settings

HEADING OPTIONS:

  • You can enter the Heading and Subheading, choose the design for the heading, also can choose text align: center.

GENERAL OPTIONS:

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

Please check this video about heading and general options:

OPTIONS BANNER IMAGE:

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

banner_2.png

NAVIGATION LIST:

  • Add a menu navigation and adjust with options for Navigation item width, Padding inner

2023-06-15_10-44-47.gif

DESIGN OPTIONS:

Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, 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, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.