Advanced Accordion

The Advanced Accordion Widget in Animation Addons for Elementor is a pro feature. To use this widget, make sure the plugin is installed and activated on your site. While you can browse both free and pro widgets using the filtering options, this specific widget is available only in the pro version.

Introduction

The Advanced Accordion Widget in Animation Addons for Elementor lets you create interactive, collapsible content sections, offering a sleek and customizable design to enhance user experience.

Key Use Cases for the Advanced Accordion Widget:

• Organize content into interactive, collapsible sections for better navigation.
• Customize the design to match your website’s style and improve user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Advanced Accordion Widget:

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Advanced Accordion Widget in the list.
• Toggle it on to enable the widget.
• The Advanced Accordion Widget is now ready to use!

How to Add the Advanced Accordion Widget in Elementor:

• Open the page where you want to add the Advanced Accordion Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Advanced Accordion Widget.
• Drag the widget to your desired section.

How to Configure Advanced Accordion Widget

• In the Elementor panel, search for the “Advanced Accordion Widget.”
• Drag and drop the widget into your desired section on the page.
• From the widget settings, add accordion items by entering the title and content for each section.
• You can enable icons, set active toggle behavior, and adjust animation settings for smoother user interaction.
• Use the Style tab to customize the appearance—adjust typography, spacing, colors, borders, and hover effects to ensure the accordion matches your site’s branding and design.

Configuring Advanced Accordion Widget : A Step-by-Step Guide

After adding the Advanced Accordion Widget to your page, you can customize its settings through the Content, Style, and Advanced tabs.

Content Settings

Under the Content tab, you’ll find the Accordion panel, where you can manage and configure your accordion items:

• Accordion Items: Add as many accordion items as needed. Each item includes a title and content area to display detailed information.
• Icon: Choose an icon to indicate the expandable section state.
• Active Icon: Set a distinct icon to display when the accordion item is opened.
• Title HTML Tag: Define the semantic tag (e.g., H1–H6) for the accordion titles to support SEO and content hierarchy.
• First Item Opened: Toggle to enable the first accordion item to be expanded by default.
  
• FAQ Schema: Enable this to apply structured data markup, helping search engines recognize the accordion content as FAQs for better visibility in search results.

Style Settings

The Style tab allows you to fine-tune the appearance of your accordion for a polished and branded design. The available customization areas include:

Accordion

• Border Width: Define the thickness of the border surrounding each accordion item.
• Border Color: Choose a color for the item borders.
• Border Radius: Adjust the roundness of the item corners.
• Item Gap: Set the spacing between each accordion item.

Count

• Color: Select a color for the numeric or symbol counter (if used).
• Typography: Customize the font style, size, weight, and more.
• Padding: Adjust spacing around the count element.

Title

• Alignment: Set the horizontal alignment of the title text.
• Background: Choose a background color or gradient for the title area.
• Color: Define the default title text color.
• Active Color: Choose a different text color for the active (open) accordion item.
• Typography: Control the font settings for the title text.
• Text Stroke: Apply a stroke effect to the title text.
• Text Shadow: Add shadow to the title for a layered look.
• Padding: Set spacing inside the title area.

Icon

• Size: Adjust the dimensions of the expand/collapse icon.
• Alignment: Set the icon position relative to the title.
• Color: Choose the default icon color.
• Active Color: Define the color for the icon when the item is open.
• Spacing: Adjust space between the icon and the title.

Content

• Background: Set a background color or style for the content area.
• Color: Choose a text color for the content.
• Typography: Customize the font settings for the content text.
• Text Shadow: Add shadow for depth or emphasis.
• Padding: Control spacing inside the content box.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

Congratulations! You’ve successfully learned how to configure the Advanced Accordion Widget in Elementor to create interactive and collapsible content sections. For any further assistance or inquiries, feel free to contact our support team.