Accordions come in very handy when you want to show a large amount of content on a page without increasing it’s length and scroll time. It is a collapsible element which when clicked shows the content and hides the another presenting the information professionally in limited space thereby improving user experience.
How to use the Accordions Widget of The Plus Addons For Elementor
The Accordions widget is very easy to use widget. Let’s understand how to use this widget in the tutorial below.
Search for the Accordions widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
Add your accordion content (title and description) here. You can also duplicate the accordion by clicking the duplicate icon and delete it by clicking the delete icon. If you want to add a new accordion, click on the Add Item button.
Add your desired icon here. You can add a SVG icon or an icon from the Font Awesome library.
Select your active icon of choice to be set on the accordion.
Title HTML Tag
Set the Title HTML tag here.
Select the Accordion which you want to stay active when the page loads.
On Hover Accordion
Slide to enable the On Hover Accordion.
Connection Carousel ID
Enter the Connection Carousel ID here.
The Style tab is used for customizing the appearance of all the Post Search widget components.
Use this option to set the Alignment, Color, Active Color, Gap, and Icon Size here.
Use this option to set the Title Alignment, Typography, Color, Icon Width, Icon Size, Icon Space Indent, Box Radius and Box Shadow here.
Use this option to set the Inner Padding, Accordion Between Space, Box Border, Background Type and Box Shadow here.
Set the Typography and Text color for the Content here.
Set the Content Margin Space, Content inner padding, Box Border, Background Type, and Box Shadow for the Content Background.
Set the Hover Style and Color here.
On Scroll View Animation
On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial
Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial