With DonDivi Tabs, you can seamlessly organize content into interactive sections. Whether you’re adding icons, subtitles, or animations, you have the flexibility to create engaging, user-friendly tabs for any page.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
Once the builder is installed, you’ll find a new module named DonDivi Tabs in the Divi Builder.
Overview
The DonDivi Tabs module allows you to add interactive tabs that display either Divi layouts or fully responsive custom content. It provides a range of customization and transition effects designed to improve the user experience. It may well be the only tabs module you need!
Add DonDivi Tabs
Click on the Add Module button
Search for DonDivi Tabs
Click on it to add it to your page
DonDivi Tabs Settings
Content tab
Tabs:
Location: Change the default tabs location. By default, the Tabs are displayed above the tab content area. Use this option to move the tabs to the Right, Left, or below the content area.
Direction: Choose whether tabs should appear in a Row (horizontal) or a Column (vertical).
Design tab
Tabs:
Background Color: Sets a background color for all tabs.
Active Tab Background Color: Applies a background color only to the currently active tab.
Alignment: Align tabs horizontally inside their container.
Vertical Alignment: Align tabs vertically. Helpful if you choose a vertical layout.
Force Fullwidth allows tabs to stretch the full width of their container. It’s responsive, so you can choose which devices should see the full-width layout.
Tabs Gaps: Adds spacing between tabs. The default is 0 (no gap).
Tabs Rounded Corner: Choose the border radius of each tab.
Tabs Border Styles: Choose the border style of each tab.
Tabs Text: Choose title and subtitle styling for all tabs: font family, weight, color, size, letter spacing, line height, and text shadow.
Content:
Offset: Adjust the distance between the tab list and the content area (responsive). The default is 0px.
Rounded Corner: Choose the border radius of each tab content area.
Border Styles: Choose the border style of each tab's content area.
Content Padding: Adjust padding inside the content area (responsive).
Content Animation:
Enter Effect: Choose the enter effect of each tab's content area.
Exist Effect: Choose the exit effect of each tab's content area.
Exit Effect Animation Intensity: Choose the intensity of the exit animation.
Opacity: If enabled, it allows you to choose the starting opacity.
Duration: Choose the animation duration.
Add a Single DonDivi Tab
When you add the DonDivi Tabs module, it will not contain any tabs by default.
Open the DonDivi Tabs module's settings
Click on the Add New Tab button
Single DonDivi Tab Settings
Content tab
Tab:
Tab Title: Enter the title shown on the tab and in the tabs list. This field is responsive.
Subtitle: Add an optional subtitle (also responsive). It appears below the title in the tab.
Image/Icon: Choose to display an Image, Icon, or None on top of the tab's title.
Content
Content: Choose the type of content the tab has:
Custom: Manually add Tab's title and content
Divi Layout: Choose a saved Layout from the Divi Library.
Show On Hover: Enable this option to display tab content on hover instead of when clicked.
Image/Icon: Choose to display an Image or an Icon on top of the tab's content area.
Title: Choose the Tab's title text. This will be available only if the Content type is set to Custom.
Body: Choose the Tab's content text. This will be available only if the Content type is set to Custom.
Button: If used, a button element will be added inside the Tab's content area. To display the button, ensure that the Button's text and Link URL are set.
Button Link Target: Choose how the button's link will open:
In a new Tab
In the current Tab
Design Tab
Tab:
Text Alignment: Aligns the tab’s title/subtitle horizontally.
Text Vertical Alignment: Aligns text vertically within the tab. Also helps control icon positioning when used.
Tab Text: Choose the font family, style, color, and size of the tab's title and subtitle.
Tab Title: Choose the font family, style, color, and size of the tab's content title.
Tab Body: Choose the font family, style, color, and size of the tab's body text.
Button: Enable and style the button if you’ve added one in the content fields. You can align it left, right, or center within the tab content.
Sizing: Choose the sizing options of the current Tab's content area.
Spacing: Choose the spacing options of the current Tab's content area.
Border: Choose the border radius and style options of the current Tab's content area.
Box Shadow: Choose the box shadow styles options of the current Tab's content area.
Filters: Apply different CSS filters on the current Tab's content area.
Transform: Choose the Transform styles options of the current Tab's content area.