Accordion
How to Configure and Style UBE Accordion
Make your important content readable to the user with Accordion Elementor Widget on your pages without scrolling down
How to Activate Accordion
To use this UBE Addons element, find the ‘Accordion‘ element from the Search option under the ‘ELEMENTS‘ tab.
Simply just Drag & Drop the ‘Accordion‘ into the ‘Drag widget here‘ or the ‘+’ section.
After you are done with Step 1, this is the basic layout you are going to view:
How to Configure Content Settings
Under the ‘Content’ tab, you will find the General Settings sections.
General Settings
| Accordion Type | Choose the type of the accordion include accordion or toggle |
|---|---|
| Spacing | Allow spacing between tabs or not |
| Icon | Choose icon for accordion |
| Accordion Tab Icon Position | Choose position of icon |
| Scheme | Choose the default color for the tab including border, text and background. |
Content Settings
Each item include
| Active as Default | Whether for active default or not |
|---|---|
| Scheme | Choose background color of the current item |
| Title | Enter the title of the accordion |
| Content Type | Choose a content type that includes entered content or a pre-generated Element Template. |
| Content | Enter content if Content Type is Content selected |
| Saved Template | Choose a elementor template if Content Type is Save Template selected. |
How to Style Accordion
Switch to the ‘Style’ tab to style all the elements of Accordion.
General Settings
‘General Settings’ section lets you choose Spacing, Border Radius, Border Width, Border Color, Background Type to accordion.
Tab Style
‘Tab Style’ section lets you choose Typography, Padding and Color, Border Type, Background Type, Box Shadow in normal, hover and active mode to the tab of accordion.
Content Style
‘Content Style’ section lets you choose Background Type, Text Color, Typography, Padding, Margin to the content of accordion.
Icon Style
‘Icon Style’ section lets you choose Icon Size, Color to the icon of accordion.
Final Outcome
By following these mentioned steps and a bit more modifying & styling, you can easily design your Accordion as per your preference.
This is how you can easily showcase your important contents & make them appealing to your visitors using Accordion.
Getting stuck? Feel free to Contact Our Support for any assistance.