Accordions are the finest approach for distributing long content without adding unnecessary page length. If you want to enhance the user experience on your page consider using an accordion widget on your Elementor website.
Install Content Accordion Widget for Elementor #
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Content Accordion”
- Hover over the widget in the search results and click install
- Add your “Content Accordion” widget to any Elementor Page
General Settings #
First Apperance
Determine how the accordion first shows up.
- First Item Open
- All Items Closed
- All Items Open
Close Item when Other Opens
Determine whether to enable automatic close of author items when a different item is triggered open.
Scroll to Head
Scroll to the top of the item heading.
- Off
- Desktop
- Mobile
- Desktop + Mobile
Icon Placement
- Icon First
- Icon Last
Layout Settings #
Show Title
Enable / Disable title inside of item content.
Show Content
Enable / Disable content inside of item content.
Heading HTML Tag
Change the HTML tag for the heading. Used for SEO purposes.
Show Button
Enable / Disable button inside of item content.
Closed Icon
Choose an icon for a closed accordion-item (supports SVG upload)
Open Icon
Choose an icon for a open accordion-item (supports SVG upload)
Connected Widgets Settings #
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Jump to Item Link #
There are two methods to create accordion triggers:
Method 1: Full Link HTML
With this option, you can create a go-to accordion-item link.
The link should be in this format:
<a class="ue-link-goto-item" href="#" data-name="yourname" data-num="2">
Jump To Item
</a>
This link will jump to the second item of the accordion named: “yourname”
Method 2: Link Custom Attributes
When using the link field inside of Elementor you can add custom attributes. Below is an example of the format you can paste inside of the custom attributes inside of any link field in Elementor:
data-name|main,data-num|2,class|ue-link-goto-item
Items Settings #
Manage the items of the accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set the heading for the accordion item.
Content Type
- Text (Title, text, and button)
- Elementor Template
You can create multiple Elementor templates and insert each template to a different accordion item to achieve advanced layouts.
Heading
Title for content inside item.
Link
Link for the button inside item content.
Button Text
Text for the button inside item content.
Content Accordion Style #
Different styling options are included to control every design aspect of the widget. Modify the colors to match your site’s look and feel. Customize the colors, typography, and layout to make the widget look and work exactly how you want it.
Items Style #
Style the item background, border, shadow, and margin.
Icon Style #
Style the icon background, radius, color, and size.
Heading Style #
Style the heading background, padding, margin, and border.
Heading Text Style #
Style the heading text color, padding, and typography.
Content Style #
Style the content alignment, padding, margin, background, and radius.
Content Title Style #
Style the content title color, typography, and spacing.
Content Text Style #
Style the text title color, typography, and spacing.
Content Button Style #
Style the content button color, typography, and spacing.
Usage Example #
Content accordion synced with hotspots widget.
Content Accordion synced with Content Slider.
