SectionAI is free + 20K tokens if you're a The4 customer, Free plan is available Install App  

Header background

Element sections - Banner

Mie Tran

Written by Mie Tran

Last updated

698 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

🎁 Exclusive Deals for The4 Customers

SectionAI

🤖 SectionAI – Build Sections with AI

Generate Shopify sections from text or wireframes.
The4 users get +20,000 bonus tokens when verifying their theme license.

  • ✅ No-code section builder
  • ✅ Works with your The4 theme
  • ✅ Build FAQs, banners, product grids & more
🚀 Try Free – Claim Tokens
EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $114).

  • ✅ 100+ templates ready to use
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free

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.