This tutorial will show you how to add custom sidebars and menus to your web page using the Divi Visual Builder for WordPress.  This module us great for adding widgets to your page.

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 show you how to: “Use The Sidebar Module In The Divi Visual Builder.”
There’s a little bit of setup I want to do first. I’m going to actually go with this layout here:

AddSidebar

which is three-quarters and a quarter for the columns. I want to show you kind of different things you can do with sidebars.
So first off, let’s just do the standard WordPress sidebar which is what is automatically going to be put in.

AddASidebar2

Here we’ve got a recent post, the search field comments archives all that stuff. This is what you would normally see by default on the edge of a blog page or something.

AddASidebar3

So the way to get in and edit this if you don’t already know, is to go to your widgets section, and that’s going to be under “Appearance” and then you want to click on “Widgets.”

AddASidebar4

You can see this first one called “Sidebar,” this is your default sidebar and you can see it shows us the search, the post comments, all the things that we’ve already seen here on this side.

AddASidebar5

You can add and remove these if you want to. If you want to keep this as the standard, like let’s say I don’t want the comments on there, all I have to do is click here on “Delete,” and that’s automatically going to remove the comments.

AddASidebar6

I came back here and refresh this page, this section would be gone. So that’s one way to kind of edit the default.

AddASidebar7

Another thing that you can use widgets for, which I really like to do, is to use them for custom menus. So I’m actually going to add this, just make a widget called “Custom Menu.”

AddASidebar8

I’ll probably have to get in and out of my pages. I think I’ll have to refresh this page in order to see that, and then once that loads up, I’m going to go ahead and refresh my Visual Builder.

AddASidebar9

So Custom Menu, what I’m going to do is grab this widget here called, oddly enough, “Custom Menu,” and then here in the menus again we’re going to “Appearance,” then “Menus.” I’ve already set up a menu called “Sidebar Menu,” and I’ve put in kind of the default WooCommerce pages.

So you can get your account, check out, cart, and you can do whatever you want with this menu. We’ve gone over menus a little bit before, but you can add any page that you’ve already made in WordPress. You can add any post that you’ve already made in WordPress. You can also do custom links, like say I wanted to link to somebody else’s website, I just put the URL and here in the link text. I’ll go over a tutorial on how to do menus in the future, just wanted to show you how I set this up. So this is all I have to do, is just pull this widget over and I can give it a title.

Let’s say “Shopping Menu,” and then I want to pick my sidebar menu from there, just hit save and you don’t need to refresh this page.

I’m going to go ahead and refresh just so you can see we can pull in that new sidebar that we just created because you’ll have to go in and set that up in the widget section.

Then you can come into this module in the Visual Builder and go ahead and set that up.
So we’ve already got it loaded up. I’m going to go ahead and add another sidebar here.

You can see if I throw this in just a regular column, it’s kind of in a disarray. This is just the default one, but I want to put in a menu.

So I’m going to do a custom menu and then that’s going to load it up just like a regular menu.

Now if I change this back here in the “Menus” tab, it’s going to automatically update so I don’t have to change it in the widgets. I don’t have to change the Visual Builder, whatever changes I make to this menu are automatically going to pop up here. I really like to use these in my footer. If I’ve got menus in the footer, I can just pop these custom menus in and then if I ever need to make a change, I only have to change it in one place and it changes it site-wide. Which is really nice!

Let’s get into the “Design.”

So we can do this, “Remove Border Separator.” I don’t know if you can see it on the screen, but there’s this little line here that you would normally have on a sidebar and that’s just so we can get rid of that.

There you can see, it’s gone now.

I can change my “Header Font,” I can make it bold.
You know, a lot of the same, normal options that we’re already used to with the Divi Visual Builder.
It’s pretty simple, we’ve got our “Body Font,” Body Text,” “Letter Spacing,” and this is how we can change any of these linked colors.

You can also do many different things with these.
I really like sidebars. I think it’s kind of a misnomer to call in the sidebar because you can actually use them throughout the website to feature any of these widgets that you want. I’ve got all the WooCommerce widgets in here. I can just do custom text or code. These widgets are a great way to put it, like your facebook pixel tracking, or any kind of that stuff. I usually put them in a text module in the footer and then I know it’s going to load on every page and be fine.

That pretty much covers everything with the: “Sidebar Module” and the Divi Visual Builder. 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!