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

Header background

Element sections - Banner

Mie Tran

Written by Mie Tran

Last updated

510 views

On this page


This is a single banner which allow you to config title and content in banner. By using this section, you can combine with Elementor layout to create your own banner layout.

1. Add Banner

  1. From Dashboard > Pages > All pages > select the home page you want to add Banner carousel > Edit with elementor.

  2. Scroll down to Kalles Theme > drag and drop the Banner into the page.

banner1.jpeg

2. Configure Banner’ Content

2.1. Image

banner_14.jpeg
  • Choose image: Uploads the image that you want to show. 

  • Overlay Color: Adds overlay background to image.

  • Enable Effect Hover: Allows zoom when hover to image.

  • Link: Allows to add link to the banner.

  • Banner Layout:  There are 2 types. They are Content inside and Content outside.

2.2. Content

banner_15.jpeg
  • Sub title: Enter the sub title for the banner.

  • Title: Enter the title for the banner.

  • Short description: Create a brief description of the banner’s content.

  • Button Link, Button Link text : Choose Custom URL and paste a link here.

  • Enable divider: This option allows you to add divider of banner. If you enable it, you can set the icon and color for the divider.

  • CSS Animation: There are 5 style animation. They are Top to bottom, Bottom to top, Left to right, Right to left, Appear from center.

  • Extra class name: You also can add an extra class name in this option. (Style particular content element differently – add a class name and refer to it in custom CSS).

3. Configure Banner’ Style

  • Content: With these options, you can change the Content Alignment, Padding, Horizontal Position, Vertical Position.

banner_16.jpeg
  • Sub title text, Title, Description: With these options, you can change the Spacing, Text color, and Title typography.

banner_18.jpeg
  • Button (only appear when you activate the Custom URL in Button Link): Design styles of button such as Button type, Text color, Border color, Background color, Border radius, Padding, and Typography.

banner_17.jpeg

4. How to use this section?

As you see, this section only allows you to add a single image with content inside, so how does it apply on your website?

You can use a layout from Elementor to create your own banner layout, for example. I want to create 3 banner blocks, so I will add a new row with 3 columns, and in each column you will add a single banner section.

banner6.jpeg

You can see an example from our theme by using it

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

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

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