Divi Tabs Maker Plugin Feature Update 2.0

Divi Tabs Maker Feature Update 2.0

I'm excited to announce a huge update to our Divi Tabs Maker module! We just released this plugin and already have added many new features!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

New Features

Take a look at our huge list of features below! This cleans out my idea list, so send me more suggestions!

Display Conditions

After releasing version 1.0 I realized the Divi Conditions feature was not supported in our tabs. I’m not talking about the module, I’m talking about each individual tab within the module. Now you can use Conditions to show or hide individual tabs and their content! This works great when using dynamic content in a Theme Builder template, WooCommerce product page, custom post type, etc.

display conditions for each tab in the Divi Tabs Maker plugin

Active Tab Pointer Position

The original setting had the Active Tab Pointer on the outside of the tab, but now you can set it on the inside. This screenshot shows the examples.

Active Tab Pointer position inside or outside setting in the Divi Tabs Maker plugin
Active Tab Pointer position outside example Divi Tabs Maker plugin
Active Tab Pointer position inside example Divi Tabs Maker plugin

Tabs Stacked Vertical Or Inline Horizontal On Tablet/Phone

By default, the tabs stack and are fullwidth on Tablet and Phone, but if you have small tabs or a low number of tabs, it is nice to be able to make them inline horizontal instead of stacked. So we introduced new settings to keep the tabs stacked fullwidth vertically or inline horizontally on Tablet devices.
tab stacking on tablet vertical stacked or inline horizontal setting in the Divi Tabs Maker plugin
tab stacking on phone vertical stacked or inline horizontal setting in the Divi Tabs Maker plugin

Display Tabs As Menu On Mobile

This unique concept gives you the ability to collapse the tabs on the mobile and show just one tab at a time with a hamburger menu. Just click the icon and reveal the other tabs, and then select one. We also have design settings for the icon size, position, and color.

show menu on mobile for Divi Tabs Maker
hamburger icon menu on mobile in Divi Tabs Maker plugin

Content Height Settings

Now you can set the minimum and maximum height of the tab content.

tab content height settings in the Divi Tabs Maker plugin

Tab Content Scrollbar

When you set a maximum height for the tab content, but the content in the tab is greater than the value, we have added an automatic scrollbar that appears inside the tab content. Now, the user can scroll within the tab to see all the content.

Scrollbar Design Settings

We have added a tab content scrollbar color picker in the design settings, and well as a slider setting to set the width of the scrollbar.

tab content scrollbar width and color settings in the Divi Tabs Maker plugin

17 More Content Animations

We already had 16 content animations in version 1.0, but we have added 17 more! Take a look!

  • Zoom In
  • Zoom In Left
  • Zoom In Right
  • Zoom In Up
  • Zoom In Down
  • Bounce In
  • Bounce In Left
  • Bounce In Right
  • Bounce In Up
  • Bounce In Down
  • Flash
  • Pulse
  • Shake
  • Swing
  • Tada
  • Wobble
  • Light Speed In

Vertical/Horizontal Line

Sometimes it is nice to show a line behind the tabs in the background. This line will be horizontal or vertical depending on the tab layout you choose.

vertical horizontal line desing setting in the Divi Tabs Maker plugin
vertical horizontal line setting in the Divi Tabs Maker plugin
vertical line setting in the Divi Tabs Maker plugin

Show Or Hide Tab Elements In Active/Inactive Tabs

Now you can choose to show or hide the title text, subtitle text, image, or icon in the active tab or inactive tabs. Maybe you want to do things like show the subtitle only on the active tab, or show the image only on inactive tabs.

show or hide the inactivet tab title subtitle or image icon in the Divi Tabs Maker plugin
show or hide the activet tab title subtitle or image icon in the Divi Tabs Maker plugin

Tabs Container Design Settings

We have added design settings for the “container” element that holds the actual tabs. This is really great because now you can design the background of the tabs area with margin, padding, background color, border settings, and a box shadow. In the image below, the Tabs Container has 10px padding, red border, and gray background.

