How to create a Divi footer

in today's video i'm going to show you how to create a custom footer for your website coming up hello everyone and welcome in today's video i'm going to show you step by step how to create a custom footer for your website so when you first install divi this is the footer that you get and i'm sure you can agree with me that this needs a bit of work so at the end of this tutorial i'm going to show you how to transform this into something that looks like this so as you can see here we have our links here to all the pages on our site we also have this uh text here on the bottom of the footer and we also have a contact form which i pretty much went in and did a bit of styling so i show you step by step how to do this but before we get started i'd like to remind you that if you buy divi using my affiliate link you will get access to my web design formula course a course that teaches you how to design professional looking websites with divi all you have to do is to buy divi using my link in the video description below and by the way you also get 10 discount now once you've done that head over to funnels2incom.com and then send me a message on the bottom right you're going to see a chat bubble if you click on that send me your receipt and i'll give you access to the course all right guys without wasting a lot of time let's dive in and let me show you how to create this footer all right so the first thing we need to do is to head over here to divi and then click on theme builder so what we're going to do here is of course we're going to create the footer so you need to click here on add global footer so i'm going to click here and click on build global footer so this footer here is going to be applied pretty much across the whole website unless we disable it so i'm going to come over here and click start building and then i'm going to start with a single column and then here in this single column i am going to start by uh adding a text module and then click on text right so this text module here can be designed in such a way that i can allow any information that i need to pull dynamically so what we're going to do here is to click here on use dynamic content and then what we're going to do here is to look for site title so here is site title i'm going to select that and then i'm going to click here on this gear icon all right so i'm going to say copyright okay so so i've got my copy right there and then the next part here is going to be my site title which is experiments so my website is called experiments because i use this for uh pretty much experimenting with different plugins and different designs so you can see here it is pull that information which is great and then i can also add a year here and uh let's say 2020. now there is a different way where you can also pull this here dynamically but for this example i'm just going to add it this way okay so i'm going to say save changes great so now that we have this part of our website that is great all i have to do now is to go in and design it but right now i'm not designing this yet i'm just going to click here on save okay so that's our first item here so you can see this is its own section so what we're going to do now is to go in and give this a really dark color so i'm going to click here on a section settings and then i'm going to go to the background and just set this to black okay so that's going to be my very lower end of my footer right so now that i have this all set i'm going to come over here to design and then i'm going to click on spacing because here i just really need to minimize my size there at the top and the bottom so you can see i can just apply zero both to the top and the bottom there which is great and then pretty much i'm going to save right so now i'm going to go back in here and go to my row settings this time so in my row settings here i'm going to go to design spacing and again i'm going to remove the padding so now you can see it's all the way right at the top but as you can see it's a bit too much so what we're going to do here is we're just going to set a size let's try to in fact that's a bit too much okay so we're going to go with 1vw that looks great and what you may also want to do here is to just take a look at the three different views here so you can see the size is pretty much okay and on the phone it's it's okay as well all right great the next step now is just save and then go back over here to my text module because what i need to do here is to stylize my text because right now it doesn't look great it doesn't have a font on it so i'm going to come over here click on text and then i'm just going to change my font here to uh you know i like using pop-ins but you can use pretty much any font you want so i'm going to go ahead and choose that and then what i'm also going to do here is to change the color so what i usually do is i just click white and then go in and add some transparency to it so i just want to go all the way down here like that so you don't want this too bright by the way okay so i'm pretty much happy with that i'm gonna save this now the next step is to add another section so i'm gonna click here on this plus button and then click on a regular okay so i'm going to set this to a single column and in that first column i'm going to add an image so i'm going to search for my image module and select it all right so uh right now we have our image so we need to also pull this dynamically so i'm going to delete this click on this little icon and i'm going to set my site logo so right now we have the default divi logo but of course you can use whatever logo that you have on your site it'll pull it dynamically all right so what i'm going to do next is to come over here to design click on sizing and this is where you can adjust the width of this logo so you can see here the more i go really low it gets smaller and i'm also going to adjust my width here so let's go with seven percent and i would like this aligned to the left by the way so i think this is pretty much okay so i'm going to hit save and then the next step now is to give this a color so i'm going to click here on my section settings go to my background and this time i'm going to give this a slightly darker gray so i'm going to go with just about there 26 26 26 all right so that's looking great i'm going to save this now the next step now is to come over here to my row settings so here in this row settings i'm just going to duplicate this four times okay there we go and then what i'm going to do is i'm going to go into each and every every one of these columns and add my content right so i'm going to save this and then i'm going to come over here now now of course we don't logos going all the way so what we're going to do is we're going to go in here and add a text module so i'm going to go and search for my text module here so what i want to add here is just pretty much my pages on my site so i'm just going to call this our site or our company okay and then i'm just going to add some bullet points here for the rest of my pages i'm going to say home about us or just about services and contact all right so now that i have all these the next step now is to just make sure these are the right headings so this is going to be say heading to and the rest here is fine with the paragraph but what i'm going to do different here is to add urls to this so i'm going to click i'm going to highlight first and then click on this chain icon so this chain icon allows me to add my url now in this case i'm just going to add a blank one but in your case you want to make sure that these go to a specific page so i'm going to hit ok do the same for this one here click on this little chain add my url go to the next one click on the chain now as you can see all i'm doing here is adding these blank links but in your case you want to make sure you add proper links all right so now that we have this all set it's time now to stylize this so we're going to come over here to design so let's start here with our heading text so here is set at default let's set this to pop-ins and we're going to make this all caps and in fact you know what i always make this mistake you want to make sure you've got the right heading here so i'm going to click here on the second tab because we set this to heading 2 remember now there's also another way to make sure you're editing the right item and that is by hovering over here and clicking on this brush tool okay so just by clicking that it takes you to heading 2. all right so now i'm going to add my fonts i'm going to make it all caps and let's make this bold okay uh the size i think it's okay as it is the most important here is the color so again i'm going to add some transparency to this i'm gonna drag this down a little bit like that next we're gonna start working on our text here so let's change this to poppins right now let's go on the color and again for our color here i'm going to just add a bit of transparency to this okay so i think that looks okay what i'm going to do next here is i'm just going to reduce the line height so i'm going to come over here so at the moment we have one em so let's just reduce this a little bit so i think that looks okay and then we're going to save and then of course you want to get rid of that logo so what we're going to do now is let's say you have more information that needs to uh come over here in terms of text all you have to do is to just duplicate this and then just drag it over here on the third column and then we can go in and customize this so i'm just going to say terms and this could be our terms and conditions and then we want to just change this to terms and conditions okay now here on the about we can just say okay let's call this rules and regulations and then we have a privacy policy there we go so contact is just going to be deleted here we don't need that right so that's our terms i'm going to save this and then i'm just going to get rid of this as well okay there we go so now we have our terms we have this information here about the company now as you can see when we added all those columns our size here for our logo has been affected so i'm going to go back in and fix that by coming over here to design sizing and then we're just going to increase the size a little bit here and also fix our width usually i like having this the same size so let's head over here and just set this to 25 so now our logo is looking great so i'm going to save that and then finally over here i'm going to add a contact form so let's search for contact add it here right so here we're going to do a bit of work because uh we need to make sure that this looks great so let's do that so what i'm going to do now is to uh make sure that i have my fonts all in place i'm going to come over here to design fields and first of all fields background color let's remove the color here next we need to add a border to this so i'm going to come all the way down here until i find my border and it is right here okay great so we want our borders to be applied pretty much all the sides so i'm gonna set this to about two pixels now you can see everything is starting to show as soon as i've added that but our color here doesn't look great so i'm gonna go in and then add a bit of transparency to this again so first of all choose white and then just add the transparency so i'm gonna go with that very subtle by the way okay so that's looking great uh i may want to add some rounded corners here so let's go with about five just to clean it up a bit okay next we're going to come over here to our text and also set this to pop-ins okay so we're going to come over here set this to poppins okay so this capture font same thing we're going to come over here and set it to poppins there we go now i can see here we also need to work on our button so i'm going to come over here and activate use custom styles for button so here we are going to add our colors in fact you know what what looks great here is a solid color so let's go with a solid orange here for our color and then for our button text let's set this to white and see what that looks like i think that looks okay and then over here on the bottom width i'm going to reduce that to 0 and as you can see here our font doesn't look great it needs to be set to our custom font here which is pop-ins so that's looking okay and then we're gonna save now as i'm looking at this we can see here in fact you know what let's go ahead and delete this logo here right so as i'm looking at this we can see that things don't look really great because this form here looks very very small this is where now we can come over here and choose our column structure so at the moment here our column structure doesn't look right so we need to choose a column structure that works for our layout so what i'm gonna do is i'm just gonna go through and see which one works great here okay so the column structure we're gonna go with is this one here so i'm gonna go ahead and choose this column structure now as you can see things are looking much better now but you can play around with the different types here so you could try uh these two like that and have the form on the bottom so it's pretty much up to you how you want to have your column structure all right so this is the column structure we're going to go with and then over here now we want to go in and also add another text module and this text module here is just going to give us a title to that contact form so i'm going to go ahead and select that and then just say contact us next i'm going to come over here to design adding text oh in fact you know what we need to assign the text to heading two so let's go ahead and do that there we go so now it's assigned to heading two next we're gonna come over here to our heading text go to heading two set our font i'm going to make this bold and then we're also going to give this a color so i'm going to drag this down a little bit just to add some transparency to it and save so pretty much that's all i need to do to my text here i'm going to drag it up to the top right so now that we have this this is now looking great the next step now is to just come over here to our row settings and just click here on design sizing and just make this eighty percent make sure it's percentage so just gonna give this enough breathing space uh you may even go as high as ninety percent here if you want there we go and then save so this is now how our footer is looking next i'm just going to drag this up here so that my footer is above this black line so as you can see we've gone in and we've created a custom footer now this footer is going to be applied pretty much across the whole website so let's experiment and see if that's the case so i'm going to save this and then i'm just going to close out of this click on save changes right so now i'm going to open up a page on my site so i'm going to come over here to pages and then click on add new or in fact i can just go to all pages and take a look at the sample page so i'm going to open this in a new tab and of course you can see now we have our footer right here and it is looking great now if you need to make any changes to this footer all you have to do is to uh go back to your theme builder here so i'm going to click here on theme builder and just click back into here and then go and make you know further adjustments in here now let's say the width here is a bit too much so we can see here that this form here is taking a bit of space so to make a few adjustments you can just come back over here and then say okay you know what i want to change the column structure and then you can just click here and perhaps you can go with something a bit much better so let's try going back to what we had initially and we can see here that this looks slightly different now when we save this the changes will be applied pretty much across the whole website but you know what i really like what we had here so i'm just going to leave this as it is and then just save it but pretty much that is how you go in and make changes to your footer at any point the good thing is it gets applied pretty much across the whole website so go ahead try it out and see how it works out for you so that's all i have for you in today's video thank you very much for watching if you like this video don't forget to hit the subscribe and the thumbs up and also hit the bell notification because by doing that you'll be notified when i release new tutorials until next time thanks for watching and i'll see you in the next video take care

Channel: MAK

Views: 17,693

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, make online courses, online courses, online course tips

Id: ttW36mrbVso

Length: 16min 45sec (1005 seconds)

Published: Mon Aug 10 2020