Build Your Own Tabs
I am excited to introduce the Divi Tabs Maker plugin from Pee-Aye Creative. As the name implies, this plugin is an advanced Divi tabs module with tons of extended functionality and design settings, allowing you to build your own custom tabs to look and work the way you want. Be sure to watch the video to see all the features, and I hope you enjoy!
Please watch the video to get all the exciting details!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Features
Take a look at our huge list of features below!
Layout Options
- Tabs Top
- Tabs Bottom
- Tabs Left
- Tabs Right
Tab Settings
Includes Separate Settings For Active & Inactive Tabs
- Margin
- Padding
- Borders
- Box Shadows
- Background Colors
Title Text Settings
Includes Separate Settings For Active & Inactive Tabs
- Custom Text
- Alignment
- Font Size
- Font Styles
- Font Family
- Color
Subtitle Text Settings
Includes Separate Settings For Active & Inactive Tabs
- Custom Text
- Alignment – Left/Center/Right
- Font Size
- Font Styles
- Font Family
- Color
Icon Settings
Includes Separate Settings For Active & Inactive Tabs
- Icon Picker
- Size
- Placement – Left/Right/Top Of Text
- Alignment – Left/Center/Right
- Color
- Background Color
- Margin
- Padding
- Borders
- Box Shadows
Image Settings
Includes Separate Settings For Active & Inactive Tabs
- Custom Image
- Size
- Placement – Left/Right/Top Of Text
- Alignment – Left/Center/Right
- Margin
- Padding
- Borders
- Box Shadows
Tab Width Settings
Settings Vertical Or Horizontal Tabs
- Set horizontal tabs to automatically equalize the width
- Adjust the percentage for the vertical tabs width
Active Tab Pointer
- Choose to show a pointer on the active tab
- Size
- Color
Tab Content Area
- Text Color
- Text Font Design Settings
- Margin
- Padding
- Background Color
- Border Radius
- Borders
- Box Shadows
Dynamic Tab Content
Easily add any Divi section, row, or module to your tab content area! Simply click the dynamic icon button and select any layout which is saved in your Divi Library.
Content Animations
Animate The Content When Switching Tabs
- Slide
- Slide Left
- Slide Right
- Slide Top
- Slide Bottom
- Fade
- Fade Left
- Fade Right
- Fade Top
- Fade Bottom
- Fade In Left
- Fade In Right
- Fade In Top
- Fade In Bottom
- Horizontal Flip
- Vertical Flip
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. You can choose the timing interval
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.
Tab Navigation Buttons & Controls
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.
You also have the option to enable navigation controls, which are dots or numbers at the bottom, similar to a slider or carousel.
Choose where you want to display the navigation buttons and control buttons. You can select from top, right, bottom, or left position.
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.
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.
Documentation
As with all of our products, every setting and feature of the plugin is well documented! Go check out the plugin documentation area for everything you need to know about using the module.
View Product Page And Purchase
If you are not using this plugin yet, I encourage you to visit the product page and learn more about how you can easily create beautiful advanced tabs in Divi with tons of custom content and design settings!
Nelson,
Your new tab maker plug-in looks great. Can’t wait to try it out. Congrats! Glad to have a lifetime membership.
Hi Mickey,
Hope you like it! Yes, plugins releases are when everyone, customer or not, is reminded of the membership value 🙂
Hello!
I have deeplinking activated and the URL’s look good however… the deeplinked tabs don’t activate when clicking 🙁
Just realized, it works when off page, but if I am on the same page and clicking a link in my footer than is deeplinked to the tab module, it does not activate the tab.
I believe this has been fixed in version updates, if not please contact our support, as this is not a good place to get technical support.
This module was so helpful! I had to create a sort of dashboard and having the option to add the image above the text instead of beside was helpful. Also the dynamic layouts in the content allowed me to add hotspots to the content. The only thing I am having to try to recreate with css is for the image to be able to change on hover or active tab. There is an option for the text to change for the active tab, but the image would stay the same. Maybe in a future update??
Hi Arlaysha!
We will forward this feature request to our development team for consideration. Let us know if you need to add some more details for the feature.