Starter
For a handful of client sites.
Billed once. Yours forever.
$39/yr
Billed yearly.
Native Divi 5 Module
Divi Tabs Pro
Split content into tabs people can switch between.
Ask AI about the Divi Tabs Pro module
Why use the Divi Tabs Pro module?
Tabs are how you keep a long page short. A product page with a description, a spec sheet, delivery terms and returns is four screens of scrolling, or one screen with four tabs. The trouble is that most tab modules stop at the look: they switch panels on click and leave the keyboard, the screen reader and the no-JavaScript case to sort themselves out.
Tabs Pro is one module holding any number of tabs, each one a child item with its own label and content. Three styles, four alignments, and the full ARIA tabs pattern underneath.
The tab set beside this is the live module. Click a tab, or focus one and use the arrow keys.
- What it is
- Keyboard
- Without JavaScript
- Divi 5
Tabs Pro is one module holding any number of tabs. Each tab is a child item with a label and its own content area, and the parent decides the style, the alignment and the colours.
The nav row is built on the server from the tab labels, so the markup is complete before any JavaScript runs.
The whole ARIA tabs pattern is implemented, not just the look of it.
- Left and Right arrows move between tabs
- Up and Down do the same
- Home jumps to the first tab, End to the last
- A roving tabindex keeps only the selected tab in the tab order
The first panel stays visible until the module marks itself ready, so a reader with scripts blocked still sees content rather than an empty box.
Two tab sets on the same page generate their own ids, so their controls never cross over.
This module was built for Divi 5. It has no Divi 4 shortcode, which also means there is no Divi 4 layout to migrate into it.
It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro.
What you get out of it
Three styles, one dropdownUnderline, Boxed and Pills. Each one is a preset, so switching is a setting rather than a stylesheet.Alignment that respondsLeft, centre, right or justified, and it is the one setting here that takes a separate value per breakpoint.The real ARIA tabs patternrole="tablist", aria-selected kept in sync, a roving tabindex, and arrow, Home and End keys. Not just a click handler.The panel is a design surfaceIts own background, border and spacing, plus a body typography group separate from the tab labels.It works before JavaScript doesThe nav is rendered on the server and the first panel stays visible until the module is ready, so nothing is empty on the way there.Free, and built for Divi 5It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro, written for the Divi 5 engine rather than carried over from Divi 4.
Everything the Divi Tabs Pro module does
Every option below ships in the free plugin, and in Divi Torque Pro.
Any number of tabs, each one a child itemA label and a rich text panel per tabThree styles: Underline, Boxed, PillsAlignment: left, centre, right or justifiedAlignment takes a value per breakpointTab spacing, 0 to 60pxTab text colour, with a hover stateActive tab text colourActive tab highlight colourA full typography group for the tab labelsPanel background, border and spacingA separate typography group for panel textrole="tablist" and role="tab" from the serveraria-controls, aria-labelledby and aria-selectedRoving tabindex, so one tab stop per setArrow, Home and End key navigationFirst panel visible without JavaScriptPer-instance ids, so two sets never collideCustom CSS hooks for nav, active tab and panel
See the Divi Tabs Pro in action
Every tab set below is the live module, not a picture of one. Click a tab, or focus one and press the arrow keys. This first one is Underline, the default.
Style · Underline
The default. A rule under the nav row, and the active tab carries a two pixel highlight.
- What it is
- Keyboard
- Without JavaScript
- Divi 5
Tabs Pro is one module holding any number of tabs. Each tab is a child item with a label and its own content area, and the parent decides the style, the alignment and the colours.
The nav row is built on the server from the tab labels, so the markup is complete before any JavaScript runs.
The whole ARIA tabs pattern is implemented, not just the look of it.
- Left and Right arrows move between tabs
- Up and Down do the same
- Home jumps to the first tab, End to the last
- A roving tabindex keeps only the selected tab in the tab order
The first panel stays visible until the module marks itself ready, so a reader with scripts blocked still sees content rather than an empty box.
Two tab sets on the same page generate their own ids, so their controls never cross over.
This module was built for Divi 5. It has no Divi 4 shortcode, which also means there is no Divi 4 layout to migrate into it.
It ships in Divi Torque Lite on WordPress.org and in Divi Torque Pro.
Boxed, on a real product page
The active tab joins the panel below it. Panels do not have to match in length.
Style · Boxed
Tabs sit in bordered boxes and the active one merges into the panel.
- Description
- Specification
- Delivery
- Returns
A tab set is the usual way to keep a long product page short. The buyer sees one thing at a time and picks what they want to read next.
Each panel takes normal rich text: headings, lists, links, images.
- Solid oak frame, oiled finish
- Seat height 45cm, overall height 78cm
- Weight 6.2kg
- Flat packed, two bolts, no glue
- Ten year frame guarantee
Panels do not have to match in length. This one is two sentences and the one before it is a list.
The panel keeps its own padding, background and border, so a short panel does not collapse.
Thirty days, unused, in the original packaging. Return postage is covered on faulty items.
Pills, and a shorter set
Three tabs, rounded, with the highlight filling the active pill.
Style · Pills
The highlight colour fills the pill instead of underlining it.
- Install
- Add tabs
- Style it
Upload the plugin, activate it, and the module appears in the Divi 5 builder under Divi Torque.
Drop Tabs Pro into a row. Each tab is a child item, so adding one is the same as adding any other child module in Divi 5.
Pick Underline, Boxed or Pills, set the alignment, then use the nav font group and the panel design group for the rest.
On a dark band
Tab text, active text and the highlight are three separate settings, so this needs no custom CSS.
Colours
Inactive text dimmed, active text white, highlight white.
- Colours
- Contrast
- Panel
Tab text, active tab text and the active highlight are three separate colour settings, so a dark section needs no stylesheet.
Inactive tab text also carries a hover state, which matters more on a dark band where the resting state is already dimmed.
The panel has its own background, border and spacing group. On this band it is left transparent so the section shows through.
Where the nav row sits
Alignment moves the tabs only. It is the one setting here that takes its own value on tablet and phone.
center
Centre suits a short set that sits under a heading.
- Overview
- Details
- Notes
Alignment is set to center. It moves the nav row only, the panels stay full width.
Alignment is the one setting on this module that is responsive, so the three breakpoints can each take their own value.
Justified stretches every tab to an equal share of the row, which is why it reads as a segmented control.
right
Right pairs with copy or an image on the other side.
- Overview
- Details
- Notes
Alignment is set to right. It moves the nav row only, the panels stay full width.
Alignment is the one setting on this module that is responsive, so the three breakpoints can each take their own value.
Justified stretches every tab to an equal share of the row, which is why it reads as a segmented control.
Justified
Justified gives every tab an equal share of the row, which reads as a segmented control.
- Overview
- Details
- Notes
Alignment is set to justified. It moves the nav row only, the panels stay full width.
Alignment is the one setting on this module that is responsive, so the three breakpoints can each take their own value.
Justified stretches every tab to an equal share of the row, which is why it reads as a segmented control.
The panel is its own surface
Background, border, radius and padding belong to the panel, and its body text has a separate typography group from the labels.
Panel design
Here the panel carries a tinted background, a hairline and a 3px radius.
- Panel design
- Body text
- Spacing
The panel is its own design group: background, border and spacing. Give it a surface and the tab set reads as a card.
Panel body text has a separate typography group from the tab labels, so the labels can be small and bold while the body stays comfortable.
Panel padding is a real spacing control with all four sides, not a text field.
Building one takes about a minute
Three steps, and none of them involve custom CSS.
1Drop in the moduleAdd Tabs Pro to any row. It arrives with tabs already in place, so there is something to click immediately.2Write each tabEvery tab is a child item with a label and a content area. The content area takes normal rich text.3Pick a styleUnderline, Boxed or Pills, then set the alignment and the three colours. Alignment can differ per breakpoint.
Questions people ask first
Short answers, all of them checked against what the module actually does.
Is Tabs Pro free?Yes. It ships in Divi Torque Lite on WordPress.org, and in Divi Torque Pro. Nothing on this page is behind the paid plugin.Can I convert my Divi 4 tabs into it?No. This module was built for Divi 5 and has no Divi 4 shortcode, so there is nothing to convert from. Divi’s own tabs module is the Divi 4 route.Is it keyboard accessible?Yes, and it is the full pattern rather than the look of it. Arrow keys move between tabs, Home and End jump to the ends, aria-selected stays in sync, and a roving tabindex keeps one tab stop per set.Can I have vertical tabs?No. The nav is always a row above the panels. For a vertical arrangement, use an accordion instead.What happens if JavaScript does not load?The nav is rendered on the server and the first panel stays visible until the module marks itself ready, so a reader still gets content rather than an empty box.Can I open a specific tab from a link?No. There is no URL hash or deep linking, and no setting for which tab opens first. The first tab is always the one that opens.
Simple, honest pricing
Every plan unlocks all 98 Divi modules on unlimited websites. One licence covers every site you build.
4.7★ from 116 reviews on WordPress.org
Unlimited
Every site you will ever build.
Billed once. Yours forever.
$79/yr
Billed yearly.
Divi Torque+ AI
Everything in Unlimited, plus a second plugin: Saddle Pro, so AI agents can build your site.
Billed once. Yours forever.
$99/yr
Billed yearly.
- 30-day money-back guarantee
- Lifetime honored forever, in writing
- Secure checkout