[Step by step] How to create a custom global header with divi theme builder.

in this tutorial I'll show you how to create a custom designs header in Divi here I will show you how you can make the design from scratch and how it can import a premade layout and then customize it as we want also I will show you how you can make different design header for different pages here for home page we are using a default header style which we can see from Divi theme customizer here is our default header style here is primary menu bar and for this time we are using a transparent header and by default this header style is working for all others pages so when we see our about Us page you can see same header style is working for all pages but here I will show you how you can make a different header style for about page and also different style for service page so far you see if you think this tutorial add some values to you please give this video a big thumbs up otherwise you may not find my tutorial next time and don't forget to subscribe my channel now let's get started to design a custom header style first I am going to my dashboard and going to DV DV theme builder and from here we can design fully custom design for our homepage or any other specific pages from here we can set our global header global footer and global body structure for example this is our default template layout and this layout is for all post and for this time I am going to create a new template for our about page so I'm going to specific pages and going to about us so this layout only work for about Us page now I'm going to create template and here I am going to add custom header so here is two different options built custom head at from libraries we can also import any pre-med layout from our library or we can start from scratch so for the first time I will show you how you can design a layout from scratch so I'm selecting built custom header and build from scratch so here I'm selecting a three column rows and first I'm selecting a background color so we can see the total area specifically so I'm going to background adding a black color background save it and go to section settings design tab spacing and I'm removing extra spacing padding top and bottom zero okay save it and here on the left side I want to add a logo so for this I'm selecting here image module so here I am selecting our logo here is logo and here I want to add a menu this menu module from here we can select any menu here is only one item so I'm selecting this and on the right side you can add a button so here and typing get started and going to design tab alignment right and here is button style I am adding a border with this button and button border color to white which looks good and how first I can also add white color save it and now going to customize this menu style so for these going to design our first I'm going to back down removing this background color and going to design tab Minu text to white sorry this is active link color this is my new text color to white and here is drop-down stein so for this I'm going to drop down menu drop down menu background color black color yeah it's working and now yeah I'm going to spacing adding some top margin 20 pixel or decreasing it yeah it's perfect and we can also add some spacing top of this button so I'm going to design tab spacing and in some top margin now save it and if we want to make this layout hold it for this I'm going to row settings going to design tab sizing and weight 200 percent and max weight to for example trying with ninety percent yeah it's look good now going to save it we can also check this tablet layout tablet is looking bad so for this I need to add some custom CSS I'm going to row settings going to advanced to have CSS and here I'm adding in CSS display flakes save it yeah looks good here we can also change this layout structure here we can make this alignment Center and I main center save it yeah looks good so now when you go to tablet and mobile view we can see the menu icon color is different so I want to make this to a white color so for this I'm going to design tab and going to icons and here is shopping cart icon color search icon color and hamburger menu icon color we can make it do white and here with this menu item we can also add such icon shopping cart icon so for this I'm going to content elements and here is options we can use if we have e-commerce website for this we can enabled our shopping cart icon and also search icon so if we want to show all this icon we can enabled from here and also it can change this color from here we can make it white yeah it looks good now I'm going to save it save it and finally Save Changes now I'm going to refresh my page so our custom header is not showing in our home page so when you go to our about pace yeah so this is our custom header it's showing only our about Us page and when you go to our service page you can also see it's not working here now I will import some pre-made layout for header style so now I'm going again here and making a new template selecting a specific page so for this time we can create a layout for service page create template I am just saving it so first I'm going to import some pre-made layout so for this going to Divi library and import layout going to import choose file and here is civil pre-med layout for DV header you can import one by one or here is all together I will also leave this layout download link in my description so you can also download all this pre-made layout I'm going to import our layout okay so here is five header layout now I'm going to team builder going to add custom header with custom header and this time we can select chose the pre-med layout and selecting yourself to layout so here is five layout we just import it now so I'm trying with last one it's a cool layout we can use this so for this time we can check all others your certain layout this one okay so it's not matching with my layout and trying another one yeah we can use this kind of layout but here I'm just doing some small customization I don't need this button here I'm just removing it now I want to customize this area so for this I'm going to row settings and adding a background color I'm selecting black color for this background color and here is logo here is menu so I'm going to settings logo I don't want to show logo from here I want to make it two column row and moving this menu item to the right side and on the left side similar way I'm taking a image module selecting our logo and for logo we can link get to our home page and this is whole wheat here you can add some padding design tab spacing and padding left/right 30 pixel save it and here in similar way we can just chance we know text color and adding some spacing top spacing 10 pixel 15 is okay and here here is some bottom margin we are making it 2-0 so sometimes we need to use this kind of header some text in top area and then our menu we can make it alignment to right or going to sizing and I'm meant to right save it and Save Changes now I'm going to refresh my service page yeah so this header is working for this service page and when you go to about us you can see here is different style header and when you go to our home page you can see here is our default transparent header style so I hope you understand the basic concept how it works and how we can customize any pre-made template or how you can design any custom header from scratch if you would like to see how I designed this entire website from scratch you can also check my another complete tutorial how I make this website from scratch in step by step I will also leave this tutorial link in my description below if you need more professional help from me then go to for generalship dot-com and get started now here is the form below just fill this form with your details information and the acoustic details and submit it I will reply you in next 24 hours I will also leave this paste link in description below thanks for watching and welcome to my next tutorial

Channel: Farjana Rashid

Views: 6,183

Keywords: divi custom header, how to create custom header in divi, divi 4.0 header, divi 4.0 header templates, divi theme builder header, divi tutorial, divi tutorial 2020, divi header tutorial

Id: tBNzGLj-508

Length: 13min 15sec (795 seconds)

Published: Tue Mar 31 2020