Elementor Headers In Single Columns (or Containers): Building Better Headers with Flex

the way that we build Elemental 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 the 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 carts and buttons and minis put all of them into the header with just a single column and if you're wondering about containers well containers are still embeda at this time Sooners are polished up and fully released I'll be doing all my tutorials on containers but this method I'm going to show you with columns it still applies whether using containers or columns what's up everyone I'm Jeffrey at lightbox 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 a 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 space 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 all right 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 the 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 mini widget now for a menu on desktop it's important to use the nav menu widget I feel because it's great for SEO it's 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 all right 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 make it 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 because 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 subtotal in fact let me change this over to card I like the card 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 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 width 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 inline we go to Advanced go over to width and select on inline 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 inline and then we're going to do the same to the menu card and now since they aren't taking 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 a line 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 end which aligns 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 too 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 all right I want to add a space between my menu and the search so I'm going to go over to my menu to advance and 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 Advanced 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 to 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 Advanced and then do the same as we did with the others and make it inline 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 uh put it back over here at end let me go back to my logo and make a full width we need to keep it full width 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 are adding padding around the item where the margin is pushing them and pulling them so go over to our Advanced 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 can 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 a 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 width item so let's make this full width 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 can put 100 here anything more than one is okay I usually go by 1 100 or so and I can see right here I cannot whoops 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 advance and put 100. so let's go ahead and set up for tablet and for mobile we'll 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 drop down 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 centered all right so we got a center one and I'll leave this search in 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 let me make this 100 pixels right here then we could also adjust these by adjusting the padding 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 card work in 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 stop 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 the 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 because I really love web design all right 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 all right 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 inline I feel gets in the way it's better to just put that at zero all right 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 that 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 all right give us some space I feel right there is okay do you want let me take it to 160. all right and now we can use a negative margin to pull it up remember negatives pull 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 seeing 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 in line but now we do have that issue with the Z index we have to make sure that the anything that is full width 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 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 Advanced 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 all right we got the secondary menu but there's one thing I want to show really quick just so that we can see how my add my nav menu so 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 all right 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 for my 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 all right got an image and I want to put this image underneath again we got to get used to using these Navigators when we are using these methods because it could be tricky trying to drag and drop things around it's just a lot easier with the navigator in 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 with 36 pixels should be fine I'm gonna 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 we're 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 side you can't see it 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 can 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 we'll 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 a container when containers comes out later is going to build good practices and this is a way I like to build my websites I'm 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 and if you have any questions drop them inside 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 at a beta stage going forward I'm going for it 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 alright thank you for watching

Channel: Jeffrey @ Lytbox

Views: 7,955

Keywords: elementor header tutorial, elementor headers, elementor pro, elementor tutorial, elementor header, elementor pro header, elementor pro tutorial, elementor pro header tutorial, elementor menu, elementor pro headers, wordpress headers, elementor flexbox, elementor flexbox explained, elementor flex direction, elementor flex column, elementor flexbox tutorial, elementor flexbox column, elementor container, elementor flexbox container tutorial, elementor flexbox layout

Id: WeI8AW1YdCs

Length: 23min 9sec (1389 seconds)

Published: Thu Oct 06 2022