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.

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)

acoordion widget

  • Toggle type (all tabs can be opened at the same time)

elementor accordion

  • Interactivity (the tabs are triggered either on hover or when clicked)

accordion interactivity

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:

icon library elementor

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:

accordion widget elementor icons

  • 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:

text content type accordionaccordion elementor widget text and media format

Default WordPress formatting options are available for the text content type:

text settings for accordion elementor widget

You can leave any item unfolded by default.

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:

elementor library toggle accordion widget

For example, this is how I interested an image hotspot, which was saved as template, into the tab:

accordion elementor widget template library

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:

spacing between 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.

icon expand style

 

Header style

  • Change the text alignment
  • Customize typography

header style

  • Set up paddings and margins
  • Change border type and color

border type accordion widget

  • Add Box shadow
  • Customize the title and background colors.
accordion elementor widget border radiusaccordion elementor widget header style

Content area style

  • Text color and typography
  • Background color or image

content style colors

content background 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).

tabs elementor widget general settings

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:

saved template elementor tabs widget

Tab icons are optional:

tabs content elementor widget

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

tabs elementor widget style settings

  • Box shadow

tabs elementor widget box shadow

  • Background color.

Tabs style

You can change:

  • Typography
  • Paddings and margins
  • Borders
  • Box shadow
tabs elementor widget stratum tab typographyicon tabs elementor widget
  • Title and background color for each box mode (normal, active and on hover)

tabs elementor widget tab colors

Icon style

  • Left or right icon position
  • Icon size
  • Spacing between icons
  • Colors for the normal, active, and hover modes.

icon style tabs widget elementor

Content style

You have a good chance of option here, including:

  • Content animation (slide or fade)
content style elementor tabcontent animation
  • Equal content height
  • Typography
  • Text and background color (color, image or gradient)

tabs colors widget

  • 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

Your email address will not be published. Required fields are marked *