Categories
Widget

How to use Accordion Widget for elementor

Using Accordion Widget of Exclusive Addons Elementor, you can create beautiful Accordion for your web page.

STEP 1:

Select the ‘Accordion’ widget from Elementor panel. Then drag and drop it in the selected area.

STEP 2:

In Content section, you will find options to edit ‘Contents’.

2.1. You can Add Item by clicking add item button. And delete item by clicking the cross button.

2.2. Each accordion item have three options ‘Content’, ‘Image’ and ‘Style’.

In Content Option you can set this item is defultly active or not, Enable title icon, set an Icon, Accordion Title, and content. You can also enable button.

You can choose an image for content.

In Style option you can set full container Background Color. Set Title Color, Background Color, Hover Color and Hover Background Color. You can also set Content Border.

You can also Enable or Disable inactive/active icon. Also set that icon.

All other items have same options.

STEP 3:

In Style section, you will find options to edit ‘Container’, ‘Title’, ‘Title Icon’, ‘Inactive/Active Icon’, ‘Content’, ‘Image’, ‘Button’.

3.1. Container section consist of ‘Background Color’, ‘Padding’, ‘Margin’, ‘Border’ and ‘Box Shadow’.

3.2. In Title section you can set ‘Typography’, ‘Padding’, ‘margin’ and some more options. You can also set Text Color and background for Normal, Hover and Active status.

3.3. Title Icon Consist of ‘Width’, ‘Margin’, ‘Padding’, ‘Border’ and some more options. You can also set Color and Background Color for both Normal and Active status for the accordion widget.

3.4. Active/Inactive Icon consist of Icon Size, Width, Border and some more options.

3.5. In Content section, you can set Typography, Background Color, Text Color, Border, Border Radius and some more options.

3.6. In Tmage section, you can set Image Position, Image Size, Padding and Margin.

3.7. Button section consist of Typography, Padding, Margin, Text Color, Background Color for both normal and hover status.

STEP 4:

Finally, after using accordion widget and clicking the update button you will see the beautiful Accordion on your webpage.

Get Your Free Exclusive Accordion Widget