Tabs Pro

The Tabs Pro module splits content into switchable tabs. Use it for features, specs or step-by-step information. The module needs Divi 5.

How to add the Tabs Pro module

• Add a section and a row, then add the Tabs Pro module.
• Add a Tab for each panel and enter its Tab Label.
• Enter the panel text in the Content field of each Tab.
• Style the tab buttons and panel on the Tabs Pro module.

Content

Tabs Pro module: Layout & Behavior

• Tab Style: Underline, Boxed or Pills. Default is Underline.
• Tab Alignment: Left, Center, Right or Justified. Default is Left. Justified makes the tab buttons share the row equally.

Tab

• Tab Label: the text on the tab button.
• Content: the text shown in the tab's panel. This is a rich text field.

Tabs are keyboard accessible. The arrow keys, Home and End move between tabs.

Design

• Tab Buttons: Tab Spacing (gap between buttons, default 4px), Tab Text Color, Active Tab Text Color and Active Tab Highlight. The highlight is the background or underline color of the active tab. Font options for the labels are here too.
• Panel: styling for the content panel.
• Content Typography: font options for the panel text.

Tip

Use Justified alignment when you have 3 or 4 short tab labels. They fill the row evenly.