With the homepage done, move on to including portfolio content and adding this to the menu. Learn how to create new blank pages and configure these in the menu to make a drop-down menu.
- [Instructor] Now that the homepage is under control, let's move on to some of the inside pages for this website. I want to start with a cake portfolio section of the website. It will consist of four pages, a top level portfolio page and three sub pages. In this video, what I'd like to cover is creating those four pages and getting them linked to the menu. In fact, we're going to create a drop-down menu as part of this process. So let's start by making those four pages. To do that we're going to go to our pages icon, that's on the second row here in editor X looks like a rectangle with two lines through it and you'll see that we have a single page right now, the homepage. There are two ways you can add another page to this website. You can either click on the plus sign here where it says, add new page or you might've noticed down here at the bottom it also says add new page, but here you get a choice. You can either have a standardized blank page or you can have a so-called dynamic page which it says design once and generate hundreds of pages. The dynamic page is going to have some kind of database behind it most likely. That's not what we're looking for. We're looking for some plain basic pages. So, add a page to the site however you'd like to do it. And we're going to call this one portfolio. Simply type in a new name. So this is our portfolio page right here and you'll see that it was not added to the menu automatically. So that's the next thing to do. If we click on the menu and then click on manage menu, this will allow us to add additional links to the menu. Now there's a couple ways of doing this. One way to do it is to click the link icon down here at the bottom. If you do that, you're going to have a bunch of options for types of links that you might want to add to this menu. So, yes, the page is present here. We could select it as the portfolio page and add that to the website. That way, that's one way of doing this but you also have other options. You can add a web address. So this is especially helpful if you're linking to another website you can have links to anchors within your page. In other words, you're going to skip from that navigation at the top and skip down to some section later on in the document. You can link to the top or the bottom of the page that's automatically built in for you. You can link to a document, that would be a great way to link to a PDF for example, you can also link to an email address. When the email is clicked it will send an email of some kind. You can make a clickable phone number, super helpful for mobile devices and you can also link to a light box. So in other words, this would come up as some kind of pop-up type of thing. And inside of it you would have a big image gallery. Hit cancel here, I'll show you the other way of adding pages to your website right here with show pages. This is probably the fastest way to do it. You can simply select your page from list or you can select all of your pages and they'll all be added at the top level of your website. Say okay, apply and you'll see there we have our portfolio page added to the website and we have three more pages to make. So let's go through and make those. We're going to add another page here. This one's going to be called birthday cakes. We'll add another page. This one will be called wedding cakes and we'll add a last page. This one will be called special occasions. Now these pages are our sub pages for the portfolio page. What I ideally like to have happen is I'd like to have the portfolio page show up with these pages showing up as a drop down sub navigation under the portfolio page. So let's talk about how we can do that in our navigation. If you click again on the navigation at the top of the page and then click manage menu you'll see that we have home and portfolio here. If we say show pages, you can check all of these things off and say apply, but they're all going to show up here in the top level navigation. Notice one of the things that editor X has done for us is added a more link here. In other words, if there's not enough room in the nav bar to display everything, it'll say more you could click that and that would generate a drop down and show you more options. What I'd rather have happen is to have birthday cakes, wedding cakes and special occasions show up under portfolio. And fortunately that is possible. If you click the three dots next to the word birthday cake you'll see that we have a menu that says move to drop down and that will simply indent it here on your manager menu list. You'll notice a drops from the main navigation. We're going to do that again for wedding cakes. So move to drop down and then for special occasion move to drop down. So what is the logic here? It's looking for the last link in this case portfolio before we selected the item that said add to drop down, the additional items are going to line up right underneath of that. And now we have just home in portfolio on our navigation. And presumably we have a dropdown now with those additional items. So let's test that. If we save our document and preview it, now we should be able to see birthday cakes, wedding cakes and special occasions. And that's on the desktop. If we go to tablet, we have our menu notice that this is demonstrating this way. So we're going to have a drop-down menu that looks like this. And if we go to the mobile break point, click our menu this is the way it's going to look as well. So we've got our portfolio and we can open up our additional sub pages there. Okay, I'm going to put this back on desktop. I'm going to go back to edit my site. And in the next video I'll show you how to start configuring these pages.