Elementor Pro Header Container Tutorial | Use Flex Box Like A Pro

in this video I'm going to be showing you how to create an Elementor header using containers now I've made many videos in the past where I showed you guys how to create a header using sections and that's probably where a lot of you guys have found my channel from now this is a header that we're going to be building it's a really simple header but most headers are laid out this way nowadays now I really love flexbox coming from a developer background I just feel like it comes natural to me and it makes it so much easier building websites with Elementor in my opinion it's a lot easier to build a website with containers than sections the sections were never really my favorite but I would use them because I loved using Elementor but the whole container route is really the right direction and I just feel like everything is built out more semantically now now you're going to get an inside look of how a developer would go about building an Elementor header and I feel like that's going to be really valuable now this isn't some Advanced video anyone can learn no matter your experience level I make everything super easy I simplify the entire thing so you're gonna get a good understanding of everything so hope you end up enjoying the video if you do make sure to like it for the YouTube algorithm and if you haven't subscribed to the Channel please consider subscribing so you don't miss out on any of my videos I hope you guys enjoy let's jump in head over to your Elementor dashboard make sure that you have Elementor and Elementor Pro and preferably the hello theme now hover over templates and then click on theme Builder now we're going to be adding a header you can choose header but in case you're using the old table view you can also do it through here as well you can click add new and then you can choose a header and give it a name but just to make this easier I'm going to go ahead and use the theme Builder I honestly don't really prefer using this method but just for this video and just to do this in a quick manner I'm going to be using this method here doesn't really matter which method you choose as long as you create a header so go ahead and create your header now we're not going to be using any of the default templates that they provide us with go ahead and click the plus sign and make sure we add a container row this one here there we go now we'll go ahead and adjust the settings here in a bit but let's go back to our elements here let's drag and drop a container now let's drag and drop our logo and I'm just going to be using the default site logo here so I'm going to drag and drop that and I'm going to put it right over here if I can let's see here a little bit of a bug there there we go and I'm going to have the logo right there that's perfect and then I'm just going to shrink my logo here now something that you will notice here is when you shrink the logo it will go ahead and shrink it here which is great now don't worry about this issue here we're going to fix that right now but let's move it to about this size should be fine now go ahead and click on your container make sure that it's set to the row horizontal and then this part isn't really important right now the Justified content what we need to do is on the Align items choose Center and that will Center the logo there I do want to make this logo a little bigger so let's go ahead and so I'll go about this size should be fine oops we're gonna have to do it this way sometimes it bugs like that there we go now inside your container here your inner container I should say we're going to go ahead and add our WordPress menu now if you haven't created your WordPress menu I recommend that you do in case you don't know how to do that let me go over that here go into the dashboard go into appearance menus and then this is where you can add your menu items you can just select once you create your pages you can view all your pages and then just check mark them click add new and you can add them in this menu here make sure that you give your your menu a name you can call it main nav or nav menu however you would like to call it and then you can go ahead and click save menu once you save the menu go to refresh this page in case you just added the then menu there now I want to add a button as well before I start to add some customizations to my menu let's go ahead and grab a button it should be right here so I'm gonna drag and drop it inside this intersection that we have here there we go now click on this intersection here or sorry inner container and then choose row horizontal there we go now that's going to put everything on one line let's go ahead for adjustify content we're going to go ahead and set this to the end that's going to work and then we'll set this to the center everything aligns to the center now we have a gap between our elements here you can see that right here now we can move that expand that but we're gonna go ahead and just we can remove it but I usually like to leave it just because it is always very helpful now something I am going to remove on the menu though so go ahead and click on your menu go into Style and we're going to remove the vertical padding so it just sits um to zero and then do the same thing for horizontal there we go now we're going to give it a space between it's what I usually like to do instead so you can do around 30 is fine let's change the font here do monster it choose this one here do 500. that should be fine I'm going to do REM and I'm going to set this to one REM and I'm going to make the text instead of gray we're going to do black that'll work there okay now we're going to do this pretty much the same thing for the button we're gonna give it the same font click on your bun now I'm going to change the name of my bun text here I'm going to do book demo we're going to go to style on our style and do monster as well and we're also going to do REM I'm going to do one REM we're going to keep it at 500 that's fine now we just need to change the color here and let me grab the color that we're going to be using I'm going to be using this blue color here you can go ahead and use the same color as well it's this one here if you need to zoom in it's fine it's the number sign one e three seven c e we're going to just Patty here and we're going to do 20. all around 20 pixels and we're going to leave the Border radius as is I think that's fine now we have a nice button there we have some text our menu text there now I do want to adjust the hover effect on my menu items so click on your menu there go into content and I'm going to remove the underline pointer um what I should do is save the color that we're using it's always super important and really helpful to do so just click on the plus sign there and I'm not going to give it a name I'm just going to hit create but I recommend always giving your colors a name now let's go into our menu here let's go into hover to make this this blue color that we chose there we go you can see now that's set up there perfect now we're going to leave the logo as is and it's basically set up it's really easy to do as you can see now let's go into uh tablet make this responsive click on tablet you can see that we have some issues here first of all um I would like my drop down icon to be on the right side and have my button on the left so and also we have a lot of space here and when we click on it it's not quite doing what we need it to do right um so click on your menu there and then go into content make sure set the tablet there and then we set this to full width there we go now if we click on it you'll see that we have the drop down here now and it takes up this entire space and it fits perfectly now now let's go into Style I don't necessarily like to have this gray light gray background there so I'm going to remove that I'm going to go into the toggle button the background color here I'm going to click on that and I'm going to move this down just to make it transparent there there we go then I'm going to adjust the size of the drop down icon I should say the hamburger icon they call it right um so we're going to leave it like that that should be good there let's leave it around uh let's just leave it around 30. perfect now it's just the drop down here so let's choose our colors so let's click on the drop down here if we wanted to shift this a little bit horizontally we can maybe we cannot even align it to the bind if we need to but we may just change that later on but the most important part here is probably adjusting this here there we go just just the vertical padding there then we're going to give it a hover background because currently we're using this um dark gray there so for the background I'm going to choose the blue color oops it should be on Hover actually so don't make that mistake there and the way you can go about removing this is if you click on the color there you can just click clear and that will clear that right up there now we do is we go to hover here and then this is where we set it there we go you can see now that's set um that's looking good there right now in case you want to go ahead and Center this text because I know maybe some of you guys would want to Center this on the drop down you can go into content and then go into Center and you can Center that there in case you wanted to do that but I'm going to leave it as is for now now something that I always like to do when it comes to my my header or even any of my sections I always like to give this a padding so go to Advanced and then I like to go to set this padding so from the top we're probably just going to leave it at 10 that should be fine and then for each size part's always important I would like to do 15 but you can even do 10 or even 20. now the reason why I like to do this is let me save this and make sure when you hit save add condition you want to go ahead and save this for the entire site and then hit save and close unless you want a specific page then you can go singular you go pages and you can choose your page just by searching it but we're just going to do entire site you can even do just the front page if that's something that you wanted to do so we're going to do entire site we're going to hit save and close and let's hit preview here now the reason why I like to do that is now if I right click and go to inspect and then minimize this um and in case you don't see this and it looks like this just click on this icon here with the two devices and they'll give you that option there then now you can just toggle this down and Shrink this and the reason why I like to add that padding here is now when we shrink it to about this side you see that we have this padding here right and it's always super important you want to definitely have that padding but I am noticing that one side has more padding than the other and let's try to see why okay so now we can see why it seems that this container has some padding already on it and I usually like to remove the padding off of the containers um that's just my preference there so you can go to you can click on the container go to Advanced and then remove that padding there we go now that's looking a lot better now now if we hit update now we can see that we have the same amount of padding on each side and everything's even right and it's looking good now the problem is now if I were to go to my devices here and go to tablet I would like my hamburger icon to be on the right side and have my bun on the left as mentioned so we can do is go to Advanced make sure that you're on the WordPress menu element and then here where it says order we're going to just want to change this to the end there we go and this will only apply to the tablet and also to the mobile but we can change that if we need to so if we go back desktop you can see that it switches order and then it's right where we need it to be on tablet there we go now I don't like this much spacing there so we want to just look at the Gap there so click on this container here the inner container go into layout and then adjust the Gap and I'm going to do about 10. you can even do five I think five might even be better there we go so now if we move this that's fine there but something that I'm noticing is that we have a little bit of more padding on on here right it's kind of going to be a little bit uneven so what I like to do sometimes if we have that problem I usually will click on my container here my main container header and then I will adjust Pat it here now from the top we can leave it the same about 10. 10 from the top and 10 from the bottom now from the right side is where we're having that issue so we might just leave that at zero for now let's see what we can do on the left side so it looks like we're gonna have to do 10 there to make it at least a little bit more similar but I want to kind of give it a little more padding on the right as well and I think that looks just about even now we can expand our bond if we need to make it bigger on tablet we can all we got to do is just drag and drop this now in case you're having issues with that click on your logo here you can also do it through here on the width but sometimes I just do it that way because it's easier so it really just depends on your preference now this looks good there um that looks fine there we go now let's go into mobile now we're having this issue now as you can see um where we don't have our bun and our menu item our hamburger right next to our logo we kind of want everything on one row so make sure that you click on your main container go into layout and we basically just need to do note rep so now we have that on the same row and that's working good now we are going to have this issue here right where um we have the button and the hamburger item on top of each other now we can do in what most would recommend is just hiding your button right you can click on your button here go into advanced responsive and just hiding it now that works as well but what if for some screens like for instance for this size we would like the button you know sometimes we do want the button but when it comes to the sides we can just hide it now there isn't really a way to do that right now with Elementor I know there are those custom break points but that adds break points to pretty much all of your pages and it's just some extra CSS that we don't really need so especially if we're just applying it to one item right so we can do it individually which is some custom CSS but first let's get the right sizing for that so we know when to um hide the button so we can see everything's looking good one thing I want to do though is I want to shrink my logo a little bit so I'm going to shake my logo a little bit and what we can even do as well is even shrink our button right we can adjust the text so click on your button go into Style and we can adjust this and maybe we can do 0.8 for the text now right and then we can go into our padding here right so for the height we can maybe do 15. and then do 15 from the top right um then maybe on each side we can do 10. just in case uh maybe we can also do 15. 15 there and 15 there that should be fine right all right and that's looking good we don't really need to add any padding to the rights to The Container here the main header container because if we go to Advanced we can see that there's already some Patty in here and that looks fine um but you can adjust the padding on each side so for the right and then left you can adjust that but I think that's looking good you can even adjust the top padding of the container that's something that you want it to do but I'm going to leave it as is so we're going to hit update here and then now if we go ahead and bring this a little bit closer we can see that right here now most of the time most screens are not going to be that small but they could be potentially right um so I want to go ahead and just start removing this just to make make it easier let's do 300 we can or you know what we can do 298 we'll remove the button right so click on your bun go to Advanced go to custom CSS now one of the things I do want to try I already know how to do this just by adding a media query and then hiding my on my uh my selector but just to make this easy why don't we ask the AI right that would be interesting so let's go ahead and add asker AI make sure you get that enabled of course with Elementor now we can see that 298 okay so we can ask the AI hide this button at green size 298 290 98 we can even give it pixels hide this button at screen size 298. that should be pretty self-explanatory let's see if it generates a code properly for us should just be a simple media query with the selector and there we go uh well it didn't this I wouldn't really need to use that isn't really that important and it did it kind of did it right this does work as well except I wouldn't probably do media screens because I don't want it to work on any other screen I just want it to work on this size but it got most of it so let's just insert this so we're not going to need this because obviously uh we're not going to need this that's not gonna work this isn't gonna work um we can remove that and then we can go ahead and remove this code this uh class here and just have it like this this will work now we can hit update as we can see now it works perfectly there we go right and that's all set as a little bonus let me show you how to make this into a sticky header one thing you want to do when you're starting to make it stick you want to give it a background so go ahead and click on your header container that we have there go to style go to background here and give it a white background there we go so coming soon we're going to be able to generate images that is going to be amazing I really want to see that I think that's what it means right or is it a color now I'm pretty sure it means um that it's going to be able to generate images that's awesome all right so let's go into advanced go into motion effects and let's make this sticky from the top we're just going to update this just make sure that it's sticky and real quick I'm gonna probably just try to go to one of my home pages there we go we can see the header is working perfectly now that's pretty much it for the video hopefully you guys did enjoy it if you did get something out of it make sure to like it for the YouTube algorithm and if you haven't subscribed to the Channel please consider subscribing so you don't miss out on any of my videos thanks for watching

Channel: Uriel Soto

Views: 7,356

Keywords: elementor header tutorial, Elementor header container, elementor header flexbox, elementor flexbox container header, elementor pro container header, elementor container header, elementor pro header, elementor header, elementor

Id: i5PrBOoeLZY

Length: 22min 51sec (1371 seconds)

Published: Wed May 31 2023