Transcript from this Divi WordPres Tutorial

Hey, everybody, this is Jimi Blevins, coming at you with the new tutorial. Today we’re gonna have some fun with menus and, what I’m going to show you guys today is just a few ways to feature your menus on your website. And first off, I just wanted to show you this because I went into the settings and deleted all the menus that I had for this particular site; because I wanted to show you something that if you just leave this unchecked, WordPress is going to add every page that you create to your top menu - to the main menu - on the website and it’s gonna end up looking like this - just a jumbled mess. It kind of takes up the entire page, so I’m going to show you guys how to clean this up really quick. let’s come back in here to our dashboard. [We’re] going to go to Appearance and then Menus. Now we’re going to go ahead and create a new menu using this link, “Create New Menu”. this is going to be our new top level menu, so let’s call it top navigation. I like to call it “top nav main” or something like that. [I] usually keep my naming conventions somewhat consistent, so that you know, whatever website I’m working on, it still seems to work for me. Okay, so here’s what we do. First off … I probably want to put my homepage [in].

So you’ve got this first section here [which] is “Pages”, and this shows you all the most recent pages that you’ve worked on. And [the “View All” tab on the pages menu] will show you all the pages that you’ve got in your system. And [something] really handy, they put this “Search” feature here [on the tab next to the “View All”] so that you can go ahead and search for a page if you’ve got hundreds of pages on your website. Let’s go ahead and add a “Home”. And that’s really simple, that’s all you have to do to add a link to your homepage; is just select the page, click “Add to Menu”, and then you’re done. If you want to do any customer customizing, you can come in here, you can change the URL, and you can also change the navigation (so I can call those home page or just, I like to leave it at “Home”). And this is a little tip for all you web designers out there or if it is building your own website - when you’re building your menus you want to keep them down to one, maybe two words max, because again, if you’re going to have seven or eight menu items on your website, you’ve got people with different browsers different devices even if you try and keep things organized if you’ve got big names it can still end up looking like [a jumbled mess]. I mean these are just giant long menu names that break the layout and they just don’t look that good, so my advice is to always keep it really simple, one or two words. That way you just simply communicate what this page is about if you want to click on it. Okay, so next I’m going to show you how to create a drop-down menu. and for this I want to use, let’s set up one for like the WooCommerce. So first off I’m gonna make the head, like the header of this menu.

So we come here to “Custom Links”, and for the URL we just want to put a hashtag so I’ll [hit] shift + three, that creates the number similar to the hashtag. And here we’ll just call this “Shopping” and add that to the menu. Now what a hashtag does, is it creates an anchor. And if you just leave it as the hashtag, what’s going to happen is, if somebody clicks on it, it’s not going to go anywhere, but if they scroll down the page it’s going to jump to the top of the page. So we want to get rid of that because we don’t want this to be something people can click on at this point. So what I’m going to do is come in here and I’m going to delete this hashtag. And what this does, is it makes it so if somebody clicks on the “Shopping” part of this menu nothing’s going to happen - they need to click on something that’s within the drop-down menu. A little tip for you there. So then what I do is, I come back here to “Pages”, and you can see I’ve got a cart page, I’ve got a “Checkout” page, and if I scroll all the way down here it has like a “My Account”, and then the shop page. We’re going to go ahead and add those to our menu, and then when those come up, we’re going to make them a submenu of this shopping item. So I want “Shop” to be first.

I’m going to grab that and drag it up here and you’re going to notice that behind my link here, you’ll see there’s this dotted box. And this dotted box is showing me the indentation so that I know this link is going to be a drop-down menu under “Shopping”. You see if I move it over a little bit you’ll notice that the dotted box moves back over. That makes it another top-level item, but I wanted it to be a drop-down so I’m going to scoot it over a little bit so I can see that indentation. And I just left a little bit. And I want to go ahead and do that with all of these links. So you can see right behind it, you see how it snaps over and that tells me it’s being in the right place. And I can also keep going if I want to make a submenu… Let’s say I go “Shopping”, “Checkout”, and “My Account” [as a submenu of “Checkout”]. That way I can make even further menus right here in WordPress’ settings. All right now the last thing I’m going to show you how to do is, we’re going to add the categories for our blog. So once again I’m gonna make a custom link just for the header, so go ahead and put a hashtag in and our linked text is going to be … called “Blog”. And I’m going to show you that the reason that you have to put the hashtag in here and then delete it later is because you have to have something that WordPress will accept in its’ form. If I delete this and hit “Add Menu” it’s gonna give me these two red boxes to show me “Hey, I’m looking for something else.” I want to go ahead and put the hashtag back in there so it’ll accept my menu item, and then I come in here and I go ahead and delete it. And again, this is to make it so if somebody clicks on this, it’s not going to take him anywhere else on the page - it’s just going to give them a menu that they’re looking for. So here on my blog categories, I’m going to add my “Pics and Words,” my “Teacher Image”, “Visual Builder”… I don’t usually put anything in “Uncategorized”, leave that. So again I click on “Add to Menu”, and you’ll notice right off the bat it’s going to add them as top-level menu items. Just need to drag them over a little bit to fix them as a drop-down. And I’m pretty happy with this menu; I think I’m gonna stick with this. One last thing I have to do is come down here and where it says “Primary Menu” that most themes will create this option in your … menu settings if they’ve got like a primary menu or footer menu that kind of thing. So Divi puts in a primary, secondary, and footer; so we’re going to go ahead and click on “Primary”, and then “Save Menu”. And then once that’s done, we just kick back here into our home page, and you can see we’re going to clean all this up. It’s just gonna look so much better this way - people can access what they want to get to on my website about having to go through a bunch of garbage there on the top of the page. So that’s how to clean up your top menu and edit that, and I covered that in another tutorial, but I wanted to get a little more in-depth into it. So next thing I want to show you is how to create a menu that will work in your sidebar. If you come here back to the homepage, and I think the way I have this website set up, we always got a sidebar here, and what that does is WordPress automatically creates these links over here on the right. So I’ve got a search field, I’ve got recent posts, I’ve got archives, categories, and “Meta” - and this is just information about my WordPress website. So let’s say I want to get rid of these [last] three, I want to make a menu over here that’s a little bit more towards my blog, and get rid of … some of this stuff. So I’m going to come back in here in the menus and then click on “Create New Menu”. When that comes up let’s call this “Blog Sidebar” to be our blog sidebar menu. Going to create that. Okay, so once again we pretty much go through the same kind of structure work; but this is going to be a menu that’s just on the side of the page so we don’t have any dropdowns. If you do use drop downs in this, it’s going to indent them a little bit. If you want to categorize your link, I’m not going to worry about that right now. All I’m gonna do is just add in my categories here, click on “Add to Menu”, and then I think that’ll be fine. I don’t really need to actually, but you know what I’m going to do - I’m going to add a couple custom links just to show you how this works. So let’s make one to https://mozaictech.com/, put that up there… let’s do one to my website http://jimmyblog.com/, we’ll add that to the menu too. So I got my categories and a couple links in there. So I’ll go ahead and save that. I don’t need to select any of these [options] because I’m not putting [the menu] in any of those locations - not the footer or the header. Just gonna save this… So the next step in this process is to come in here to the “Widgets”. And this is where all your sidebars are managed. And sidebar is just kind of a way that WordPress can compartmentalize certain information that happens, it’s repetitive throughout your website so like a menu in your footer or a menu in your sidebar or like a piece of text that you’re going to put in a lot of different areas of the website. Widgets really work great for this kind of thing and here’s another reason why they work really good (especially if you’re going to use these in your footer) is because every time you make an update to the menu, you don’t have to go into, you know, your pages, you just go into your menu and then you make a change to the menu and that’s going to update it across your entire website, wherever that menu is filed. It’s a time-saving feature that I really like about WordPress, so get used to using sidebars with your menus because it’s just something that’s going to make your life a lot easier when you’re building your website. So here we are, on our “Widgets” area, and I’ve got my sidebar here. And this is the default WordPress sidebar that we’ve been talking about right over here, on the right-hand side. I’m going to come in here and, let’s see, I think I want to keep the recent posts but the archives (not a huge fan). Let’s go and delete that, and since we put our categories and links, delete that as well. And I’m going to get rid of the “Meta” too - I don’t need that. So I’ve got “Search”, I’ve got “Recent Posts”, and now I want to put in the menu that I just made, so I come here the custom menu widget, and I just drag that over here. I would put it in between the search and the recent posts, and I can put the title here. Let’s call this “Links and Blog”, and then we want to get our menus, will go here in “Blog Sidebar” what we just created and I want to hit “Save”. And this is all you have to do. So now that we’ve saved that, we can come to our home page, click refresh really quick, and then when that pulls up you’re going to see that we changed all this information here. Here’s our links to our blog categories, the couple links we added, and then I left the recent posts in there. So that’s cleaned up our default sidebar, got us a custom menu in there, and we’ve also cleaned up [the top menu]. Let’s say I want to put a menu somewhere in this area… that’s where the menus start getting really fun. So first thing we’re going to do is come back here to our widget area and that’s where we’ll create a custom widget area. So we will just call this, originally enough, “Custom Menu” and then click on “Create”. And I don’t know if this is a bug or something they’re working on, but as you can see, it looks like nothing happened, but trust me, it did. All we need to do is come up here and refresh the page, and then our new custom widget’s gonna show up right here. There we are, “Custom Menu.” Just a little trick I found out - I created a menu like four times because it didn’t show up… A little tip for you. Okay so, we’re dragging our custom menu over here, to our custom menu widget, and let’s see what we call this blog, and we want to select a blog sidebar menu, hit save, and then we’ve got our custom menu all set up in its own little widget. So then we want to come over here, to “Pages”, and we’re going to add a new page. We’re gonna call this page “fun menus”. Let’s go ahead and click on the “Use the Divi Builder”. Okay so first off we’ve got to insert a column. I like to keep these menus in a section column because they’re going to be … kind of like this over here - kind of tall and the links will go down the side - so I like to keep them in in a column. What I mean by that is we’ve got… Let’s say we’re going to add a menu to just the middle of a page somewhere so I probably want to go with one of these layouts like a three-quarter and one-quarter or a two-third and one-third something like that, and I’ll show you what I mean here in a second. So I click on the thinner one to add a module, and then I want to scroll down and grab the sidebar module, and then in the widget area I want to click the sidebar we just created a custom menu. We want to save this. And actually I’m going to put a picture here just [so] you can see the layout of it so we’ll just throw a picture in here really quick, nothing super special, this one looks great, save that and we’ll update. Okay now to view the page you can just right-click [and] say open in a new tab. So here you can see I’ve got my image here and then I’ve got my links over here. So that probably gives you a better idea what I mean, they need to be kind of contained they need to be in a kind of… skinnier column so that they don’t kind of go all over the page like what I originally showed you at the beginning of the tutorial. So that’s how you add a custom menu just anywhere on the page you want. There’s one last thing I want to show you guys this is a really cool thing that Divi has built in so we can add a full-width section here and then if I come in here to insert modules you notice I’ve got this full-width menu option here. So I click on that and then all I have to do… I don’t have to set up a widget or anything, I just select a menu. And I’m going to use my top navigation menu and we’re going to change things up I’m gonna do like a darker color background on this, then we’ll set the text to light so you can see what that looks like. So go ahead and click on update again. Awesome. And then once that’s finished let’s go refresh our page and I’ll show you what that full-width menu looks like. So you can see down here we’ve got home, we’ve got our shopping menu, we’ve got our blog menu. You would normally want it to trail off the bottom of the page there but that just gives you an idea that… I can add a full-width menu here… to my footer or anywhere on the page that works the same as my top little menu here with the drop-down, which I think is a really cool feature that Divi’s got in here. So that pretty much takes care of everything today, that’s how you have fun with menus and WordPress, once again my name is Jimi Blevins and thank you so much for watching.

This tutorial will show you how to create menus for your main navigation, sidebars, on page content, and full width menus.  Using the menu feature in WordPress is a great way to replicate your featured links and make global changes to menu items easily.

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!