Divi Beautiful Header Design - Divi 4.0 Theme Builder Tutorial

hello friends today we will see how to create a beautiful uh header for your db website uh before diving into a tutorial video let me show you what we are going to achieve in today's tutorial so this is my client website and for them i have built this beautiful header so as you can see there is a simple call to action button on the left side on the right side you can see there is a social media icon and then there is a contact us button with the background behind it only and then when you scroll down the header just stick to the menu and it looks very beautiful and i you can see even this landing page is so beautiful and and attractive so let's directly dive into our tutorial video go to theme builder add new template i would not be creating a global header because i do not want to change my existing header so what i will do i will just disable this global and will create a custom header and then i will tap on this just select uh third last row type now add a blur module over here so we would be adding our for example we would be adding uh mail and the phone number over the body section would not be adding in the title because of designing issue so let's just add our mail id here and then in icon we will just use icon of the mail this one now tap on the design section enable the circular button and so let me just first so to leave the icon color and make the circle white and place the circle left and then use circle border okay you get white and [Music] let me just first of all give this a background just remove the extra spacing go to the body text okay now just simply duplicate it and drag it to the next column let's add a phone number over here and go to the image and change the icon this one is perfect and i would be adding one css core for this because as you can see the text and the icon is not uh centerly aligned means like you can see the text is moving upward so right now in db you do not have the option to give the spacing between between the text and the from the upper side and from the bottom side so in order to achieve that thing what type what we will do is like we will add a css code to our page setting so just tap on the setting and go to the advanced and then in the custom css and now you can see the code the text is aligned centrally properly it is aligned centrally if you want more you can do that thing if you want that thing let's say if i move it to the five then it is fine so now let's add a social media icon over here okay just go to the social media icon and just tap on the setting and then in the go to the background just change it to change it to white and then go to the design and in the icon just change the color whatever color you want but in our case we want the color which we are using so we will pick that color and then we will paste over here and now what we have to do is like we have to add the border and make it round because our all button around and now it is fine now just duplicate it now just simply change the whatever social media you want and just simply change the background you will need to just change the background only and now let me select the instagram i select instagram icon now simply go to the social media module setting and go to the design and in alignment section just move it to the right now just save it now our top header has been designed now we have to design main header so in order to do that thing what we will do is like we will create add a new section and here what we will do is simply take a row and then we will take a menu module now what we have to do is like we have to add a loop over here so let me select if i have any logo so i have this one logo let me use this logo and now what i will do is like i will just go to the sizing and in logo width and height i will just reduce the size of the logo my lower so to the 45 it's fine you can if you want to do that thing for your logo either you can you know simply just while you are making logo you can export a small logo for this section so now let's just save it and what we will do is like we will remove this extra spacing padding so our header is also done but it is still not done because we need to customize this contact me button so in order to do that thing what we what we have to do is like just simply paste that code and so this is the code and right now there would be no any change because we need to give a css class to our menu for to which we want to design but before giving the css class by going to the menu section we will just simply change the background color of this from the css code and now just simply copy this css class menu and in the the menu item in which you want that that background thing you can just simply go to there and just add a css class which you have copied there just add this as you can see our exact menu has been done like this one but we have missed one thing to fix this header so in order to do that thing what we will do is like simply we will go to this section setting we will go to the scroll effect and then we will just simply enable this option to stick to the top and just leave it and save it and save this thing let me just assign this template to one of the page so that you can see it so let me just assign to the home page and let me just hide this thing for a while and let me just go to the header thing so as you can see our as you can see now our new adder has been enabled and let me just scroll it so you can see so beautiful had fix header has been done so hope you like that video do subscribe to my youtube channel if you like my content thank you

Channel: Ganga Ram Das

Views: 1,103

Keywords: divi 4.0, divi 4.0 tutorial, divi 4.0 templates, divi 4.0 template, divi header design, divi header tutorial, divi header and footer builder, custom header in wordpress, custom header divi, ganga ram das, divi, divi tutorial, divi theme tutorial

Id: f7OI7szdCTA

Length: 9min 59sec (599 seconds)

Published: Wed Mar 31 2021