Create A Custom Header Using The Divi Theme

hello people my name is FY and in this tutorial I will show you step by step how you can create a custom Advanced header within the divy theme let me show you what we will cover in this tutorial first we will assign our header to all the pages in the website or just to a specific page and then we start building our header from scratch using the Dy Builder we will make our header sticky change the colors and Logo when we scroll add a menu and a call to action of course we'll optimize our header for all devices and then I will show you a few ways to adjust the L few of your header in the description of this video I have time stamps so if you want to go to a certain part in the tutorial you can click on one of those time stamps and you go directly to that part of the tutorial this tutorial is an extension on a divy tutorial if you want to learn from scratch how to use the divy theme builder then you can go to 30C corp.com go to tutorials divy there can learn step by step how to make use of the divy theme and if you scroll down you can learn even more about divy on how to create a a Blog Page a portfolio create a header or a footer using the divvy theme work with scroll effects do split testing make your Dy website responsive and how to work with divy AI if you don't have the divy theme yet and you want to start using it you can go to fyc corp.com Fordy hit enter and then you can start using divy risk-free and if you like what you're about to see then please like this video And subscribe for more upcoming WordPress lated tutorials now let's get started so I have my menu over here created with the divy theme customizer a logo and a menu submenu all looks decent and if I scroll down it shrinks a bit and it's the same header for every single page on my website and now I want to create a header using the divy visual Builder and I want to assign it to the homepage so on the homepage I will have my new header but if I go to a different page there can be our current header or another one how can I do that let me show you I go to the back end of my website then I go to divy theme Builder if I would create a header over here for instance a global header and I will create it using the Diffy Builder that means it will appear on every single page in my website that's not what I want I only want it to be assigned to the homepage so in that case I click on the plus new template I want to build a new template not from the library but one from scratch and I want to assign it to the homepage so I can also assign it to multiple pages but in this case I only want to assign it to the homepage so I click on create a new template there it is I save the changes really important to do that over here otherwise nothing will change so if I go to the homepage I still see this one but now if I click on add custom header for the homepage look at this I can build a custom header or add from library I choose this option okay now now if I close this and I save it and exit and I go to the homepage and I refresh it nothing happens why we always need to save it over here so I save the changes and now look at this it is gone it's a wide empty area why that's what we see over here so if I want to edit my custom header on the homepage I click over here and now we can start building it from scratch so the first thing you need to ask yourself what do you want to show in your header I want to show my logo at the left a menu at the center and a call to action a button at the right so I click on the plus I want to have three rows not easily divided because the logo area and the call to action area can be smaller I want to focus on the the menu I want that to be wider so over here over here there are two nice options I go for this one and then I can add an image by searching for image that will be the image the logo of my website so I click over here if you want to follow along with the same images I use in the tutorial then go to 30y corp.com images and it will be downloaded then you can click on upload files select files I have my folder here at the desktop I can go to folder six miscellaneous web Define 2024 and I want to go for my white logo I already have a normal logo and a light version so I want to upload the logo white.png and then upload the image there it is great in order to see the whole logo I want to go over here go to the background let's go for a gradient or a normal background just uh black for instance but then click on the color over here and make it a little bit lighter so it's now quite transparent so I can see beneath it we'll use it later in the tutorial like that so now I can see the white and I can see the logo well if I see how big it is I think this is a really big area for a he I want to decrease that well there are two places where we can do that the first one is the section and go to the design area to spacing and here at petting I say zero and zero so it becomes already a bit smaller then I can go to the row settings go to design again to spacing and also here at ping zero and zero well now there is no space outside of the logo I think it's too flat so what I can do over here at the row settings design spacing I can say you know what 10 pixels on top and 10 pixels below I think These are nice measurements so what I want to do I want this header to be sticky so if I scroll down it sticks with us but what I want I want to have a dark transparent background so that this area can be beneath the header and when I scroll down I want the header background to become white and then a menu with dark text and a call to action so how can I make it sticky let's start with that I go to the theme builder then I go to the section settings Advanced I scroll down scroll effects and I say stick to the top everything else looks fine so now if I save it and I refresh the page now it sticks with us that's what I want when I'm scrolling I want the background to be light how can I do that I go to the section settings to to background and look at this since I turned on scroll effects there's a new Option over here at the background or almost everywhere it's this one if I click over here I can say this is the desktop setting and this is the sticky setting so for the sticky I can create a white background and now if I save it look at this right now our header is transparent and I scroll down the background becomes white that's exactly what I want but now I don't see the logo so what I want to do I want to change the logo when I scroll down how can we do that well let me show you the first thing I do I give this a specific width so I go to the logo design sizing and I say let's say 200 pixels it makes it a bit smaller so whatever you prefer I say 220 pixels that's what I like for the the width of the the logo now I close this and I go to transform what I want to do I want this logo to disappear when I'm in the sticky area so right now it's it's shown but when I scroll down in the website then it should disappear so in order to do that I go to transform translate and then when I'm at the sticky area right now it's normal but when I'm at the sticky area then uncheck this so so it will only adjust this area vertical area when I'm at the sticky area I say make it minus 100% I save it command s control s now let me refresh the page oh and I scroll down the whole logo disappears perfect okay I go back over here what I want to do I want to duplicate this logo if you somehow cannot find it or exess it you can go to the layers section Row first column then the image I can duplicate it then I go to the second image settings oh oh drag it over here I go to [Music] Advanced to position and I change the position from default to Absolute now it's on top of the other one how do I know that if I go to content image and I change it to my darker logo look at that it's on top so that's exactly what I want now I go to design I go back to transform what I want to do when I'm in the desktop State and I go to the transform translate I want this to be unchecked and I want 100% below like that then when I go to the sticky State I don't want to go to minus 100 I want it to go to zero okay it looks weird but trust me it will be fine so I refresh the page and when I scroll down this one will appear and the other one will disappear okay let's go back I go to the row settings so I go to the rows then to the First Column the settings over here then I go to Advanced then I go to visibility and at horizontal overflow I say hidden so things will be cut off and vertical overflow hidden okay save it now if I refresh it it's not exactly how I want to be why let's go back we can go to the row settings to design sizing I want to use a custom gutter width which will be one look at this this looks better already than this let's refresh it and now if I scroll down disappears how great is that if I hover over it nothing happens so what I need to do I need to go to the first image to Link and Link it to the homepage and the second one link it to the homepage save it so now if I refresh it scroll down and there it appears and I go can go to the homepage what we can do if we want to if only if you like it I can um close this and now I can enable the visual builder of the homepage now I can switch from our page builder our homepage to the template so what I want to do over here look at this I click on the section settings I want to go to design spacing and then for margin I want to decrease it I want to decrease it to a point that it's completely overlapping the header area like that or maybe a few pixels extra but then vertically this is not in the center anymore so at the padding I want to increase it with let's say 35 50% of this so let's say 135 I think that's [Music] Perfection almost okay that that looks great I save it I scroll down now it looks like that I want to edit the header template there I am I select this the section settings go to Advanced to position and I want to turn the Z index to 10 that means that in the Z index is kind of a layer so the layer will all always be on top of something that is less in the Z index so if you have 10 it's probably on top of everything else otherwise it can be that that the logo will be hidden beneath the homepage and that's not what we want so I exit the visual Builder and this is how it looks perfect I want to create our menu over here but I think if I enable the visual Builder the header is hidden no it's not great so I can edit the header template that's what I prefer and I still see this homepage so that's why I prefer uh editing the header while seeing the homepage so I see immediately how it will look so I can click on the plus over here and I search for a menu and in my tutorial which you can see in the description of this tutorial I already made a menu if you want to learn how to do that hold command or control click over there wait a minute wait uh copy your domain paste it and then go to the theme customizer to menus create a new menu then give it a name assign it to the primary menu and then when you have that you can click on add new and you can create new pages and add them to your menu and in that way you can create a menu beautifully explain to you in my complete Dy 2024 tutorial which is visible as a link in the description as I told you so I already have it it doesn't look that appealing yet so what I will do here at the content area I want to go to the background and get rid of it but keep in mind we're at the transparent background which is a dark background so what I want to do at the menu text first the layout I want to bring it to the center which you can hardly see but if I go to the menu text active link color I can make it orange so if people go to the about page it will be orange there's no homepage in the menu so people don't see right now that one of the links is orange then I scroll down and I want to go to the text color and of course I want it to be white like that before we continue even further I go to the row settings to design sizing and I turn on equalize colum Heights and that will bring this vertically to the center I go over here when I hover here I see nothing so I need to go to design menu text or even better drop down menu text so we're still in the main area so it needs all needs to be white but the Sub Sub menu needs to be dark so I just need to read what it says drop down menu text color yes that's it okay and when I scroll down how does it look okay then I don't see this so I need to fix that this is something I'm happy with let's see the active link color so when I go to The Branding page and I go over here to servic branding this will be orange mob many text color okay then I go back to the menu text because if I scroll down I want to change that so I go to the menu text color but this time I click on this icon sticky so now I can change the color for the sticky area like that and that's how we can configure our menu I'm happy with it I click on the plus and I go for a button and in the big tutorial I've created I decided that every button I create is already in the sty of my websites so it can be that it looks different for you well either way what you can do you can go to design spacing change that okay and this I leave I leave this empty but um what you can do you can go to the alignment I align it to the right can go to the text light color to the button at custom Styles and then um for the background when you hover over it you can change the color this is by the way for the text so it needs to be white but if I go for the background it's orange yellow but if I hover over it it needs to be green like that then you can add a um add an icon for instance you can by the way make it capitals all that stuff show an icon and then only show it for instance when you hover over it like that and then um I'm happy with it maybe if I can be so free I can go [Music] to spacing and then [Music] betting increase this make it big bit bigger to get some attention I like attention I love it today I found out that uh 30 million people or I had 30 30 million views all that attention I love it makes me so happy of course I'm kidding but um I'm really happy with 30,000 30 million views so I do my best to create the best tutorials possible so right now it looks great of course I need to link it to something I need to change the text so I can say get in touch or start here or get in contact but um then I don't need this page anymore get in touch and I link it also to the to the contact page for/ contact command s let's open this in a new tab go to the website scroll down get a new [Music] logo everything looks great except for one thing there's an animation over here I don't want that that was because of the style you probably don't have that then I go to design animation none I want to have none of [Music] it so this is how you create a header for your website using the visual Builder More than 70% of the people that visit your website come through a device like a tablet or a smartphone so it's really important to optimize our header for all devices let me show you how we can do that but how does it look on a different device well I can tell you it doesn't look good as you see not at all but that's up to you figure it out good luck bye-bye no how do you optimize it for other devices I will show you for that I prefer to go to the back end to viy theme Builder then go to the custom header and I want to create a new area so what I can say over here the section Advanced visibility I want to hide this for a phone and a tablet for a tablet and a phone we're going to create a separate menu regular only one row I want to start with an image which is the light logo of our website then I want to link it to the homepage design let's go to sizing 200 pixels great bring it to the center then I want to go to the section go to the background make it green one or gradient green and then the second color darker one change the gradient to 90 for instance okay and then um maybe a design sizing or spacing ping Etc okay so far so good so this how it looks uh on every screen so what I want to do I want to go to Advanced to visibility I want to disable this for a desktop then if I go to the tablet view it's visible and what I see the design sizing for a tablet let's see over here I need to see an animation sometimes it doesn't work I need to click okay for a tablet let's say 250 pixels for a smartphone it's uh it's it's um CSS means C cating stylesheets cascading so that means if I say something specific setting for the tablet automatically it will be cascad to the settings of the phone unless I change it over here so I can also say 200 100 so for a tablet it says 250 for phone 200 okay I click on the plus and I want to have two areas the first one is same menu the main menu and there needs to be no link also no background so now it looks like that I want it to be at the left so I go to design layout left aligned how come if it's left aligned it's still at the right we need to go to the menu text and then I need to change it to this option so now it's here at the left if I open it well I can't so let me refresh it then you'll see that this disappears when I go to the tablet View and then it looks like that so far so good and if I go to the mobile it looks like that okay at the other hand or at the other side which is now below somehow the second column if you want to be sure you select the second column of the this row you can click on the layer area here I can say desktop header and here I can say tablet mobile header and then the second row I want to go for the second column and and and because here in the First Column is the menu as you see and then the second one add a new module and that is a call to action so let's say button but what I also can do I can duplicate this one drag it here and then get rid of this one okay I go to the settings of the button let's see there's no animation anymore I guess no okay it's aligned to the right so I think everything is fine but I don't like it that these are below each other instead of next to each other so what I can do I can go to the row settings go to Advanced custom CSS and at the main element I say display flex and now they're next to each other so starting to look better if I make this smaller I like that I think the spacing is not the best so what I will do um for the row let me see I think we can take a look at uh second row here go to design spacing 0 0 and then for the phone also looks like that so let's see how that looks on the website I think it looks great and you can play around with that so what you can do you can go to the first row to design spacing and at the top decrease it until you are satisfied by the way maybe this is not the best structure for a um a header on a mobile on a tablet so what I can do I can duplicate it just show you something else I can hide this for now on everything then let me see I get rid of this and I bring this over here to the right right and I'm bring this over here let's see if that's working I get rid of this row so there are two rows I go to the main menu design menu text or or over here okay I go to the menu text and I don't justify it anymore bring bring it to the right then I go to the row settings design sizing equalized column height well that's not [Music] working so let's see what we can do over here design spacing I said nothing so I want to bring it back to 10 and 10 spacing okay let's say margin 10 and then here minus 10 or minus 20 then I go over here go to design maybe not the best way to do it but it works [Music] um okay spacing for a tablet okay so now we have something like this if I make it smaller like that for the tablet let's see there's quite some space over here so what I can do design sizing the width let's say [Music] 100% okay and then over here let me see how yeah this looks great spacing maybe also 10 pixels over here let's see if I have something over here with the spacing okay then I want to bring this also a bit more so I go to the [Music] row or let's see maybe um sometimes also playing around like is is this all there is no I don't need to do that um I go to the spacing and then at the right I want to increase it a bit more like that well what's happening on the mobile then that's what I thought on mobile I want to decrease it again okay and then here spacing for the mobile top great save it [Music] refresh there you [Music] go we have created a beautiful header using the Dy theme now I want to show you how you can duplicate a header change a few things and place it on a specific page in your Dy website so right now this is how our Heather looks what else can we do let me show you I close this if I go to the back end to divy theme Builder I can duplicate this header and then I want to assign it to the contact page save it save it over here now I want to first I want to go to the website and I want to click over here I want to go to the contact page okay this how it looks right now so let's change this so what I will do I will go to the row over here row settings and then I go to design sizing right now I scroll down and then the width right now it's at 80% at the max withd of 1,080 so I click over here so I go to the sticky area and I want it to be at 100% nothing changes because also the max width the sticky area want to be increased now this is what I want so I scroll up it looks like this I scroll down I cannot scroll down so let me save it refresh I scroll down and it goes to the left and to the right so even with a big screen it goes to the completely to the left completely to the right so what I want to do now I want to give it some space over here so again I go to the row design and this time spacing and then for the sticky area at the left I want to increase it bit let's say 10 pixels so it's a little bit lower but I also can do I can close this save all the changes click over here go to the contact page enable the visual Builder and then edit the header so I can see at once how it will look for now for the sake of the tutorial let's get rid of um this area and this area uh what I've done already what you need to do also okay let's uh close this command e enable the visual Builder what you need to do with the contact page I seem to have done that already at this section go to design spacing and margin top make it minus 70 so uh it will be covered so this area will be behind the header I go back to the header template okay scroll down looks like this what I want to do now I want to go to the rows and the third row the third column I want to give it a background when I'm at the sticky area so I click on the sticky area sticky and I give this a yellow background like that then I go back I go to design spacing and then at the sticky area I say zero and zero okay then I go to the button itself design let's see spacing but now when I'm at the sticky area I want to increase this to 20 and 20 so it looks like this then I scroll down it looks like that but this looks a little bit weird and this is not a button so if I save it and I refresh this page I scroll down it looks like that but this is not a button only here so how can I fix that well let me show you I go to let's see design button custom Styles and then I search for the background but this time again for the sticky area what I can do I can make this green so I can see how it looks then I go to I can close this and go to spacing and then at the sticky area I can start increasing this while turning on this and now I want to bring it as close to the edge as possible the edge of the yellow background not too much otherwise this will happen like that Pixel Perfect okay now I go back to the button background sticky I get rid of it when I hover over it I see getting touch area what I also can do border radius put it to zero okay now I still want to do something sticky and hovering sticky let's make this green okay and then I go back to spacing I need to have one more pixel so let me uh just close this go to spacing uncheck this and at the left I increase it so now let me show you I save it so now it's square and if I hover over it it looks like that if I scroll down it looks like this so let's see if I can fix that the the Border radius so design button border radius okay I put it back to 25 button border width sorry this is the wrong one zero border radius 25 but then over here for sticky I say zero save it refresh so it should be round again if I scroll down like that and if I have it green well still that maybe I need to refresh it again maybe it's a cach thing oh maybe not okay I think it has something to do with the hover settings so design button search for the Border radius okay I need to go for sticky and this one and it's zero when I hover over it it's also zero and that's the way the quick crumbles I'm fully sure now that when I hover over it there is no more around the corner perfect so that's also something you can do so still when we scroll down the logo changes these go to the side and do you want to use this maybe not but I just want to show you what is possible and then use the same principles for the mobile view and the tablet view to adjust it to your wishes and that brings me to the end of this video thank you for watching it I hope you learned a ton of stuff I will show you a few tutorials over here that you can follow and then I wish you a great day good luck with your website good luck with your business and thank you for watching this video and feel free of course to like this video And subscribe for more upcoming tutorials okay bye-bye

Channel: Ferdy Korpershoek

Views: 18,832

Keywords: 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 builder, divi theme builder, divi builder tutorial, divi 4.0 tutorial, elegant themes, divi css, Divi Visual Builder, how to make a wordpress website, wordpress tutorial

Id: FOzzBeO-9RQ

Length: 38min 58sec (2338 seconds)

Published: Fri Oct 06 2023