Tabs widget

The Tabs widget requires a repeater field either on the current page, preview page(post etc) or on an option page. The supported subfields are text, textarea and wysiwyg.

The widget is accessible using standard keyboard interaction.

ACF setup

ACF Repeater
Create a repeater field in ACF
ACF repeater fields
Add two subfields: text field and wysiwyg editor field.

Widget

You find it easiest by searching for ACF tabs in the Elementor Search Widget …  field:

Elementor search widget field

Drag the following widget icon into your section to add the widget.

Settings

After adding the widget to your section/column the following settings are shown.

Select a detected repeater field to use

Field is a dropdown with the detected Repeater fields. When you select a repeater field the title and content fields will be shown. Tab title and tab content drop downs contain detected subfields.

Styling

You can style the whole tab area, the tab and the tab content.

Tabs section

You can style the tabs widget pretty extensively.

Tabs section

You can select which tab that should be opened first. This is also automatically handled with LTR/RTL detection. When LTR the left most tab is opened on page load, with RTL the right most tab is opened page on load.

Tab section

You can style both active and inactive text color.
The tabs themselves can have different backgrounds and borders depending if they are active/open or inactive/closed.
Decide how you want tabs to change when they are hovered by a pointer.
You have extensive ability to tinker with the tabs and their borders, paddings and margins.

Tabs preview

Mobile accordion section

The widget turns into an accordion on mobile and small screens.

Mobile preview

The accordion looks by default as the standard Elementor Accordion. It also supports keyboard navigation.

Page/post ACF fields

The tabs tab order is based on the order of the ACF fields in the repeater field on the edit page.

Updated on September 4, 2019

Related Articles