Banner Parallax

Banner Parallax is one of the outstanding features in Kalles 4. By using it, it's possible to make a professional and beautiful section. This is an example of a Banner Parallax.

From Sidebar section > Scroll down to the Add new section > Find Banner Parallax > Add section.

1. Banner Parallax Settings


  • This section allows you to upload an image, you can choose from your device or an available image.

  • Height: You can adjust Section height including Full screen, Adapt to image, and Custom height. Regarding the custom height, you can change it for both desktop and mobile devices.

  • Enable parallax scroll: Enable it to make a banner as my above video example. If you want your banner fixed, please untick it.

  • Image position: This option doesn't work when enabling parallax scroll.

  • Banner link: Add a link here to make your banner clickable. You can also choose to open link in the current window or a new window.

  • Moreover, you are allowed to choose Content align and Content width for the banner.


  • Overlay opacity: You can choose a color and then adjust the opacity option for the whole banner background.

  • Show background content color: This will help your content be more marked. You can also adjust the background layout.

  • Content padding: You can change the top/bottom or left/right padding for both desktop and mobile devices.

  • Show border content color: If you turn this option on, you can also change color and padding (both mobile and desktop devices) for the border.


  • Content position: There are many options for you to change the vertical/ horizontal position for both mobile and desktop.

  • Animation: You can change Duration animation each block and Time animation delay.


  • Design options: You're allowed to change Margin, Padding for both desktop and mobile devices.

  • Custom CSS: If you want to add CSS code to this part, you must enable this part first.

2. Banner Parallax Content

You can add a maximum of 50 blocks for Banner Parallax.

2.1. Text

Banner Parallax > Add block > Text. You can enter and change content, weight, size, spacing, color for your text.

2.2. Space HTML

Banner Parallax > Add block > Space HTML. This option allows you to add space for a slide, you can adjust width, color, space top, space button, etc.

2. 3. HTML

Banner Parallax > Add block > HTML. This option allows you to enter HTML for the banner.

2.4. Button

Banner Parallax > Add block > Button. This option allows you to create a button for the banner.

2.5. Image (Child)

Banner Parallax > Add block > Image (Child). This option allows you to upload and configure an image for the banner.

2.6. Countdown timer

Banner Parallax > Add block > Countdown timmer. This option allows you to add and configure a countdown timer.

2.7. Newsletter form

Banner Parallax > Add block > Image (Child). This option allows you to add and configure a countdown timer.

[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