Overview
These are the main settings in the Tab Settings toggle of the Content tab of the Divi Tabs Maker module. These settings are used to set up the layout and function of the entire tabs module.
Tabs Settings
Tabs Position
There are four main layout options for the tabs in relation to the content. You can choose to have the tabs on the top with content below, tabs on the bottom with content above, tabs on the left with content on the right, or tabs on the right and content on the left.
Fullwidth Equal Tabs
If you have the tabs position set to the top or bottom, you may want to equally space the width of the tabs horizontally. This setting enables this feature to resize the tabs to fit equally within the available container width.
Tabs Width
If you have the tabs position set to the left or right, they will have a default width of 25%. This means the content takes up the other 75% of the space. You can easily adjust this by changing the percentage.
Show Active Tab Pointer
If you want to show a pointer to the active tab, you can do so with this setting. It can be used to add some style and also to indicate which tab is active. Design settings for choosing the size and color can be found in the Active Tab settings in the Design tab.
Auto Switch Tabs
By default, the tabs switch when you click on them. But you may want the tabs to cycle automatically. This is a great way to show visitors the other tab content without clicking.
Auto Switch Interval
If you are using the Auto Switch Tabs setting, this will allow you to set the duration of time between each automatic tab switch.
Hide Tabs
If you are using the Auto Switch Tabs setting, then you could actually hide the tabs and only show the tab content. This setting could also be used with the navigation buttons.
Show Progress Bar
This is an optional setting of the Auto Switch Tabs feature to show a progress bar on the top of each tab to visually indicate the duration each tab will be active. The progress bar will move based on the timing interval chosen.
Manual Tab Switch Method
The default way to change tabs is by manually clicking on another tab, but this setting gives you the option to change it to hover if you want.
Animate Tab Content
Enable this setting if you want the content of each tab to appear using a transition animation effect when switching between tabs. You can select the type of animation in the next setting.
Tab Content Animation Type
This setting allows you to choose an animation effect for switching between tabs. There are many options to choose from, so take your pick!
- Fade
- Fade Left
- Fade Right
- Fade Top
- Fade Bottom
- Fade In Left
- Fade In Right
- Fade In Top
- Fade In Bottom
- Slide
- Slide Left
- Slide Right
- Slide Top
- Slide Bottom
- Horizontal Flip
- Vertical Flip
Tab Content Animation Duration
After selecting an animation type, you can set the timing duration of the tab switch animation in milliseconds.
Show Tab Navigation Buttons
Take your tabs to the next level and turn them into a slider! That’s right, you can use this setting to show next and previous buttons to switch between tabs. You could even hide the tabs in another setting if you want.
Tab Navigation Buttons And Controls Position
Choose where you want to display the navigation buttons and control buttons. You can select from top, right, bottom, or left position.
Tab Navigation Controls
You also have the option to enable navigation controls, which are dots or numbers at the bottom, similar to a slider or carousel. The default is none, but this setting allows you to choose which type of navigation controls you would like to use.
Default Active Tab
The first tab is active by default when a visitor comes to your page or refreshes the page. But this setting allows you to enter a number for the tab you want to be active by default.
Deeplinking
This feature allows you to link directly to a tab within the module and make it active. Just right-click on the tab you want to link to and copy the URL, then use that URL in a button or link. Now, when someone clicks the link, it will navigate to the tabs module and make the linked tab active.
