WordPress footer tutorial

hello everyone and welcome in today's tutorial I'm gonna show you step by step how to create your own custom footer so this is the footer that will be designing so as you can see this is a really custom footer I've added all these links manually and also I'm going to show you how to save this as a global item so that you can add this footer to the rest of the pages on your website now the advantage of doing it this way is if you do decide to add maybe a link on to that footer that link will be updated on all the pages on your website so it's very very important that you do that and I show you how to do that as well another area that also needs some customizations or some changing to is the little item here at the bottom wait se is designed by elegant themes now you may want to change this and make it custom to your own company details I also show you how to do that so for this tutorial I'll be using the Divi theme but you can apply these techniques to other page builders as well and if you do decide to use TV as your page builder if you buy it using my affiliate link I will give you access to my course which is worth 247 absolutely free now this course is called the Divi blueprint 3 it teaches you everything that you need to know about Divi if you're a beginner and also if you want to learn how to design professional websites let's dive in now and let me show you how I managed to create this footer alright so what we're gonna do is we're gonna start from scratch so I'm gonna open up a brand new page here so I'm gonna go first of all into the dashboard and then I'm gonna create a brand new page so I'm gonna come over here click on add new right so we just call this page Divi footer ok Divi main footer that use the Divi builder so for this design it doesn't really matter if you do it on an existing page or if you just design it from scratch so in my case I'm going to start here from scratch so I'm gonna click here on start building and then I'm gonna start going I'm gonna start with a 5 column so here you can decide how many clones you want to have depending on how much content you have on your website so I'm gonna start with 5 columns here in my first column I'm gonna add the logo of the company so to do that I'm gonna search for my image module here select my image and then I'm just gonna click anywhere around here and search for my logo in my library but in your case you need to use a logo that you've designed for your company all right so I'm going to go with let's go with this one here I'm gonna click upload an image so as you can see now it's added and then I'm just gonna save this for now now the next thing I'm going to do is to add the color of my footer background so I'm gonna click here on this gear icon click on background and we are going to add our color so for now I'm just gonna go with a really dark color so I'm gonna go with that really dark grey so I'm pretty much happy with that and the next thing I'm going to do is to add some padding so I'm gonna come over here to spacing activate my chain and add some padding both to the top and the bottom so I think 116 is fine and then save the next stage now is to start to add all my headings for my footer columns so I'm gonna start here by selecting my text module so I want to start here by giving this a title so I'm gonna call this Explorer okay I'm gonna highlight this and give this a title of heading 2 now it's time to go in and customize this heading so I'm gonna click here on design heading text heading 2 so first of all I'm gonna change my form to poppins I'm gonna make sure it's all caps I'm gonna add some letter spacing I'm gonna change the color so again here is where I wanna play around with the shades of grey so I'm gonna go with this one here in fact that's a bit too much so this is where you can just try these out and see which one works better for you all right so I'm sewing if that as it is I think that will work so the next stage now is to save and add a line underneath that heading so the line can be achieved by adding a divider so I'm gonna choose here divider and then I'm gonna come over here to design color and then again I'm going to give this a color so I normally just use colors from the color palette here and again I'm going to go with a grey like that now when it comes to the Styles I'm going to leave everything as it is but the most important thing now is to come over here to transform click the second tab and this is where we can drag this into position because right now it's a bit too far from the actual word okay so I think I'm happy with -24 go ahead and save next now this is the stage where we get to add all the links of our footer so I'm gonna click here on this plus button and again it's gonna be a text module I'm gonna select that so now I'm going to add all my links so for Explorer I'm gonna start with gallery next I'm just gonna say adventures let's add case studies and careers right so now that I've added all my links I need to make sure that these are linked to the proper pages and so I'm gonna highlight this click on this chain icon and for now I'm just gonna add a blank link but in your case you want to add the link to the page that you need to add over here and I'm also gonna make sure that this opens in a new window and then click OK now you want to do the same to the rest of the links so now that all our links are added the next stage is to come over here to design text and then make sure you click the second tab because this is how we get in and customize these links so I'm gonna click here on the second tab make sure I change my font to Poppins so that we have consistency throughout our design and then over here the size I think I'm happy with the size but the next thing I'm only change is the color so I'm going to click here and just change my color to a slight gray like that and then finally I want to make sure that everything is positioned here so I'm gonna click on transform click on the second tab and then just drag this up until I'm happy with its positioning so I think I'm gonna go with -64 and then save now to save us time what I'm gonna do is I'm just gonna hold down my command key multi select copy this and then add it to the rest of the columns so that will save me a lot of time so I'm gonna hold on my command key now if you're on a PC its control but if you're on a Mac its command and then just click what you need to copy over ok right so I've selected everything here now the next command is going to be a copy and paste so to copy is command C and to paste it's ctrl V if you're on a PC it's ctrl-c and ctrl-v okay so I've hit control-c now I'm hitting ctrl V to paste so as you can see I've just quickly added all my information there so the next stage now is to just go in and rename these so for instead of Explorer I'm just gonna say visit us I'm gonna save it come over here to my text area and this time I'm gonna get rid of all this and add an address but the address I'm gonna add here is a random one okay I'm at Birmingham yet I'm gonna add a postcode okay so I've added my address there so what I'm gonna do now is to go into design click on text and just make sure that it matches the text that I have here so to do that I'm going to change my fonts here to Poppins and I think that looks okay save that now the next tab here is set to explore so we can change this to about us I'll save that and then I'm going to come over here and make some adjustments to the text in fact I've selected the wrong one here right so for the text here all you need to do is to replace that text and add the text for about us so we can say management and then this is just gonna be the about page okay so I'm pretty happy with that so the next stage now is to add or customize the final for the final column so I'm gonna save this one here now this is going to be our social media follow so I'm just going to replace this text and just call this follow or can you say follow us save that now instead of having this text module I'm just going to delete that click this plus button and this time we need our social media icons at my social follow so by default we have these two added in but we can always come here and add some more so I'm going to click this plus button here click the drop down for now I'm going to choose Instagram I'm going to click this black back arrow click the plus button and let's choose the next one here so this for this one here I'm gonna go with maybe YouTube okay and maybe let's have one more so I'm gonna click black okay and if you also want to rearrange these you can just click here and rearrange until you're happy with the way it looks all right so I'm just gonna leave it as it is and then I'm gonna come over here to design click on transform and then I'm going to reposition this so I'm gonna drag this up so I think I'm happy with that move it slightly to the left okay so I think that's positioned well now I can go in and save the next stage now is to add our section divider so let's go in here into my gear icon click on design dividers so we need to add this divider to the top so I'm gonna click here on none and then I'm going to choose my divider now notice that there's quite a lot to choose from you know there's all these different designs but for this option here I'm gonna go with this one right here okay so I'm pretty much happy with that you can also adjust the height here if you want but I'm just gonna keep this you know as subtle as possible and then if you want to let's say flip it you can always use that and then now it's flipped over here to towards the logo so it's it's up to you which way you want to have this so I'm gonna leave it as it is and then I'm going to save now I can see here that I need more padding so I'm just gonna click here and just drag and just add more padding that way right so the next stage now is to go in and just make sure that our row is slightly wider so to do that I'm going to come over here to my row settings click on design and then I am going to click on sizing custom width change this unit to percentage and then I'm just going to drag this down to about 70% and then I'm gonna save so I'm pretty much happy with that now if you want to make this global what you want to do is to come over here to this little arrow here click on it and then I'm going to say put to make sure you click on and make this item global select that and then save to the library so once this is saved you can actually delete this because we don't need this anymore it's already saved in the library so the next stage now is I want to show you how to change texts right here which say is designed by elegant themes powered by WordPress because ideally you want to have your own information on there so I'm gonna come over here to dashboard I'm going to discard an exit so I'm gonna come all the way here to customize click here on footer bottom bar so the bottom bar is where they say it's designed by elegant themes so I want to change that and say designed by Mac then I can just add the year 2019 so I'm gonna go ahead now and publish and now finally I want to show you how to add this footer to the rest of the pages on your website alright so with that I'm going to just close this so I'm gonna come over here to pages click on add new so I'm just gonna call this okay text to use Divi builder choose a premade layout now this is gonna save me a lot of time when it comes to designing a brand new page so I'm just gonna go here with an agency layout pack use this layout so this doesn't take a while to load this but while this is loading I just want to say that this is the best way to add photos onto your website and these footers are also very very flexible you can add more elements to them if you wanted to add say say a video onto it and just go ahead add a video to it and it will be updated on all the rest of footers and if you wanna add in an opt-in form you can always go in and add that opt-in form so now I'm just going to scroll all the way down until I get my section that I need so in fact I'm just gonna delete this one here and click this plus button and then I'm going to click on add from library and as you can see here footer 2 is there I'm going to click on it and then my footer has now been added okay so that's all you need to do to add the footer onto your website and also on the bottom here we can see it's nowadays designed by a Mac so now to just publish the page exit the visual builder in our list ik time quick look at this right so that's your custom footer it really looks nice so go ahead be creative with these footers now as I mentioned if you buy DV using my affiliate link I will give you access to my course which teaches you how to build websites using Divi alright guys thanks for watching don't forget to hit the subscribe and the bill notification because I constantly create these tutorials to help you become better designers take care see you in the next one

Channel: MAK

Views: 16,164

Keywords: divi 3.0 theme tutorial, WordPress website tutorial, wordpress footer tutorial, wordpress footer, wordpress footer edit, add copyright to wordpress footer, edit a wordpress footer, edit wordpress footer, how to change wordpress footer, footer, tutorial, wordpress, wordpress video tutorial, change a wordpress theme footer, create a footer in wordpress, elementor page builder tutorial, elementor tutorial, how to edit copyright in wordpress, how to edit footer in wordpress

Id: c40twkvRMTY

Length: 13min 48sec (828 seconds)

Published: Thu Apr 11 2019