This tutorial will show you how to use the Tabs Module in the Divi Visual Builder.  This module is great for sectioning out the information on your website in tabs.  The info is still easy to access but doesn’t take up a lot of real estate on the web page.  You can use this for different packages or services that your company offers.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version Of This Divi Tutorial

Hello, this is Jimi Blevins.

Today I’m going to walk you through setting up the “Tabs” module using the Divi Visual Builder.

I’ve already got a couple tabs set up, all ready to get it started. I did a tab with just some text. You can kind of see what that looks like.

HowToAddTabs

Then I’ve got another tab here that just has a couple photos in it. You can see, tabs are a great way to display a lot of contents on your website without taking up a bunch of real estate.

HowToAddTabs2

Now, let’s say you had something that had like four or five different types of information, you wanted to show people a product page or something, like here’s a description, here are some pictures, here’s a video. Tabs are a great way to do that really, and they kind of spice up the interactivity of a page as well.

So I’m going to add another tab, and in this one, we’re going to put a video on there. I’m going to put “A Video Tutorial,” for my title.

HowToAddTabs3

Then, I’ll grab my “Visual Build: A Basic Overview” video from Youtube that I would like to insert.

We’re going to want to grab the “Embed Code” instead of just the share link. So, we just want to copy that.

HowToAddTabs4

If you want to make some changes to how big or how small this is, you can select these options in “Video Size.”

If you want to, I’m not going to get too much into that.

Maybe I’ll do a YouTube tutorial on that kind of stuff coming up….?

So, back into here, since we’re going to paste straight HTML, you want to make sure that you’re on the “Text” field Which is just kinda like the HTML in this box.

HowToAddTabs5

So, if I come over here and click on “Visual,” you can see it’s pulled the iframe fine. We’re displaying the video, and I can click back through any one of these that I want.

HowToAddTabs6

Of course, it does give you the option to customize this one particular tab. If you want to get away from the global options, you can just come in here you can change… Let’s say we want to change the “Text Color” to this blue.

HowToAddTabs8

So, just for this tab, this will be blue. It will be blue all the time, so even when I’m not on that tab, you still got the blue over there.

Again, this is up to your preference. Whether you want to, you can do a “Background Image, Background Color,” and this is just for this tab.

Now, if I want to get into the settings for all the tabs, and I just come back in to where it shows all my items.

Then I can get into the “Design.”

HowToAddTabs7

So, “Active Tab Background Color,” this is just the background color of whichever tab is selected.

HowToAddTabs9

If I want to make that, let’s say, like this pink, you know that lightens it up a little bit, so whichever is the active tab.

Then, I can change the “Inactive Colors” as well. Just throw this green in there just to give you an idea of what that looks like.

HowToAddTabs10

I can change the “Font.” I can change the “Font Size,” so it’s bigger or smaller. “Tab Text Color,” this is where I would globally change the color, as I I set this to blue on the individual tab, but here is where I would set it for all of them.

Again “Body Font Size, Color Letter Spacing, Line-height,” all the normal options that we have. I can also change the “Background Color,” or I can put a “Background Image,” which fills up this area.

HowToAddTabs11

So I can have a background color kind of behind my content.

I also find this interesting, if I click on “Use Border,” the default border I’ve got goes away, this is so I can customize it.

So, I can change it, to say, to use the blue. That’s going to put a border around the entire element. I can change the “Border Width” if I want to.

HowToAddTabs12

So these are all the options that you’ve got to, you know, pretty up your “Tabs” module and make it look really good on your website.

I think that covers everything, once again my name is Jimi Blevins and thank you so much for watching.

🙂 🙂

Let's Get Started!

Enter your email address below to begin setting up your account.

You've completed the first step!

Connect With Us For More Epic Tutorials And Blog Posts

Connect With Us For More Epic Tutorials And Blog Posts

Accompany us on our journey of creation, design, and inspiration worldwide. 

Connection Successful... Welcome To The Wonderful World Of Mozaic Technology!