Divi Plugin Highlight: Divi SuperTabs

Posted on January 1, 2023 by Leave a Comment

Divi Plugin Highlight: Divi SuperTabs
Blog / Divi Resources / Divi Plugin Highlight: Divi SuperTabs

Divi SuperTabs is a third-party plugin for Divi that adds a tab module to the Divi Builder. Although the Divi Builder already has a tab module, this plugin offers some unique design options and features that allow you to create more complex tabs for your Divi website. In this plugin highlight, we’ll see what Divi SuperTabs can do and help you decide if this is the right plugin for your website.

Let’s get to it!

Installing Divi SuperTabs

Installing Divi SuperTabs is simple and straightforward. Navigate to the plugin page on your WordPress dashboard, then click upload plugin. Upload the ZIP file for the plugin, then activate the plugin once it is installed.

Divi Plugin Highlight Divi SuperTabs Install

Divi SuperTabs Module

A new module is added to the Divi Builder called SuperTabs. This module allows you to add complex and customizable tabs to your Divi layout. Let’s look at the main features.

Divi Plugin Highlight Divi SuperTabs Add Module

Divi SuperTabs Tab Settings

Under the content tab for the SuperTabs settings, you can add your tabs. Each tab also has its own settings menu, allowing you to customize the design of each individual tab.

Divi Plugin Highlight Divi SuperTabs New Tab

Tab Settings – Content

Within each tab’s settings, you can add the tab content such as the title, subtitle, and tab content.

Divi Plugin Highlight Divi SuperTabs Tab Content

In the Layout section, you can select from a variety of layouts for the content in your tab. In the example above, I used the Image Left, Text, Button layout.

Divi Plugin Highlight Divi SuperTabs Tab Layout

Alternatively, you can select the library option to use any Divi Library layout in a tab, allowing you to create more complex designs using other Divi modules.

Divi Plugin Highlight Divi SuperTabs Library Layout 2

To use a library item with Divi SuperTab, save your desired layout to the Divi Library and make sure to add it to the “Tabs Content” category.

Divi Plugin Highlight Divi SuperTabs Add To Library

Then, select Library under the tab layout settings and add your Divi Library layout.

Divi Plugin Highlight Divi SuperTabs Library Layout

Also under the content tab of the tab settings, you can add an icon to your tab. SuperTab allows you to use Divi’s default icons, FontAwesome’s icons, and even upload your own custom icons.

Divi Plugin Highlight Divi SuperTabs Tab Icon

You can also set a tab to link to a URL so that the link opens when the tab is selected. This is a handy way to link to external websites alongside your tab content. You can also set a link for the entire module as well under the Link settings.

Divi Plugin Highlight Divi SuperTabs Tab Link

Finally, you can set a unique background for your tab. The background settings include all of Divi’s default background options (color, gradient, image, video, pattern, and mask). In this example, I added a simple color background to this tab.

Divi Plugin Highlight Divi SuperTabs Tab Background

Tab Settings – Design

Under the design tab of the tab settings, you can find many options to completely customize the look of your tab. When you customize the design this way, your changes are only applied to the individual tab you are editing, not the rest of the tabs. The design options within the individual tab settings are the same as the design options within the SuperTabs settings, so the main difference is whether you want your design to apply to every tab or only apply to a single tab.

With the design settings, you can edit the look of the navigation, tab, content, layout, text, sizing, spacing, etc. We’ll go over all of the design options in detail later on in this article.

Divi Plugin Highlight Divi SuperTabs Tab Design Settings

Tab Settings – Advanced

Under the Advanced tab, you have all of the default Advanced Divi options including Custom CSS, Conditions, Visibility, Transitions, Position, and Scroll Effects.

Divi Plugin Highlight Divi SuperTabs Tab Advanced Settings

Divi SuperTabs Content Tab

Now that we have covered the settings for the individual tabs within the Divi SuperTabs module, let’s explore the general settings for the SuperTabs module, starting with the content tab. As we already covered, here is where you add each of your tabs.

Arrow

With this option, you can add an arrow to your tabs that will display on the active tab. You can see an example of this above. The arrow color can be customized in the design tab.

Divi Plugin Highlight Divi SuperTabs Arrow

Link

This option is a default Divi module option allowing you to link the module to a URL.

Background

You can add a background to the module with the Background option. When you add a background this way, the color spans the tab navigation and the content area. In this example, I added a yellow background to the module. There are other background options in the Design tab, which allow you to add different colors for the tabs and content area. We’ll go over those design options in the next section.

Divi Plugin Highlight Divi SuperTabs Background

Divi SuperTabs Design Tab

The design tab is where this plugin really shines. There are many options for you to customize every aspect of the SuperTabs module. Let’s take a look.

Nav Settings

Under the Nav settings, you can change the navigation placement, alignment, and subtitle placement. In the example above, the navigation placement is set to Left. You can also make the tabs sticky so that they stick to the top of the page as you scroll through the tab content.

Divi Plugin Highlight Divi SuperTabs Nav Settings

Also under the nav settings, you can completely customize the nav spacing by changing the nav width, margin, padding, and gutter. In this example, I removed the left padding and changed the nav width to 20%. Finally, you can customize the colors and overall design of the navigation bar by changing the background color, adding rounded corners, or adding a border. I changed the navigation bar background to green.

Divi Plugin Highlight Divi SuperTabs Nav Settings 2

Tab Settings

In the tab settings, you can customize the tab padding, the active tab background color, and the inactive tab background color. You can also change the icon placement, alignment, margin, and size. Finally, you can choose to hide the icon or title, add rounded corners, or add a border.

In the example below I changed the active tab background color to a lighter green and changed the icon placement to left and added an icon margin.

Divi Plugin Highlight Divi SuperTabs Active Tab Background

Arrow Settings

In the arrow settings, you can change the arrow color. I changed it to a lighter green to match the active tab background color.

Divi Plugin Highlight Divi SuperTabs Arrow Settings

Content Settings

Here you can customize the overall design for the content in your tabs. You can add padding, rounded corners, and a border. I added some padding to the content section to bring a better balance to the overall design.

Divi Plugin Highlight Divi SuperTabs Content Settings

Layout

In the layout settings, you can set the nav bar to be inset, displaying within the frame of the tab.

Divi Plugin Highlight Divi SuperTabs Inset

Nav Item Text

Here you can customize the nav item font, font weight, style, color, size, spacing, line height, and shadow. Here I changed the nav item font color to white, This also changes the icon color.

Divi Plugin Highlight Divi SuperTabs Nav Font

Active Nav Item Text

The Active Nav Item Text settings have the same settings as the nav item text settings, but these options apply only to the nav item when it is active (selected). Here I changed the active nav item text color to orange.

Divi Plugin Highlight Divi SuperTabs Active Nav Text Color

Sub Title Text

Here you can customize the subtitle text design. The options are the same as the nav text options.

Divi Plugin Highlight Divi SuperTabs Subtitle Text

Active Tab Sub Title Text

And in this section you can customize the active subtitle text design. Again, we have the same customization options as the last three sections, but these settings only apply to the subtitle when it is active.

Other Design Settings

In addition to the unique settings we covered, there are also other default options such as sizing, spacing border, box shadow, filters, transform, and animation.

Divi Plugin Highlight Divi SuperTabs Design Settings

Divi SuperTabs Advanced Tab

The Advanced tab for Divi SuperTabs is pretty standard. You can add custom CSS to customize the module even more, and you can use the other settings such as conditions, visibility, transitions, position, and scroll effects to bring your SuperTabs design to the next level.

Divi Plugin Highlight Divi SuperTabs Advanced

Divi SuperTabs Examples

Here are a few examples of how you can use Divi SuperTabs.

Pricing Table

The first example is a pricing table. The content is from the Device Repair layout pack. I saved each of the pricing tables to the Divi Library and used the Library layout feature to add the content to each tab. This makes it easy to add more complex content layouts in the tabs.

Divi Plugin Highlight Divi SuperTabs Example 1

How It Works

The second example uses the tabs to organize different steps of a process. This layout was made using the Estate Planning layout pack. I used the individual tab settings to set a different tab color and background for each of the tabs.

Divi Plugin Highlight Divi SuperTabs Example 2

Features

The final example uses the Divi Home Staging Layout Pack. I used SuperTabs to organize some of the features being highlighted on the page. Additionally, I used custom icons to add some visual interest to the tabs.

Divi Plugin Highlight Divi SuperTabs Example 3

Purchase Divi SuperTabs

Divi SuperTabs is available in the Divi Marketplace. Marketplace. It costs $29 for unlimited website usage and 1 year of support and updates. The price also includes a 30-day money-back guarantee.

Final Thoughts

Divi SuperTabs is a feature-packed plugin for the Divi Builder that allows you to create complex tabs for your Divi website. This plugin’s strong suit is definitely the ability to import layouts from your Divi library as a tab, allowing you to add complex tab content containing other Divi modules. Additionally, the customizability of the plugin is great. With all of the settings available you can customize and fine-tune the tabs to achieve the exact look you want.

Overall Divi SuperTabs is very easy to set up and use, and you can create great-looking tabs to organize the information on your website. If you feel limited by Divi’s native tabs module or want to use Divi Library content within your tabs, this plugin might be a great option for you.

We would love to hear from you! Have you tried Divi SuperTabs? Let us know what you think about it in the comments!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

New Divi Starter Site for Real Estate (Quick Install)

New Divi Starter Site for Real Estate (Quick Install)

Posted on July 10, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level! This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post
Get a Free Water Non Profit Layout Pack For Divi

Get a Free Water Non Profit Layout Pack For Divi

Posted on July 8, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Water Non Profit Layout Pack that’ll help you get your next water non...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today