How to use the Divi Advanced Tabs Module

Introduction

Create better tabs using the Pro Advanced Tabs module. This module have more layout options and functions than the default Divi’s tabs module.

Step 1: Add a new module

1. Enable Divi Builder and add a new Module > Search for “Advanced Tabs”.

(make sure the Timeline Module is enabled under the Divi Modules Pro Control Panel)

 

 

Advanced Tabs – Content Tab 

1. Tab Direction: Set the position of the tabs, horizontal or vertical.
2. Tab Position: If the position is horizontal, you can set the position of the tabs at the top or the bottom. If the position is vertical, you can set the position of the tabs at the right or left.
3. Tab Trigger: Select a trigger option. On Click or on hover.
4. Enable Arrow: Enable the arrow for the active tab.
5. Tabs Alignment: Change the start position of the tab.
6. Tabs Image/Icon: Add a custom image from media library or icon from the Divi Icons.
7. Image/Icon Position: Set the position of the image/Icon. Left, right, top or bottom.
8. Tabs Content Animation: Add a fancy animation to the tab module.
9. Tabs Deep Linking: Open a specific tab on page load by using a URL with hash.

 

 

Advanced Tabs – Content Tab – Tab Container Background

1. Tab Container Background: Set a background color to the tabs container.

 

 

Advanced Tabs – Content Tab – Content Container Background

1. Content Container Background: Set a background color to the content of each tab.

 

 

 

Advanced Tabs – Design Tab

1. Image & Icon: Change the size of the icon or image. If you select icon, then you can set a color for the icon.
2. Heading Text: Style the titles within the content.
3. Body Text: Style the text of the tab.
4. Tab Text: Style the tab text of the inactive tabs.
5. Tab Active Text: Style the tab text of the active tabs.
6. Tab Arrow: Set a color of the active tab arrow, if enabled.
7. Sizing: Set the custom size of the whole module. Change the width and height.
8. Spacing: Control de margins and paddings.
9. Border: Set border to the module.

 

 

Advanced Tabs – SIngle Tab content

1. Title: Set a title to the tab. This will be displayed in the tab.
2. Content Type: Select between text and Divi Library content.
3. Selec Divi Library Layout: If you select Divi Library in the Content type, here you can select any layout saved in the Divi library to be shown in the Content area.
4. Tab Link: Add a custom link to the tab.

 

 

Advanced Tabs – SIngle Tab – Design

1. Tab Item: Change the sigle tab width.
2. Heading Text: Style the titles within the content of the single tab.
3. Body Text: Style the text of the tab of the single tab.
4. Tab Text: Style the tab text of the inactive tabs of the single tab.
5. Tab Active Text: Style the tab text of the active tabs of the single tab.
6. Spacing: Control de margins and paddings of the single tab.
7. Filters: Add filters to the images within the single tab.
8. Transform: apply Divi transform option to the single tab.

 

 

Advanced Tabs – SIngle Tab – Advanced

1. CSS ID: Add a custom CSS ID to the single tab. This could be used for custom CSS or deep linking.
2. Custom CSS: Add custom CSS to the main module. Use the Free form or module elements.
3. Conditions: Use the Divi conditions to show or hide the single tab.
4. Visibility: Show or hide the single tab per device.
5. Transition: Add entrance animation when changing the single tab.
6. Position: Position of the single tab. You can use fixed, relative or aboslute position.