Widgets

Advance Accordion

Step-by-Step Tutorial on Using the Advance Accordion Widget of Zyre Addon.

The Advanced Accordion widget helps you organize and present content in collapsible sections, making your webpages more interactive and user-friendly. Perfect for FAQs, product details, or knowledge bases, it allows you to display large amounts of information in a compact and stylish format with smooth toggle animations and customizable designs.

Learn How To Use Advance Accordion Widget:

Exploring the Features of Advance Accordion Widget.

Step 1: Drag the widget

From the left panel, search or choose the Advance Accordion of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Advance Accordion:

  • Advance Accordion Style : You can choose a predefined style from here
  • Accordion List
    • Accordion Title : Set the title text for each accordion item.
    • Content Type : Select the type of content (custom, saved section).
    • Accordion Content : Add the main content inside the accordion.
  • Active Item Index : Define which accordion item is open by default.
  • Icon Position : Choose where the toggle icon appears (left or right).
  • Open Icon : Set the icon that shows when the accordion is expanded.
  • Collapse Icon : Set the icon that shows when the accordion is collapsed.

Step 3: Style tab

In the Style section, you can customize the Item, Title, Description – but make sure you have added them first.

Item:

  • Margin Bottom : Set spacing below each accordion item.
  • Background Color : Choose the background color for accordion items.
  • Padding : Control inner spacing inside the accordion item.
  • Border Type : Customize border style, width, and color.
  • Border Radius : Round the corners of the accordion item.
  • Box Shadow : Add drop shadow effects.

Title:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Gap : Control the spacing between the title text and the icon.
  • Padding : Adjust inner spacing around the title area.
  • Border Type : Define border style, width and color.


Title Icon

  • Icon Size : Set the size of the accordion toggle icon.
  • Padding : Control inner spacing around the icon.
  • Border Type : Customize border style, width, and color for the icon.
  • Border Radius : Round the corners of the icon container.
  • For both Normal & Hover States:
    • Color : Set the text color for the title.
    • Icon Background : Choose a background color for the icon.
    • Icon Color : Define the icon’s color.

Description:

  • Background Color : Set the background color of the content area.
  • Color : Choose the text color for the description.
  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Margin : Control the outer spacing around the description area.
  • Padding : Adjust inner spacing inside the description area.
  • Border Type : Define border style, width, and color.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Advance Accordion come to life on your webpage!

You’re all set!

Share: