0:00:00
Alright, by popular request, this is going to be the first installment in our series on oxygen templates demystified. I was originally going to do this as one very long training broken up into sections, but it’s just not going to be great to do it that way and keep the quality, keep everything clean and tight like you guys are used to. So what I’m going to do is release this as a series. There’s going to be separate videos for each template. This very first one that you’re watching now is going to cover the, you know, what oxygen templates are, why we use templates in oxygen, and then we’re going to create the main template, which is the most important template in oxygen. It’s the one that controls your header and your footer, and then that inner content module that seems to confuse a lot of people. So we’re going to cover that. By the end of this series, you are going to be super comfortable with templates, with creating your own templates for a bunch of different use cases, and then we’ll be able to get into advanced templating in the future where we start to bring in things like advanced custom fields, custom post-hights, and so on. So let’s go ahead and dive in. We’re talking about the main template in oxygen. All right, guys, let’s kick this off inside of our homepage. I have a blank install, and this is my homepage. This is not a template, right? So I have basically three things. I have a section, which is adding some padding here, and then I have the headline, and I have some text. That is all I have. The reason I would recommend doing this is the starting point is because when you go to start building your primary template, especially, you need to be able to see what you’re doing. It needs to be able to pull in content from a real page. So the first thing I would recommend you do is go to your homepage, and put just a little bit of content there, and hit save, so that when we go create the template, you can actually see what we’re working with, right? It’ll help your brain understand what’s going on better. But the other reason I’m here on this page is because we need to talk about a couple things that people get confused on when it comes to templates. All right, so first thing, if I go to add, and I go down to this library, and I go to design sets, you might see a bunch of design sets in here, depending on what you’ve loaded when you set up oxygen, but I have the core design sets from Oxygeninja. These things look like templates to a lot of people, or what would be considered templates. These are not templates. All right, these are not templates. These are design sets. Let’s call them. Let’s just call them design sets. That’s what they are. So they’re layout packs. They’re not templates. They don’t behave the way that templates behave. So don’t get confused. We’re not talking about this kind of stuff. Now, could you use these things to create templates? Absolutely. But these in and of themselves are not templates. So when we talk about templates in Oxygen, we’re not talking about these things here. The other thing that we’re not really talking about, even though they kind of are templates, is reusable blocks. So if I add, and this could be a section, it could be a module, whatever. And let’s just take this section as an example. So in the structure panel, if I click this little pencil, you can see that I can make this reusable. Now, once I do this, it’s kind of hard to get it back. So I’m going to duplicate this. So here’s the section that I want to make reusable. So I click make reusable. And then I give it a name. And so let’s just call this hero. And then we’ll say delete because I need to delete this. So I’m going to hit OK. And it’s going to go ahead and save that. Now, look, I can’t edit it anymore because it is a reusable part. And I have to open this reusable part separately to make edits because this is effectively now a global template for this section. But it still doesn’t behave as an actual template.
0:03:49
Because, you know, it’s tough to do anything with like dynamic content inside of this. But this is extremely useful. If you have a section or a block that you want to use across multiple pages, and it’s going to be the same on all pages, and let’s say you added to 10 different pages, well, you want to be able to edit it at some point without having to edit every all 10 pages. So you can create one of these reusable parts. You open the reusable part, you edit, you save it, and then the changes that you made will apply to everywhere that reusable part was added. Now, here’s the thing. So I’m going to hit save. I just deleted it from this page, but it actually still exists inside of oxygen. So I’m going to go back to the admin now, and this is why people get confused. So bear with me. I go to oxygen templates, and it’s there inside the templates. I wish it wasn’t. I wish that this was just for page templates only. But they put all of your reusable blocks in here, and then that’s where people get confused on like, what’s a template? What’s not a template is this one template? It’s kind of like a pseudo template, honestly. And then you’ll get this new button that says add new reusable part instead of add new template. So clearly there is a distinction between these two, except they’re all inside the template section. I wish there was another section for reusable parts. Now, you go to your block library, which I just made a reusable block basically, but it’s not in the block library. So oxygen, in my opinion, needs to do some cleanup here in terms of user experience. This is, I can see exactly why people would get confused with this stuff. So I just wanted to point all of that out before we get started, and I’m actually going to go delete that block. So I’m going to trash that. And I want to get started on creating this main template, the most important template in oxygen, the template that you should always start with. So I’m going to go to oxygen, and I’m going to go to templates. The main template controls the header of your site, which includes your logo and your navigation, and the footer of your site. And then the magical inner content element, which is required to dynamically pull in any content that’s on any page of your site. And we’re going to talk about assigning this main template in a minute, which this is going to, I think, really help a lot of you who might be confused on how to assign this template. But this is the main template, most important template in oxygen. So I’m going to hit add new template, and I’m going to type in main. All right, let’s talk about these options here before we actually publish this and start to edit it. You’re going to see where this inherit design from other template comes in in just a second. We have to talk a little bit about it here. So you understand why I’m doing the assignments the way that I’m doing them.
0:06:41
But then when we create more templates, it’ll make even more sense to you. You’ll see exactly why we did it the way we’re about to do it. So we’re going to just look at this section. Where does this template apply? So we have all of these options. And because this is the main template that controls the header and the footer of the website, I think what a lot of people do, mistakenly, is they say, well, my posts need a header and footer. My pages need a header and footer. My, you know, let’s go down here, archive. All my archives definitely need a header and footer. All my post types, all my authors. Let’s see, I need this to be on the front page for sure. I need to be on the blog post index and get this one and this one too. And let’s just make it a catch all. And then they hit save. And this is an absolute nightmare in my opinion. So the principle is this, a sign templates. And this goes for all templates that you’re creating. I’m going to uncheck all these as I talk because we definitely don’t want this. A sign templates to the fewest number of areas possible to get the job done. And the reason being is if you create, because you’re going to have another template for posts, yes, you’re not going to put a header and a footer in there. That’s where this box comes into play. When I create a post template for my blog posts, I’m going to inherit the main template using this box right here.
0:08:07
So that I can say, all right, here’s my new template for posts, but I want the header and footer from the main template. So bring those in as well. That’s how this box works. Now, if I had assigned the main template to posts, I now have two templates competing for the post, the post spot. And when I create my post template, I would have to set a template priority. If I do not select posts here, then I will not have any conflict and I will not have to set a template priority. Now, is setting a template priority wrong or bad? No, that’s what the template priority box is for. However, if you don’t follow the principle and you end up with many more templates and you have three or four competing for the same position on the website, then you get into a situation of having to come back and make sure the templates are all in the right priority. And then think about future proofing. You have a team or you come back to the site a year from now. Are you really going to remember all the proper template priorities? Right? Are you really going to remember even how you set this all up in the first place? Are people working on the site with you going to be able to come in and just understand exactly what’s going on? No, not really. So my position is just avoid all of that by only assigning these templates to the fewest number of spots possible, create as little conflict as possible and use this template priority box as little as possible. So the way that we do that with the main template is just assign the main template to pages because pages very often don’t have any other templates that go with them, especially if you’re properly using custom post types. So I just assign it to pages and that’s literally it.
0:09:50
Now, let’s talk about this catch all right here. If you don’t check the catch all box, you may end up with some areas of your site that don’t have a template applied to them. If you don’t make templates specifically for those areas, all right? If you use the catch all, then your main template will catch that for you and it will display the main template for those areas. However, they’ll still in my opinion not look good because they they’re generally areas that need to be styled on their own and they should have templates created for them. So I don’t check the catch all box because I make sure to create templates for all the possible areas that are going to display on the front end. So if you’re going to cross your tees and dot your eyes, you don’t have to check the catch all box. The reason I don’t check the catch all box is because I’ve noticed that it creates extra conflicts with other templates and it you then you need more template priority stuff and it just becomes a little bit messier in my opinion. So I don’t check the catch all box. The only thing I check for the main template is pages because posts are going to get their own template because some post types, they’re going to get their own template archive pages, they’re going to get their own templates. 404 search results, blog posts index, they’re all going to get their own templates. So I don’t need to assign and they can all inherit the main template using this box. So I don’t have to assign the main template to all these different areas. So I’ve got it assigned to the one place I want it and I’ve got it named I’m going to go ahead and hit publish and I want you to see something on the front end because this also confuses people. So if I go to look at my homepage now, it’s absolutely broken and the reason it’s broken is I just assigned the front page as a page.
0:11:31
I just assigned a blank template with no inner content element to pages and because there’s no inner content element it doesn’t know to pull the content from this page. So it’s basically displaying the default WordPress loop and that really throws people off because they’re like what’s going on? So let me show you quickly how to fix that which will show us how the inner content module works and then we’ll finish building out the rest of the main template. So I’m going to go ahead and hit edit with oxygen. We’re going to let the builder load and then we are going to build out the main template for your website. All right, so the builder has loaded. I’m going to open up the structure panel here. You can see that there is absolutely nothing here and we are previewing the homepage. So if you have multiple pages you can choose which page you want to preview content for. Now there’s it’s not showing any content but you remember I did have content on the homepage. So the inner content module is one of the most important modules in oxygen. So we’re going to hit add and we’re going to type in inner and it’s going to show you the inner content module and I’m going to pop that onto the page by itself and immediately you see that I’m now able to view the homepage content because I’m previewing the homepage and that’s my homepage content. So I hit save. So basically the inner content module is just designed to it’s like show me what is on that specific page or post or whatever I happen to be queuing up at the time inside of this template. And now that I’ve saved this template if I refresh the homepage all as well. I have exactly what I’m supposed to be seeing on the homepage. So that’s what the inner content module does.
0:13:11
Now I want you to think of a website like a sandwich. There’s a top piece of bread that’s your header. There’s a bottom piece of bread that’s your footer and then there’s the meat in the middle and the meat in the middle is your in in terms of this template that we’re working on right now is your inner content element. And it is controlled remember this is assigned to pages. So your pages typically are going to be built in oxygen from scratch right. So you don’t want to style this. You do not want any styling. You’ve got this panel over here right. You want no styling whatsoever. This is all going to be taken care of when you build an actual page in oxygen. So don’t style the inner content element. Let me repeat myself. Do not style the inner content element. Okay glad I was clear on that. Now what we’re going to do that’s the meat the meat is done. The meat is done. We have to do the top piece of bread and the bottom piece of bread. All right. So I’m going to add a section. This is going to be the footer. Okay. Then we’re going to come back and talk about the header in a minute. That’s a little bit more complicated footer. Very very straight forward. So first thing I’m going to do is I’m going to go to this tag section over here and I’m going to select footer. I’m basically giving this the HTML tag of footer to quickly explain what that means. If all of these were sections and divs and a Google bot came and crawled my site or a screen reader came and crawled my site. It would just say div div div div div section section section div div div and there would be no structure to the website. They wouldn’t the screen reader, the bots. They wouldn’t actually know what part is what part. Well, these HTML tags define areas of the website. So this defines that this content right here is a footer. And when I do my header, we’re going to define that that section is a header. And then there’s main content. There’s a side. There’s a lot of different tags that you can use. But this is a footer. So we want to make sure that it uses the footer tag. Next thing is we’re building this inside of a template. There’s only one footer that’s going to look like this. So we don’t really need to assign classes to things.
0:15:20
Sometimes what I’ll do is I will say change ID and I’ll change the ID to something simple like footer. That would be like you wouldn’t you wouldn’t use that long ID string if you were writing stuff from from scratch, right? So you can make that a little bit cleaner here. And then when we do the header, we can do kind of the same thing. I’m going to go ahead also best practices is to name all of your little sections here. So we’re going to clearly note that this is a footer. That doesn’t affect anything in the code by the way that’s just for the structure panel identification. All right, so I’m going to very quickly build out a very simple footer. So I’m going to do background color of charcoal here, dark. Now because this is dark, pretty much everything I put in there needs to be light so that we can see it. So I can go ahead right off the bat and just put a text light class on here. And that’s going to all that does is set the text color to a light color, right? And that way anything I add, like a heading text, whatever is automatically going to be light. So that’s cool. So a lot of beginners make the mistake of trying to assign that text light class or change the text color on individual elements. You don’t have to do that. Just assign it to the entire section and everything in this section will inherit that property right there. All right. So what I’m going to do is create a very classic footer layout. And that is I’m just going to do a div. I’m going to be using oxy-ninges utility classes, by the way. So this makes it super fast, super easy columns five. And the reason I’m doing this number one is you’ll see in a second how we can use spans to kind of achieve this.
0:16:55
But I also wanted to do something that’s, you know, has a little bit of problem solving in it for those of you who are using oxy-ninges grid classes or grid in general and wanting to know how to make sure these things are really responsive at various breakpoints when you’re not doing something that’s just like even columns, okay? So columns five, I’m going to add a div. That’s one. Now, remember we have five columns set up in our template here, but we’re going to go with four cells. Two, three, four. All right. So one, two, three, and four. And then you see an empty space here. The reason the empty space here is because I’m going to go this very first cell. And I’m going to tell it to span two columns. So span two. So call span two, it takes up two columns. And then now we don’t have an empty space. So whenever you’re taking up two columns with one cell, you need one less cell than the total number that you started with. All right. So I started with five. I only put four, one of them is spanning two. So this is two, three, four, five. Hopefully that’s clear. Now, I’m going to grab the entire wrapper. And I’m going to put a gap of large so we can not have these cells touching each other. Then I’m going to start tackling the mobile responsiveness here. And this is where we get into a little bit of trickery. So follow along and see how this works. So I’m on the wrapper. We’re going to take a look at how this looks at 1280 pixels and below. All right. It looks, I think, fine there. It depends on how long our links are. You know, once we actually get content in here, we’ll have to play around with this. But I’m going to just say that, okay, this is okay for now. Then I’m going to come down to the large device size. And I can tell that this is going to be too small for these. So what I need to do is I need to break this down. I want these three columns underneath this column right here. So at the large device size, I’m going to set this whole wrapper from five columns to three columns. And we do that by saying L3. So columns L3 means three columns at the large device size. So I click on that and we see that it breaks. Now this one did not come down here because of the way the grid is structured. I have to now tell this one to take up its number of spots. Remember, it was only spanning two. But now we have a three column grid. I need to span three to go all the way across. So at the large device size, I want it to span three.
0:19:19
Remember, a minute ago, we chose columns L3 to change the whole thing to three columns. Now we’re just changing the cell to span three at the large device size. And now I get the look that I’m going for where we have one large thing, one large container over three smaller containers. So that’s done at that level. Now we go down to the medium device size and we see that this is going to be too squishy. So I actually want these to break to two now. So I need at the medium device size two columns. And then I need to come to this one and say, hey, at the medium device size, you need to only span two of these now. Okay. And now we break. And this gives them plenty of room here. Now I’m going to come down to the small device size. And I want these to just be all one column. So at the small device size, I want one column. So C columns S1. Boom. Now, oh, sorry, I put this on the wrong one. So C columns S1, let’s take that off. I need to be on my wrapper. So S1, C columns S1. And then I need to change this cell because it’s breaking the grid right now. And I need to do an S1 in here, but I need to do the span S1 right there. Okay. So now I have a full stack at the small device size. So if we go backwards, we look at the medium device size, that’s going to be our layout. And we look at the large device size, that’s going to be our layout. We look at the extra large, we’re going to our normal layout at there and above. So this has been set up properly. Everything is responsive.
0:21:01
Now I’m going to go ahead and add my elements. So I’m going to add an image here. And I’m going to call this footer image. Oops, got to type right. All right. And then I’m going to go to rim. We’re going to set this to 20. That should be good. And then I’m also going to add a margin to the bottom of this. Just a quick to rim margin. And then I’m going to add some text in here. Don’t want to open a new tab. Let’s add some text. Actually, I do want to open a new tab. Let’s go get some lorem real quick. So I’m going to grab this. This would be our little blurb about how great the company is. Right. So we’re going to put that there. And cool. So I’ve got I’ve got my little left section here. Now I’m going to make my columns or my link columns. So I’m going to go to head and I’m going to select age three. And I’m going to call this footer heading. I’m giving these classes because there’s going to be multiple of them. Right. And I want to be able to change them anytime I want in one spot and have the changes take effect everywhere. So this is going to say like our company. And notice that this is too big for an age three. So I’m going to show you a little trick. I go to my settings. I go to my global styles. I go to my headings. And I grab my age four. And I come in here to this class. And I go to font size. And I just steal my clamp function from age four and put it on my age three. And for that specific age three. And it gets me to the size that I want. So now that I’ve got this heading set the way that I want, I can copy it using commands C with hydrogen pack. And I’m just going to paste it into these other cells.
0:22:42
And then I can change this. So this is going to be like our services column. And this is going to be our like resources column. All right. Perfect. Now I’m going to add a link. So text link. And this is going to be called like about us. And I’m going to give this a class before I do any styling. So footer link like that. And then it’s already white right there. It already seems to be hovering well. I’m going to set the hover color anyway. These are not the colors I would normally use. Let’s just take a look at the front end and see what we’ve got so far. All right. Perfect. And that’s all good to go. So that’s exactly what we’re looking for. All right. So I’m going to duplicate a couple times. And then I’m going to copy it. And I’m going to come over here and paste it in and then duplicate a couple times. And then same thing here. And then duplicate a couple times. All right. So then I would just go change the text. So this is resources. We’re going to say like blog freebies, something like that. And then webinars. Let’s just do that. And then you can just use the URL box to create your URLs properly. I’m not going to go through all of that. But that’s what you would do there. And then for services, we can say like this is service number one. And then this is service number two. And then this is service number three. And then about us. And then we have like our mission and like meet the team. And then contact us. Let’s say. Okay. So we have built a footer. Let me select my image here. A couple things.
0:24:21
Number one, I would make this image link to the homepage. So if we click the little link button right here, it’ll add a link wrapper to this image. And then we can just link it to the homepage with a forward slash. And I’ll hit add link. So that’s going to link to the homepage properly. I also want to give it alt text. Right. So if I go to my structure panel and select my actual image, here’s my alt text. This is going to be company logo. And then I hit save. So pretty much here, we finished out our footer. We have a footer. It’s completely mobile responsive. Okay. This doesn’t actually go to the smaller devices. So I can’t see what’s going on there. But as you can see, like nothing is breaking, everything is great. And now we can tackle the header. Whoo, the top piece of bread. This is the this one needs some discussion. Okay. So I’m going to shrink this up so we can see what’s going on here better in the structure panel. That header is going to go up here above the inner content. Now there’s three different ways you can do this. Number one, the completely manual, you know, you know exactly what you’re doing way of doing this. You added div. And that div randomly added inside of my footer. I’m just going to drag it up here. All right. So there is my top piece of sandwich in the form of a div. I would come down to this tag and I would choose header. Okay. So I’m signaling that this is my header. And now I would have to do everything manually. I have to add in my logo, my navigation set flex box or grid or however you want to structure that up there. And you basically have a blank slate. There’s no padding. There’s no default padding. No default max width. No, no nothing. No columns. It’s that is like your pro. Have at it.
0:26:06
Okay. So I’m going to delete that. The next way you can do it is by adding a section. This is like a semi pro. All right. So the reason you might want to go with a section over a div is the section gives you your default max width for your site. Right. So if I put something in here like an image and I call this the logo, I’ll just do logo. And I’ve already got like a little styling set there. And then I take out this padding. So let’s go to like two rim and two rim and then save. The benefit here of having this in a section is that it’s going to align with the rest of your page content perfectly. All right. If you just use the div, this would be way over here. All right. Because it wouldn’t have that default max width for your site. So that is the benefit. Now you self to do everything else. If you add your navigation, you’re going to have to set flex box or grid or however you want to lay it out. That’s also going to be up to you. But you do get the benefit of having the default max width, the default padding, all of that. So when you go down to responsive, like nothing’s going to touch the edges, the way they would in a blank div. Okay. All good. We understand. So I’m going to delete that. The way that I would recommend, especially if you’re a beginner, is to use the header builder. And I’m going to add that as a module. And then we’re going to drag that to the top. So here’s how the header builder works. I’m going to open it up and you’re going to see that there’s a header row inside of it. And then if we open that up, you’re going to see that there’s already columns set, a left, a center, and a right. Now a lot of you don’t like this. Unfortunately, in this way, I say only do the other methods if you’re pro or semi pro. And I’m not just talking about being able to create columns and things like that.
0:27:52
There are two different things specifically, really more than two, but they’re based around these two concepts. One is sticky display and one is overlay display. And these are much more advanced concepts. If you want your header to be sticky and you don’t know how to do that, you’re going to need to use the header builder. If you want your header to overlay and you don’t know how to make it overlay manually, then you need to use the header builder and use the overlay display capability here. So I want you to watch. If I add in a image here, this is a member will add our logo back. So I’m going to go to logo here and there, perfect. And I’m going to go to my header row. And I’m going to add that spacing top and bottom because I don’t want it touching the top of the site. And I’m going to show you a little bit what these features do. So header builder, I’m going to click sticky and we’re going to enable the sticky header. All right. So basically, if I’m scrolling, let me see, scroll this in 300 sticky background color. Actually, let’s do this in header row. Sticky display only show in sticky. It’s going to disappear because I haven’t set the header builder to sticky yet. Sticky enable sticky header. And then we’re going to say always. Okay. And we should have sticky header z index 999. And then you can fade in the sticky. Okay. Let’s see, save site title. I don’t even know if I have enough content to scroll here.
0:29:22
Let me pull this up. Oh, wow. Oh, dear. Oh, dear. Okay. There we go. All right. So that see it’s faded in. You can’t see it because it doesn’t have a it’s like a blank background. But that the sticky header is there. So if you want that sticky effect, let me go ahead and let’s let’s give this a color so you can see it background color. Gray. All right. Save. Let’s go back to the front end and reload. There it is. Now you can see it much better. See how it fades in too. Okay. So if you don’t have to do that to create a sticky header, then you’re going to want to use the header builder 100% right? You can say hide and sticky. And then you’re you’re going to be able to see it. And what you have to do is you end up having to create multiple header rows where all right. One is set for sticky. One is for not sticky and and yada yada yada. It does get a little complicated. So the header builder, I’ll say this, it makes this easier than it would be doing it manually. But it’s still not easy, right? If you’re a beginner beginner, like don’t don’t mess with these. Okay. So header builder, we’re going to go with and I’ll do I’m going to do a whole header tutorial. Okay. So we’re we are going to dive in. That’s like beyond the scope of this training here because we’re really talking about templates, not just headers. All right. So I think I’ve taken my sticky off. All right. Yep. Enable sticky header. All right. And here is that’s back to the way it should be. Okay. So here’s our header. I’ve got my logo. I want you to notice that it put the image in the left column by default. Now if I add something else, even if I’m selecting the header row, unless I add a menu and I am going to add the pro menu, I’m not going to do a complete tutorial on the pro menu, but I’m going to get you to a usable standpoint. What I will say is if I type in menu, you’re going to see there’s menu, mega menu, pro menu. I almost never use this menu module. It’s it’s awful in my opinion. The pro menu is still awful, but it’s very usable.
0:31:24
All right. And you can always make your own manual menu. You can use a plug-in for menus. There’s a lot of things you might want to do. The pro menu is usable. All right. I’m going to add a pro menu, and you’re going to see it as it also to the left column. So if you want it to be to the right, like a standard menu would be, you’re going to need to drag it over into the right row. So now we have a menu there. The pro menu doesn’t really come with any styling. That’s actually a good thing about it, but I’m going to just hit save and see what we have so far. I also forgot to show you the overlay. So overlay basically will make this entire header sit on top of this page content. And you can control which pages have the header overlay and which pages don’t have the header overlay. Again, that’s going to all this is going to require a header tutorial. We just need to focus on getting a basic main template out, but that’s what the overlay function is if you were curious. All right. So I’m going to hit save and I’m going to go to the front end and we’re going to hit refresh and see what we have. So now you can actually visually see our sandwich, right? Here’s the top piece of bread. Here’s the bottom piece of bread. Here’s our main meat. Okay. Now we have this logo image. Best practice. We need to link this one up to. So I’m going to click it and I’m going to hit the link button. And then I’m just going to hit a forward slash because I want to link it to the homepage. And then I hit save and okay. And I actually select my image and we need to set the alt text for this as well. So company logo. Alt text is just describing literally what the image is so that screen readers and all of that know exactly what’s going on.
0:33:02
All right. So we’re good there. Let’s tackle this little menu. So you’re going to notice that in the menu field where you select what menu you want to show there, there’s nothing there if you haven’t already created one. And the way that you create it is through the customize button on the front end or you can do it on the back end. If you go to I always do it through customized, it’s appearance and then menus. All right. So you can do it there. I’ve already created one called navigation and it’s got my two items in it. But if you didn’t have one, you’d have to come here and create one. And then it will show up inside of this little drop down. So I’m going to choose my navigation and then you’re choosing where to toggle this to a mobile menu. So basically where to show the hamburger icon and create the mobile menu effect. So you would want to go down to set this. You would want to have your full menu in here. Let’s say it went out to like here right after all your links are in there and you go down and you notice that at 992 it’s starting to run into the logo or whatever. So you would say all right at 992 that’s when I want to transition to this mobile menu. And then we can go ahead and style that side of things. We’ll do that in a moment. Let’s go back and tackle the desktop. Look, I’m not going to make this super fancy. We’re just going to get to something usable. So desktop menu and desktop drop downs. This is where you’re going to style all of this. I’m going to go need to create one to create a drop down so that we can do that as well. But let’s get it started first. So I’m going to go to desktop menu. I’m going to go to typography and I’m going to set a and actually see. Yes, sometimes they have here’s hover and active. I want to make sure that the that’s just hover and active. Okay. So typography, let’s go color and let’s go with that charcoal. And then we’re going to go to spacing line and border. So the item padding and item margin. If you want back right, if you’re going to use background colors on your links, you’re going to need to use padding and margin, most likely. If you don’t care about anything showing up behind the link, you don’t want to do anything fancy, you can just separate these out with margin. And I would put because this is aligned to the right, I would put margin on the left side of these items. So REM because I don’t want the last item to push away from this side. I want the alignment to be nice and clean down the page. And as it approaches the logo, I actually want there to be a gap here to protect it from ever touching the logo. So all margin on these items goes to the left. We’ll do two rim and I’ll hit save on that. Okay. And then we’re going to go to, let’s go back to typography and I’ll change the weight of these to 500s. We can get a little bit bolder on those. All right. So to set the hover on these, the hover color, we’re going to go to hover and active. And then we’re going to change that hover text color to blue. Now I want to show you, if you wanted to do some sort of background hover on these, that is a use case where, because that is an option right here, that is a use case where you would have to set padding on these links. Otherwise, you’re going to get this, you know, gross effect right there. I don’t even know if you guys can see that. Let me, let me change it to this. Okay. There you go. So now you can see on there and then our hover text color would have to be light. I don’t, I don’t, I don’t, I didn’t want to make it like this, but I guess I should show you anyway. I should probably do it.
0:36:33
Okay. So I’m going to go to item padding and go to rim two and then rim two and then rim one on the top and then rim one on the bottom. This will get us to something usable probably for our hovers. Yeah. Something like that. And that’s, oh, did I do two? Okay. I definitely want to do one. There you go. That, that looks normal. And now item border radius will go with M and we’ll do 0.5. And that’s going to give us, and that’s really ugly. Let’s do like 0.2 on that. Okay. A little bit rounded corners there. It’s not great like, and, and by the way, this adds a lot of complication to your menu a lot more than you would think. So what I’m going to suggest if you don’t want to, if you don’t have to do this based on the design that you’re creating, I would recommend avoiding all this padding and avoiding background colors on your stuff because actually it actually starts to affect the mobile menu. And then you have to do a lot of extra work to fix this kind of stuff on the mobile menu. The pro menu, the menu elements in oxygen, they have a lot of like pros and cons. Okay. There’s pros to them for sure, but there’s cons for sure. All right. So let’s just keep this as simple as we possibly can. And I’m going to go ahead and it’s going to desktop menu, hover an active. Let’s clear up that. Let’s set this to the actual action color. Okay. Cool. So I think we’re back to where we were. All right. So now we have to tackle our mobile menu. We’re going to come back in a little bit and do our drop downs as well. So the mobile menu is a bit tricky.
0:38:09
We’re going to go to our mobile break point. We’re going to see and of course, like good old oxygen style, they give us things that we need to undo like this weird icon and text and all of that. So I’m going to go to open icon layout and I’m going to change this ellipsis to bars. That’s going to be our classic hamburger icon. I’m going to remove the menu text and then I’m going to take away some of the padding, which right now it’s empty, but there’s clearly padding there. So I’m going to change that to one rim and it’s going to shrink that down a little bit. Okay. Now I’ve got a good starting point. I’m going to click on the icon and it’s actually going to open the mobile menu and this is what you’re going to be met with. Now this is kind of weird, right? If we go look at this, I have menu styles and I have backgrounds. Now most people would think, hey, I want to change my background. Let me go into backgrounds. Click on background color, nothing, nothing, nothing works. Okay. So what I have to do is go to menu styles and there’s a new background color, right? Like I get it and I’m full agreement with you. This all needs to be reworked. It all needs to be fixed. Background color. Let’s just go with a like a light gray and you can even do like a, I don’t know, opacity here. Like be careful with this. Okay. Like let’s do like 95. So people can see that this is an overlay. If you want to do off canvas, you click that button, it’s going to screw up the whole builder. All right. But this is where you do the off canvas area. And then when you refresh the builder, it’ll, it’ll be okay, right? But right, for right now, it totally screwed everything up. So if I close this and then reopen it, I believe we’ll be back to where we were. Great. Another nice little oxygen feature. So link text color is fine. Link text hover color is already our default. So we’re just going to go with that. We’re going to go rim and rim here. Just one and one to space these out a little bit. And then it would continue building your things. Now if you have drop downs, you have to decide whether you want drop downs to be on or off on mobile. If you go to mobile menu drop downs, you can hide them. That’s the easiest thing. Notice everything just screwed up for no, absolutely no reason. But if I open it again, it will reset.
0:40:22
Okay. So I’m just hiding drop downs. That’s the easiest way to do it on mobile devices. You can do drop downs though. I would recommend doing a toggle. Don’t show them in line. Use the toggle format. I’m going to go ahead and hit save. I do want to make these a little bit bigger. So I’m going to go to mobile menu and we’re going to go to menu styles. No, let’s go to typography. All right, mobile menu typography. And let’s go to rim 1.4. See if we can get them. Oh, that’s definitely we need to go much bigger. Okay, there you go. Two rim. All right. And then you can actually use the break points here as well. So if I went down here, I can control, you know, how big they are. Like they are. I might want them smaller. So we go to 1.6 there maybe. Okay, cool. A little bit of a delay in the builder right now. So I’m going to go ahead and hit save. We’re going to go back to the front end and we’re going to preview what we have so far. And we’re going to tackle the little drop down thing. So I’m going to refresh. There we go. If we go down to mobile, we’re all good there. Oh, look, we have light links on mobile. So what I was seeing in the builder is not actually what we were having in reality. So I’m going to go back and I’m going to go to my mobile menu and my menu styles link text color. Let’s set it to this charcoal. Hit save. Let’s hopefully that does it. Let’s go refresh. Let’s come down. Okay, still isn’t working.
0:41:55
Fantastic. Let’s go to typography and let’s go to charcoal. Let’s try again. I’m in full agreement with you that oxygen needs to. There we go. Finally. Okay. Needs to revamp all of this and it is absolutely frustrating. It’s frustrating for me. I can imagine how frustrating it is for actual, you know, beginners. Okay. Now let’s tackle our drop downs. So I’m going to go to customize here. This is another way you can edit these menus. And I’m going to go to menus, select my navigation. And this is where you don’t edit menus in the oxygen builder. They’re edited either in the WordPress admin or in this front end customization feature. So I’m going to add items and we’re going to say drop down number one. And then we’ll do drop down number two. And then I need to nest them under the about and we’ll hit publish. Okay. Okay. So now when I come here, we see that the about does have drop downs, but it’s absolutely ugly. So what we have to do here, reload the builder so that we can get our drop downs in the builder and then we’ll be able to style our drop downs. Okay. So I’ve reloaded the builder and we have our drop downs here. Now I’m going to click on the menu and I’m going to go to desktop drop downs. And I’m going to make sure that enabled drop downs is selected. And then drop down border radius. We can go with M and we’ll do like 0.25 here. And then animation, I typically do fade, I believe, so that it just and you can’t really see it in the builder anyway. We’ll check it out on the front end in a second. Drop down icon. The first thing we need to change and fix because the one they give you again, like why don’t give me a usable drop down icon, like right off the bat as a default.
0:43:49
Why is it give me this nonsense? So I’m going to hit down and I’m going to choose this little carrot option. It needs to be something that’s like clean, right? Size, REM, 1.2. Okay. That looks good. And then the icon margin, let’s go with M like 0.2, 0.25, 0.2, 0.25, 0.2. I’m sorry, sorry. Okay. All that’s good. Now let’s take a look. Great. So now we have something that looks normal. Now we have to fix this drop down panel. So drop down colors, drop down child links. Let’s talk about this here. So background color, let’s set to white like that. Okay. Now we’ve got it in white. You can see that what do we need? We need padding in there, right? The padding can be created inside there or it can be created inside the links. I would recommend doing it with the links because that’s going to give us the ability to do a background hover as well. So drop down child links. We’ll see link padding here and I’ll change this to REM. We’ll do one rim top and bottom and then we’ll do two rim side to side. Let’s see how that looks. Okay. Now that’s starting to look fairly like a fairly normal drop down. We also want to maybe control the drop down size better. Okay. Maybe make them a little smaller. Let’s go with like 1.6. I think the top level is 1.8. So 1.6 is good there. Colors all good there. Great. So let’s go back and we’ll do drop down colors. So the hover background color, I believe controls behind the link and I’m going to have to save and check this out on the front end because the builder can’t really handle all of that interactivity. Yeah, it is. But in this way it blends and we don’t want that to happen. So we’re going to do hover background color like a different, there’s a light alternative. Let’s try that. There we go. That’s, I don’t even know if you guys can see that. I can’t even really see it. So that’s, oh well, adding, yeah. All right.
0:46:11
Okay. Let’s make this, yeah, that’s, that’s basically white, I believe. Okay. Let me, let me just do this without background color white. I want pure white there and I want something like F5, F5, F5 here. And then let’s save that and check it out on the front end. Okay. There we go. It’s still blending. Um, this, this top bar needed to be like a different color. But you get the point, right? Like where we can control this. Maybe, maybe we even want to do that. Let’s do the action color as the background color. I think that’s a little too bold, like an in your face. And then it’s going to mess with the link color as well. So that’s, that’s just going to cause extra problems. So let’s not, let’s not go that far. Um, let’s just take that out. You can set the hover depending on the design and all of that. You can set this. You’re, you’re seeing how it works. But there’s some problem solving to take care of there. All right. Cool. So desktop, child links, drop down colors, drop down icon, box shadow. Let’s tackle that. I do like to add a box shadow to these. So we’re going to do like, you know, 20% 21% yeah. Why don’t, why not do that? All right. Shadow blur 20 and then minus, you know, five or something here to contain that a little bit. So that gives that a nice little like pop like 3D kind of effect, right? To your menu. So that’s the basics of, of drop downs. Um, if we go to mobile, you’ll see that I have the drop downs turned off. Um, we can investigate real quick what that would look like if we do want to enable drop downs on mobile. So we can go to mobile drop downs and we can show them as a toggle. And then this is what will happen. And you see, you have more work to do when this happens. Um, so you’re going to have to do like, you’re going to take off. And again, why, like, why does it give you a border? Why does it do this? Why doesn’t it, you know, like, it’s just going to create extra work. So if you don’t have to do that, that’s not in your requirements, I would recommend not doing it. I’m going to have to do an entire menu tutorial because there’s so much to talk about when it comes to menus. But what I’ve gotten you to is a header, a top piece of bread, a bottom piece of bread in your footer, a working navigation, and, uh, you know, best practices for all of these areas. So we are ready to move on to additional page templates.
