In this documentation, we will show you how to customize the Accordion widget presented by Element Pack Pro.

Inserting The Accordion Widget

Inserting the widget by following this,

1. Search by the Accordion widget name.
2. Then select the appear widget ( with Element Pack Pro logo T.R corner).
3. After Drag and Drop it on the Elmentor Editor page.

Content Tab

The Content tab controller displayed here offers the flexibility to adjust the layout of the widget according to your preferences.

Accordion Section

Go to Content > Accordion

Set content for the accordion items,

1. Title & Content: Set the heading for the accordion item.
2. Select Source: Select source for the accordion item (e.g.: Custom Content, Elementor Template, AE Template).
3. Title Icon: Select the icon for the title of the accordion item.

4. Click the ” + Add Item ” button to add more items to the accordion.
5. Title HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine ooptimization (SEO).
6. Icon: Select the Icon for the Accordion item.
7. Active Icon: Set the Icon for the active item.
8. Show Title Icon: Enable the switcher to show the Title Icon.

Additional Section

Go to Content > Additional

This section provides control to change the visual appearance changes,

1. Collapsable All Item: Enable the swither to make collapsable all accordion items.
2. Multiple Open: Enable it to open multiple items at a time.
3. Active Item No: Set Number to initially open the item active.
4. Hash Location: Referred to as a URL fragment or anchor, it is a way to direct a web browser to a specific part of a web page. It is represented by a hash symbol (#) followed by an identifier.

5. Scrollspy: Enable the switcher to activate the Scrollspy.
6. Top Offset: Set the top offset, you need to consider the height of any fixed navigation bar or header that may cover part of the section when scrolling.
7. Scrollspy Time: Adding a smooth scrolling effect with Scrollspy can enhance user experience by providing a seamless transition between sections.
8. Schema Active: Implementing schema for an “active” state in a Scrollspy can enhance your website’s SEO by providing structured data that search engines understand.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects that are visually appealing and cohesive with the overall design of the interface.

Item Section

Go to Style > Item

This section provides a control for the items section, Making the items visually interactive,

1. Item Gap: Set the gap between the items.
2. Alignment: Make the item content alignment (e.g.: Left, Center, Right, Justify).

Normal State for Item

The changes will appear in a normal state,

1. Color: Set the color for the text.
2. Background Type: Set the background type.
3. Border Type: Set the border type for the item (e.g.: Default, Solid, Double, Dashed. etc.).
4. Border Width: Set the width for the border.

7. Border Color: Set the color for the border.
8. Border Radius: Make the border corner edges rounded by setting the border-radius.
9. Padding: Set the padding for the items.

10. Typography: Set the typography for the text.
11. Text Stroke: Set stroke for the text.
12. Box Shadow: Make the shadow for the box.

Hover State for Item

The changes will appear when hovering over the items,

13. Color: Set the color for the text.
14. Background Type: Set the type for the background.
15. Border Color: Set the border color.

Active State for Item

The changes will appear when the item is active,

16. Color: Set the color for the text.
17. Background Type: Set the type for the background.
18. Border Color: Set the border color.

Title Icon Section

Go to Style > Title Icon

Normal State for Title Icon

Make the customization for the Normal Item,

1. Color: Set the color for the title icon.
2. Size: Set the size for the title icon.
3. Spacing: Set spacing between the heading and the icon.

Hover State for Title Icon

Changes will appear on hover,

4. Color: Set the color for the title icon.

Active State for Title Icon

The changes will appear on active items,

5. Color: Set the color for the Title Icon.

Open & Close Icon Section

Go to Style > Open & Close Icon

Make the Open and Close Icon more customizable,

1. Alignment: Set the alignment for the Icon ( e.g.: Left, Right ).

Normal State for Open & Close Icon

Make the visual appearance changes by following this,

1. Color: Set the color for the Icon.
2. Background Type: Select the type for the background.
3. Color: Set the color for the icon.

5. Border Type: Set the type for the border.
6. Border Width: Set the width for the border.
7. Border Color: Set color for the border.
8. Border Radius: Make the border radius by following it.

9. Spacing: Set the spacing for the Icon.
10. Icon Size: Set the size for the icon.
11. Box Shadow: Set the shadow for the icon.

Hover State for Open & Close Icon

Set the hover state for the open & close icon,

12. Color: Set the color for the Icon.
13. Background Type: Set the background type.
14. Color: Set the color for it.
15. Border Color: Set the border color.

Active State for Open & Close Icon

Make the active item for the open & close icons,

16. Color: Set the color for the icon.
17. Background Type: Set the background type.
18. Color: Set the color.
19. Border Color: Set the border color for the icon.

Content Section

Go to Style > Content

Make the content section more customizable,

1. Color: Set the color for the content.
2. Background Type: Set the background type for the content.
3. Color: Set the color for the background.

4. Border Type: Set the type for the border.
5. Border Width: Set the width for the border.
6. Border Color: Set the color for the border.
7. Border Radius: Make the border radius.

8. Padding: Set the padding for the content.
9. Spacing: Make space for the content.
10. Typography: Set the typography for content.

11. Box Shadow: Set the shadow for the content item.
12. Alignment: Make the alignment for the content.

Video Assist

You can watch the video above to learn about the Accordion widget.
Please visit the demo page for examples.

Thanks for staying with us.