Divi Theme Header Design Tutorial | Create A Custom Header

hello people my name is ferdi and in this video i will show you how you can create a custom header using the divi theme like this or like this [Music] i'll show you both in this tutorial we will optimize for all devices and i will show you a few extra things that you can use to create amazing headers within the divi theme so let's get started so right now we have a simple header it looks like this when i scroll down it shrinks a bit and that is made with the standard settings of the theme customizer over here at header and navigation but the theme customizer is a bit limited and i will show you how to create anything you have in mind that you can create with the divi builder but then in your header so let me show you how to do that i go to the backend divi theme builder then we can create a template and for now let me take a look at the home page on every page i see the same header i want to change the header only for the home page so we can see the difference so i click on the plus over here add a new template for which page for the home page so this template will only be applied to the homepage click on create template now i can create a custom header for the home page keep in mind to save the changes over here otherwise you will not see anything change in your website so i want to create a custom header for the homepage from scratch i can also f from the library but i want to start from scratch and now we can click on the plus over here and i can choose what kind of columns i want to have do i want to have one row or not well normally you would say a logo at the left and the menu at the right but what i want to do i want to have a call to action button at the right side of the header so i won't have three parts not equally divided but a small area at the left small at the right the bigger one at the center so i click over here and now i can insert something over here but before i do that i close it i want to go to the section settings and there i want to create a background let's make it black then i want to go to advanced i scroll down all the way and i go to the scroll effects and when i scroll this header i wanted to stick with us awesome i leave all the settings as they are then i go to design to spacing and i want to create a padding on at the bottom at the top of zero awesome so if i would save it command s it will not appear over here remember it should overwrite this one at the home page but it's not the case why not i need to close it and then i need to save the changes over there and now when i refresh the page we have this beautiful bar and when i go to a different page let's say about there's the normal header i click over here and that is because over here we said this custom header will only be applied to the home page so i go back i can go to the row settings click over here go to design and to spacing and then i can say you know what i want to have a spacing of let's make it 20 on top and at the bottom okay i go up to sizing now to use a custom color width that is the the space between different elements or modules and bring it to one really important to do that great and now over here i want to add my logo so i click on it and i search for an image and i want it to be a light image so i click over here my logo that is in white why i want to have a transparent header command s refresh there it is and when i scroll down i want it to be a colored header with a white background right now nothing is happening why we need to configure it so we have the logo over here and if i would go to the section what i can do now i see that the background is black but now there's an extra option we can click on this icon the sticky icon and when we select the sticky area we can change the background so what does it mean when the heather is not sticky the background is black but when the header is sticky when i scroll down it becomes white nice we're getting there step by step okay i go back to the logo configure it a bit further and go to design to sizing and then the width of the logo i want it to be 100 pixels and then i find out that's really small so i can also say 160 or increase it with my arrows up or down i think 180 is perfect what you see is not in the center vertically but no worries we'll take care of that or it will take care of itself yeah it's it's crazy what this sometimes can do diffie sometimes takes care of itself wow let's think about that and ponder about it like wow how does it work and what does it mean yeah have you done it okay i i got 20 minutes out of this video because i was thinking about that and we have done that we close sizing and we go to transform because here we're gonna make sure that when we scroll down this logo will disappear and another logo in a different color will appear so i go to transform and transform translate and i make sure i select i hover over here to the sticky icon and when we are on the sticky icon then i say minus 100 percent tap and then i do something wrong because i need to uncheck this because this needs to stay zero so it should look like this this square on top of this line and we can save it command or control s let's take a look at what is happening i refresh the page and i scroll down and it disappears when i come up it goes down again so far so good so good that's not even a song maybe i should make a song about it but then i will focus on a different channel okay let's continue with the tutorial so good yes i can check this now i can hover over here and duplicate it or if you can somehow not come here between all those hovers you can click over here go to the section row the first column and there you can duplicate the image i click over here so i go to the new image sometimes this does not appear then you need to close this one first and then it will appear but you know this will take care of itself i click over here and i change the logo to the logo i want to use on a sticky state it's a colored logo with a white background okay then i go to advanced scroll down i go to position i change the position from default to absolute and if everything goes right it will stay on top of the logo now i go to design transform and on a normal state desktop transform translate i uncheck this and i want this to be 100 so this one goes down so it's below the white logo but then on the sticky state if we click over here i don't want it to be -100 but just zero look what happens now let's save it refresh so this one pops up when i scroll down and this one pops up but i still see this area over here how can i fix that oh for that we need to go to the column area again we can use this area the layer then i need to go to the row settings of the first row the first column this area then i go to advanced i scroll down i go to visibility i change the horizontal overflow to hidden there goes a vertical one to him okay let's save it let's see how that looks refresh what we see is that the logo is vertically in the center so it took care of itself and if i scroll down the new logo appears and i scroll up it comes back i think this is really nice let's take it a step further i go to the theme builder i want to change the background color of the normal state this one the desktop state to transparent and if i want to i can go to design borders the lower area bottom increase it with two pixels and grab a white color click over here on that white color and i change the transparency this one so it becomes semi-white now you see nothing because we have a transparent background everything is white we see the logos white now if i refresh this i scroll down it appears but we still do not see the result why now we need to go to this page to the home page and bring this up a little bit so i can enable the visual builder i can edit the header but i want to edit this area go to design spacing and here at margin keep it unchecked if i say minus look at that i can bring it up like that okay let me save it i exit the visual builder so now we see this line which we created which is semi-transparent when i scroll down [Music] the new area appears great i can do this all day and i really like that it's possible with the divi theme without using any code if you take a look over here you don't see that much anymore but um at design and transform there are also other options what you can do skew rotate so you can become even more creative with it now to get rid of the line i just wanted to show you that it was possible so i go to the settings of the section design border and over here the bottom border nothing save it refresh so so far so good now i want to have a menu here at the center are still having fun i hope so maybe you're not having fun but you just need to learn how to do it because if a client you said you can make websites and now we have a client and you are like oh no no i need to make the website i need to learn how to do it so i go to youtube and search for how to make a website and now you're finally there and found my video and when you found my video you're like i'm not having fun but i just need to learn how to do this well i hope in that process you still have a little bit of fun at least especially when things work out that's always a fun moment when things work out the way you want it so um isn't there a song written about that um i think so it doesn't matter um what i wanted to do i want to ask you to like this video and to subscribe for more upcoming wordpress related tutorials also about e-commerce affiliate marketing becoming a hotmail model no that was a joke okay if you have done so or not let's continue with the video but we have a situation here on our hands over here everything is transparent so we cannot see the background so what we can do we can go to section settings go to the background and for the desktop version we can change it from completely transparent to black version and then not completely transparent so that makes us see everything over here command ctrl s and over here you still see almost the same it's a little bit darker but but we still can see how everything looks so that's a solution and we can put it back later i click on the plus over here and i search for the menu [Music] and i hope you have created a menu so far this is part of a big tutorial on the divi theme and in that tutorial i created a menu so let me go to the website if you don't have it go to the theme customizer go to menus create a menu over here so you can type this however you want to call this then click on next link it to the primary menu [Music] like i have done and then click on add items and then over here you can create the home page click on add etc or you can watch my tutorial that is talking about that so here is our beautiful beautiful menu and i created the main menu which is the menu i've created in my other tutorial we don't need to use the logo or the elements we can use a link but it's a little bit weird to use a link for a complete area i want to link it to specific pages so i don't need this but what i also do not need is this background so i click over here and i throw it away then i go to design and at the layout i want to bring the menu to the center and when i have a drop down i want it to be downwards not upwards then with the menu text and keep in mind we're still in the sticky version so it will appear over here so we need to have a light text so over here i want to have a white color also for the active link color i want it to be white so when i would save it i would refresh it it is white but we cannot see this area over here when i scroll down it's also white so there's enough to change if i want to change the menu text for the sticky area i hover over here and then i click over here and then i click on the sticky section and then i want to have three three three as the active link color keep in mind it's not the the text the default color so i need to scroll down a bit and then also over here sticky area 33 and then when it's active i want it to be blue refresh it's white scroll down like that and if i click on block well we don't see how it looks because then we use a different layout but the drop down is a mess both here and not here so i go back to the normal version and then i want to close this or not use anymore you can change a lot of here you can change the style you can make it uppercase over here uppercase in small case like that on the line things but i'm okay with this drop down menu so right now the drop down menu i see no text so i go to the drop down menu text color and i make that 333 great and also for the sticky area so the drop down no i think the sticky area was okay already let's see and this is how you make websites just playing around see how it looks okay scroll down still looks great okay that seems great and then there are all the other design options for me it's all fine then i click over here and i want to add a call to action a button and by default it looks ugly in my opinion so what i want to do keep in mind i want to be white over here or a color so first let me change the text to get started i want to link it to contact or to any page you'd like to choose over here then i go to design the alignment i want it to be at the right and then the text dark or light i want it to be light because right now it will appear over here like that and then let's take a look at the button the text size i want to make it smaller 15 and the button text color it's white is okay and then the background i want it to be dark blue [Music] and then the button color also dark blue i don't want to have a radius so i want it to be square so i bring this all the way down i can make it capitals and then again i want to make it a bit smaller below capitals or above capital so i can change the font to nunito and make it bold i want to change the icon to this arrow and i want to show the arrow all the time so below i uncheck this only so i can unhover all the time and then i scroll down a bit again and i go to spacing i check those over here i can increase the betting and then here at the left increase it but it is um it's taking the text as a center and not the arrow so i want to uncheck this and at the right i want to increase a little bit more space so the text with the arrow is in the center okay save it refresh get started okay it's too dark so i go over here design button text okay but this color the lighter one and also of the border when i hover over it nothing happens when i scroll down it stays in the same color so i can do a few things when i hover over it i can give it an animation so i click on the logo go to design scroll all the way down go to transform and then over here when i hover over it i can make it go a little bit up or down so let's say -5 uncheck this make this zero and would look like that of course i can change the background color when i hover over it so i go to the button background over here the globe the hover make it a dark one or i can make that border white or both so i refresh it and now three things will happen it looks like this i think i made a mistake because i have this border but i only want to see that border color when i'm hovering so let's see button yeah i get it already okay the color should be this one and then when i hover over this area then it should become white so by default it is the same color and also here so ladies and gentlemen this is our header it goes with us wherever we go as long as we are on the homepage but then there's the question again how does it look a different device i can tell you it looks ugly really weird so let me show you how it is done i go to the back end and over here i want to create a new area click on the plus regular and i want to have one big column i search for image i click on it i upload my logo let me see i want to use a dark background and a white foreground white logo so i upload that one okay then i go to the section settings choose a background which is dark and i can also see the logo better which is quite a big logo it's that's not what i want so i go to design sizing sorry sorry sorry spacing and betting i say zero and zero then i go to the image design alignment and i bring it to the center and at sizing let me go to the tablet view and then at sizing let me see if i'm at the tablet field yes i want to make it smaller not a percentage let's say 178 pixels perfect then i want to click on the green plus and now i want to have two columns like that for the first column i go for a menu and for the second column [Music] let me see if i want to know where the column is i add a new module and i go for no i do not go for anything i just duplicate this one okay so over here i have a menu and over here i have a button so let me save it refresh and i have two areas so if i make it smaller it looks like that they're on top of each other stacked so i want to do a few things first i go to the normal screen i go to this section advanced and at visibility i say you can hide this on a tablet and on the phone okay then i go to the second section this one advanced visibility and i say hi this on a desktop so now i refresh the page it looks normal and when i make the screen smaller you see our other header great okay let's make this look better i go to the tablet view i'm happy with the logo and before i forgot forget over here below logo image there is a link i want to link it to the home page the same thing i want to do over here with both logos link it to the home page and also the second image link it to the homepage really important save it okay back to the tablet view okay i click on the first module and then at the background i remove the background and i go to design layout oh let's first change the icon color because right now i don't see the icon so the hamburger menu icon color is white okay now i see where it is i want this to be at the left how can i do that well at layout i make sure it's left aligned and then at the menu text i choose justify great then i want to go to the settings of this row with the two columns because they are stacked on top of each other but i want them next to each other so i go to this row settings i go to advanced that custom css i say at the main element display flex that's it okay then i go to design spacing if i would say 0 and 0 see the space becomes narrower so let's take a look at what we have so far here we have the sticky header when we make it smaller there's no sticky header anymore i see that this looks weird i'm gonna fix that in a minute i think there's quite a lot of space over here if i make it the smartphone okay it can look better but first um over here so i said no no spacing on top okay and i can go to the other row let me see let me see the second section so i can call this tablet mobile header desk top header so the top row design spacing if i would say 0 and 0 is really close to each other so let's say 10 on top we can make it 20 and then the second row design spacing leave it zero okay save it refresh okay let's take a look at the mobile mobile menu okay over here design spacing if i would say zero zero it would look like this so i will increase it or or or or maybe i'm not sure click over here and change it to this one so that should give me more space let's take a look button settings spacing let's see how far i can go okay until that point uncheck them increase them over here decrease it over here refresh and now there there's no space between them so um that's not what i want i go to the row settings design spacing and then for the [Music] phone i'll make sure we get a little bit of space okay i go to the settings over here design drop down menu if i want to i can change those change those colors to my wishes save it refresh right now we have this header when we scroll down it sticks with us and the logo changes and it changes back when i scroll up when i make the screen smaller we have this menu and it's call to action and we'll make it a mobile view [Music] somehow the space is gone so what i can do to fix that also go to the upper row design spacing at the bottom 10 pixels refresh and now it is better what i see over here it's perfect like this background is underneath the header but i don't want it anymore on the device so i can enable the visual builder and then over here it layers i go to the hero section click on it design layout sorry spacing minus 76 so it's below this header but for a different device i don't want it anymore so i say zero for mobile also zero what i also like for the mobile actually is that when i go let me save it and exit the visual builder i also want to save this close it and open it again since we adjust a few things when i go to the tablet view i want to have a border at the bottom so i go to border button two pixels and color white and then make it a bit transparent and it would also should also be the case on a mobile now so let me see refresh nothing happens over here if i make it smaller there's this line over here when i'm when i'm on a mobile there's also a line over here it's not sticky it's not what i want so i don't want it to be sticky so that's great i want to go back to this one like that and then one more thing right now there's a little bit of dark area i don't want it anymore so i click here go to the background and i make it fully transparent save it and ladies and gentlemen we have ourselves a menu we'll make it smaller and we make it even smaller we still have everything over here our menu our call to action and our logo and it's not sticky anymore if you want to learn how to create a website like this that is mobile friendly you can go to youtube and search for divi tutorial or you go to 30corp.com tutorials divi and there i show you step by step how to create amazing websites using the divi theme so if you're a beginner in divi this could be considered as a little bit of next level so i will do my best to go slowly through it but i want to show you what else is possible using all these principles i'm about to show you i don't know if that sentence was correct but hey let's just do it i have this template over here beautiful and if i want to i can export this template over here and if i would have a custom footer i can also export the footer and the header at once clicking over here but what i want to do i want to copy this area and then it's not assigned so i want to assign it to a specific page and it will be the contact page i save it and now if i go to the contact page nothing happens because i need to save the changes over here on this beautiful green blue turquoise button i refresh it and now there's the logo so i want to edit this page the contact page and i want to use the dv builder so i click on edit with the divi builder now to choose a pre-made layout and when you do that you need to fill in some details your elegant themes username and your api code you can find them over here at elegant themes that come [Music] log in then at account you can go to api keys and there you can find your api key then you can fill them in over here and then get access to all those beautiful templates so it doesn't matter which one i just need to grab something so let's grab the landing page i use this layout and probably this is the moment you need to fill in your details okay there it is so the first thing i want to do click over here go to design sizing sorry spacing and then at margin i uncheck this going to minus and make sure it is completely behind the logo or the header -76 okay save it and keep in mind that for different devices we have the other area so um i exit the visual builder so i can see the results so this is the result our same logo on the contact page our same header so now i want to customize this header and take a look at what else is possible we're not going to focus on this area that's already fine with me but this area so i go to this row then i go to design this time i go to sizing and then at the width it says 80 percent now let's go back and let's create a small color so we see what we're talking about i go back to the row settings design sizing so normally it's 80 which is this width but i can change it for the sticky menu to 100 and then nothing will change because over here at the max width for the sticky area i want to increase it to 100 so if your screen is really big then still this will be totally at the left and this will be totally at the right and if i save it i go back and i'll save it over here just to be sure now when i refresh the page i scroll down it goes to left and it goes to the right well i like the id but i don't like exactly how it looks i want us to have some spacing so i go to the theme builder to this row again design this time spacing and for the sticky area so when we are at the sticky header which is totally at the left and totally at the right i want to uncheck this and at the left i want to increase this with 20 pixels so there's a little bit of space over here i want to keep this one as it is okay what i want to do now i want to let this button become bigger the whole size over here when i scroll down right now it's a small button it's the same one so how can we do that well go over here to the column or to row settings to the third column and then at the background i can make it this color now it's the same color as the logo okay then i want to go to the logo module go to design alignment bring it to the center okay so far so good but it's not the whole space yet refresh looks like that i want it to cover the whole area how can we do that i want to go to the row settings design spacing and then at the sticky area i want it to be 0 and 0. now we're getting somewhere make sure it's 20 over here that seems to be a glitch why is it okay oh okay 21 and then over here zero this should work yes finally okay that's what i want refresh okay we're getting somewhere now i want to make this button bigger or this area so i go to the row settings to the third column design spacing [Music] and at the sticky area i want to increase this so the background stays intact let's say 20 now we're getting somewhere refresh okay that looks great and then we go like this awesome except for two things this is on top so how can we change that i go to the let's see the row settings design sizing and i equalize the column heights great then i go again to the column settings into the first column i go to advanced custom css and i say margin auto yes i always say wrong margin without the g margin copy okay then the second row or column advanced so i'm saying vertically everything should be in the center at all times so now refresh great and i scroll and look like that that's what i want and you see there's a small gap over here so i need to enable the visual builder again for the contact page then i go to the layer area go for the landing hero go to design sizing sorry spacing then i bring it back a bit further until that area in the background is gone 78 okay save it and now from within the contact page i can go to header template but i'm already over here so i don't need to do that i go to background and i bring it back to transparent save it exit the visual builder so it looks like this when i scroll down it looks like that and that's the way the cookie crumbles thank you for watching this video i hope you had a ton of fun or at least you'll learn a few things maybe both and then yeah best of both worlds fun and learning learning okay um feel free to like this video and subscribe for more upcoming videos and i have fun making those videos so um and i'm making a lot of money with it so having said that let's wrap it up have a great day see you in the next video bye

Channel: Ferdy Korpershoek

Views: 112,463

Keywords: Ferdy Korpershoek, Wordpress, Divi tutorial, Divi custom header, Divi, divi sticky header on scroll, divi sticky header, divi sticky section, divi sticky menu on scroll, divi sticky header mobile, divi theme builder tutorial, divi theme tutorial, Divi 2022, divi builder, divi theme builder, divi builder tutorial, divi 4.0 tutorial, elegant themes, divi feature, divi css

Id: yBA0BeMcu0Q

Length: 43min 47sec (2627 seconds)

Published: Fri Mar 04 2022