Accordion is designed to show information creatively. This tool will show one information below another once you click. Mostly useful for creating FAQs, tabs, and more. 

Video Instruction #

Using Accordion  #

Use the Accordion fully by following the steps mentioned below. 

Step 1  #

From the menu bar on the left-hand side, select  Accordion. Drag and drop the widget on the area you want it to be.

Step 2 #

Once you have selected the section, you will see the following options: Content, Style, and Advanced. 

Accordion widget on Elementor page builder

Step 3  #

From the Preset option, within the Content section, you can pick the preset style and icons that will be placed with the accordion. You can also disable/enable icons from here. 

Accordion - Icon Type menu

Step 4  #

From the Content section, you can add the Accordion title and description. 

Accordion - Content menu

Plus, you can add images and buttons within the accordion from this content option. 

Accordion - Image menu

Step 5 #

In the Style section, you can customize the General, Title, and Content of the accordion. 

General: Edit the margin of the tab and include box shadow from the general option of the style section. 

Accordion - General style menu

Title: In the Title section, add typography, padding, icon size, and icon gap to the title of the accordion. 

Accordion - Title style menu

Plus, you can select background type, text color, icon color, border type, and radius to design your accordion creatively. 

Accordion - Background Type menu

Content: From the Content section, you can customize the background type, color, padding, margin, border type, and box shadow to the content of the accordion. 

Accordion - Content style menu

You can also customize the text color, typography, and alignment of the description using this option. Also, create attractive buttons and customize text color, background color, typography, and padding. You can also add borders to these tabs. 

Accordion - Button style

Step 6 #

In the advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Accordion - Advanced customization tab

You will also get the chance to edit and customize the following options: 

  • Motion Effects
  • Background
  • Border
  • Positioning
  • Responsive
  • Attributes
  • Custom CSS

Motion Effects #

From the Motion Effects option, you can add different effects such as fading, zooming, bouncing, sliding, rotating, motion, lightspeed, and more effects to make your widget look different. 

Accordion - Motion Effects menu

Background #

If you want to customize the background with specific color, gradient, or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type, and more.

Accordion - Background menu

Border #

If you want to add any line, box, dots, and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Accordion - Border menu

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section, you can select if the position will be full width, inline, or customized. And you can set the position as absolute or fixed as well from these settings. 

Responsive #

You can test the responsiveness of the widget if you toggle through the available options. However, the change to the widget will be visible only on the live page or preview, not in the Elementor.

Accordion - Responsive menu

Attributes #

With Attributes, you can add custom HTML attributes to any element. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons.

Powered by BetterDocs