When designing a page with Elementor, you might want to add an accordion element. Elementor has a widget called Accordion which you can use to add an accordion element to the page your working on so that you don’t need to install an add-on. Accordion is usually found on a FAQ page of a website, but you can add it to any page to your liking. On this website, for example. We add an accordion element to the homepage.
The concept of accordion is great to save space as it displays the content is a collapsible style. The Accordion widget of Elementor itself available on both the free version and the pro version of Elementor. A downside of this widget is that it doesn’t allow you to add an image accordion. If you need to add an image accordion, you can install an Elementor add-on like JetTabs or Essential Addons.
How to use the Accordion widget of Elementor
You can add an accordion element to any design you create with Elementor, be it a page or template. If you are new to Elementor, you can read our previous article to learn how to use Elementor. In this article, we will straight to adding the Accordion widget. Simply drag the Accordion widget from the left panel to the canvas area.
As you can see, the widget will automatically create an accordion that consists of 2 items. To edit the content of each item, you can open the item you want to edit the content of (by clicking it). You can edit the heading (title) and the description of the item.
You can repeat the steps above to edit the content of other items. To add more items, you can simply click the ADD ITEM button.
By default, your accordion has a plus icon on each item (and the minus icon on the active item). If you want to change them, you can simply click the icons beneath the accordion items.
Styling up the accordion
Once you are done editing the content on all accordion items, you can go to the Style tab to make the styling. There are 4 setting blocks you can open.
- Accordion
You can open this block to set the width as well as the color of the border.
- Title
You can open this block to style up the heading/title of the accordion items. You can set things like background color, text color, typography (font family, font size, font style, and so on).
- Icon
You can open this block to customize the icons of the accordion items. You can set things like the, icon color, icon alignment, and spacing.
- Content
You can open this block to customize the content of the accordion items. You can set things like the text color, background color, typography, and spacing.
That’s it. You can play around until you get satisfied with the result. One you are done, you can click the PUBLISH/UPDATE button to publish/update your page or template.
4 alternatives to Accordion widget
The Accordion widget of Elementor has some downsides. The most obvious one is that it doesn’t allow you to create an image accordion. If you want to create an image accordion or simply want to look for an Elementor’s native Accordion widget alternative, here are some options you can use.
1. Essential Addons
Essential Addons is one of the most popular Elementor add-ons. It has over 800,000 active installs according to a stat on WordPress.org. Essential Addons has two widgets that you can use to add an accordion element to your Elementor design: Advanced Accordion and Image Accordion. These widgets are available on both versions of Essential Addons.
2. JetTabs
JetTabs is a premium add-on for Elementor developed by Crocoblock. It’s part of the JetPlugins family. The add-on also comes with two widgets that you can use to create both a text and image accordion. When creating a text accordion, you choose whether you want to add the content from a template or via the editor.
3. Happy Addons
Happy Addons is a rising Elementor add-on. It’s released as a freemium add-on. The widget to create accordion is only available on the pro version. You can add the content from a template or via the editor. There is no option to create an image accordion, unfortunately.
4. Stratum
Stratum is another alternative to add an accordion element to your Elementor page or template. The add-on comes with two widgets that you can use to create an image accordion and text-based accordion, respectively. Stratum is released as a freemium add-on and the widgets to create accordion are available on both versions of Stratum.
