Divi theme builder footer design - Design Awesome Footers

a footer is important on any website because it contains links that may not be able to fit on your main header in today's video i'm going to show you how to design a dv theme footer step by step using the divi theme builder now 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 advanced web design course a course that teaches you how to design websites step by step from scratch even if you're a beginner so without wasting a lot of time let's dive in and let's get started all right so i'm logged into my wordpress admin dashboard and i've already gone ahead and installed divi so what you want to do is to go all the way down here to divi and then click on theme builder now the reason why we're building this footer right in the theme builder is because we want a footer that is pretty much consistent throughout the whole website this cannot be achieved if we design the footer for each page so this is where the theme builder comes in all right so now that we're here in the theme builder we want to come here and add a global footer so i'm going to click here on add global footer and i'm going to build it from scratch i'm going to click here on start building and i'm going to start here with a single column and in that column i'm going to add a text module and i'm going to give this now a title so let's say this could be about us and i'm just going to highlight this and make this heading 2 and then save alright so the next step now is to go in and add our background color for our footer so i'm going to click here on my section settings click on background and i am going to add my color so you can add whatever color you want that works well with your website so i'm going to go ahead and select my color here and i'm just going to make this darker in fact you know what i prefer this color here but there we go all right so now that i have my color i can now start designing around it so the next step now is to come over here to design i need to give this some breathing space so i'm going to come to spacing and give this a padding of 7vw and i'm going to apply this both to the top and the bottom as well and then save now i also need to add another one so i'm going to click here on add new section click on regular and this is also going to be a single column and uh in this single column i'm going to add a text module and then i'm just going to say designed by mac now i really like this centered so i'm just going to highlight it and just center it like that again i'm going to save and i'm going to come back here and give this a background color this time i am going to make this black so i'm going to click here to add my color just going to select my color like that now if you don't prefer black you can play around with different colors next i'm going to come over here to design spacing and i'm going to add one vw and i'm going to add this both to the top and the bottom now i can see here there's still a bit too much space so i'm going to change this to 0.5 and then save right so let's do some work here now on our footer so back over here i'm going to go into my text module and i'm going to start to add some links here so our first link here is going to be our story so i think this works i have added our story faq and sponsors so these are pages that should be on the actual website or even external web pages okay so what i need to do next now is to make sure these are links so i'm going to highlight our story click on this chain icon now for now i'm just going to add some dummy links so i'm going to say okay do the same to faq now in your case make sure you're adding links that link to pages so this is my final one excellent so now that we have all our links here it's time now to customize this and make them look really nice so i'm going to start here with about us so i'm going to start off by changing my font here to pop ins and i'm also going to change my color here so i'm going to come over here and just make sure i have the exact color that i want so i'm just dragging here and i think i'll go with that color and for my links i am also going to change my color here so i'm going to go with in fact you know what why not use the color palette okay so i think i'm going to go with that next i'm also going to uh change my font so i'm going to change this to poppins and then i'm going to come over here to line height and i'm going to go with 0.5 on the line height so so far i really like how this is looking so i'm going to keep things very simple here i'm now going to save this now what i'm going to do next is to come over here now to my rows so i'm going to click on my row settings and i'm going to duplicate this a few times so i'm going to go in and do it about twice so we have four columns like that now if you want you can just go with three columns but i prefer to go with four and what i'm going to do now is in the third column i'm going to go in and add some social media follow icons right so i'm going to save that and then i'm going to change this here to follow us so i'm going to delete all this so that's all i'm going to do here save then i'm going to hover over here and add another module so this time this is going to be our social media follow i'm going to select that so far we have two but before i add more i want to make sure that uh all my social media icons here are the color that i want them to be so i'm going to start here with facebook so i'm going to do i'm going to right click and say reset item styles now i'm not sure if you notice that but the background now is gone and then over here on design i can go to my icon here and add the color so i'm gonna go with that for my icon colors but if you want a different color you can use these different colors over here all right so now that i have this i'm going to come back over here to content now make sure that this is going to link to your social media profile page so i'm gonna come over here and add a blank link so in your case you need to make sure this is your facebook page all right so now that i have that i'm just gonna go back i'm gonna delete this one here and duplicate this a few times and then i'm just gonna go in and change my social media platform here from facebook to but this one here is going to be instagram now i noticed now that i have the background here as well anyway we're going to fix that in a moment so here i'm going to add my blank link go back right click and reset item styles now that removes that background okay so let's go into the next one here so this one here is going to be say youtube and again i'm going to link this to my blank link but in your case you need to link to youtube right click reset item styles move on to the final one and this one here is going to be twitter again i'm gonna add my blank link come back over here right click reset item styles now let's say you want to change all of these uh into a specific color so rather than going into each one of these i'm going to come over here to design icon and this is where you can make your change so you see just by doing that this has updated my colors and you can choose which color you want to use over here actually you know what i kind of like that but let's go back to our color that we had earlier and we're going to keep it like that alright so now that we have our social media follow let's take a look here and see how we can add something different over here all right so we're going to save this and we're going to click here on this gear icon and say our company so this is where we're going to add our address so i've just entered here a fake address in birmingham and a fake postcode and now it's time to stylize this text by coming over here now to design i'm going to click here on this paintbrush icon and let's choose our font and this time it's going to be poppins and we are also going to make this bold in fact you know what let's make it semi-bold there we go now it's time to add our color so i'm just going to go to my recent colors here and choose a color that works well with this so i'm going to go with this i'm going to save that now we have these two similar columns so in one of these we can change this to something else so let's change this to our terms and then for instead of saying our story we're going to say privacy policy so here i've added privacy policy terms and conditions and disclaimer so that's looking great i'm going to now to save this next we're going to come over here to the bottom here and make some changes to this so first of all i'm going to go into my row settings go into design spacing and remove my padding here in fact i may just add say 10 pixels yeah i think that looks great now i can save this and then finally i am going to go into my text module here and give this my desired color and also the customization to this text so i'm going to come over here to design text change this to pop-ins just to make sure everything is consistent here and then i am going to come over here to my colors and for the colors this does not really need to be way too bright so i think this color here will work very well for our final footer here at the bottom now if you want you can also add a year over here now one quick way you could do this is coming back over here to content and now on the text here you can make this dynamic text and we can say current date and we can also customize this by the way so if i come over here to custom i can just add my year so now this year is going to be updated dynamically so you don't have to go into the footer after every year to update it this is going to show your current year now before this we can add our add sign and then after we can say designed by mac studios i'm going to save that and we can either leave this on the left here or we can center it by coming over here to text scroll down and center it like that now we're going to go ahead and save so this is how we had our footer in the beginning so when we come over here now and save this in fact we need to click on these three little dots and then all the way to the right here you need to click on save you can close here and then click on save changes now when i visit my site in fact i'm going to open this in a new tab so we can see a before and after when i scroll all the way down now you can see that we have our beautiful footer and this is what we had before now you're wondering how this may look on mobile devices let me show you how this would look so i am going to go back into my builder here click on these three little dots and then i am just going to go into my tablet view here and then you can see everything is divided into four which is fantastic now if you want you can play around with the slider here just to see how this would look like so this is what it would look like on a mobile phone and again these are all in a single column which i think is great and as soon as it reaches a break point it then separates now into these equal columns and there we go so it looks really nice on different mobile screens now if you want you can save this export it and then use it on another website and this is the beauty of using our theme builder all right guys that's all i have for you today's video thank you very much for watching don't forget to hit the subscribe and bell notification by doing so 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: 3,947

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: bAT-PYl2TgY

Length: 12min 31sec (751 seconds)

Published: Thu May 20 2021