The “Icon Accordion Widget” allows you to create interactive collapsible sections with icons for free in WordPress Elementor websites. This widget enhances content organization by displaying information in an expandable format, making it easier for users to navigate. You can customize the icons, layout, colors, and animations to match your site’s design seamlessly.
Let’s explore the features of the “Icon Accordion Widget” below.
Elementor Icon Accordion Tutorial Video
Add a Free Icon Accordion to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Icon Accordion”
- Hover over the widget in the search results and click install
- Add your “Icon Accordion” widget to any Elementor Page
General Settings in Elementor Icon Accordion
First Accordion Closed (Pro)
Keep the first accordion in closed state.
Heading Direction
Set the accordion heading direction.
- Regular
- Reverse (Pro)
Show Icon
Show/Hide the icon.
Show Expand (Pro)
Show/Hide the expand icon.
Close Others on Open (Pro)
Close other accordion on opening one.
Title HTML Tag
Select the HTML Tag for the title.
- div
- H1
- H2 (Pro)
- H3 (Pro)
- H4 (Pro)
- H5 (Pro)
- H6 (Pro)
- span (Pro)
- p (Pro)
Icons Settings in Elementor Icon Accordion
Expand Icon
Choose an icon for expand button.
Collapse Icon
Choose an icon for collapse button.
Elementor Icon Accordion Connected Widgets Settings
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Elementor Icon Accordion Jump to Item Link Settings
Accordion Name
Type the accordion name.
With this option you can create a go to accordion item link.
Items Settings in Elementor Icon Accordion
Manage the items of the accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Heading
Type heading for accordion.
Icon
Choose an icon to display.
Content Type
Select the content type from below options.
- Content - To type text content to display.
- Template - Choose Elementor template to display.
Override Icon Background Color
Set the background color for icon.
Override Heading Background
Set background color for heading.
Elementor Icon Accordion Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Elementor Icon Accordion Item Styling
Set the spacing, border, shadow, background, and radius of items.
Elementor Icon Accordion Heading Styling
You can style the heading background, background image, typography, padding, radius, text color, and border.
Elementor Icon Accordion Content Styling
You can set the content background, typography, text color, padding, radius, border, and marging.
Icon Styling in Elementor Icon Accordion
Set the icon size, background, color, radius, border, and spacing.
Elementor Icon Accordion Expand Collapse Styling
In this section, set the icon size, background, color, radius, border, spacing, and shadow.
Elementor Icon Accordion Heading Hover Styling
You can style the heading hover background, text color, icon background, and icon color.
Elementor Icon Accordion Heading Active Styling
You can set the heading active background, text color, icon background, and active icon color.
Usage Examples of Elementor Icon Accordion
Here are some live use cases for the Icon Accordion widget.
Free Icon Accordion for Elementor with Frequently Asked Questions.
Free Icon Accordion for Elementor with a Gradient Background.
Thank you for using the Icon Accordion Widget for Elementor! With its sleek design and customizable icons, this is the best Icon Accordion Widget for Elementor, perfect for creating collapsible content sections that enhance readability and user experience. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
