Divi Tabs Maker

Documentation & Support

Docs » Divi Tabs Maker » Main Tabs Settings

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Tabs Maker Plugin by Pee Aye Creative

Ready To Download?

Visit the product page to get all the details and download the plugin.

View Product

Main Tabs Settings In the Divi Tabs Maker plugin by Pee Aye Creative

Main Tabs Settings

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.

Tab Position setting in the Divi Tabs Maker plugin

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.

Auto Switch Tabs setting in the Divi Tabs Maker plugin

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.

Tabs Width setting in the Divi Tabs Maker plugin

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.

Show Active Tab Pointer setting in the Divi Tabs Maker plugin

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 Tabs setting in the Divi Tabs Maker plugin 1

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.

Auto Switch Interval setting in the Divi Tabs Maker plugin

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.

Hide Tabs setting in the Divi Tabs Maker plugin

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.

Show Progress Bar setting in the Divi Tabs Maker plugin

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.

Manual Tabs Switch Method setting in the Divi Tabs Maker plugin

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.

Animate Tab Content setting in the Divi Tabs Maker plugin

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 Type setting in the Divi Tabs Maker plugin

Tab Content Animation Duration

After selecting an animation type, you can set the timing duration of the tab switch animation in milliseconds.

Tab Content Animation Duration setting in the Divi Tabs Maker plugin

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.

Show Tabs Navigation Buttons setting in the Divi Tabs Maker plugin

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 Buttons And Controls Position setting in the Divi Tabs Maker plugin

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.

Tab Navigation Controls setting in the Divi Tabs Maker plugin

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.

Default Active Tab setting in the Divi Tabs Maker plugin

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.

Deeplinking direct link setting in the Divi Tabs Maker plugin
Last updated June 1, 2022
0

Your Cart