 The way that we build Elementor websites today is a bit different than how we used to build them a couple years ago. And one of those big differences is the way that we use columns. See before, whenever we wanted to stack up elements side by side horizontally, we needed to use multiple columns in order to do that. But since Elementor gave us an option to use flex, now we're able to line up all of our elements horizontally inside just a single column or even container. And this is always the best option to use a single column versus multiple columns, because it's going to keep the website lighter, the code is going to be cleaner, and Google is going to be able to read your website a lot better. Google likes it. And one of the important elements that I feel to keep everything inside a single column is going to be the header. So inside this video, I'm going to show you how to use flex and also a couple of my own tricks on how I build my headers with multiple elements. I mean, even using WooCommerce and cards and buttons and menus, putting all of them into the header with just a single column. And if you're wondering about containers, well, containers are still in beta at this time. Sooners are polished up and fully released. I'll be doing all my tutorials on containers. But this method that I'm going to show you with columns, it still applies whether using containers or columns. What's up, everyone? I'm Jeffrey, I live box and well, let's just go ahead and build some headers and have some fun. For this tutorial, we're going to be looking at two different headers. The first one is going to be this one with four elements, we have our logo, we have our nav menu widget here, we have our search widget right here. Then we also have our cart widget right here. In case if you got the WooCommerce site, the second header is going to be this one, we're going to have the same four elements, but they're going to be different and in a bit of a different layout. So we have our logo here, we have our nav menu widget here, and then we have two buttons over here all the way over to the right. Now, the reason why I wanted to show these two different layouts here is because I believe once you get the understanding of the method that we're going to be using on how to lay these out four different elements inside a line and spaced out in this way, once you get that understanding, then you'll be able to add anything inside your headers and even other parts of your website. So let's go ahead and build one from scratch. We're going to go over here back to our templates, to our theme builder. And then I'm going to go over to our header, and I'm going to add a new one. Alright, I'm not going to use any of this templates, we want to start from scratch. So let me go ahead and start with just one section. And we're going to do everything inside one column. So to get started really quick, I just want to style up my section because we are actually going to be recreating this one right here. All right, so let's add in each element here. So first, we're going to add in, I'm going to use an image for my logo, you can use an image or logo widget. It's totally up to you. All right, and then I'm going to add my link right here, custom link, just as forward slash, which will go home. And then I'm going to style it up really quick, give it 120 pixels, and align this to the left. Next up, I'm going to add a nav menu widget. Now for a menu on desktop, it's important to use the nav menu widget I feel because it's great for SEO is structured the right way. I wouldn't use an icon list or anything like that. Stick with this and build your menu inside the back end of WordPress. Alright, let's go ahead and style this up as well. I just want to be able to see it. So I already have my global styles here. I'll just use those making really quick. Next, I'm going to add a search widget. So let me search for search and put in the search form, put that right underneath and I want to select on full screen. So I'm going to use a smaller version. And I'm going to align that to the left. Let me just change the color so I can see it. The color I'm going to use is going to be a white. So here we go, we got it over here. And then let's put in our carts. So that is going to be our menu cart widget right here. I'm going to put that right underneath there. And I'm going to remove this sub total. In fact, let me change this over to cart. I like the car. All right, cool. So now we got that. And again, we could align that to the right and I could go ahead and just change the colors really quickly. So I could see how it looks. This is how I like to start off. I like to put all of my elements in there first. And then I want to start making changes to them. All right, so if you hover over them, you see each one of them is full with you can see the blue borders going around each one of them. So what we want to do is start to make each one of these in line, except for the one that is floating to the side. And if we go back here to our example right here, you can see this one is floating to the side. This is going to be the only one I leave at full width. It'll make sense in a moment. So I'm going to change this one here to in line, we go to advance, go over to width and select on in line auto. Now it's just going to do a wrap around the item. Next up, let's do the same to the search. Go to width and in line. And then we're going to do the same to the menu cart. And now since they aren't taken up 100% of the screen, they are able to fit horizontally in line with each other. Now the next thing we need to change is going over to your column. This is where we are going to use our flex settings. So select on edit column. We're going to go over here to vertical align first and select middle. Now they are going to line up in the middle horizontally. Next up is a horizontal align. And this is where we have control over the layout. So first up by default, is going to be start that's going to be all the way to the left, you got center, which just aligns everything to the middle. And then and which lines everything over to the right. This is what we're going to leave it on right here. Because if we look at our example, we have our logo here and we have everything else on the right side. And then you see how everything aligns up on the right together. So we have three elements all lined up together on the other side. Now another option to as well that I use a lot is the space in between. This is very useful in a lot of cases, not in this one, but get used to the space in between because this is one of my most used flex controls. This lines up the left element to the left, the right to the right and centers everything in the middle. And then you got the space around and space evenly. I have more videos on flex, I'll leave them inside the description if you want to learn more about flex. For now, though, we're going to stick to the end. I want to add a space between my menu and the search. So I'm going to go over to my menu to advance. I'm going to use padding. So let me unlink this. And I'm going to give it right padding. I'm going to put in about 20. I think 20 is okay. We could play around with them more. And I want to do the same thing to my search right here. I'm going to do the same thing. I'm going to go to advance. And I'm going to use padding. And I'm going to do it on the right. But this time I'm just going to do 12. Because I really want this to be closer. I want the icons to be close to each other. This is just design preference right here. And then inside the menu icon, let me go ahead and just change a few things. Now we got everything styled up and I'm going to go fast through the styling. So that way we just kind of get through the tutorial quicker. If you do want to see more styling and designing, let me know I can make more videos on it. But for now, I just want to show the fundamentals behind how to build something like this. So now we got our group right here on the right. And then we got our logo on the left. We have to do something with this logo, though, because if we were to go to the logo over to advance, and then do the same as we did with the others and make it in line, it's going to push it all the way over to the right. And that is because it is following this setting that we have inside our column for the horizontal align. If we want to do space in between, we could do that, but it'll space everything out. So let me put it back over here at end. Let me go back to my logo and make it full with we need to keep it full with. Now the workaround for this is to use negative margins. So negative margins pulls and pushes things. And the difference between margins and padding is that margins are for pulling and pushing items. Padding is just that you're adding padding around the item where the margin is pushing them and pulling them. So go over to our advance for the image. Let's unselect this right here and let's give it a negative margin. Now you could only pull it down so much as you could see the blue border right here. This is as far as you could pull it down. It's going to stop. You see I could keep going. It's not going to go any further. What we need to do here is find that spot. Now we could go ahead and give it a top, push it down a bit more. And then we could pull it up. And what you got to do right here now, you just got to kind of play with it. You got to pull it up with the negative margin and then add some top margins, pull it back up and find that right balance that is going to make it in line. So this is really close right here. Now for me, I would want to make it absolute. We're not going to do that inside this video. We're just going to do it by eye. But I like to use like something like this like the inspect element. I will pull this around just to use this as a guide. This is just one of my little tricks that I use and I could already see I need to move the logo up by about two or three pixels. We're going to leave it there for now just so we can move forward. The next thing we need to do and this is super, super important. We need to make sure that we set the Z indexes for everything because what could end up happening when using a negative margin on something that is full with this could cover some of your items here and your users may have trouble clicking on them because it's actually being blocked by something we can't see from the full with item. So let's make this full with item right here. Let's give it a Z index of one. And what that is going to do is going to place it on the bottom. The Z index is sort of like stacking your elements. The higher the Z index, the higher that element is to the top. The one on the top is the one you could actually click on in case if they are stacked on top of each other. So let's go over to our other items. We'll start with our nav menu, go to Z index and you could put 100 here. Anything more than one is okay. I usually go by one 100 or so. And I can see right here I cannot oops. Yeah, I cannot click on the search form like right here you see this is a great example. So when you're doing this, you're going to have to get used to using the navigator. Because when we are using Z indexes this way, they are going to block other items. So I'll use the navigator to click on it. Let me go to the search form to my Z index put 100. And now I could click on the Z index. Let me go to my menu cart item and same thing advanced and put 100. So let's go ahead and set up for tablet and for mobile will go over here. Now I feel that all these could fit inside a mobile right here. So this is okay, we just want to make sure our nav menu is a dropdown. So let's go over to our nav menu. Let's fix that up really quick. We want to make sure this is off. And we want to make sure this is full width. So when you click on it, the whole entire thing shows. And let me go ahead and align this center. Alright, so we got a center one and I'll leave the search and cart the way they are. We'll take a look at how they look like in the front. I have a feeling they'll look a bit different in the front. Then let's take a look at the mobile. Okay, I can make the image a bit smaller. Make this 100 pixels right here. Then we could also adjust these by adjusting the patting. But first before we make any changes, let's see how it looks like in the front. All right. And yeah, you see it just it wasn't showing right in the Elementor editor. It happens sometimes. We got our menu working here, we got our search working here. And then we got our slide out cart working here. Okay, that is it now for the first header. Let's take a look at the second one. This one's going to be much quicker because it is the same exact method. For the second header, we're going to build a style, we're going to have our logo, we're going to have our nav menu pushed all the way to the left. And we have two call to action buttons pushed all the way over to the right. And on this one, we do have a top bar, I like top bars, I like to use them, they're great for promotions. Just to save time, I'm going to copy and paste that over here. And then we'll build out the rest. So let me add just one section here with one column. And we're going to add in the elements just like we did on the other one. So let me add in a logo. Using the image widget, I'm going to put it over to the left, put that to full. And I'm going to put it at 120 pixels. Also, I want to give it a link. And I'm just going to put a forward slash so that way it links to home. Next up, I'm going to add a nav menu. So I'm going to add that right here. And then I have my main menu, it's only one I have built, then I'm going to add to call to action buttons. So I'm going to put one button right here underneath it. And I'm going to duplicate that button. And just to speed things up, we're not going to make it look all pretty this time, like the design. Again, if you want me to make dedicated videos on design, I'd be more than happy to I really love web design. Alright, now let's line everything up horizontally. This time, though, I'm going to go to my logo. And I'm going to go to the width and I'm going to make this in line. I'm going to do the same thing over here with my nav menu. I'm going to make this in line as well. And for our call to actions, what we're going to do here is we are going to push all those over to the right and pull them up with negative margins. So let me go to my first call to action, align this over to the right and my second one, align that over to the right. Alright, so let's now go over to our settings for our column, we want to get our flex settings. So go to edit column because you can see the images down here, you know, these are lined up, we want to make sure these are lined up from the very beginning. So we're going to put those at middle, the horizontal align this time, we're going to keep it at default, or it could be start the same exact things. Let me add a little bit of padding right here on the nav to push it away from the logo, create some space right here. So to do that, I'm going to put some padding here on the left, I'm going to take it all the way over to 40. And again, let's go over to our column and eliminate the space, because having space in the columns when we are trying to use in line, I feel gets in the way. It's better to just put that at zero. Alright, now let's go ahead and pull these around using margins. First one is I want to take this button and I want to push it over to the side. So I'm going to go over here to advance. Let's go over to the margins. And then we could go ahead and just select on right, we don't need a negative margin here because we could push it from the right, push it over to the left. Alright, give us some space. I feel right there is okay, let me take it to 160. Alright, and now we can use a negative margin to pull it up. Remember negatives pool. So let's go ahead and do a negative top. And again, I want to make sure the text is aligned my little trick that I like to use is pulling out the inspect element box right here. See what we need to do and I could already see this text should be aligned with the button right here. We need to pull it up by a few more pixels. Let me try four more pixels. See if that aligns it. There we go. So now we got that aligned. And we're going to do the same here. So this is negative 50. So this one should also be a negative 50 pulling to the top. And there we go, we have everything aligned. But now we do have that issue with the Z index, we have to make sure that the anything that is full with has a low Z index. And the way we're going to do it is we're going to look at it as we are stacking these on top of each other. So this one here needs to have the lowest Z index. This is the second highest. And then these need to be the highest that are stacked on top. So let's go here to our first button. Go to our Z index and put in one. Let's go to our second button and I can't even click on it right now because it's still covering it. So we got to click on the navigator, go to that button and we are going to put on 10. Now I could go ahead and click on it. But now we can't click on these. So we got to go and use our navigator, go to the nav menu, and let's put in 100. And same thing with the image, we're going to use our navigator, go to advance and put in 100. And then test it out. When you're doing this, move the mouse all the way around the elements because sometimes some elements could be partially covered. And right now we could click over everything. We are looking good. Let's go ahead and publish this, save and continue and take a look in the front. Alright, we got the secondary menu. But there's one thing I want to show really quick just so that we can see how I add my nav menus to this. This time we're going to use a pop up. So if we look at my example and take it over to mobile view, click on it, we have this slide out menu right here. And then you can see the other elements have disappeared. So let's make that happen really quick. This is super easy to do. Alright, so we want to make sure all these are hiding when we are putting it in tablet and mobile. Let's select on it, go down here to responsive, put on hide on tablet hide on mobile, let's do that to the same over here. And on the other button as well. Next up, let's add our pop up menu. Now I already have one built right over here from our mobile menu. I do have a dedicated video showing how to add pop up mobile menus. I'll leave a link for that inside the description, let's just make this one really quick for now. I'm going to add an image right here. Alright, got an image and I want to put this image underneath. Again, we got to get used to using this navigators when we are using these methods, because it could be tricky trying to drag and drop things around just a lot easier with the navigator and these situations. So I'm going to move the image all the way to the bottom so it's underneath it. I am going to select one that I already have here, which is my menu bar. Let me go ahead and make this 36 pixels should be fine. I'm going to go back and I'm going to align that to the right. So we got it right here. And then for the link, we're going to go to custom link, going to go to dynamic tags. And I am going to select right here pop up. And then on the pop up, I'm going to click on it. And then I'm going to search for the pop up I built, which is my mobile menu. Let's go ahead and update that save it take a look at it in the front. And here we go we got the menu. So next up now we just want to fix the responsiveness. We're going to go here to responsive, we're going to hide it on desktop. But also we're going to go here to the layout and we're going to make this in line as well. Since this is in line, just like the images, the logo, just like the nav menu, it is going to stack up on the site. You can't see a stacking up on the side because these are filling up the page. But if we were to hide these buttons right here, you'll see it'll stack up on the page like this. So let me go ahead and open those back up. So let's take a look on tablet. So we got it on tablet again, let's go ahead and hide these so we could take a look at how it's going to look like. We could also hide this nav bar so we could see now these are lined up what we need to do now is change the settings inside our column. So click on edit column. And we're going to go to that horizontal align. And we are going to go to space in between which is going to keep this on the left and keep this on the right. Let's go ahead and update that. Take a look at the front. And let's shrink the page. And there we go we got our mobile right here. Now the only thing you would need to do is well play around with the spacing the sizes again test it out on the phone. But that is it and using these fundamentals of aligning everything and trying to find ways to align everything inside a single column or container when containers comes out later is going to build good practices. And this is a way I like to build my websites always looking for opportunities to use less columns and less containers it just makes it a whole lot cleaner. Well I hope you found this video helpful. If you have any questions drop them aside the comments also I am going to be doing updates coming up with containers because containers are very close to being fully polished up and ready coming out of the beta stage as soon as they're out of beta stage going forward. I'm going forward with just containers because I want to stay ahead of the curve always. So if you do like content like this and you like content for web designers web developers then you know make sure to subscribe if you like this video hit like it really does help out I appreciate the support and I'll be back again soon. All right thank you for watching.