How to Clone any Online Store with Divi and WooCommerce: Part 2 - Building the Footer

[Music] okay team take a deep breath i know this has been a ton of info so far last step here is to go ahead and build out the footer for our clone of the abercrombie and fetch site called divi engine and fitch now for in the back end of our site again we're gonna head back to divi theme boulder and we're going to add a global footer right here i'm going to say both global footer and that will fire up and we have our section ready to go and what we're going to do is we're going to add a call a nero and we're going to do the quarter quarter half layout which is this one so we'll click that and we need to change a few settings before we start adding modules so let's go ahead and open the section settings and we're going to go right into the background color now let's look at the abercrombie and fitch footer it's got this tan color at the bottom then it's got a bunch of its brands it's got a bunch of useful links and we're gonna do exactly that and then it's got this subscription form with their social media links and then a bottom bottom footer i guess and we'll add that in as well so let's go to the theme builder and let's start with that background color so open that up and add a background color and we have a tan saved as we did in the first installment of this tutorial series let's just match those up they look pretty good and go ahead and say that's cool and then we're just going to also change one more thing that padding is a little bit much on the bottom we want to just adjust that spacing to be zero you'll see why in a bit as we go through this because we're going to add another row a little bit later we just want things to be spaced appropriately so let's go to the row settings we're going to head to design and we're going to again play around with the sizing we want all the columns to be equal height we want the width to be 90 we want things wide but not all the way to the edge and then we want the max width to be the width of the screen so this combined with that is going to make it 90 of this is the maximum width it can be so that's cool so that's our settings for this module uh of this row so first module we'll add i have module on the brain we're going to add an image module and we want let's take a look here they've got the abercrombie and fitch logo there so we'll do the same divi engine and fetch so we're going to delete this out actually and we're going to use that data element again we're going to use the site logo there it goes that's a little bit large for our taste i think so we'll go to the design section can't really do much over here let's just double check no actually we can sizing we're going to say the max width for this um image is going to be 175 pixels boom that looks a lot more in in line with what they have on the abercrombie and fitch site and then what we're going to do next that's it for that i'm going to add a module below it we're going to add the divider module and that looks okay but we need to make some adjustments here so let's go ahead to the design section go to line the line color is not great we're going to add one with the color ccc ccc which is kind of like a gray color that's subtle enough to still show on the page um close that out we're going to go spacing we don't want it to have top margin so put zero no top padding we'll put zero and that's actually um oh you know what i'm putting in the wrong info here let's take that out and then come back to our text module we'll go into the settings or the image module i'm going to go to spacing and padding button should be zero and margin bottoms should be zero and there we go there that goes to be nice underneath our image right here go back here that's the same effect that they have achieved on that site great now we're going to go ahead and add all of these different brands that they have in the abercrombie and fetch site but first we put the heading for brands so let's go ahead and add a text module get in there and i'm going to say our brands so you can go ahead and list all of your brands over there for this we'll go to design and we want to use text in the light font because that's kind of like what they did on their end of the spectrum and we'll slightly bump the size of the text to be 16 and that is working nicely for me and let's take a look between the two that is working um this divider has a lot of bottom padding it seems like so let's just go into the spacing and see what that does oh it's not padding it's probably margin make that a zero there we go that looks better um okay so let's go ahead and add another text model because now we're actually going to get into doing the brands so um let's put add text module in here type in text go there and now you know you're gonna have to type in this stuff manually um we'll just say brand one and then we'll bold that up [Music] that looks pretty decent and let's see what else will we do we can change the font for each brand maybe we'll say this one's going to be abril um and let's just see what they did over here yeah so it looks like we need to change the padding that's right here underneath this so let's just save that oh it's actually margin i think we have established by this point margin bottom zero and then it bumps right up to be nice and cozy underneath there and then it's easy from here we just copy this but it oh no actually we won't i'll tell you why that padding button or the margin is just nasty so let's get that out of there spacing delete that margin and then we'll try that again this is how it goes guys you you're gonna try stuff you're gonna redo stuff 10 15 13 times who knows but you'll get there eventually as you go through this so i'm just gonna do of course brand two and you know i'm not really thinking about what fonts i'm using yeah i'm just putting stuff in to make them look a little bit differently but you will do whatever you feel is best for the image on your site and what you want to do maybe you don't want to have this section maybe you want something else there that's fine do what works for you um but we'll just continue on through this process of just you know creating the brand identity maybe you want logos there it's really up to you how you implement this this is you know mostly for demonstration purposes um to get your juices flowing and figuring out you know what might work for you so there we go okay so we've got four brands here now and now we're going to go over and add the useful links section that's going to go on the right hand side so let's go ahead and actually add another text module so we're going to go and add text and we're doing this a lot eh just stick with me we're almost there i promise you we're going to change this to useful links and i'm going to go to the text mode here and we want to give this kind of a little bit more of a prominence on the page so we're going to put this as a h4 tag and h4 and that closes the tag out and then we're just gonna also again put that padding or the margin for the bottom to be zero so spacing is zero and then we're gonna give it a little bit of top panning to be 10. let's see if that works yeah that that seems fine and we're gonna go close that out and now we're gonna use these our brands module and they are actually going to be our links on the bottom here so we copy that and then we paste the module here and i will copy this to be the various links for our page so we'll say link one oh that's a little out of order now isn't it there we go link one we'll have link two actually even what we can do we don't need four of these here what am i talking about let's just go in here we go to the visual boulder or the visual text editor i'm going to copy that i'm going to hold shift and enter that puts it on the next line link 2 shift enter copy paste link three shift enter shift v to paste on mac link four now you can go ahead and link these up you can just go on here you click the link button and then you'll put the url in there i'm not going to link them up right now but this is just to show you and give you a a concept of how you could add some useful links to the bottom of your page and uh you know we can even take a look on the front end to see if this has done anything but to do that of course we need to go out again and see save the changes here because we added the global footer and have the page refreshed and scrolling down we can now see our global footer right here it's not looking fantastic yet but you guys are getting the message about you know what you can do with this and and how to implement it differently i actually think i use the wrong color here let me inspect this and you can actually see how i go through doing that so here we're looking at the desktop footer click here and then here we see it's actually f6 f6 f6 is the background color used so i'll hop back here i'm going to edit the footer and you know i was thinking things look a little bit off that's what i get so edit the section background and instead of this code we go f6 f6 f6 that's our off-white color for reference and that actually looks a lot better to me um it's a little more subtle and not too much in your face so now we've got all this fun stuff going on over here we're gonna want to add um you know some different text like i said you can use the useful links section for that and you know once you link them up you might want to go ahead and change the link styles i'll as an example go ahead and add for the url here divi engine.com and i will show link one yada yada we'll put target as new window whatever um shift enter to bring that down to the next line so we've got this it looks blue you just go to the design tab you go to text and then you click this little link icon right here and i can go ahead and adjust the link color to be the same as the other ones that way it doesn't stand out as much you may get of course any color you want but this style i like to do it with you still have the reactiveness of it to be a link so that's good stuff and just for your reference if you want to do that as you go through this and once you obviously put a production site together you don't want to hook all this stuff up okay so let's go on to the next column we're going to copy useful links yet again just that text module we're going to put it here in the last column we're going to paste it in but this time we're going to call it subscribe because we're going to be adding a opt-in module here um for i used to subscribe to our newsletter we've got that there right below it we'll just add the op email opt-in module and it is not the most beautiful looking thing on earth out of the box so we're gonna be changing a lot of stuff here but first let's remove some things title we don't want the button we're going to have say join because that's what these guys did here they've got join right there my capitalization is a little messed up so let's just go back and fix that the body we don't need then it's got all these extra fields so let's get rid of that so if you scroll down go to fields disable and disable and lastly background i'll delete that color out of there and now we've got something that yeah very loosely resembles this but we're going to make that look much better here in a second as we go through this process so we've disabled all the fields backgrounds gone and now we're gonna quickly change the fields here to just change the margin and we're gonna change the right margin to be zero pixels and you'll see in a second why we do that we don't want rounded corners so if we scroll down a little bit more we're gonna change this three pixel to be zero and the button we're going to need to modify a bit we're going to open that up then we'll say custom styles for the button our text color will be white and then the background color will be our dark blue color that we enjoy so much and we're going to add some padding to the top and bottom padding maybe 12 pixels um let's find the padding here oh we don't want an icon to be on there whatsoever and then here we go top and bottom padding we are going to do 12 oops that's 13 and then link those up that makes it the same height as the actual field right there and what we're going to do in a second is we're going to add some code to move this input box for the email next to the join button so the last thing we need to do though is to just go to the spacing and we don't want any margin on the bottom just because you'll we'll be adding some social media icons in a second and um we're going to add some code now so let's go and add code snippet number 12 if you can believe it or not this is just going so far with all this fun stuff and we're going to be adding this in the theme options again so copy snippet number 12 from the blog post and you'll see automatically how things change so back here i just copied the code paste it in and then we'll save this and then when i come here nothing would have happened but let's save it refresh the page and now when we go in the button should be right next to the input field and there it is that looks fantastic now i can see here that my input field and my button is a little bit different so if that happens to you you need to go back into the settings design and when you go to your button you might have to play with this value a little bit for the padding of the button so let's maybe make that 10 and there you see with 10 that is equally sized and that looks much better um on the on the actual site so now another thing that you're going to need to do in a step that's not mentioned here in too much detail just yet is because this is a whole different tutorial that we can do is email account so you'll have your said service provider for your email capturing and your content marketing and that type of stuff so this is where you'll link all that stuff up it comes with a bunch of different options for you to use it's up to you which one you choose and the only caveat with this is you'll see see this right now if i go to the front end of the site it's going to load up but you'll see that the actual form is not here and the reason for that is because you need to have that account linked up to be shown here luckily elegant themes does a great job of giving us the ability to see what it would look like if that was linked up but just for your knowledge you're not going to see it on the front end unless you have one of those options linked up okay so guys you're ready we are on to the second to last step let's go and add the social media follow module there we go we've got a bunch of icons here right now what we need to do and what you would do realistically is we'll well actually let's delete everything well these ones out let's go into facebook and we're going to be changing the actual icon color to be our blue we're going to change the background by the color to be nothing and then we just left with this one if we look at abercrombie and pitch it's kind of like what they did coming back here and of course what you would also do is you would link it up to your actual website social media setup but but for this right now this is how we're going to do it we'd go back here and then what you would ideally do you would add in all your different icons so maybe for this one we'll say that it's twitter go back for this one we'll say it's uh insta we'll go back this one will be let's go old school myspace and then for the last one we'll go ahead and we'll say well check out our youtube but the icons on center they don't look that great just yet but i'm going to show you how to go ahead and do that relatively easy the only thing we need to do here is go to the advanced tab and then we'll go ahead and copy snippet number 13. so what we're going to do is we're going to copy this code into each icon or into each of the social media networks custom css or paste it here and then we'll go back second one go to custom css put that in there go back next one advanced custom css put that in there back myspace for the when put that in there and then last one youtube advanced custom css and paste that in there and there you go now you see these icons all kind of spaced out evenly okay so the last thing to do here to line this up perfectly is just go to design alignment and center them and there we go we are just about there with this last thing is just add this bottom bar so let's go back here and then all we need to do here is add a single column row so and then we will put a divider in there and this divider we are going to have to put at we'll put the line color to be our um off gray not not the off gray sorry the ccc color that grayish color and then we want to make sure that it goes full width and the way we do that is we go into this new row that we created design sizing [Music] we don't need to mess with the column heights we're going to go 90 percent as we have before and then just expand this and then you'll see that it covers the entire span here and then that'll be all set next up we need to just add a text module oh if sometimes if you get into the situation with divi doesn't let you click on the thing you want to all you need to do is expand this on the bottom go to module view and then you can just type in text right there and then from here you can just go back to the full view and then you can start adding stuff now we added things to our bottom boy here like privacy oh that's not very good writing privacy and then we add the the pipe which is just next to your enter key usually we'll say cell terms another pipe and then we'll say return policy and you know this is just another good spot for you to add any like useful links for your site now sitemap of course is good for search engines to index your site and we'll go to design and they used kind of a light smaller text here so what we'll do is we'll say text or use the light version and the the font size i think i'm okay with all we need to do though still here there's a lot of space up here this divider probably has either some padding or margin yeah with some margin and you just save that and then that has your links right down here now similar to our useful links up here you could potentially go ahead and add the links to all of these we're going to cover the privacy policy later in the series probably in the bonus section but it's good to know that this is a spot we can list all that fun stuff so go ahead and save that and you'll see that you know it is very reminiscent of what we created here on the actual abercrombie and fitch site we'll refresh this we'll scroll down and you know as mentioned before the actual opt-in form one show unless you have one of those um email service providers attached but we've got our social media links right here and yeah man so this is our footer for the site we're going to be covering a lot more stuff coming up but this is it for this installment of how to clone any online store with divi and woocommerce brought to you by the divi engine team and we are super excited to keep delving into this with you thank you so much for watching stick with us i know this is a lot of information we'll see what we can do about bringing these the endurances of these a little bit down so that they're a little bit more digestible for you guys but definitely let us know what you think and definitely subscribe to the channel to make sure you don't miss anything in the coming sections thank you so much for watching guys i'll catch you guys and part three coming up next week

Channel: Divi Engine

Views: 235

Keywords: Divi, WooCommerce, Divi Engine, Online Store, Tutorial, How to, WooCommerce Course, Divi Course, Clone a Store

Id: gNfeUW3EPTo

Length: 26min 8sec (1568 seconds)

Published: Tue Nov 16 2021