tabs container desing settings in the Divi Tabs Maker plugin

Custom Tabs Height And Width

This setting was created after I was trying to make the tabs perfectly square or round. There was no way to do it properly in the settings without custom CSS, so we added the settings for it! So yes, now you can make equally square or round tabs!

custom tab height and width settings in the Divi Tabs Maker plugin

Spacing Between

Now you can add custom spacing between the tabs, whether they are vertical or horizontal. You can use either a pixel value or a percentage value.

tab spacing custom space between setting in the Divi Tabs Maker plugin

WooCommerce Support (Product Reviews)

You can now replace the Woo Product Tabs module with the Divi Tabs Maker plugin and achieve the same function. Easily add the description, additional info, and reviews into the tab content using dynamic content. And now you can enable the number of reviews in the tab title, just like how it shows in the Woo Products Tab. The power of the Divi Tabs maker on your WooCommerce product pages…wow!

show number of WooCommerce reviews in the Divi Tabs Maker plugin

Tab Background Options – Images, Gradients

I wanted to give you the option to use gradients or images in the tab background. So I checked, and we already had a “Background” toggle in the individual tab settings, but those were affecting the tab content. However, this is not ideal, it would be better to affect the tab. So we changed this – now the background settings inside each individual tab affect the tab. Now you can add gradients or background images to the tabs. The pattern and mask are not working.

use gradient or image in tab background of the Divi Tabs Maker plugin

Tab Shapes

We have added six tab shape options for those who want to make their design unique. You will need to adjust the margin and spacing to get them to look the way you want. If you have new ideas, let us know, but we thought these were a nice variety to start.

custom tabs shapes skews in the Divi Tabs Maker plugin

Improvements & Fixes

We are always improving the plugin by making minor bug fixes and code improvements. You can always check the plugin changelog to see the details.

Tabs Design Toggle Terminology

We changed the “Inactive Tabs” design settings toggle to just “Tabs.” This was for several reasons, but one because we added new settings like the height and width that apply to all tabs.

Tabs Settings Affect Active Tabs, Too

This is important! We realized there was a better way to configure the code so that any changes made to the “Tabs” will also affect the “Active Tab.” This saves you the hassle in the past of going to both the Active Tab and Inactive tab to make the same changes to padding, text styles, etc. Now you can simply set the overall settings that apply to all Tabs, then go into Active Tab and adjust the things that make it different. The Active Tab settings will take on the Tabs settings unless overridden. This is a huge time saver!

Added ARIA Tags

We have implemented ARIA tags in the HTML structure of the module for better accessibility required by W3c and better SEO crawling. 

Updated Tab Position Terminology

This is just a terminology update to the Tab Position setting dropdown options, intended to make it as clear as possible.

  • Tabs Top • Content Bottom
  • Tabs Left • Content Right
  • Tabs Right • Content Left
  • Tabs Bottom • Content Top

Hide Active Tab Pointer On Mobile

Due to the way the tabs stack on mobile, it does not make sense to show the active tab pointer, so this will now be hidden by default on Phone sizes.

Hide Icon Alignment When Left/Right Placement Is Used

When the Icon Placement or Image Placement is set to Left or Right, the Icon Alignment or Image Alignment setting is not relevant and is now hidden to avoid confusion.

Fixed Active Tab Pointer Position

Sometimes, depending on the active tab margin and active tab pointer size, the pointer appeared not quite aligned, like the tab pointer was up a pixel or so. It is now fixed.

Fixed Content Margin Bottom Issues

The margin bottom was not rendering in the Visual Builder and is now fixed.

Fixed Icon Margin Left/Right

The Icon Margin left and right was not working and is now fixed.

Fixed Auto Switch Tabs/Progress Bar Bugs

When the Auto Switch Tabs setting was enabled, and the Show Progress Bar was used, it had some bugs related to the timing and interval when clicking to switch tabs. These issues are now fixed.

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
7

Last updated Jul 25, 2022 @ 6:05 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart