MENU SECTION

"All right, so I'm back over in the header's area and I've decided that I want a Menu Section, not a Drawer menu. So here we can see our Drawer menu, which, just to remind you also is the menu for our mobile. I'm going to change this now to the Menu Section. So I'll tick section here, and I'm quite happy for it to slide down from the top. If you design a particularly thin Menu Section, you can have it slide only 50%, but typically you're going to want that full screen and you're going to choose in a slide in direction. I'm going to have mine come down from the top. I'm going to press save.

Okay, so let's just have a quick look at that. There's our Menu Section, and let's confirm on mobile. Okay, it's looking good. So I know I covered Menu Section in the headers yesterday but I'll just give a quick recap of how you go and choose a Menu Section. You can click this icon here. Sorry, you can click this tab here, Menu Section, and that opens up a new window. You can see I've already got mine open here. So you're going to come into the Layouts Drawer, and then you can either search for Menu Sections via Themes, or you can search via type. So let's start with Themes as we're here. So I'll delete this, and what did we look at? Well, let's just go and browse. Maybe we'll look at Boswell. I think we looked at Senya, Dekker maybe, and I think we looked at Charly, right?

So these are all of the Layouts now for all of these Themes. I'm looking at all the Layouts from four Themes in one hit, but here I could just say, only show me the Menu Sections. So those would be the four Menu Sections from those particular Themes. I can hold shift and click and that will drop them onto the page. And then I can go and do things like maybe change the background image on this one or maybe change the gradient and change that gradient angle to what we are designing for. So I think even if you are using a Menu Section, you can be quite confident to go and choose a Menu Section from the Layouts Drawer. If I just delete that, in here, you can also search via type, and then you can type in Menu Section, and you can go and grab all of these Menu Sections that exist. Again, if I drop this one onto the page, I can then go and tweak to my particular style which I know I like this blue at 130 and I can take out that. So very quickly you can create a Menu Section.

Now, if you decide to use a Menu Section, then there's one important thing now I want to show you and that is that you need to go and do your own links. This is not using the navigation area, it's not using the Drawer menu to create these links for you. Because we're creating a custom page, you need to go in and add your own links. So let me just show you this because I want to show you there's three different types of links that you can make in the text Editor. So just like the Drawer menu, the first type is if you want to link to an existing page. So to do this, I'll go down to our events. We just created a page, a new page for events so that doesn't exist yet. So I'm going to highlight events here and go to our links icon in the text component. So I'll click the links here, and then I can link to an existing page. So if I go to E here, I can see I've got my page called events. And what I can do now is give it an SEO title in here, which I'll just call it something like events category to be a bit more descriptive for the search engines. So now we've got a link. We've created, number one, a link to an existing page.

So what happens if I want to link to a page that we know we want to build, but we haven't created that page yet? So what I'll do here is go down to our Beer Club, and what we're going to do is we're going to create a video library page so only store members, only people that have subscribed into the shopping cart, can see a video library. So I'm going to type in here video library, okay, and then I will click the link icon. Now, at this stage, I can't use the link list because there's nothing in there that currently exists. So I can just paste our video library. I might call this something like members only or something like that. But in here this time I'm going to call it video-library. So notice that I'm using the forward slash because this is a page within our website and I'm not using any spaces. I'm using a hyphen because it's a URL. So that's the format of the URL.

When I say I'm creating a page inside our website, what I mean by that is I'm not going over to the URL here and copying the site name. I'm not going to have blio. MOBLE.sites/video-library because when we go live, our domain name will be live, which will be blio.com.au, so we don't need to type in the actual URL here. It's just forward slash and that way this link will still work, whether it's linking to the site name blio.MOBLE.site or the domain name blio.com.au. So I've seen that mistake a lot. People just copy the URL of where they want to create a link to. But if it's an internal page, we just type in forward slash and then the URL. Now later, I'm going to go and build that video library page when we create a new page. That's in the next episode actually when we look at pages. I'll show you how to create a new page, but we're also going to password protect that page so that only our members can see it.

So that's the second type of link, linking to a page that we haven't created yet. So I'd click okay. Now, the third type of link is what if we want to just link away to a completely different website? Well, I'll just call this here new website. So you see here the styling. I could then go and change this styling, but if you want to preserve the styling, a good little tip is just put your cursor to the right and hit enter and in the source code now, that's just going to keep the same styling. So if you're a web designer, you'll know that, but if you're a business user, that might help you a lot in the text Editor. So now I've put in here new website and I'll highlight this and I'll go to the text link here. Now in this case, now I type in https:/ and then it would be new whatever the website is, so in this case, let's just type newwebsite.com, and then I would type in the path. In this case, let's call it, I don't know, video library. So now that was going to link away to that new page, that page on a different website.

But if we just leave it like that, what's going to happen, it's going to stay in the same tab in the same browser window. So what we want to do is make sure that opens up as a new window. That way when we click away, our website will still stay open. So that's a strategically advantageous technique there. So this is where we highlight the target to say new window. So that's the third type of link. So with that information, if you are using a Menu Section from one of the pre-made Layouts, you'll see a whole bunch of links in there, and so that's how you change your links.

Now, there is another type of menu that we have called body menu. So I'll just show you quickly what a body menu is while we're here too. So this is where we've made our links manually, but back over in the navigation area, so let me jump back over to navigation, and you can see these menus here, right? So I could jump over here and literally add any new menu. I could call this menu five or whatever and it's just going to create a new menu in the list here. So this Theme came with four menus, menu one, menu two, menu three, menu four. And if I click edit on this particular menu, I can go and add new pages to it in just the same way. Well, back over in my page here, I could just drop a menu here instead of using text. So to show this, I'm just going to put my cursor in here and I'm going to hit the delete icon at the top.

Okay, so that's disappeared. That was under home. But what you're going to learn tomorrow is the difference between Business Mode and Design Mode. Well, MOBLE is a web builder for designers and a CMS for business. So we can put it into Design Mode so we can go and build pages here. And you can see here this is the frame where that text lived before it was living in here. So in here I can hit the plus icon and I can actually embed lots of different types of components. Well, one of those was a text component. I could put in images or buttons, but in this case, I can drop in a menu. So watch this. I've dropped in a menu here. If I click on this placeholder, I can see a whole list of menus. Well, here's the menu one that we just looked at. So I'll click tick to drop it in, and you can see our menu in here. So this is a dynamic element, meaning it's pulling in content from somewhere else. In this case, it's pulling in a menu from the menus area.

Well, I could do all kinds of funky stuff with this, like change the padding and alignment and its positional elements. I can do all of this type of thing, but I'm just going to now just show you very quickly one thing, and this is the dynamic text Colour. Well, if I click here, it's going to change it to neutral, it's going to change it to the Colour that I select these different accents. So I just want to introduce there a feature that we have called dynamic text Colour, which overrides the Colour of our dynamic includes. In this case, it's overriding the Colour of a menu. Now that will also work for widgets as well. This is a cool feature because often on MOBLE you're going to be changing these background Colours. If I have a menu, and this is on a white background, I probably want my text to be a darker Colour.

So if you have a Menu Section, a lot of the Menu Sections we have in the Layouts Drawer don't have text. They have the body menu. So when you click on that, you're going to see this. You're not going to be able to edit that text. It's going to link to a menu. So if you choose a Layout and it's got a body menu, the only thing you might want to do in the Editor is just click the immediate, put it into Design Mode and click the immediate pencil icon of where it lives. So here's our menu, click the immediate pencil icon, go to advanced, and then scroll to dynamic text Colour and change your Colour. That's all you're going to need to do. Now, if you are using a body menu, then back over in the navigation area, you can add menu labels in just the normal way that you've learned there. And just keep in mind that your body menus are quite prevalent in Footer's Menu Sections and Mega Menus, which we're going to look at just shortly.

So where are we up to right now? Well, you've made a decision that are you going to include a menu icon in your header or not? And then we've made a decision now, are you going to use a Drawer menu, which as you can see is really good for first time users, or are you going to use a Menu Section which needs a bit more custom work? So if you are a new user, I would just add a Drawer menu right now and add your pages. Very easy. Knowing that, after tomorrow's session, you're going to learn how to build things from scratch anyway, so you'll be more than proficient to manage your Menu Section if you want one later.

Now, there's nothing wrong with a Drawer menu. From a UX perspective, they're totally fine. They work really well on both devices. So now you might just choose not to have a Menu Section or a Drawer menu at all on desktop, in which case I would definitely just use the Drawer menu. Keep it simple, because what we're going to learn shortly is, based in each tab, you can have what we call a Mega Menu. So if you're using Mega Menus on each tab, you might not need a Menu Section at all. So that's a really good tip to consider. And that brings us on to the next decision that you're going to make.

What we're going to do now is look at your header menu, and in the header menu, the navigation that sits in the header, you can have the normal dropdowns, which we're going to edit now, or you can have the Mega Menus, and that would be the next key decision that you make. For your header menu, if you've got subnavigation, do you want it to use the Drawer, sorry, the dropdown menu, or do you want it to use the Mega Menu? And it's much the same decision as with our menu icon. The dropdown menus happen automatically in the header menu, just as the same way the Drawer menu does, and the Mega Menus, you make them custom just in the same way we've done for the Menu Section. So there's a lot of terminology there but really there's two choices. There's the easy choice for the basic users that just rely on the navigation area and there's the more advanced option where we can customize everything in the page Editor. So let's jump onto that now."