Elementor Pro Header Tutorial | Flex Box Container Tutorial

hello people my name is Freddie and in this tutorial I will show you step by step how you can create an amazing header within Elementor Pro let me show you what we will cover in this tutorial you will learn how to create a header from scratch using the new flexbox container how to make it sticky transparent we'll talk about conditional logic so you can play specific headers on specific pages in your website and I will teach you how to show another header on your website when you are scrolling and as always I will show you how to optimize everything for all devices in the description of this video I have timestamped so if you want to go to a certain part in the tutorial you can click on one of those timestamps and go directly to that part of the tutorial when I go to fast for you you can go to the settings here at YouTube playback speed slow down the speed of this tutorial and if you want to go back a few seconds in the video just hit the left arrow on your keyboard and you'll go back 5 seconds in the video so let's get started but before I do if you like this video please like it a feel free to subscribe for more upcoming WordPress related tutorials so I have a website over here made with Elementor free version and if you want to learn how to create this website you can click over here and I'll show you step by step how to create this website so what we're gonna do we're gonna use Elementor Pro to create a header this area in our overpass website I assume you already have Elementor Pro if you don't have it you can get it over here by going to 30 corp.com forward slash Elementor hit enter you'll be redirected to this page and you can see three different plans they are exactly the same except for one thing the amount of websites you can use it on so if you want to use it for only one website you should go with the essential plan 59 per year and here below you see everything it includes you have more widgets more templates you have a complete theme Builder you can create anything within the website using Elementor Pro woocommerce store Builder a landing page builder a pop-up Builder gonna use it in this tutorial form Builder more marketing tools and premium support I've been using Elementor since 2017 and I love it I love the free version and I love the pro version even more if you want to get it click on buy now they need fill in your email create a password enter your billing details choose a payment method and then you will go to your own Elementor account you can go to subscriptions and then click on download zip there it goes I close this I go to the back end of my website to plugins add new upload plugin drag it over here and click on install now you need to have the free version of Elementor installed otherwise this doesn't work activate the plugin great now if I go to Elementor I go to license and make sure that everything is connected voila with Elementor Pro and the flexbox container we have a lot of flexibility so let me show you how we can create containers within containers now what I can do I can go below Elementor to templates and I can go to the theme Builder I click on it look at this we can create a custom header a custom footer a single post template a single page template an archive template the search results template a loop item I'm gonna create tutorials about all these features and of course a 404 page template they're all empty we can make use of pre-made templates or we can start from scratch and what you can do whatever thing you create over here a header for instance or a footer you can assign it to specific Pages based on certain conditions so I can say this header which I'm going to create should only be displayed on the home page for every other page in the website I should use a different one so I'm going to show you how it works so what I will do I will click on the header Plus I can choose a template but I want to start from scratch I close this okay what I can do now I can go to the settings here then I call this one the home page Heather and I click on publish and then I need to add some conditions so I add a condition that says that this header should only be displayed on a singular page which is the front page I save it and I close it so now when I would go to my home page I see nothing because at this moment this header is displayed but since there's nothing I don't see anything over here so what I can do I can click on the plus and I can choose a structure so maybe think I want to have a logo at the left and the menu at the right so I choose this one but since we're working with the flexbox container I want to go with this one all the elements within this container will be placed next to each other from left to right so I click over here and now I can go to the plus and I can add an element the first thing I want to add is an image I don't use the site logo I use an image so I drag it over here I click on this image over here and I can choose one you can upload a file or choose from from your library I choose this one I select it and there it goes now I can click on the plus and I can add a menu so I search for menu there it is a WordPress menu I can drag it here at the right and I should see something pink or at the left by default it chooses a menu if you don't have a menu go to your website to the customizer go to menus create a new menu when you've done that if you click on next and then you can add items so you can create a new page you can add posts landing pages categories Stacks so I've created a few menus and by default it chooses a menu probably based on alphabetical order I choose the main menu great and I want to add something else so I click on the plus and I go for a button I don't have to search for it I can also scroll over here basic whereas the button I drag it over here and sometimes it doesn't work okay like that so I can change the order but what I also can do I can click over here go to the structure and now it is a little bit more easy so I drag this over here and this is how I want to to be displayed so a few things I want to do in order to show you exactly what is going on how to create a new container below this one so I click on the plus this one has an arrow down then I want to go to the style not to give a dark background so we can see exactly where our menu appears so still background background type I go for a gradient and I already have a few Global colors why because I already made a website using free version of Elementor so I choose this second color and then for the other gradient color I choose a dark color if you want to work with global colors click on this icon site settings go to Global colors there I can choose a few and you can add custom colors so going back close this click over here I go to the layout and I bring the height to 700. I publish it and now if I refresh the home page this will be gone it will be pushed down if I refresh it I see it over here well I think this is it thanks for watching this tutorial feel free to like video Blah Blah no we're totally not there yet what I want to do I want to make it look better of course but now we we know at least how much space we have over here so a few things I want to do in order to make it look better I want to go to the container and also here if you cannot select somehow you can go to the structure click on the container you can also double click on the name and change it to main hey there and this one temp container for short amount of time until it is finished so I go to the settings over here of the container and right now we see the direction is from left to right you can also bring it from right to left or everything below Each Other Well I want it to be from the left to the right and I want to justify the content but how do I want to keep everything at the left no or maybe at the right or in the center now what I prefer is to have space between so the first element is totally at the left the last item is totally at the right and everything in between is in between you can also have space around and space evenly but I prefer space between this is on top instead of in the center so in order to align this the right way we can go to the Align items area bring it to the center and that's more what I have in Minds now I can go to the individual areas to the image I want to go to the style image size change it to 300 go to the style change the width from percentage two pixels and I would like to say 220. then I go back to content I need to this to be a link should I go to link custom URL forward slash so no matter where I am in the website if I click on this link I go to the home page then I go to this button over here I change the text to contacts without a capital because I want all the ad items in my menu to be without capitals that's the style of my website I go to the style of the button and in the background I want to be yellow so the background color one and then when I hover over it I want it to be green so at the hover background type color I choose a color green like that then I scroll down a bit and I want to go for the Border radius and bring it to 25 30 as long as that is a round Edge like a 50 Circle here and here that's what I like if you do 10 it looks like that well I prefer it would be like this so far so good I click on publish I refresh the page and it's getting better scroll down like that with Elementor Pro and the flexbox container we have a lot of flexibility so let me show you how we can create containers within containers but what I prefer is that this menu over here aligns to the right area to the button that is next to each other well there are a few ways uh to achieve that I can click over here go to Advanced uncheck the margin go to right and hit arrow down and then take a break and I mean well watch a movie because it takes a long time or you go for 500 and add a zero wow it's aligning you can do it that way I prefer to click on the plus and insert a container in the container that's a great thing with the flexbox container you can create containers in the container so again I click on the plus I go for the container and I drag it over here like that and now you can drag the menu over here and the button also over here so I have actually two areas now a logo and a container and in that container I have those two elements but I don't look that good so I click on the container I can go to the settings and I say direction should be from the left to the right or from the right to the left and in that way it's automatically aligned to the right so that's what I prefer and then I drag this to the right so now I have the same results and I'm happy with this so now my menu lines to the right great what I see and the height increased a little bit now I think with this height that the logo is a little bit small so in order to make sure that this is a normal height I go to the container and I change the minimum height and you see I cannot bring it lower than 70. so let's bring it lower than 70 45 now I need to go to this container to Advanced and change the padding to nothing you see what happened there's no outer spacing anymore I can also go to The Container Advanced and do the same thing like that but I prefer to have some space over here so I turn it on link it together and increase it a bit you know what I only want it to be at the top and the bottom so at the right I say zero not the left also zero then I go over here there's a container and I can increase it or decrease it and if I want everything to be Pixel Perfect I go over here Advanced make everything zero again and now if I go to the layout I can say how high it should be so I prefer 70. and now I think the logo can be a bit bigger yes so we have our menu over here let me show you how you can style it I go to my menu let me publish it first now we can style the menu so here at content I selected the main menu I can also have a different menu as you see it can be horizontal it can be vertical it can be a drop down I can align it to the left to the right to the center if I hover over it I see a pointer here below the line I can change the pointer from underline to overline or to background to framed or my favorite one none I want to keep it simple when I hover over it I want it to be a different color that's all then there's a sub menu indicator this one I want to change it to this one because I like a Chevrolet's cars I think it looks better that's why I decided to do that later we're going to talk about the mobile drop down so right now I'm fine with this then I go to the style I change the typography clicking here family and I go for new Nito sounds if you're searching for a good font go to fonts.google.com you can search for anything if you see something you like Monserrat note those sounds my favorite Nonito sounds you can choose one so feel free to take a look at this quick send which I've chosen nanito Sons and I can increase the size so how about that 18 then I go to the button style typography I say Nito sounds and then also 18 I go to this container make sure that the alignment is in the center and then this spring goes down a bit so it's a It's Perfectly aligned now go back over here to the colors the text color I want to be color four it's a dark color it's not completely black it's it's dark when I hover over it look at this I want the color to become color one oh interesting when I have over here I want it to be green okay interesting what else over here I can have a divider so if you want that you can fix that change the width change the height so so if I want to take it serious I can make it one make it solid change the color to something lighter do you think okay I like this but I prefer not to have a divider horizontal padding so the space between you can increase it or decrease it then there's the vertical padding I leave it as this and there's the space between it's actually the same as horizontal padding I'm okay with it then that's the drop down this area what I don't like is that it starts above this line I wanted to start exactly on this green area so I go to the drop down let's take a look at the colors later the vertical padding is what I'm searching for so I can click over here then I hover and then I increase it I guess let's create some space in between okay then the distance select it and look at this now I can bring it down until I think yes this is perfect and I think it's perfect so I choose 12. then I go up what I want when I hover over it I want this to be orange the background so I create all the text colors color four okay the background color is White when I hover over it I want the background color to be orange and the text color to be White when it's active I want to be the same well by default so if I don't change active here it will take these settings so look at this beautiful I can go to the typography and also make those 18. and nunito songs and I think 18 is too big so I say 16. so far so good refresh I like it it looks clean it works and as I said when it's active it should stay with a orange background and a white text so if I will go to The Branding page and I hover over here again this will be highlighted I cannot do it right now because it doesn't have a header but look at this if I would click on command e Ctrl e and I go to the theme Builder and I go to the header I can adjust the conditions so I can edit conditions by clicking here by clicking click on the plus and I can say include the singular page called branding there you go save and close now if I go back to the homepage and if I go to web design I see nothing but if I go to branding this Heather is here and I see this is highlighted so that's how it works with uh conditions and what I want to do now I want to close this I want to include it on the entire website save and close so now I go to the about page I'm here at the about page and it works so um that's how you can do that and if you want to edit it I click on edit with Elementor homepage header until this point in the tutorial our header is static it does not move let's make it sticky as I said so far so good but we can also make it better so I can hover over here go to the container go to Advanced I close the layout area go to motion effects and there I can make this whole container sticky so if I say top and I scroll down it sticks with us and that reviews something it reveals that this container has no background it's transparent so in order to give it a background I go to the style background type classic and I choose for the color white voila and now we have a sticky header and it's sticky everywhere so if I go to the tablet View it sticks with us in the mobile view it also sticks with us I don't want that I only want it to be sticky on a big screen so here's sticky on I delete tablets and mobile so it's only sticky on the big screen if I go to tablets it does not stick with us publish ladies and gentlemen it is time to optimize our header for all devices so I select container I go to the layout and at the padding I want to say 20 everywhere or dead that's better then this now is a menu and that makes our website look a little bit weird I click here I see the content area of the WordPress menu I scroll down and I want to change the mobile drop down this area to a full width area now if I click looks like this I want to align the text to the center and the toggle button right now is a hamburger I want to keep it that way okay publish okay let's go to the style after drop down and let's see what we can do the vertical padding and I like to increase or make the text bigger so I click here and since I see this icon that means that I can give this a different setting than on the desktop so if I make this really big when I go to the big screen it's normal so that's what you can do with with all the areas where you see an icon a tablet or a smartphone or a desktop that means that you can have specific settings for only that device so this is a little bit too big so for the tablets and make it a bit smaller how about even smaller 20. great publish this all looks fine in my opinion I go to the mobile view and now I think okay we need to fix some things so first I want to get rid of the contact area click here go to Advanced close this I go to responsive and I say hi this on a mobile so on a mobile we do not see the contact button we only see hamburger but right now I see everything on top of each other I don't want that I want it to be next to each other how can I do that if I go to container layout and I change the wrap to no rep now everything will be next to each other let me publish it see the result go to the website and now it looks like this well I think the logo is a bit small this looks fine let me make it bigger it's over here still I want to say 400. now things shift but it's because this button is in the way but since it's hidden on my smartphone you'll see it correctly on the screen one more thing I click over here tablet View I go to the style and then I go to the toggle button in the color I want it to be color for the dark color in the background I can change it to this one but what I prefer to be transparent so I drag the lower slider to the left publish refresh this is a tablet View and a smartphone View perfect when I hover over it I want to become Orange so in order to fix that I go to hover color white backgrounds Orange like that publish so we have a simple header right now it looks great it is sticky and on other devices it's looking great but there's so much more we can do there's so much more we can do in elementary Pro for instance we can create a top header let me show you how you can do that so let's talk about that maybe you want to have a top header for instance okay do that well really simple you click on the plus area from left to right you can give it a background if you want to I could go for a gradient color two and color or change the angle I can drag it on top of everything else and I want to click on the plus and I want to go for a text editor and besides that I want to go for social media icons social icons there you go I go to the structure bring this low double click stop header and now I can configure this because right now if I would publish it refresh page looks like that so first I want to go to the icons I click here of course you can change the icons Facebook Twitter Youtube you can also add something else WordPress or you click on the icon search for something so LinkedIn for instance my personal ID is that you should never use this when people go to your website you should be able to point them to one thing and that's the thing you want most make use of your service so actually you don't want them to go to your social media because that's a distraction of what you actually want them to do you don't want to go to your social media but you want to go to get in contact with you or to the pricing page but for the people that want to use this let me show you I close this shape right now is rounded columns automated I go to the style I want to use custom colors primary one make it orange so as you can see which color it is the second one I want it to be white in the primary color transparent the size I can make it bigger for sure to make it a bit small the bedding and the spacing zero and then we can increase it we hover over it wanted to become Orange okay and also over here at the container layout I want everything to be in the center like that and of course evenly space between perfect then I go to the text I say call us at and this gives a weird extra space what I can do command X or Ctrl X go to the text paste it now it looks normal I can make this a link commands Ctrl k and then you can add a phone number link right now leave it like this so it's a small glitch I think so I need to do something over here space and then backspace and it looks normal I go to the style text color make it white and if I want to this color or this link I change the color to a custom color and then I can place the code over here foreign go back to the text space backspace then I can go to typography make a bit smaller then I click over here container I go to Advanced and add some padding I uncheck this so now I can decide exactly how much pixels it should have publish refresh great uh there's a small chain difference over here so what I can do I can go to this element advanced uncheck margin and then at the left I increase it a bit publish better it does not stick with us because I did not say that it should if I would do that I go to Advanced motion effects top sticky top let's see how that's going with the other area also being sticky I refresh the page so now it sticks both and you see there's a weird glitch so what I can do I can go to The Container advanced then go to motion effects sticky top but I can give it an offset I can increase it until it starts moving so I say 32 so the height of this area is 32 and look at this now make it sticky it both sticks perfectly so I don't want this Arrow to be sticky so I can turn it off now I still have a gap over here when I if I scroll down look at this look at the white area of the header you see there's still a gap because that's off because of the offset if you want that hey be my guest it has a nice effect so but it's up to you I prefer not to do it so I bring it back to zero but hey it's possible the idea that it is possible makes me so happy some things in life even though you're never going to use them the fact the idea that they are possible wow wow wow okay what was that let's continue how does it look on a different device okay again go over here uncheck left and also here at the right a bit a check right and on a phone great publish refresh so this is in my opinion basic header it's clean it serves a beautiful purpose in our website and now if I would get rid of this area and I publish it and I refresh the page it helps the visitor to navigate through the website and it is optimized for all devices it's on every page as you see so that looks great what else can we do we can play around with our Hobbies what we also can do we can play around with the breakpoint settings of our website so let's do that if I make the screen smaller look at this make it smaller everything looks fine all of a sudden look at this what is this this is a breakpoint this is the moment where where Elementor decides that from now on with this width of the website it will be shown in tablet View I can change it so if I keep it like this and I go to Elementor I click over here I go to the mobile drop down and I say the breakpoint should be mobile and click on publish and I refresh the page look at this the menu should be back and this so I can also say that on a tablet this menu should still be visible so I can make it smaller and sit from the moment that it is a mobile view then this will appear and maybe when I'm changing the width you think but 30 this doesn't look great this looks weird but that's not a problem because people don't do this when they're on my website they're actually only three views this one so don't forget the changing of stuff then this is the second one and this is the third one so it doesn't matter if things float around a little bit weird when when I make it smaller the thing is how do I want things to look so now if I go to the tablet to the tablet view it looks like this if I want that I can choose it but I prefer this one that's what I wanted to show you this portion with the with stuff tablets breakpoint was free now let's continue with the the paid stuff what do I mean by that no ID I think we have a beautiful header but what we also can do we can assign certain headers to specific pages in our website so I can say that the header we have created so far will be used on all other web of all other pages except for the home page for the home page I can create a different header what I want to do for the homepage I want to create a transparent header and show you what is possible at this moment this header is shown on the whole website so if I go to the about page it looks like that and it looks fantastic but it can be that on the home page you prefer to have a transparent header well it's not possible they need to buy Elementor Pro in combination with Divi and Gutenberg and bricks and breakdance and Joomla a little bit of Drupal and front page Express of course I'm kidding if you want to do this in element Pro it's possible we need to duplicate this area first so I go to the back end to templates team Builder I go to the Heather and then I click over here the three dots and I say export there are those so now I want to edit the conditions I want to say include in the entire website except for the homepage so front page save and close if I go to the website I see no header but if I go to the about page [Music] there is one so what can I do I go to the home page or to the back end go to templates theme Builder and then go for the header and click on add new this time I close this I click on the icon over here header settings I call this one Heather homepage awesome publish the condition is only show this on the home page the front page I click on the folder click on this Arrow up and then I can drag this over here enable and import and there is the homepage header insert there you go so I publish it and now ladies and gentlemen and davidcorp.com I have exactly the same header but another version is for the home page and now if I take a look at the about page in the home page it's exactly the same but there are two different templates so now I can make this template for the home page transparent how can I do that let me show you I click on the plus here below arrow down I edit the container cell background should be color 2 and color 4. I changed the rotation and I go to the layout and I say it can be so if I go to this header this whole white area I click on it and I go to the style I change the color from White too nothing transparent not a lot is changing because the background is also white so what I want to do the header container I want to go to Advanced and I know that this is 70 pixels in height so I uncheck this and again and here at the bottom I uncheck this and here at the bottom minus 70. so I do 7 and then a zero bam awesome except for one thing I can't see my head anymore not everything the logo is gone so what I will do I'll go to the structure and at the main header I go to Advanced and then I need to go to the Z index and I say 10. that means that the main header is in front of the container that needs to be the case so a few things I want to change now I want to change the logo I go to the logo choose a different image and I use the same image but with a light text so that's better for a dark background I go over here to the style and I change the text color too White so far so good if I publish it and I refresh the page looks like this so what I do now over here and get rid of the container okay publish so now I will see on the home page I can see through the background a bit and in order to show it even better I click on edit with Elementor I go to the hero which is this area go to the style background overlay I choose an image and now you can see better so right now this area is transparent when I scroll down it sticks with us but then the background is still transparent I don't like that something else we can do a few things we can do I can go to the main header again go to the style close this and I go to the Border and then at the bottom I can say have a solid color so I uncheck this and at the bottom I say oh what's going on [Music] what is going on I'll be back two give it a color Orange publish refresh I can create something like this or also make it transparent we can make it white and people see through through make it one refresh something like that what I also can do I can go to the background of the main header backgrounds and decide to make it black but then transparent and then click like this so when I scroll down you can see through it as you see but you still can read the text a bit and if you think it's still not what I want to be you can make the background darker so less transparent play around with that or give it a little bit the color that you have in mind this is really dark but wait there is a better way okay we're coming too close and what I want to do I want to end with a highlight or with with with something I personally really like we're gonna use a little bit of CSS and I will walk you through the whole process we can create a totally different header on scroll so we have a beautiful header on the aesthetic website with a static header that's not moving when you scroll down you can slide in a totally different header or the same header with different colors let me show you how you can do that so let me go back to the header over here I go to the header background and I want to make it transparent again fully transparent refresh okay what I want when I scroll down I don't want this to stick with us but I want to have a brand new header with a white background how can I do that let me show you I go back I go to this header and what I say at Advanced layout I close it motion effects I do not stick it anymore so I say none I want to have none of it sorry sometimes I get happy and angry at the same time I call this one main header static now I want to duplicate this header I click on the header double click and make it sticky sticky okay I click over here go to Advanced and here I say 200 so I can see the the two different menus and see what's going on over here I go to the style the color of the background is White then I go to this logo change it to the dark logo again go to the text to the style color one sorry prefer r or okay so this is what what we see on the home page when we enter the website and this is what we see when we are scrolling so let me let me click here go to Advanced bring back margin top to zero did I already make it sticky click here Advanced motion effects sticky top what I want I want this header with the white background to appear after a few pixels so I say effects offset should be 150. publish refresh this is how it looks but what I see when I scroll down the white background menu is in front of the transparent one I don't want that so how can I fix this I get a script for that at 30 Corp let's come hit enter then I go to tutorials Elementor Pro I scroll down a lot until I see the script that says exactly what we want change the complete header on scroll that's what I want so there's a sticky header yes this is it copy I go back to Elementor now I go to the main header sticky Advanced layout and then I give this sticky a CSS plus I call this one sticky Dash header so now when I paste the script which contains sticky header it knows that it should be applied on this container so I paste this and depending on the height of your header you should change this number so my header type is 70. so that's why I have minus 70 over here so now if I publish it and I refresh the page the white background is gone I see my transparent header but when I scroll down look at this if the 250 pixels there it appears and it goes away again it works so right now you see my header I scroll down and have to do almost 50 pixels my new menu appears I see everything how it should be seen so that is how it works and the great thing is since we have two different headers again I can click over here layout and give it some space so I can work on this one I can do something else with this so I can say over here for instance um WordPress menu the button delete okay go to the structure again WordPress menu I bring it a bit more to the center I make this one a bit smaller so image and I think this should be more in the center so give me some time publish I should not forget to bring this back to zero publish again now it looks like this when I enter the website and when I scroll down my menu is in the center and this gives you so much flexibility and of course when you change something over here make sure it also looks good on all devices which I've shown you how you can do that so this gives you so much freedom to do whatever you want to do you can have a completely different header and the great thing is that this is only applied to the home page so if I go to the about page it looks like that and then only this error sticks with us because this has already a wide background so I said that the other template should be displayed on the whole website and only on the home page I want to have a transparent header and a sticky one that is completely different than what a few CSS things we adjusted everything so one more thing I can go let me let me go over here bring this back to 200 I can go or 2000 I can click here advanced I go to motion effects and I can say I can change the entrance animation to fade in down also at the menu I can say motion effects fading down after a half second and the contact button I can also let it be faith in down after a second so a thousand maybe seconds I can make it slower Etc so if I publish it and I refresh the page that's nice animation let me go to the home page wait let me bring this back [Music] publish and now it looks like this yeah scroll down and this one appears so that's how you can make headers in Elementor pro thank you for watching the tutorial if you want to learn more about element Pro or WordPress or affiliate marketing or woocommerce or about WordPress related stuff feel free to subscribe to this YouTube channel I would appreciate it my name is Shirley it still is nothing changed in the latest 48 minutes and um I wish you a great day good luck with making websites and bye bye

Channel: Ferdy Korpershoek

Views: 18,919

Keywords: Ferdy Korpershoek, Wordpress, Elementor Pro, Flexbox Containter, Elementor Pro Header, flexbox container elementor, Flexbox Container, elementor pro tutorial, elementor flexbox container, elementor wordpress tutorial, elementor flexbox container tutorial, elementor pro header tutorial

Id: uBmAanL6qvo

Length: 53min 15sec (3195 seconds)

Published: Fri May 05 2023