Stratum Widgets: Advanced Accordion & Tabs Elementor Widgets
If you are looking for a handy design tool to structure large amounts of information, reduce scrolling and categorize data, feel free to present content using the Stratum Advanced Accordion and Advanced Tabs.
Stratum Elementor Addons contains 20+ advanced widgets for all purposes and business website needs, including the most popular Advanced Slider, Advanced Posts, Instagram, Price List widgets, and many more.
See also: the Tabs block for the block editor (Gutenberg)
The Purpose of the Advanced Accordion & Tabs Elementor Widgets
- Build a product or service FAQ section.
- Create any data section that is more readable and easy to interact with (e.g. news, music archives).
- Make complex information structured for easier navigation and accessibility.
Key Benefits
The Advanced Tabs and Accordion Elementor widgets are completely customizable, allowing you to:
- Deeply alter typography, colors, and icons.
- Employ different default tab layouts (horizontal and vertical).
- Use earlier saved Elementor templates as content for tabs.
General Features and Settings of the Advanced Accordion Elementor Widget
General
- Accordion type (can be collapsible)
- Toggle type (all tabs can be opened at the same time)
- Interactivity (the tabs are triggered either on hover or when clicked)
You are free to customize each element of the accordion item:
- Set a title
- Select icons, either from the library or upload your own ones in SVG:
You can set different icons for both folded and unfolded accordion items. If you don’t set any, the Expand icon is used by default:
- A text or custom templates you saved in Elementor Template Library can serve as the content of the Accordion items.
Opting for text, you can add and format text and images:
 |  |
Default WordPress formatting options are available for the text content type:
You can leave any item unfolded by default.
Manually Curated Posts for You
If you want to insert the entire premade sections, you can choose the “Template” content type and add your own or theme-sourced templates into the needed accordion tabs:
For example, this is how I interested an image hotspot, which was saved as template, into the tab:
Styling the Accordion Elementor widget
General style
- By setting up the equal container height, the tab containers will be of the same height regardless of the content size (the size of each container is automatically adjusted to the biggest content container)
- Spacing between accordion items:
- Paddings and margins to reach the needed alignment and spacing
- Items’ border with the customizable width, color, radius and shadow.
The expand icon style
- Icon position (left or right)
- The icon size and space can be customized for the normal, active, and hover modes.
Header style
- Change the text alignment
- Customize typography
- Set up paddings and margins
- Change border type and color
- Add Box shadow
- Customize the title and background colors.
 |  |
Content area style
- Text color and typography
- Background color or image
- Paddings and margins
- Border type and color
- Box shadow.
The Advanced Tabs Elementor Widget by Stratum
The Advanced Tabs Elementor widget allows you to feature content via tabbed widgets. Just like the Stratum Elemenor Accordion widget, it can work with both simple content and saved templates. The widget supports both horizontal and vertical-oriented tabs.
General settings
- Tab layout (vertical, horizontal or an icon box)
- Interactivity (hover or click).
To add content to tabs, you can use either a default WordPress formatting tool, including the ability to upload images or insert your custom templates from the Elementor Library.
The templates are sourced by either your theme or custom-created templates. For example, here is a theme-sourced section:
Tab icons are optional:
Styling the Advanced Tabs Widget for Elementor
Navigation panel style
- Tab width
- Spacing between tabs
- Tabs on the left or the right
- Tabs alignment with respect to active content
- Paddings and margins to set the alignment between the tabs and content
- Box shadow
- Background color.
Tabs style
You can change:
- Typography
- Paddings and margins
- Borders
- Box shadow
 |  |
- Title and background color for each box mode (normal, active and on hover)
Icon style
- Left or right icon position
- Icon size
- Spacing between icons
- Colors for the normal, active, and hover modes.
Content style
You have a good chance of option here, including:
- Content animation (slide or fade)
 |  |
- Equal content height
- Typography
- Text and background color (color, image or gradient)
- Paddings and margins
- Border and box shadow.
Advanced Tabs & Accordion Stratum Free Elementor Widgets: Download Now
The Elementor Accordion and Tabs widgets give you an instrument to create efficient tabbed layouts to support and empower user experiences across the website. And these easily styled tabs widgets for Elementor are just one click away:
Stratum Free Elementor Widgets Download
View Stratum demo designs here.
After the installation, don’t forget to check Stratum Pro – the extended version of our favorite addon with extra visual effects to go for. With the premium Elementor Addons pack, you will unlock a few exclusive meant for deep widget customization. In particular, you will access the ability to change the content type (image & video instead of just text) for the Accordion & Tabs widgets.
Take advantage of the entire Stratum spectrum of options for an annual price of $19 only! The Pro features will be included directly in your currently installed free Stratum addon – no hassle at all.
Also on Gutenberg? Make sure to check out Getwid – the biggest library of free WordPress blocks.
Leave a Reply