Elementor Accordion Widget

Key Features of the Elementor Accordion Widget

• Multiple Item Management: Easily add, remove, and rearrange items within the accordion to fit your content needs.
• Icon Customization: Set unique icons for opened and closed states to make interactions more intuitive.
• Full Styling Control: Customize colors, typography, and borders for both open and closed states of each item.
• Default Active Item: Select which accordion item is active by default when the page loads.
• Responsive Design: The widget is fully responsive, ensuring a seamless experience across devices.

What’s Needed?

To use the Elementor Accordion Widget, you’ll need:

• Elementor Free Version: The base plugin required for creating pages in WordPress.
• Vertex Addons for Elementor: The add-on plugin that provides the Accordion Widget.

Install and Activate the Elementor Accordion Widget

To activate the Elementor Accordion Widget, please refer to our Widget Activation Guide.

How to Configure the Elementor Accordion Widget in Elementor

To create and customize the Elementor Accordion Widget in Elementor, start by adding the widget to your page and configuring the options available in the Content, Style, and Advanced tabs. Let’s walk through each step to create an engaging and functional accordion section for your website.

Step 1: Adding the Widget

Drag and drop the Accordion Widget from the Elementor panel into the section where you want the accordion content.

Content Tab Configuration

The Content tab is where you add and customize each item within the accordion.

1. Accordion:
   • Under the Accordion section, you can manage each item (or section) within the accordion.
2. Items:
   • Add, Remove, or Rearrange Items: You can add new items, remove items, or rearrange them by dragging to suit your content needs.
   Customization for Each Item:
   • Icon: Choose an icon for each item to visually represent it when closed.
   • Main Icon Color: Set the color for the main icon in the closed state.
   • Main Icon Background Color: Select a background color for the main icon.
   • Close Icon: Choose the icon that displays when the accordion item is closed.
   • Open Icon: Select the icon to show when the accordion item is open.
   • Title: Enter the title for each accordion item. This is what users will click to expand or collapse the section.
   • Description: Add the description or main content for each item. This will be visible when the accordion item is opened.
3. Default Active Item:
   • Set Default Active Item: Select which accordion item will be open by default when the page loads. This is useful for drawing attention to specific information immediately.
4. Item Number:
   • Use this option to number the accordion items automatically, giving users a clear order to follow through your content.

How to Style the Elementor Accordion Widget

The Style tab provides options for customizing the appearance of each part of the accordion widget, including icons, text, and overall layout.

Main Icon:

• Icon: Choose a primary icon for the accordion items.
• Size: Adjust the icon size to make it visually proportional to the accordion content.
• Main Icon Width: Set the width for the icon to match the look and feel of your design.
• Border Radius: Add rounded corners to the icon if desired.

Open / Close Icons:

• Close Icon: Customize the close icon, which appears when the accordion item is collapsed.
• Open Icon: Customize the open icon, visible when the accordion item is expanded.
• Close Mode Icon Color: Define the color of the icon when the item is in a closed state.
• Open Mode Icon Color: Choose the color for the icon when the item is opened.
• Icon Size: Adjust the size of the open and close icons for consistency with your design.

Texts:

• Open Mode Icon Color: Select a color that appears on the title when the accordion item is expanded.
• Title Color on Hover: Choose a color for the title when users hover over it.
• Description Color: Set the color for the description text when the accordion item is opened.
• Title Typography: Customize the font style, size, weight, and other typography settings for the title.
• Description Typography: Adjust the typography for the description, ensuring it’s easy to read.

Items:

• Normal:
  • Background Color: Set the background color for accordion items in their default (closed) state.
  • Border Type: Choose a border style for each item to separate them visually.
  • Border Radius: Add rounded corners to the accordion item’s border.
  • Margin: Adjust the spacing around each accordion item.
  • Padding: Control the inner padding for better spacing around the title and description.
• Hover:
  • Background Color: Select a color to apply when users hover over the accordion item.
  • Border Type: Choose a border style that changes on hover.
  • Border Radius: Adjust the hover border radius to match the normal state.
  • Margin: Set a different margin for the hover state if needed.
  • Padding: Adjust the inner padding of each item when hovered.

Advanced Tab Configuration

The Advanced tab in the Elementor Accordion Widget is consistent across all Vertex widgets, offering advanced layout and design options:

• Margin: Control the spacing around the widget for better positioning.
• Padding: Set the inner padding around the widget content to ensure proper spacing.
• Custom CSS: Add custom CSS if further styling is needed to achieve your desired design.

Final Outcome

Once the Elementor Accordion Widget is configured, you’ll have a clean, responsive, and interactive accordion that can serve various purposes on your website. The widget is perfect for FAQs, product information, and organized content sections, creating an efficient and user-friendly experience.