How to use Accordion Widget in Elementor

Do you want to use Accordion widget in Elementor for your WordPress website?

Accordion section is very important for any website. You can display your information in accordion section very professionally. Elementor offer you Accordion widgets, using Elementor accordion you can add and style your accordion section uniquely and professionally.

You do not need to install any extra add-on to create the accordion section. Elementor Accordion widgets gives you all the features and functionalities.

As accordion will display content in collapsible way so you can save space for your website page. Most of the page owners use Accordion in their FAQ page but you can use it any page you want. Accordion widgets is available for both free and pro version of Elementor. Using the Elementor free you can also access the accordion widgets and style your accordion section.

So here in this article we will discuss about how to use Accordion widgets in Elementor.

Use Accordion Widget in Elementor

You can use the Accordion section in any page of your website. To add the accordion widgest go to the page where you want to add it and then click on the “+” icon of Elementor.

Then you have the option to choose the column. For accordion section it is perfect to choose the one column or two column option.

After choosing the structure now it’s time to add the accordion widgets. To add widgets click on the “+” icon of the structure and from the left dashboard search for accordion.

Now drag the accordion block and drop it into the first column. Do the same for the second column to add accordion widget.

Our accordion section is created and by default it has two items. The default accordion section look like this-

From the left dashboard you can edit, delete, copy and add item. To add any item just click on the Add item button. If you want to delete any item click on the “X” icon and to copy any item click on the copy icon next to the “X” icon.

Edit the content of the accordion item just click on the item and it will expand the option. From the title and designation field you can add the title of the accordion. From the paragraph field you can add description of the accordion. Following the same way you can replace content for all the items.

You can add icon from the icon option. There are two ways to add icon, you can upload your own SVG icon or you can choose icon from the icon library. You can set the icon for two condition. Normal condition and active condition when the accordion will expand to show the description. You can also disable the icon if you want.

To select icon click on the icon library option it will pop up the Elementor default icon library from there you can choose your icon and then click on the insert option your icon will be added to the accordion.

Similarly you can change the active icon. You can change the title HTML tag from the title tag option.

How to style Accordion section

After replace all the content now move on to the style tab where you can style your Accordion section. In style tab there are four different style block-

Accordion
Title
Icon
Content

Accordion

From this block you can set the accordion border width and border color.

Title

From title block option you can set the background color of the title, title color, active color and add padding to set the position.

From the typography option you can set the font family, font size, weight, line height, letter spacing and others.

Icon

From icon option you can set the icon alignment, color for normal and active condition and spacing fro the icon.

Content

You can set the content background, content text color and typography from the content option. You can also add padding to set the position of your content.

Use Advance settings option for Accordion

If you want to know more about the advance settings option of Elementor you can check our previous article :How to use the advance settings option of Elementor

For advance setting option you can see different style option available like –

Advance – From this advance menu you can set the padding and margin of the section. You can also set z-index, CSS ID and classes from there too.
Motion Effect – You can add entrance animation effect from here.
Border – Add border, border radius and box shadow for the section
Positioning – Set the section width and postilion as Absolute or Fixed.
Responsive – Make your section responsive for all the screen sizes.
Attribute – Set attribute from the Attribute option
Custom CSS – You can add custom CSS if needed from this option.

Advance

From the advance menu you can add padding and margin to realign the section to right position. You can add the value together or you can unchecked the option and add left, right , top and bottom value individually. After that you can add z-index value and css and id and classes for this accordion section.

Motion Effects

From the motion effect option you can add entrance animation effect. There are a lots effects available you can choose any of them and this effect will active for the specific section. You can also set the animation duration and animation delay time too.

Background

From the background option you can add background for normal and hover condition. You can set the background type as classic or gradient.

Border

From the border option you can set the border type, color and border radius for normal and hover condition. Add a box shadow to the section from the box shadow option.

Positioning

You can set the section width as –

Default
Full width
Inline(Auto)
Custom

Set the vertical align and position as –

Absolute –
Fixed
Default

Responsive

You can set responsiveness for all the screen sizes from the responsive option. You can style the accordion differently for different devices. There is a a option to hide section for desktop, tab and mobile. So if you hide the section it will not visible for that specific devices. So you can easily copy the section and design it differently for mobile devices and hide the section for desktop devices. So, the mobile style will show only in the mobile devices and the desktop style will show only in the desktop devices automatically.