Accordion
This section will help you to build your site in accordion style with smooth animation. It’s considered one of the best elements to optimize your page’s content with just a few simple steps.
To configure the accordion section, please go to Theme sections > Add section > Accordion.

1. Settings

HEADING OPTIONS

  • Heading design: There are totally 14 heading designs.
  • Heading align: Align the title to the left, center, or right.
  • Heading: Enter the content of the heading.
  • Enter a icon name on heading: Go to LineAwesome to get the icon that you want to show on design 6.
  • Subheading: Enter the content of the subheading.
  • Space bottom (px): This allows you to change the space between the heading and content.
Please follow this video below for details:

GENERAL OPTIONS

  • Accordion design: There are 2 designs. You can select one of them.
  • It helps you configure the color and background color of the content accordion section with options for Accordion label color, Accordion label background color, Accordion label active color, Accordion label active background color, Accordion content color, and Accordion content background color.
  • Accordion content align: Align the accordion content to the left, center, or right.

DESIGN OPTIONS

  • Layout: You can choose between Custom Width, Container, Wrapped Container and Full width. Besides, you can also upload a background image, choose a background color, or a background gradient for the layout.
  • Custom width for content: This allows you to change the width of the layout section as you want. It only works when selecting the layout custom width from the Layout option.
  • Margin, Padding: You are allowed to change both of them for both on Mobile & Desktop devices.

2. Accordion item

  • Accordion icon: There are many icons. You can select one of them.
  • Accordion label: Enter the content of the label.
  • Accordion content: Enter the content of the accordion content.

[Private offer] Kalles Partner Plan

Don't have to be a tech-savvy, you surely can create your powerful and eye-catching store with EComposer - Visual Landing Page Builder app - Our free Add-on for Kalles 4.
No more code headaches - FREE 100% lifetime (save your $150 annually) - delicate support.
Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Kalles+EComposer” to upgrade for FREE.