New here? Get 40% off Lifetime plans.

See pricing
Skip to content
Get Divi Torque Buy Now

Native Divi 5 ModuleFree

Divi Tabs Pro

Split content into tabs people can switch between.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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. Start free and upgrade when you need the rest.

Free

Divi Torque Lite, on unlimited sites.

$0

Free forever · no card needed

Download

Includes

  • 41 Divi modules
  • 1 extension (Sharing Buttons)
  • Unlimited websites
  • Works in the Divi 5 builder
  • Community support

Unlimited Best value

Every module, on every site you build.

$79 $47.40 /year

Save $31.60 · 40% off

Buy Now

Everything in Free, and

  • All 98 modules
  • All 7 extensions
  • Unlimited websites
  • 1 year premium support
  • 1 year product updates

Unlimited Lifetime

Pay once. Keep it forever.

$249 $149.40 once

Save $99.60 · 40% off

Buy Now

Everything in Unlimited, and

  • Pay once, updates forever
  • Remove Divi Torque branding
  • Premium support
  • 30-day money-back guarantee
  • Lifetime honored forever, in writing
  • Secure checkout