Xpro Advance Accordion Widget for Elementor

Xpro Elementor Addons offers a wide range of widgets, tools, and theme builders to assist developers in creating an appealing site. The Elementor Advanced Accordion by Xpro is yet another fantastic widget that allows you to display large amounts of info in a small amount of space. Design an attractive accordion display by utilizing the customization options.

The Advance Accordion widget for Elementor is a great way of efficiently using the space of your webpage. Instead of making your customers scroll down to view your content, allow them to view what they are actually looking for. Show more data in less space while also making it relevant.

Include the content by either dynamic or editor. Showcase any widget in your accordions like social feed, FAQs, icon box, chart, team, & more. Get creative and make the best display.

How To Install Xpro Advance Accordion Widget for Elementor

Requirement

You need to install and activate the Pro version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Advance Accordion Widget is ‘Enabled’ from the Xpro Dashboard, so you can find the widget in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Advance Accordion widget, and finally, toggle the button ON to enable it.

How to Use Xpro Advance Accordion Widget for Elementor

The premium widget comes with huge customization options. You can include media and content in the title as well as in the content box. Personalize the typography, background, and much more. Let’s go over how you create Advance Accordion using Xpro Elementor.

Step 1

Click on the Xpro Addons-Pro section available in the Elementor Editor.

Step 2

From the Xpro Addons-Pro section, simply drag’n’drop the Advance Accordion widget on your desired page location.

This is the default view of the widget after you select and drop it into the screen.

Content Section

Select the type of display between the given options of Accordion or Toggle. The difference between the two options is that the toggle closes the other tab when you open another. On the other hand, Accordion does not close the tab when you open another tab.

How to Add Content in the Elementor Advance Accordion widget

Below you can view the bars that contain a menu that opens when you click on them. The content menu provides you with all the options to include titles and text in their respective fields. You may also include media like icons and images.

Select which of the section you want to be displayed in the default. Enable the “Active as Default” option to show that section when the visitor first views the content.

Give a title to your accordion tab. Write a title in the title bar. You can also include an image or an icon with the title.

You have the option to either include a text and image or add any widget in the content box. Select Editorial to simply add text or dynamic to add any widget in the accordion. If you have selected dynamic then click on the edit icon to add content.

If you have chosen to add text then select the editorial option from the source content and write content in the given box. You can also add an image from the Add Media option.

Just like that, you can add content to the other sections. Add as many fields as you want by clicking on the Add Item.

Change the toggle icon and adjust the speed for it to change.

How to Style the Xpro Advance Accordion Widget for Elementor

Set the alignment of the content in the Accordion title to left or right. Style the typography by changing its font, size, spacing, and much more. Open up the typography menu to perform text customizations.

Adjust the toggle and media size as well as their margin in the display.

Colorize the text, icon, background, and toggle button for each of the three states. The normal section allows you to color all of the elements mentioned above for normal presentation. When you move the mouse above certain elements, you can modify its look using the hover option. Finally, the active section allows you to customize the appearance of the title bar when its section is opened.

You can also change the border of the title boxes to make them more visually appealing. You can choose from five different types of borders.

• None
• Solid
• Double
• Dotted
• Dashed
• Groove

Change the width and radius of the border to match your preferences. You can also change the border color and space between each section.

How to Style the Tab Content in Advance Accordion Widget

Click and open up the Tab Content menu to customize the content. Begin the personalization of content by aligning the content to left, right, or center of the content box. Style the typography of the text by clicking on the typography icon box.

Color the text and the background from their respective options. Select a border type to add a border and further customize it as well.

Best Advance Accordion Widget for Elementor

All of the features provided by the Elementor Advance Accordion Widget will assist your website in displaying an appealing layout. This eye-catching widget will draw customers in and can receive the information they are looking for.

We hope you fully understand the functionality of this Xpro widget. Use your imagination to make your site look its best by utilizing this widget. Moreover, if you want to add more amazing and trending features to your websites. See the list of the best Pro Elementor Widgets by Xpro.

Xpro Elementor Addons offer a wide range of widgets, Elementor theme Builder, and features that help you develop an attractive site. Check our 50+ free widgets for Elementor which are enough to create a professional WordPress website. If you want to explore and add more attractive Elementor widgets then check our complete list of Pro Elementor widgets and download our Pro Elementor addons right now.