Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

Introducing The Divi Tabs Maker Plugin

Nelson Miller Profile Orange
I'm excited to announce the Divi Tabs Maker module, a new plugin from Pee-Aye Creative with hundreds of functionality and design settings!

▶️ Please watch the video above to get all the exciting details! 👆

Features

Take a look at our huge list of features below!

Divi Tabs Maker Layout Options GIF

Layout Options

  • Tabs Top
  • Tabs Bottom
  • Tabs Left
  • Tabs Right
Divi Tabs Maker Individual Tab Settings GIF

Tab Settings

Includes Separate Settings For Active & Inactive Tabs

  • Margin
  • Padding
  • Borders
  • Box Shadows
  • Background Colors
Divi Tabs Maker Title Text Settings GIF

Title Text Settings

Includes Separate Settings For Active & Inactive Tabs

  • Custom Text
  • Alignment
  • Font Size
  • Font Styles
  • Font Family
  • Color
Divi Tabs Maker Subtitle Text Settings GIF

Subtitle Text Settings

Includes Separate Settings For Active & Inactive Tabs

  • Custom Text
  • Alignment – Left/Center/Right
  • Font Size
  • Font Styles
  • Font Family
  • Color
Divi Tabs Maker Icon Settings GIF

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
Divi Tabs Maker Image Settings GIF

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
Divi Tabs Maker Tab Width Settings GIF

Tab Width Settings

Settings Vertical Or Horizontal Tabs

  • Set horizontal tabs to automatically equalize the width
  • Adjust the percentage for the vertical tabs width
Divi Tabs Maker Active Tab Pointer GIF

Active Tab Pointer

  • Choose to show a pointer on the active tab
  • Size
  • Color
Divi Tabs Maker Content Settings GIF

Tab Content Area

  • Text Color
  • Text Font Design Settings
  • Margin
  • Padding
  • Background Color
  • Border Radius
  • Borders
  • Box Shadows
Divi Tabs Maker Dynamic Tab Content GIF

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.

Divi Tabs Maker Plugin by Pee Aye Creative

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

6 Comments

  1. Mickey Diener <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Nelson,
    Your new tab maker plug-in looks great. Can’t wait to try it out. Congrats! Glad to have a lifetime membership.

    Reply
  2. Danny <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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.

    Reply
  3. Arlaysha <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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??

    Reply
    • Hemant Gaba

      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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart