How To Create Custom Header & Footer in WordPress | Complete Tutorial | The WordPress Buddy

i am your friend the wordpress berry i have been developing wordpress website for the last seven years and most of them i have developed with tv and elementor but today i am gonna show you how we can set up a global header a custom global custom header using db's theme builder so you will learn how you can turn this simple default header into this kind of custom thing so this entire green thing is a global header so let's get started and check how we can do that first of all go to the dashboard and then click on db and then click on theme builder [Music] so when you first open it you will see it like this you won't see this one [Music] so you have to click on add global header then click on build global header so now you will get three options build from scratch it will give you a blank empty template to start design your own header from scratch if you want to go with the pre browse uh to the pre-made layout then you can click on browse layouts it will show you the ready-made layouts designed by dv which comes built in with a theme or other db builder so you can see all these templates but these are not header templates these are just pages templates for example it has a template design template for for home page for landing page for a blog page for gallery photoshop different kind of pages for different kind of category but we are not using a layout for any page because we are designing a header so we just go back to saved layouts and you can also copy this option like your existing pages your existing pages mean if you already have a page made with dba and you want to or if you uh designed your header already on a page and you want to set that thing as a global header then you can just copy that click on this template or your design page and it will import that into your header but for now we are going to create one from scratch so just close this so it will give you a blank empty row so let me tell you like this global header builder is exact same thing as the db builder it's just the difference between the name it's the header the other one is for the page so you can do anything here you can add image gallery video audio text any like all modules which are available in the db builder so no modules are hidden on this all modules are available so you can add anything so for example let's see how we can add an image oh first of all we add an image then we select an image from media library we can select anything select this one and so here it is now we want to add the text on the right of the image then we convert this single row column row into double column so we take the first l one third and the two third option so now we can add a text here text you can enter anything here so now if you want to add a menu so we can select full width so it will give you full width score full width header full width menu so header full width header is a complete header with a button and a title and you can add two buttons here click here and you can add any text and you can also image like one for logo image let's add one just use this one see you can hand you can also add a header image header image is another part of the header so it will show on right to the text you can also change its layout going to the design time taking layout it will if you want to set your header full screen you can do that as well so for example if you want to show like a full screen full height screen kind of adder on all pages then you should go with this option then you can also line your text center so the image will go down after the text and you can also line them to the right the image will come to the left but let's keep it to the left for now you can also add a scroll so to just tell your customers like there is content below the header you can also add a scroll down icon as you can see here this one and you can also change it you can also color it with any color you can also just resize so there are lots of options these all options are similar which you get in the db folder when you design a page there is no difference it just that what element what module you want to add into your global header so you can also do this and now if you want to add a menu you can click on full width you can click on full width menu to get a menu so you have to select which menu you want to [Music] add so i have it this one now you can also add a logo to this menu let's add this one okay so we have added logo you can also show shopping cart icon you can also show search icon so now it looks almost the same as we have added by dv by default so how we can design it if you go to the layout then the style left align center logo goes in the center at the top inline center logo so these options options are pretty much the same as you get in the theme customizers header settings so keep it left line make menu links forward so it will turn the menu into full width menu you can set keep it like this menu text for here in here you can further customize the design of these menu items for example ultra bold uppercase red color increase the size letter spacing high to shadow you can also set the designing for the drop down menu if you have one you can also set the logo designing and in the sizing if you want to set the size of your logo then you have to go into the sizing then here it is logo width you can enter 200 pixel see logo max width you can also set a max with hundred percent or 50 pixel logo you can also set the logo size by height like 40 pixel it will automatically reduce the width as well keeping the proportions logo max height so width is the content width of this entire module then module alignment minimum height max height the spacing these all are the common settings you find in almost all of the modules so you can also set a animation for your header if you want to slide from center from top or up and down [Music] now if you close it so this is how you set a global header you can design anything you want so if we save it then close it now if you click on save changes and we visit the site see here is our header so in this way you can set a header for of your entire site so this first section whatever you add here the global header and global footer this will be set to the entire site by default but if for example if you want to put a different header on your blog page only so that how would you do that to do that you will have to enter a new add a new template which you can do let's delete my old one okay so after designing your global header you will get a screen like this you have to click on save changes to save all your changes when you first design our template but if you make any changes to your uh global header or global template then you don't have to come back here and save changes here again you can just press the save button for example if you want to make a change to this global header you want to remove this one and then just click on these dots and click on save now your changes will be saved instantly without going back and clicking the save changes button so let's see what happened see it was a cash cash issue you can see the green section has gone and now you see only the menu section okay so let's go back and let's check how we can set up a header custom header for just for the blog page so if you see that save changes okay you can see our blog page has the same header so how do you want to change it how you can change it for just for this page so click on add new template so now it will ask for these options these options are to assign this new template so if you want to assign this new header template or to other pages as well or post or category etc then you can do that as well so you just have to stick the uh correct page tag or post where you want to see this template so we want to apply this template on the blog page so you can see we have a blog item here just click on it then click on create template so it will inherit the global header from the global default website template so now what you will have to do you have to edit it you first have to disable global if you don't disable global and just click on edit and save the changes then it will save those changes for the entire site like it will save the changes for the global header as well so to make the changes only for the blog page what we'll have to do you will have to right click on it and then click on disable global so now whatever changes you make here those changes will be applied only to the blog page header okay so let's color these background set to black okay actually this section background will not work because we are using a full width header so we have to set the background in the full width menu settings click on background then select the color we have let's give some pairing from the top spacing padding top 20 pixel and set the color for the menu items menu text tabling color menu text menu text color white and active link color you see like the page we are on so for example if you are on the free page then what should be the color of that menu item that should be yellow then we press save you can do you can change it entirely you can even remove it and anything new okay so let's suppose if you want to add a like a new featured blog section new section and let's see full width so what options we have in full width full width map full width post title full width slider okay let's head full width slider you can see post from current page post count one only want to see three all categories then you don't use post accepts just turn these off and sub lengths post offset number elements show arrows no show controls no show readment button no show post matter now featured image now now we have to set the size weight content with min height okay the height can be controlled using the spacing and by default the this full width uh post light comes with the spacing so let's check if it yeah okay so we have to use the spacing automatic animation so if you want your post to slide automatically you can turn this animation on you can also set the speed or you can continue automatic slide on over off so by default your animation will stop if you hover over this and let's decrease the size of set it to h3 h4 and set it to size 20. and left a line and left line the text as well change the color of the heading so it's more pop pink and easily readable and set it to yellow okay so now it will keep showing the post in the loop automatically so now when we save it then close it as i said before when you create a new template you have must have to come here back here and click on save changes so now let's check our blog page see now our blog page has this new header different from the other side so this now we have applied this set only to the blog page so if now just to confirm like this header is not applied on the entire site let's open the home page of the site and see this page has the old one so this is how you can apply a custom header to the blog page only similarly you can do the same thing for shop page as well if you want to a custom header for the shop then you can click on a new template a new template and then go to [Music] others actually we don't have woocommerce installed let me know if you have any questions i will be adding more options like how you can set a global header for shop page how you can set a global header for particular category of posts and how you can set a global header or footer for a single post or page or a single even for a single product i will show you how you can create a your own template for a product for checkout for cart are lots of videos coming in so if you have any questions just post them in the comments and i will reply to every single comments that's my promise thank you bye

Channel: WordPress Buddy

Views: 156

Keywords: how to create header in divi, how to create global header in divi, global custom header in divi, wordpress header, wordpress buddy, header with divi builder, custom header with divi, How To Create Custom Header & Footer in WordPress, how to create custom header in wordpres 2021s, how to create custom header and footer using elementor, how to make custom footer in wordpress, custom header in wordpress, custom header and footer using elementor, footer in wordpress

Id: VNm8-QdO4B0

Length: 19min 21sec (1161 seconds)

Published: Wed Aug 18 2021