The Advanced Divi Tabs is an extended version of the default Divi Tabs module that lets you create vertical or horizontal tabs with any content inside. Let’s explore all the customization options this module offers.
Content
By default, you will see 4 tabs or navigation items created under the content tab with some options to modify them.
- Add a new item by clicking on the plus icon.
- Delete an item by clicking on the trash icon.
- Duplicate an item by clicking on the copy icon.
- Customize each item by clicking on the gear icon.
Note: Clicking on the gear icon will take you to “Advanced Tab Item Settings”, where you can customize the content and design of the tab item which won’t affect the other items. To learn more about customizing a tab item, click here.
Tab Settings
- Tab Event Type: Choose the action to open a tab (click/on hover).
- Tab Reveal Animation: Set a tab reveal animation from 8 different options.
- Animation Duration: Set the length of the tab reveal animation.
Nav Container Background
Add a background color, gradient, or an image to the navigation container.
Content Container Background
Add a background color, gradient, or an image to the content container.
Background
Add a background color, gradient, image, video, etc. to the entire module.
Admin Label
Change the module name or label if required.
Design
Nav Container Settings
- Sticky Nav: Enable to make the tabs sticky while scrolling.
- Turn Off Sticky On: Turn off sticky mode for mobile and tablet if required.
- Sticky Top Offset: Set the point where the tab will stick from top.
- Use Nav Width Control: Turn on and set the width and height of the navbar.
- Nav Placement: Set the placement to the top, bottom, left or right and alignment of navigation items for desktop, tablet, and mobile separately.
- Rounded Corners: Adjust the sharpness of the navigation container.
- Border Styles: Change the width, color, and style of each border of the navigation container separately or altogether.
- Box Shadow: Set box shadows to the navigational container.
Content Area Settings
- Scroll to Content (Tablet & Phone): When toggled on, Clicking on a tab will automatically scroll to the content for that tab. This option is only for smaller devices.
- Content Vertical Align: Change the vertical alignment of the content in 4 different positions. This will only work if “Nav Placement” is set to left or right.
- Rounded Corners: Adjust the sharpness of the content area’s border.
- Border Styles: Change the width, color, and style of each border of the content area separately or altogether.
- Box Shadow: Add a shadow effect to the content area. When a shadow effect is selected, it will also reveal more options to adjust the shadow color, position, blur, and spread strength.
Nav Item
Set background color, gradient, or image size to the navigation items. Also, change the nav icons’ color, size, placement, borders, etc.
Nav Item Active
Set background color, gradient, or image to the active navigation item. Also, change the active nav icon’s color, size, placement, borders, etc.
Nav Item Text
Find a wide range of customization options for the typography of the nav items’ titles and descriptions.
Nav Item Text Active
Find a wide range of customization options for the typography of the active nav item’s title and description.
Nav Active Arrow
- Use Active Arrow: Toggle on to add an arrow to the active nav item and reveal other customization options.
- Active Arrow Color: Change the color of the active arrow.
- Arrow Size: Adjust the size of the arrow.
- Arrow Alignment: Change the placement of the arrow in 3 different position.
Body
Typography, color, and placement options for different types of body text such as links, ordered and unordered lists, and blockquotes.
Heading Text
Typography, color, and placement options for different types of heading texts from h1 to h6.
Button
- Alignment: Set the alignment of the nav item buttons.
- Background: Add a background color, gradient, or image to the button.
- Button Margin: Add custom margins to the buttons’ containers.
- Button Padding: Add custom paddings to the buttons’ containers.
In addition to these, there are options to customize the typography, color, and borders of the buttons.
Custom Spacing
Add custom margins and paddings to all the wrappers and every item of content and navigation.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margin and padding to the entire module’s container.
Border
Border customization options for the whole module’s container. You have the option to style each border individually or all the borders together.
Box Shadow
Add a shadow effect to the entire module.
Filters
Add color filters to all the module items.
Animation
Apply a reveal animation effect to the advanced tab and customize the delay, duration, repeat, etc. of the animation.
Advanced
Default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
Advanced Tab Item Settings
From here, you can add content and style each tab item separately. Clicking on Add a new item by clicking on the plus icon will take you on Advanced Tab Item Settings.
Note: The settings applied here will override the settings in the parent section in case of a conflict.
Content
Content
Input the title, description, and body text of the tab item. You can also choose to display a library item instead of content.
Nav Icon Settings
Choose to use an icon or an image in the tab item. When an icon is chosen, you can also pick the color and the size of the icon.
Image
Upload an image to display as content in the tab item. You can also input the alt text and change the placement for different devices.
Button
Add a button to the tab item.
Text Area Background
Add a background color, gradient, or an image to the text area.
Note: The rest of the sections offer similar functionalities to their counterparts in the “Advanced Tab Settings.”
Design
Nav Text Styles
Offers the same functionalities as “Nav Item Text.”
Image Styles
If an image is used in the tab item, adjust its z-index, width, and alignment, apply color filters, modify borders, and more.
Text
Offers the same functionalities as “Body.”
Content Area Styles
Border customization options for the content area. You have the option to style each border individually or all the borders together.
Note: The rest of the sections offer similar functionalities to their counterparts in the “Advanced Tab Settings.”
Advanced
Default tab for all Divi modules to add custom CSS code, conditions, visibilities, etc.
