Open Store Free
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket
  • Buy Themes
  • Documentation
    • Kalles Shopify Theme
    • Kalles WordPress Theme
    • Gecko Shopify Theme
    • Elessi Shopify Theme
  • License FAQs
  • Open Ticket

Kalles WordPress Theme

home/Documentation/Kalles WordPress Theme
Popular Search:Import demo, Update theme, Custom color
  • 2. CHANGELOGS
  • 3. INSTALLATION
    • How to import demo data?
    • Install theme
    • Installing Required and Recommended Plugins
    • System Requirement
  • 4. UPDATE THEME
    • How to update the plugins that came with the theme
    • How to update the theme?
  • 5. SHOP PAGE
    • How to add the content for filter on mobile device
    • Sub Categories
    • Top Categories Menu
  • 6. PRODUCT PAGE
    • Brand page
    • Buy more save move feature
    • Complete The Look
    • Dynamic checkout buttons
    • External/Affiliate Product
    • Frequently Bought Together
    • Grouped Product
    • Other product swatch types
    • Product 360 viewer
    • Product Swatches Color
    • Product Swatches Gallery
    • Product Swatches Images
    • Product Upsell Features
  • 7. THEME OPTIONS
    • Blog
    • Cart & Checkout
    • Categories page
    • Color Scheme
    • Custom 404 page
    • Custom CSS JS
    • Footer settings
    • General Settings
    • Header
    • Maintenance Mode
    • Popup
    • Portfolio
    • Product Page Configuring
    • Social Network
    • Typography
    • WooCommerce General
  • 8. ELEMENT SECTIONS
    • Banner
    • Banner carousel
    • Banner Custom
    • Banner Packery
    • Blog
    • Categories List
    • Deal of the day
    • Featured Product
    • Heading
    • Icon and Text
    • Instagram shop
    • Kalles Newsletter
    • Links list
    • MailChimp
    • Member
    • Portfolio
    • Product
    • Product Tabs
    • Products
    • Testimonial Carousel
  • 9. FEATURES
    • Ajax Login, Google Capcha Verify
    • Myshopkit Configuration
    • New Filter Layout
    • Popup Login
    • Portfolio
    • Price Range Slider Filter
    • Social Login
    • Store Location page
    • White Label
  • 10. THEME FAQs
    • Currency
    • How to Build a Mega Menu?
    • Why and how to install the child theme?

Banner

284 views 0 January 12, 2022 Sarah

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.

2. Configure Banner’ Content

2.1. Image

  • 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

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

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

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

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.
You can see an example from our theme by using it

Was this helpful?

Yes  No
Copyright 2021 the4.co. All Rights Reserved.
Popular Search:Import demo, Update theme, Custom color