Tabs

Divi Plus 1.9.0 introduced the tabs module that can be used to created vertical and horizontal tabs in Divi.

In order to use, enable the DP Tabs modules from the Divi Plus settings and then add the DP Tabs module to your page.

On the next step, click on Add New Items to add your tab content

Content Settings

When you click on Add New Items, you get the following options to add the type of your Tab content

1. Here the Content type is the type of content inside your tab. It can be a Text, or Divi Library item.
2. The next setting is the Title Type with the following options to let you chose how your want to show your tabs title.
   
3. The third setting varies depending upon what is the Title Type you have selected. If you select the text, you will be given the option to enter the title of the text. This is an option when you select Text as the Title type.

In DP Tabs you can insert the different titles for mobile, tablet, and desktop.

These are your options when you select Title type as Text with Icon.

These are your options when you select Text with Image as Tabs Title type.

4. If you select Text as content type, you will see a description field to enter your tab content. If you select Layouts,these are your settings available to pick your Divi Library layout to show in the tab.

Configuration

The configuration section on the content tab will let you configure the interaction and appearance of your tab module.

Tab Trigger: It controls how you want your tabs to be active. If you want to enable your tab on hover, you can select hover or select on click action.

Tab Orientation controls how your tab will appear. It can be either in a Horizontal or Vertical direction. Select Vertical if you want to create a Vertical Tab in Divi.

In both the cases of Vertical and Horizontal selection, you will have the option to set the orientation. In horizontal, you can select Top and Bottom. In Vertical, you can select Left and Right.

The final setting in this area is for making your tabs span across the full width. Enable Fullwidth Tabs if you want to spread the tab in full width.

Here is the difference with respect to the container.

Was this article helpful?

0.5 out Of 5 Stars

8 ratings

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		100%

How can we improve this article?

Please submit the reason for your vote so that we can improve the article.

Name

Email

Submit