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

yo what's up guys welcome to the second installment of a black friday how to clone any online store tutorial series here from the team at divi engine my name is roby and i'm going to walk you through the second installment where we're going to actually start building out those pages that are heavily inspired by the abercrombie and fidget website looking on the page here you'll see the basic layout of the abercrombie and fitch homepage and then we'll see what we're going to be building is this site right here that draws heavy inspiration we've got our top products up here and then the various categories for men and women shopping and we're going to be building out this global footer here we're going to build the global header and then we're going to build out the body so strap on in and if you guys haven't done the previous installment part one where we cover installing and configuring woocommerce definitely go back and do that first unless you already had it configured so without further ado let's get started all right folks so last time where we left off i left you with this pretty uninspiring landing page but as i told you guys back then this is just to put in something so that we can set the landing page which we're going to be editing in this installment of the tutorial series so what we're going to do is we're going to hop into the back end of our site right here and then what we need to do is we go to pages we'll look at all pages and then we see the home page here that we created before we're going to hit edit right next to that button okay so divi's popped up here with our pretty ugly design we're gonna go ahead and enable the visual builder and now what i'm gonna do is i am going to actually delete this slider out of here and we're going to start putting in some settings now when we look at the abercrombie and fitch site here it's got this tan background and this orange text and all that fun stuff we've got this image slider effect going on now we already looked into what the colors were we did that by inspecting the page and there's also various chrome plugins you can utilize that can pick colors off a page so that simplifies your life with that um so hopping back here to the back end we're going to go ahead and set the section settings we need to change the background color and we're going to select our tan color here and you'll see that that matches up with the tan color he used right there and then what we need to do is we're going to change some padding settings here as well so we just go to the design tab spacing and we're just going to set all the padding to zero and we'll just hook them up like so and then save that and now what we're going to do we're going to set up our columns so that it fills the right amount of space open that up we're going to actually add a second column and now you can see we've got our two columns there just gonna go back real quick evenly spaced and you can double check that if you just come here it'll show you which type of column layout you have we've got the two equally spaced columns and we're going to go back into the settings we'll go to design we're going to take a look at the sizing and then what we want to do is want to set the columns to equal heights and then we're going to set the width to 90 and the max width we're going to max that out to 2560 for my screen and that would be it for right now now we're gonna go ahead and add a slider back and so let's just click on the plus we'll type slider and we can drop that right in there and for our purposes here we're gonna be using about three different slides now i pulled some images from pixels you can pull them from wherever but that's what we'll do in this portion of the video okay so we've in our slider here we have three slides like i said we're going to copy one of these ones here and what we're going to do is we're going to go into each slide first so what we're going to do oh first thing actually i'm getting ahead of myself we're going to turn off all the controls in the slide so now it's just a blank slide that you see over there and then what we're going to want to do is we're going to turn on design and then animation and we're just going to turn on automatic animation and then we're going to set that speed to 2000 milliseconds which just basically means it'll change the slide every two seconds if we go over to padding where's my spacing there we go in spacing what we're gonna do is we're just gonna set all the padding to zero for the slider so we're gonna go 0 link it up 0 link it up and now all the padding is gone and you'll see why we do that in just a moment now the way that we are going to be able to get all the slides to work together is we need to go add our images to all of the slides but the first thing we do is we're going to delete this out the title we're going to delete the button text there goes our button for this slide and we're going to delete out the content now one thing actually that will make this a little bit easier and i skipped that is just to go back here and let's just go ahead and delete these are the two and now we will copy them now what it does it just just basically sets all of that that up for us ahead of time and i'm going to go to text here at the top now this is important step now what you're going to want to do is um all the images will be linked in the the text version of this blog post on the site um but you're going to want to go to the back end here i'm going to go to my media you can see i've got my images uploaded here already these are my three slides so you're going to need the url for each of these you're just going to sew say your copy url to clipboard you'll come back and you're going to write an image tag just do that by writing img src equals password 3 and then close that out paste the url and there you see the image on the page you just need to close that and then that's all set now you're going to repeat this for each image and for each slide so for so that's slide one so we go to slide two same thing we're on text already we'll hop back here to a media library we can close that out next image copy url come back and we'll go img src equals that all fun thing and that will be good as well src that looks good to me and say okay and then lastly for the last one oops wrong way this is where we want to be get this one copy the url to clipboard and we'll just img src equals boom okay so all of our images are in here and it's got this weird animation going from the left side um one other thing we just want to do also is we're going to come down here say background is deleted okay that's good let's make sure that's transparent and then also just for each slide well that seemed to have taken care of that other issue great okay so now we see that the sliding is happening it's sliding up we don't really want that so what we're gonna do is that we're gonna add an animation that makes it slide from right to left and that's actually super easy to do um all you need to do is go to the text blog post and in that post you're going to find code snippet one and what you're going to do is you're just going to copy that and you're going to edit the slider again oh come on yeah devi is funny like that sometimes when you're already in it it doesn't let you get into the settings it's a real pain but that's fine so we go to the advanced tab custom css and you'll copy that one line of css and if you want you can copy the comment too if you want to make sure you know what it does and then what you do is all you do is you just go to the slide animation bit and it's going to be for the slide description since we're putting it in the text and now you see that it's pulling in right to left and this is just one of the bolt and divi animations that are included so super easy to do and you know as you can see it's got a dramatic effect on what we're doing here so that's kind of cool and i hope you guys are still with me there's about 13 snippets in this bit so we get down and dirty with some code and it makes us do some pretty cool stuff not natively possible in divi so just bear with me we're gonna have some fun doing this so let's continue building out this left portion of the screen here we're going to add three text modules for these three lines of text and then what we're going to do is we're going to add two buttons and add some code to put them next to each other like that so let's get back to the back end here and we're going to go ahead and add a text module so we're just going to put text and find that one i'm going to drop it in and then all we need to do is go ahead and delete the content that's there and we're going to put in the new and if i drag this over you'll see that it's up here very uninspiring still for the time being but we're gonna fix that we're gonna go to design text and then for the font we're gonna use our poppins font and the reason it's not hitting with the poppins font automatically here is because we're not using a heading tag because pop-ins only goes to the headings so we just manually selected it which is fine we're going to give it the text color of orange and then that's a little tiny so we're gonna make it 38. good that's looking a little bit better nice and big and then simply we'll just add another text module text and you can put whatever you like but we are gonna go with the divi collection as a h2 tag so we're gonna say the divi oh we're in the visual boulder here or the visual text editor we're going to go to this one just so that we can input the html for that headed h2 tag just divi engine collection there you go even us pros make mistakes sometimes it's uh part of part of the learning here um okay so we've got that we're gonna go over to the design tab i'm gonna go to h2 and you'll see that it automatically inputted the poppins default font for our heading but we want to make this ultra bold and we're going to make it also have that oh actually what we need to do is we need to select the h2 because if you change h1 it's going to change the h1 we don't have a h1 so h2 ultra bold and there you see it pops in we're going to select the orange color again and now we want the text nice and big so we're going to go with 52 that looks good to me and that is the end of that one and now we just need to put in the next text module for the last line here so text i'm going to delete this content out and we are going to type in just if i can type just in time for black friday great we're going to make some changes to this text also this is just plain text so we just go to the text section i want this to be light so it kind of offsets that the new divi collection which we of course want to be the emphasized part we need to set it to our orange color from our palette that we said earlier in the previous installment of the tutorial series and we'll just change the text to about 21 as not to overshadow the rest of the stuff on the page now when we look at the abercrombie and fitch site it's nice in the middle of the column and unfortunately divi doesn't give you a native way of aligning this right in the middle so we're going to have to do some more code magic and that will take us to snippet number two now the way that we add this snippet is we need to go to the columns and what we're essentially going to do is we're going to put these two three modules and the other modules that we'll be adding after this to the center vertically of the column so we go into the row settings and since we're working with column one which is where the text modules live we'll go into the settings for that one and we'll go to advanced and then custom css and then what you do from the blog post you're gonna pull snippet number two i'm copying and pasting it as we speak i'm gonna be putting it on the main element so when i pop that in there it says align self and what it does it does it in the center spot of the allotted space and that looks fantastic already so that is good stuff so now let's take a look here we need to add these two buttons so let's do that and we will go ahead and hover here we're going to add a button bam there is one button now we see that it's not the orange coloring and the size and all that fun stuff that we'd like so we'll come back and then the first one is gonna say shop woman's we're going to put the ladies first for a change shop woman's and we will actually change the url here to our category for women's now easy way to find that we'll go back to the back end here we're done with these images and if you recall in the one of the previous steps we set up some product categories on the part one video and you can get that url just by right-clicking view on women here and you're just going to copy the link address you'll come back here and then you'll put in that button link url now i'm going to delete this first part because that lets this product character category live relative within adobe install and that will be good for the button url now what we need to do also since we're going to customize the default style for the button here so we're going to go to design and button we're going to say use custom styles for button oh that was a little fast and then we want to go ahead and change the margin left oh actually before we do that let's fix the color first you see when we do orange immediately goes there adds the orange but there's some stuff still that we want to change so we're going to change that we're going to change the button hover background to orange so we're going to click that hover icon make sure that it's on hover and then we'll select orange so you'll see when we hover it now we'll need to click out of that first let's do that now when we hover it it goes orange but we also need to change that text to now be white when we hover it otherwise orange on orange makes it invisible so just going back to button here we selected our text color we're going to do the same we're going to select the hover icon we're going to select the white oh no not yet roll that back we are going to set that as orange at first and then when we hover it we'll set it to white that's fantastic and then the icon snuck in there so we'll just scroll down and make sure that the icon is switched off click ok with that and there we go that's looking great already now let's compare the size of the buttons here and that that's pretty comparable maybe we want to take the text down just a notch so let's just go back in here design button and then the button text size is gonna be governing the the size of you know the actual button so we're going to maybe make that 16 and then we want to do one more thing we're going to add a snippet here which is going to make the button nice and wide as with this one right here on the abercrombie and fitch site so to do that we go to button or the actual snippet number three which is just going to set the width of the button and also just align the text in the middle so we're going to go to advanced in the bottom settings custom css main element and then when we add that in you see boom it's looking great so far we've got our snippet right in here and we are happy with that so far now next up we'll just duplicate this button to save ourselves some time we're going to edit it of course we want to change this to shop men's we're going to alter the url now again if we go look here we see that the url if you look at the bottom bar there it's men so we'll just come back here delete the w oh we're going to keep all that relative in the same window that's fine and we'll head to design there's really nothing to do there and margin left on hover yeah we'll add that in a second so there we go but now we're stuck with two buttons that are above each other and david doesn't really allow you to put two buttons right next to each other so what we need to do is that we need to go add some code to the theme options are gonna make these buttons end up in line so let's go to the back end of our site again we're going to go to divi and then theme options when you're on this page you'll scroll down and you see the custom css this is where you add any custom code that applies to a more global scale on your site so we have to add snippet number four and we will just go and copy that code and i will paste that in there and you'll see that it's commented with snippet number four and it tells you what it does and what we're doing is we're creating a class called d e inline buttons and we're going to make those buttons display inline block now if i save that and i come over here and let's just save this page really quick i'll take a moment okay then go back to the front end and refresh and we'll see that we already have a pretty cool site that has a much nicer header than it did before but our buttons are still here so we need to do one more step in this process which is to come back to the back end all we need to do is go on this column settings i'm going to go advanced css id and classes and then what we're going to do is we're going to take this class that we created the de inline buttons select that i'm going to copy that i'm gonna come back here and in the classes here and let me actually put this on visual scroll down a bit we're gonna hit ahead and paste that in and immediately you see the buttons pop right next to each other but there's still something wrong abercrombie and fitch's got a little gap there so we're gonna want to go ahead and add that gap and that's super easy to do we'll just save that really and go to the second button the shop men's one i'm gonna go to design we're gonna go to spacing and now all we need to do is add a little bit of left margin and i think 25 pixels is pretty good and then you see it created the space for us these buttons on top of each other any longer and it looks great now let's take a look at what that looks like responsibly and yeah okay well that's a little weird that they're off but that's because that second button still has the 25 pixels regardless of what device you're browsing on on tablets they still there's enough space they go next to each other but on a cell phone it's gonna look weird so we're gonna edit that button we're gonna go to design we're gonna go to spacing and then we're gonna go to the device responsive settings now all we need to do is make sure that it's on cell phone and put in zero pixels and it'll pop right in there and it looks great now and if we go to mobile tablet and desktop everything looks fantastic awesomeness and that's it we just bought that header and it didn't take us that long it looks fantastic so let's go and move on to this section where they've got some products um looks like we need to put in another text model here for this new arrival section and then we need to add a maybe a shop module that adds these items on the page so coming back we'll go ahead and just add a new section so regular section it will have one column and then what we need to do is just change some of the section settings before we add the row in there um i don't add a default row anyway we're going to go to design we're going to go to spacing you'll see that we do stuff for spacing a lot then it's just to get the spacing correct with you know between different sections and and and so forth so we're just gonna put some bottom margin at zero and we put the padding bottom at zero as well you'll see the page kind of jumped up there a little bit when we did that that's just indicating that we removed that padding i already created a single row column for us which is exactly what we wanted and all we'll do is we're going to drop a text module in there again yeah there we go and then for the text it's just going to be new arrivals we'll add this longer dash and then we'll say see what is hot i'm no fashionista but that works for me actually if i go and delete this out and i do one two three four it should make it a fun straight line but it didn't but that's okay that's not the worst of our worries we're gonna go ahead and bold this first portion and then we'll italicize that on the right gives it a nice little contrast there looks kind of great um so what next we're gonna go to design text and then we're going to bold the text and what we'll do also is go ahead and just increase the size of it a bit to about 44 pixels there we go and we will go ahead and also make sure that it's centered on the page by centering it right here let me see if i can do something about this text right here here it looks great up here something funky is happening let me see if i can unbold this text strong oh maybe you know what i'm going to do is i'm going to take the balding out here and i think that will fix what we're seeing on the front end so maybe if i just go light here there we go that's what i wanted that looks much better um you can add a symbol code for this dash in the middle i'm not to worry about it right now but you know if it's really bothering you that's something you can certainly do and that's it for this part so let's add another single column row because we need to add our shop module now that's going to have these four columns with the newest arrival so i'm going to come back here and add that in let's quickly just change some of the sizing settings on here let's go ahead and go to design here sizing we want a custom gutter because we're going to want some space between the items you know in the various columns that we're going to be creating we're going to set the width to 100 percent we're going to drag this over to be 2560 and that should do it for this and then we can just go ahead and add the shop module in by typing shop quickly it'll drop a bunch of products on the page there but that's a lot of stuff we just want four products great i'm going to only select the latest products because this is looking at the new arrival so let's see what the newest items are in our store that looks good and then as far as the column layout and so forth goes that stays at defaults but we are going to go over to the design settings because this overlay is not something really we really love we're going to take the icon and make that invisible so now there's no icon and then the overly background color we do like the white but we are just going to lighten that up a little bit so we'll select the white will bump it down to about 20 percent opacity there we go now when we hover it just gives that very subtle indication that we're actually hovering over this so that is that little bit right there now what we also want to do is that we want to remove some of the margin here at the bottom of the page and we need to remove these various elements and then there will also be a little artifact here when we remove all these elements so that's also pretty easy to do but those are going to be labeled snippets five six and seven in the article and they're relatively easy to add so not too much work to do here all we need to do is go into the shop module settings and go to advanced custom css and you'll see that there's a in snippet number five which is just removing the margin on the bottom we'll just apply that to the product and you'll see this bumped up immediately as soon as we did that and then what we need to do to remove these various titles we're going to add a display none css portion on all those items so we're going to be applying that let's start from the top here oh what did i do oh that just needs to be deleted out it's not happy with that code that should be good we're gonna take away this on sale we're gonna be taking away not the image but the overlays fine title that takes the title out if you have ratings this will take the ratings out this will take the star rating out this will take the price out we want to make sure the old price is out in case that was there and save that now you still see this little artifact that's right there that's at the bottom we need to add some css on a different spot for that but we've already been there you can either do that in the theme options but i'm going to show you another way right now which is as simple as just adding a code module and within that code module but let's add it really quick code there we go we're going to paste snippet number seven so pasting that in there and you see that artifact immediately disappeared and all it's doing it's targeting the price it's artifact from the price and just adding that display none to it also and then you're good to go super quick you added the products right on there that was so easy okay so let's look what's next so we've got these oh we are missing some buttons aren't we so why don't we go ahead and add some buttons and we can do this super easily by just going and copying buttons we already made so let's go ahead and copy the one from the header copy module come back down and these buttons can't really live in the same space as where our little shop module is at the moment what we need to do is add a new two column row so let's go ahead and do that two columns and then we'll just change one column setting which is going to be relating to the padding and we'll go in here and we'll say spacing and all we're going to do is put the padding for the top so those buttons are nice and snug to the shop at zero pixels and that's the only setting you need to do okay well there's another way around this just copy it this way pull it down pull it down and then drop it in that first column and copy this one because that one had some of that padding in there still we don't want it to mess stuff up and we'll place it as so now we're going to want to make this full width as we have done with the the shot module above and the row that contains it and the reason is is to have these buttons be in the center of that space so we're just going to bump up the width to 100 make that 100 or 2560 save that and then when you go into the button settings design or alignment you can center it easy as that and for this one again we just need to change this to say mens and fix the link that just goes to category men oh of course forgot one important step design line center great we do need to make some changes to the coloring because we've got the cool blue color here we're going to go to design store button we're going to turn off the custom design styles there we go um you know and i'm noticing that the text here is getting rather large i'm going to change the default text size for the buttons in a second here so just go back here design button switch this off and save that let's quickly save the page we'll look at what it looks like on the front end as well okay let's refresh it and there we go these look great these look great but they can be a little smaller so let's just go to the theme customizer so just up here you go theme customizer and we'll access the buttons here and just give it a second to load buttons let's come down here just so we can see what we're doing button style and then in here we're going to change the text size to be 16 and all the buttons are the same exact size we'll publish that and we'll exit thinking about it and there we go okay we are good to continue forth with okay so let's take a look and see what is going on in the next part here so next up they've got two really nice big images with some marketing copy here and then again they want you to go shopping so they are pushing for the category buttons that we already have on our page so let's go back we'll add or go into the visual builder go down and we'll add another section so add section regular and then what we want to do is we're going to add a two column row and then we'll change some of the settings so the first setting that we'll tackle here is the sizing um get out of that so row settings design sizing and what we'll do is we're going to go ahead and change the gutter width to yes we'll change it to two because we'll still want it to maintain some of the spacing between the images and we'll equalize column heights for good measure and then we'll just say have this be 90 percent and then again we're just going to drag this all the way over to the right so it takes up all the real estate on the screen [Music] and then we say yeah buddy we like that and now next up we need these images we're ready for the content that goes in these columns so all we do is we add an image module drop that in there and what we are going to do is select our images that we have already uploaded to our site now what you can do is of course use your own images or you can use the ones in the blog post it's up to you guys what you do so we're going to put a lady for the first one since that is for the ladies we'll update that and we have that in there now and go for image number two type an image image select our gentleman upload and that is looking good now it seems like we've got a little bit of a padding issue here when we look at this one this is a little bit actually you know it's not too different i'm actually i'm happy with that i was about to change some of the padding settings but it doesn't seem like we need to if it bothers you of course go ahead and add that in there if uh you know it's better that you're happy with what you're doing um okay so we need to add some text below these and we're just gonna go save ourselves some time select this new arrivals we're gonna copy the module and hopefully this works this time tv is a fickle fickle beast um yeah it's still not giving me the options here we go copy drag it down and right below our image and it feels like it wants to give us the opportunity there we go we've got our new arrivals in there and we're gonna go start changing the copy and add some padding to it so i decided with going with some fun copy that says women are from venus women are from venus because the ladies are more important oh and before we go on let's just add a little bit more spacing here add some top padding this makes it not sit as much on it as you can see these guys did the same thing with their copy it's not sitting right on top of that so it just looks a bit better and what was the style they did they've got that lighter text what we did in our final version was to have some italicized text so all we're going to do is we're going to copy this one drag it on over and then as you guessed it us men are from mars and i'm just gonna take that bolding off italicize it and this gives it a little bit of a contrast looks pretty good and save that and of course that padding is included since we copied this module right here just to save ourselves some time now on the topic of saving time guess what we can just going to copy a button again not falling to that divi trap again where it's not copying it for me click it drag it down woman's and then we can go shop men's it drag her down and boom that looks pretty darn good now anything else we need to do here let's take a look at the abercrombie and fitch homepage looks like the last step is just this little bit where it puts the you know they're probably using some localized code about where the closest store location is you can put anything in here um there's a bunch of different ways you can do different things we want to keep it pretty simple so we're just going to kind of mimic this but you know this is a space for you to get creative with and do whatever you feel works best for you so let me go ahead back to the back end and we'll be adding yet another single column row add that in there and then for the single column row we're not going to be changing anything just yet maybe we want a second to work with some of the padding stuff but we'll just for now add a text module and then we're going to go to the text portion again because we're going to be adding some h tags to this for the heading so the top first line we're going to add a h5 and the copy that we're going to put in is shop your local store and get it faster and we'll close that h5 tag which is just the size of the heading is what that h5 means and when we add the visual here again all we want to do is we're going to just add that italicization again just give it a little bit of a differentiation um on there so that's the first one and then we're going to add h2 to make the text a little bit bigger which expresses the location so we're going to say los angeles slash h2 fantastic that's looking decent and then lastly we're going to add one more line in there which is just going to be you know i'm going to copy and paste this it'll it'll be on the abercrombie and fitch site the exact same just to save a tiny little bit of time and all it says is shop in store or choose in-store pickup online curbside where available we're helping you feel safe no matter how you shop so that's just going to do that for us and make things a little easier and let's go ahead to the design portion we're going to tell all the text that we'd like it to be centered please and another thing that we're going to want to do and this is what i mentioned with the column section here or we're gonna add some settings is that we want on the desktop version because as you can see here it's nice and tight and narrow we're gonna make it be the same and the way we're gonna do it is just change the width here to be 33 percent of the screen real estate and then we just want to make sure that um there's enough space here for the users to be able to navigate and things that on on top of each other and there aren't any like weird text walls so let's save that and when we look at our have a chromium fit site pretty much recreated something that is heavily inspired by their look here now one thing before we move on to starting with the headers and stuff we want to make sure that this is responsive so let's check the responsive settings and see what this looks like so the header looks great that animation looks good oop well it looks like we've got a problem here with um this text that is overlapping and what we need to do is we need to go adjust the line height for this one so let's just go into this and go to design and when we go to text and scroll down a little bit we're going to go back into the responsive settings and we make sure that it's on the cell phone i'm going to put a line height of one and you see that one immediately fixes that and makes it look much better again now we'll scroll down again we see our products here that looks fine these buttons look fine oh and yeah we have the same problem so we need to do the same thing design text and pop that one em text line height in there fixes the problem oh actually you know what i was doing the wrong thing there make sure we click the cell phone for responsive settings set the line height to one because that way on desktop it will still look perfect and as we guessed it's probably the same thing here design text text line height click responsive settings set the line height to 1 am and that is good and this is looking a little bit narrow now let's change this for mobile settings it's change the sizing of it and here we've got the width give me the settings there we go mobile settings and oh that's set with mobile settings we go to the cell phone and we want that to be 80. oh not 80 pixels though we want it to be 80 there we go that looks much better let's see what it looks like on a tablet tablet looks great still so we're happy with that so we have made this page fully responsive which is one of the things you should always do as you're building your site it's very annoying to come back at a later point to try and fix this type of stuff so we're gonna update this and then we'll take a quick look at see what it looks like on the front end of the site okay let's refresh okay scrolling down everything looks good i think we're ready to move on to the next part of this tutorial

Channel: Divi Engine

Views: 340

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

Id: Dwqi1tZ1yjs

Length: 45min 15sec (2715 seconds)

Published: Tue Nov 09 2021