How to create an online shop | Divi WooCommerce tutorial 2021

having an online store is very important for small business owners and entrepreneurs so in this video i am going to show you step by step how to create an online store using woocommerce step by step no stepped missed so when you first create your store and you use only wordpress this is the type of layout you get of course it works but to be honest this doesn't look great we want to transform this into something that looks like this so you can see here this is a massive massive change we have our product here and this is laid out in a beautiful way we have our consistent colors i show you how to add all these colors on our woocommerce website and over here we also have our related products and further down here i also show you how to create this footer and this little text over here on the bottom so this is a detailed tutorial where i show you how to create an e-commerce store now not only that i also show you how to create the home page now let me show you what the homepage looks like so over here if i click on home it now takes us to our main page and this page here consists of this main hero area it also has a button here which we can link to wherever we want and when i scroll further down it's showing our latest products and you can see here these are all our latest products and when we scroll all the way down it also has a pot here which has a description of our site and also a video to go along with it and then finally we have our email opt-in here where our users can opt-in to get some discounts so what i also want to show you here is the way we've built this website is so powerful that we have consistency throughout now take a look and see what happens when i click on any of these products so if i click on this watch here notice what happens the layout is going to be the same so we have this watcher in the background and then when i scroll it has this beautiful image here where we can zoom in and also we can just click here to add to cart we also have our related products as i've shown you and if i click here on this drone again we're going to have a consistent layout of this design this is the type of website that you need in order for you to be taken serious when you are selling anything online you can use all the techniques all the skills on this video to start your own design agency and build e-commerce websites for your clients so before we begin i would like to remind you that if you buy divi using my affiliate link i will give you access to my web design formula course that costs 497 this course teaches you how to design professional looking websites from scratch so go ahead the links to that video description below all right so without wasting a lot of time let's dive in and let's get started all right so before you begin designing your woocommerce website you're going to need good hosting the company i recommend is get flywheel it's managed hosting and it also is affordable as an upfront cost the other hosting companies require you to pay for the first full year and then they take a monthly payment but with flywheel it's 15 a month in fact i'll show you the pricing here so the other reason why i prefer using get flywheel is because you can create a website really really fast and let me show you how to do this so once you sign up for the get flywheel account you are also able to have a free website hosted for 14 days so you can come over here click on create a new site and you can see here we have options to uh upgrade your plan but this is not what we're looking at we're going to come over here now to new site and we're going to choose create a demo site okay so this is what allows us to have our website for free so you can see here i have zero out of one demo sites used so this is where i can add my site name so let's call this woo you can also add a temporary domain name which you can then change once your website is set over here you want to set your data center so i'm based in the united kingdom so i'm going to choose united kingdom here now you need to create your wordpress user admin okay so here we can just say mac admin you add your password and then confirm your password here once you've done that you just click here on create demo site and this is going to install wordpress for you now once wordpress is installed this is what you get so this is our basic wordpress website it has nothing on it so what you need to do now is to log into the admin and this is where we're going to do all the customizations so i am going to add my url to log into my admin part of the website and now this is where you need to add your username and password the one we just created so here we are i'm just going to say remember me click on login oops let me type in my password again login all right so this is my wordpress admin dashboard so the next step now is to install the plugins that we need in order for us to build our website so i'm going to come over here now to plugins click on add new so the first plugin i'm going to need here is woocommerce i'm going to come over here and search for it and you can see here this is the very first one that comes up i'm going to click now on install now and by the way woocommerce is free next i'm going to click on activate all right so now we need a basic setup of this usually i skip this and uh just set up my information manually so i'm going to say no thanks close out of here now this connect to woocommerce.com i'm going to say dismiss and i'm also going to dismiss all messages i don't really need this right now and then i'm also going to hide this okay great so now that i installed my woocommerce like i said i would need to come over here and add all my information manually but we're not going to do that right now next you want to add our images for our products on our website so i'm going to come over here to media and click on add new so what you need here at this stage is you need to have high resolution pictures which look really nice because if you have images that don't look great on your website it has an effect on how people convert on your website so you want to make sure you have beautiful images take time out to take these pictures and once you've done that these are the images we're going to use on our website so in my case i am going to be using images from a website called pixels.com this is a royalty-free website you can use these images absolutely free but in your case i'm going to build my website here using those images but in your case you want to be using your images for your products okay so let me show you the website so here it is so this is where you can search for uh different items so let's search for a watch and uh this is how i went in and chose my product so i'll come over here click here and uh you can download this for free okay so i've gone ahead and i've downloaded all my images so let's go ahead now and upload these images so i'm gonna click here on select files okay so all my files are in my downloads folder here so let's go ahead and select all our images so here they are i'm going to select the first one and just make sure that i select all my images that i need for this all right so with all that selected in fact i have more here let's go ahead and select them now i'm going to click on open and all these images now are going to be added on to my media library and the reason why i'm doing it this way is it saves me time to upload one by one as i'm creating my products okay so it looks like all my images have been updated that is great the next step now is to start to add my product so let's go ahead and do that so i'm going to come over here to products click on add new so i'm going to add my first product here i'm going to add my description for my product over here now i need to create my categories so i'm going to click here on add new category and i'm going to call this latest products click on add new category so you can add as many categories as you want here so another category i could add here is tech add new category so as you add your products you can just add them on to the right category and this helps have a proper layout for your website all right so now that we've added this we need to go further down here and add our pricing so our first product here the price is going to be 149 and then over here on the right in fact let me get rid of my face here so over here on the right we need to add our product image so i'm going to click here on set product image now remember we uploaded all our products into the library so i'm going to click on the media library tab and now i am going to choose my product so i am going to start with um the watch so i'm gonna go ahead and select that set image and i'm also going to add a short description here there we go so now that i've added all this this is now ready to be saved so i'm also going to add this to the tech category and click on publish now let's take a quick look at this product so i'm going to click here and open this in a new tab and this is our product you can see it has our title here it has our price it also has a description and add to cart so this is fantastic we also have a description here and if we had any reviews this is where the reviews would be so you can see how easy it is in a very short time we were able to add our product on our website and this is pretty much ready to go but we're going to be adding quite a few products here just to populate our website so you can see the full design ideally you don't want to have one product on your ecommerce website okay so let's go ahead and do that so what i'm going to do is i'm going to do one more product and then i'm just going to add all the other products behind the scenes okay so to add another one you just click here on add new let's give it a name let's add our description and then over here we're going to choose our tech category and add our price now for this we're going to add a sale price so let's add 249 here and then over here we're going to add our image so this is going to be our product here set product image add another description here and this is the shorter description and pretty much we are good to go now i'm going to hit publish and again let's view this product one more time and here we go so this one here now has a sale badge which makes it look much much better so we've added two products i'm going to go ahead now and add a few more products and then when we come back we are going to have a total of six products okay so i've added all the products and to view all the products you want to come over here to all products and this is the list of all the products that we added on our shop okay so the next step now is to go in and set up our store and make sure that all our information there is right because we need to be able to take the payments once we set up our store so let's go ahead and let me show you how to set this all up okay so what we're going to do now is to go to woocommerce settings i'm going to come over here hover over here and let's go to our settings and this is where i mentioned earlier on that we need to add our information here manually so this is where you want to add your address and so once you've added your address here you want to click on save changes and it's also important that you also choose your currency so right now i'm in the uk so you can put pound sterling but if you want to put united states dollars here let's see if we type in usa okay us dollar there we go you can select it here save changes okay so once you've set it up here the next tab here is the products so on the products here you can also have your pages so here we have our shop page set to shop you can get rid of it here but normally i leave things as they are on this page right here the shipping as well if you're going to be shipping any products this is where you want to add your shipping zone and all the classes and so on so that when you go on the checkout page the shipping is included in the product that you are setting up so for now we're going to leave uh the adding the shipping zone option here so next i'm going to come over here to payments so payments here is one of the most important tabs because you need to have the ability to take payments so for now i'm just going to activate paypal and to set it up you want to click over here in fact i'm in the way you want to click over here where it says set up so this is where you add your paypal email address and of course you need to have a paypal account so this is where you set up your paypal email address and receive an email you set it over here as well and pretty much that's all you need to do you hit save changes now your shop is able to accept paypal now does that mean that that's the only payment well woocommerce is so versatile you can add so many payment options so you can also use stripe now strap is also very good because that takes your debit cards and credit card payments so that's what i would add here on my website i use both paypal and stripe okay so now that we've added that the next step now is to come over here to accounts and privacy so here you want to make sure that you activate allow customers to log into an existing account during checkout but this one here where allow customers to place orders without an account this is up for debate you can live this on or you can remove it but i prefer not to have it here and then account creation here i also want to allow customers to create an account during checkout this is very important and also allow customers to create an account on my account page now i'm going to leave this as it is so these are the options that i would add here and click on save changes so moving on we also have emails so you want to be able to send your emails and have and receive them in the right order so here you can choose to have an email sent to you when there's a new order on your website now this could be a very important thing because you want to make sure that you are ready to send that order as soon as that email comes in so without you knowing it's going to be very difficult otherwise you'll be logging into your website every now and again to see if you have any orders so making sure this is checked is very important and also cancelled is very important and also all these here in my opinion they are very important so i would leave them like that so here is where you want to make sure you have your right email so to set your email here you want to go to manage and then add your email address in here and pretty much that's it save changes and you are done finally on the advanced tab this is where you want to add your terms and conditions page so you need to create this page first and then link it up here so i would have it maybe pointing to the privacy policy and also you want to make sure you force secure checkout and this is where your website needs to have https this allows people with credit cards to be able to make payments securely otherwise they will be hacked and your website really is is going to be the risk of being hacked so people won't be very comfortable enough to buy on your website without the secure socket layer which is hp https and it's also called ssl okay so now that we've covered this we're going to now save everything here now the next step is to take a look at our website and see what we can add in order for our visitors on our website to navigate our website easily so the next step now is working on our menu for the website but for now let me just show you what this looks like so if i go to my website you can see here i don't even have a menu we have the breadcrumbs here but this is not good enough we want to have uh links here that make it easier for our visitors to navigate our website so i'm going to come back over here and we are going to first of all create a new page called home so i'm going to come over here click on add new and close out of here so our first page here is going to be called home i'm going to publish it publish one more time now there's nothing on this page that's fine for now we're going to go back and now let's create a terms and conditions so i'm going to click on add new okay so here's our terms and conditions i'm going to publish it and publish one more time okay great uh we may also need a contact page so let's go and add that so i'm gonna go back click on add new contact page hit publish okay so we have a few pages now and uh i think these are good enough for us to get started so i'm going to go back now over here and let's go to our appearance click on menus it's time now to add our menus okay so let's give this menu a name so i'm going to call this main menu i'm going to assign this menu to the primary click on create menu and now i need to add all my pages to my menu so i'm going to click on view all so i can see all these pages i'm going to select home contacts and shop click on add to menu now you may be wondering why i'm leaving some of these pages that is because i'm going to create a secondary menu so let's go ahead and create another menu so i'm going to click here on create new menu in fact let's save this first it's very important that we save it okay let's create a new menu so let's call this secondary menu i'm going to set this to secondary menu create menu and now i'm also going to click on view all and add all my links or all my pages over here so i'm going to select my cart my checkouts my accounts and my terms and conditions now i'm going to click on add to menu and these are my links so i'm just going to drag my checkout and make this the last thing and i'm also going to have my terms and conditions as a submenu of checkout click on save menu okay great now when we come over here to our website and refresh this you are going to notice something different now we have our first three buttons here our home contact and also our shop and if i click here on shop this is now going to take us to a shop and this is going to now display all the images and all the products that we've just created so you can see now that our website is starting to take shape and this is great but i'm sure you can agree with me that this layout here although this works if i click on add to cart i can you know navigate this view the cart i can pretty much see everything here and if i need to go and update my cart i can do that if i have a coupon code i'll add it here i can proceed to check out and make the payment but this design does not look great so this is where now we're going to take this design to the next level but before we do that let's assign our home page to the home and let me show you quickly how to do that so i'm going to come back over here to our wordpress dashboard and to do that we need to come all the way down to settings and go to reading so at the moment our website is set to display blog posts but we don't want that we want our page to display our home page i'm going to select home save changes excellent so now i have my home page here if you have a blog this is where you would add your blog over here but uh we don't have a blog so we're gonna leave that right now now it's time to take our website design to the next level and for this step we are going to use a page builder now what a page builder does is it allows us a lot of flexibility and it gives us all the opportunities and all the uh tools to make our website look really really professional and we can customize it in such a way that it can look the way we want so let's go in and let's start working on our second phase of our design and uh we're gonna do this right now okay so what i'm going to do now is i am going to go to elegant themes so i'm going to come over here go to elegant themes now i've already gone ahead and purchased divi this is the page builder that we are going to be using and by the way if you buy divi using my affiliate link in the video description below i will give you access to my web design formula now this course teaches you how to design professional looking websites from scratch and by the end of the video you are going to be a professional designer because i share everything that you need to know all right so i'm over here now on my account i'm going to click here to go to my account details and here we go so i'm in my members area here the first thing i need to do is to come to my product downloads and i need to download the dv theme so you can see here it has downloaded on downloaded on the bottom left of my screen next i need to come over here to my account and here we're going to need our api key so i'm going to click here on api keys i'm going to copy my api key and then next i'm going to come back over here to my website and install the theme so i'm going to come to appearance themes add new upload theme and i'm just going to drag and drop it over here click on install now activate next we are going to add our api key now the api key is important because it allows us to get all the updates from elegant themes and also it's easier for us to connect with the support team all right so let's go ahead and do that i'm going to come all the way down here to divi click on theme options and here i am going to go to updates we're going to add our username paste our api key save changes all right great so if you're wondering what our website looks like let's go ahead and take a look now that we've installed the theme so if i come over here now to our website you can see here that now we have our secondary menu here that's great and if we go to our shop our shop here displays all our products here and to be honest it's not too bad but we can do better and this is the next step we are going to make this design look much better so if i click here it's going to take me to our product page here i can click on add to cart but as you can see this design is the art of the box design you get with divi so what we're going to do now is to add our color palette because to have a professional looking website you gotta have beautiful colors so what i've done ahead of time is i've gone to a website called coolers so let me show you where it is here it is and this is the color palette that i generated now this can be generated easy by clicking on the space bar and this would come up with all the colors now once you're happy with the colors this is where you want to go into divi and start adding them into your default color palette let's go ahead and do that so i'm going to start here with the first color so i'm going to click here to copy and over here now on our site we are going to go to our general tab and this is our default color palette so we need to replace this with the colors that we got from uh here so let's go ahead and add our first color so to add our first color you just click here and paste it and that's our first color let's move on to the next one come back over here we copy it back on our website here paste it move on to the next one i'm gonna copy it come back over here and paste it so you want to do this until you've copied all your colors okay all our colors now have been added to our color palette so i'm going to scroll all the way down here and click on save changes all right so our color palette has been added it's time now to design our website so the first thing we take a look here is the top area here we can see our header here doesn't look great so that's the first thing we need to work on we need to make this look really nice so let's go ahead and start creating our template for our header and the reason why we're doing it as a template is because we want the header to be applied across the whole website and we're also going to do the same with the footer as well so let's go ahead and do that so to go into our template builder we need to be here in the theme builder so i'm going to go ahead and select theme builder and i'm going to click now on add global header build global header so the header we're going to build is going to be pretty much basic we're not going to go and build a complicated header here so next i'm going to click on start building and for this design we're going to build this from scratch and we are going to start off with a layout so the layout we're going to go with is this one right here i'm going to go ahead and select it over here is where our logo is going to be so i am going to leave this blank for now and next over here is where our menu is going to be so i'm going to search for my menu module and select it next i'm going to snap this over to the left so i can see what i am designing here so i'm going to assign this menu here to the main menu and the next step now is to customize our font so i am going to now head over here to our design tab menu text we're going to change our menu font here to pop-ins so i'm going to search for the font i'm going to make it all caps and the color of my font here is going to be this color right here now you will notice in a moment why i want to have it light because that's mainly because i want to have a dark background all right so now that i've selected that i'm going to go back over here to my content click on background and make sure i remove the background from this menu item okay so finally i just need to increase my size for my menu text so right now it's set to 14. i just want to bring it now to about 15 and i'm also going to add some letter spacing so let's add about two for our letter spacing and then finally let's make it bold okay great so now that i have my menu set i'm going to come back over here and this now is my row so what i need to do here with my row is i want to make it full width so it stretches all the way to the edge but before i do that let's add our background color here so we can see what it looks like so this is going to be our color in fact let me just go in and make it slightly darker okay so that's going to be our background color and then next i'm going to come over here to design spacing and i'm going to adjust my padding here because i want to make sure that there is enough space in here so i'm going to set this to zero and then start adjusting this so let's set this to say one percent okay i think that's better so one percent to the top and bottom now the next step is to adjust our size so i'm going to come over here to sizing and i want to make sure that this is a maximum width of 100 percent and also our width here needs to be 100 so now we can see that this goes all the way to the edge and this is exactly what we need to do okay so now that this is set we're going to go ahead now and save and i just need to align this over to the right so i'm going to go into my module settings click on design menu text then we're just going to scroll down here until we find our text alignment and here we can align it all the way to the right now you can see here we have an issue because this is all the way to the edge so that can be fixed by uh adding a spacing so i'm going to come over here and uh padding to the right here is going to be say 5 and that looks much better now okay so i'm pretty happy with that all right so the next thing we need to do is to design the secondary menu and to do that i'm going to duplicate this row so i'm going to go ahead and do that so the top one here is going to act as a secondary menu so i am going to go in and change the color so i'm going to click here on a row settings i'm going to go to my background change my background color the text color here is not too bad but we can always go in and customize it so the next step now is to just go into design here and i'm going to go into spacing and for this i'm just going to remove my padding here and just add it to the top there we go and save and now i need to change my menu and assign it to the secondary menu so i'm going to go back in here so over here on the menu instead of main menu let's go to secondary menu and now you're going to see that we will have a totally different menu you can see we have our checkout here we also have our count and so on but as i hover over here we know we have our terms and conditions but we can't see it because of the way it is shown here we need a background color here let's fix that so i'm going to click here on design drop down menu and for our drop down background color i am going to choose this color right here so let's see if that works so now we can see that this is now working okay but it's overlapping so we need this to be right on the top so let's fix that but before we go in we need to adjust the size of our text here so let's go back to our menu and this time we're not going to make this bold let's keep this regular and let's reduce the size a little bit to 14 because we don't want this to be the highlight and let's say we change the color as well so i think that looks much better and for this i'm going to remove the letter spacing or let's keep it at one and that's looking much better all right so now i'm going to save this and then now i'm going to go into my row settings click on advanced so what we need to do now is to go to position and on our z index i'm just going to make sure that this is all the way to the top and now you can see when i hover over here my terms and conditions now is showing and it's not being covered by this okay that's great i'm going to save this now i can see that my text here is not right in the middle and that is quite annoying me so let me go and fix that quickly i'm going to go into my design and then go into spacing so on the bottom here i'm going to set this to zero break the chain and set the top to perhaps two so this could be 0.5 okay that looks much better now i'm going to save now there's also a step that we need to do which is very important and that is to remove our padding on the top and the bottom here so let's go ahead and do that so i'm going to click here and i am going to now go to my design spacing we're going to add zero both to the top and the bottom and you can see now this has already changed this and what we're also going to do here is to make sure that this is um fixed so i'm going to go to position and then over here we're going to choose fixed and what we're also going to do is we are going to add a drop shadow here so we can see where that ends so to do that we're going to come over here to design box shadow and we are going to use this one here and you can see now i've added a box shadow here it's very subtle but that is good enough okay so our heading is now done so let's save this i'm going to save and we're going to close out of here save changes now let's take a look at our menu now that we've finished designing it so i'm going to refresh this and now we can see that our menu is now in place and it is sticky as well and when we come over here to our shop we can see that our links are all working okay all right great so our heading is done and it's it's being applied to all the pages on our website the next step now is to work on our footer because as you can see this doesn't look great so let's go ahead and fix that quickly so i'm back over here now in my theme builder i'm going to click now on add global header build global footer i'm going to build this from scratch so i'm going to start with a single column here and we're going to add a text module and select that so let's start by adding a title in here so we are going to set this to heading 3. now let's stylize this so i'm going to come over here to design text and let's set this to pop-ins okay so let's save this for now because ideally this would look great if we knew what the background was going to be so i'm going to go into here into my section settings and add my background so the background i'm going to use is this one right here and save now we can go in and start adding all our colors to our design so let me click here again on my text module and let's go in and add our color so i'm going to go back to my heading text and here it is now if you're not sure which heading it is you just click here on this little uh paint brush icon and this will show you which one it is so i'm on heading three so let's change this to poppins now we can set our color and look at that all our colors now will work really well because these are all colors from the color palette so i'm going to use that and i'm happy with that i'm going to go now and [Music] in fact let's change this to semi-bold all right so now i'm going to save and we're also going to add another text module so i'm going to click on this plus button so this text module here is going to have all our links so i'm going to override this add my first link hit enter so you want to add all your links over here i'm going to add another one okay so i have a total of four links now for this to work you need to go in here highlight this and make sure you click on this chain icon and add a link so i'm going to add a blank link for now on all of these so that i can go in and stylize them so let's go in and do this for the second one click on the chain icon add my link click ok and let's continue doing this until all four of them are done let's save that and this is the final one add a blank link great so now that we have done that the next step now is to stylize this so i'm going to click here on this paintbrush icon and this is going to take me to my link so first of all we want to change this text to pop-ins and increase the size a little bit maybe to about 15 and then we are going to uh should be underline it maybe not okay so what we're going to do next is to add our color so the color we're going to go with is see what works so let's go with this one here in fact you know what we're going to go with that so that's going to be our colors for our links that's looking great now i can go ahead and save this and pretty much we are good to go so what i can do now is to go to my row settings and duplicate my columns here a few times so let's go one two three so now we have four columns what you need to do next is to go in and change this text okay so once you've changed it these will be links to all the different uh items on your website so this could be terms and conditions this could be contact as this would be you know it depends how you want it to be so i'm going to uh perhaps keep this at three that looks much better and i'm going to go in now and change this text okay so i've gone in and i've added my terms and conditions our company and so on next let's now add one more section and this is pretty much going to have our copyright text so let me add a text module here so what we're going to do is to add some dynamic text so we're going to say site title and then i'm going to go into the dynamic text here so on the before we're going to add our copyright sign add our year 2021 add this bracket there so you can see now it's showing so war is our website that has just taken our website name and then after that we can decide what we need to add so we could say design by mac and let's save this so we just need to add a space again and that little item there right so now that we have this let us go in and customize this text by coming over here to design and then click on text and change this to pop-ins and all we have to do now is to add our color so i going to go with this as our color we are going to save this now next we're going to go into our section settings and add a background color so we're going to go very dark here next we're going to come over here to our design and remove this space there's a bit too much space there so we're gonna go into spacing and reduce our padding down to zero both to the top and the bottom and save so now this is our footer so let's take a look this is what we have right now as our footer and notice what happens when we save this so i'm just going to click these three little dots here get myself out of the way click on save we're going to close out of here save changes and now when we come over here and refresh we now have this beautiful footer and this is a total transformation this is looking great all right so now that we have uh this so far we have gone ahead we created our header we've created our footer the next step now is to design the inside of the website so this is where we're going to create some templates for our products because right now when we take a look at our product it doesn't look great i'll just show you one more time here you can see that things don't look okay our text here is not um in line with our branding and our design that we've done so far so we need to go in and really change this so let's go ahead and do that so i'm going to come back over here now and what we need to do next is to uh go to our template here so i'm going to click here on this plus button but in fact before we do that we need to just need to add our global body here so let's build our global body start from scratch and we are going to have a single column here and let's add our post content so what makes your design fast is to just come over here and change your fonts so let's start here with our content so i'm going to click on this gear icon to go into my post content settings click on this paint brush tool and this is going to take us straight to our heading and now i can customize this make this bold i can also change my color here and next i'm going to go to my paragraph and again i'm going to change this to pop-ins i'm going to increase my size here a little bit 16 add our line height so it's nice and easy to read i think we need to go with one with 2.2 em okay now we can change the color of our text and we have a lot to choose from here so let's see what works better so i think you can just go with this color right here okay that's looking great now you can go in and customize your heading 2 and heading 3 as well so let's change this to pop-ins and changes from regular to bold but we're going to leave the size as it is but we may need to increase the size of heading one so instead of 30 let's just bump it up to about 34. all right so now that we have this all set finally we're gonna do three heading three change this to semi-bold and we're going to save this right so the next step now is to uh come over here to our row settings and in our row settings i'm going to come over here to design sizing and we are going to change our width here to a hundred percent i'm gonna save that and we also need to add some margin to the top here so i'm gonna go to design spacing and for our margin top i'm gonna set this to say 20 and see how that looks like save that save one more time so now we are going to have consistent text on our pages on our website so i'm going to close out of here save changes so what i'm going to do now is i'm going to visit my website and see what this looks like so far so i'm going to open this in a new tab and when we take a look here of course we don't see anything here but let's go to our shop so when we take a look at one of our pages we can see that um everything has been updated here our font now is consistent but we still have but we still don't have enough space over here on the top so let's fix that so i'm going to go back to my global body so i'm going to click here on design spacing and let's increase this and perhaps maybe percentages work better so i'm going to add five percent i'm gonna save this now let's see what that looks like okay so that's looking much better you can see our content now is in place now this may be a bit too wide so i want to reduce this as well so i'm going to go into my row settings design sizing so instead of 80 i'm going to bring this down to about 72 and save so these are the little tweaks that you need to go in and do to make sure everything is looking great on your website so you may need to bounce back between uh your designs excellent so that's looking much much better now we can see our header there is sticky which is great we have a beautiful footer here but now it's time to work on our design for our product pages because as i mentioned this doesn't look great at all all right so let's do that so i am going to now close out of here and create a new template so i'm going to click on this plus button and for our templates i am going to scroll all the way down here until i find my woo product so these are all our products i'm going to choose this here so this is our all products templates i'm going to click on create template now i am going to go into my global bodies this is where i need to make all my changes so that my product template looks great so let's go ahead and delete what we have in here and let's start building our template so the first thing i'm going to do here is to click on this plus button here and add a regular section so this section here is going to start off with a single column and what we're going to have in that column is our wool product title so i'm going to type in woo title i'm going to select that make sure product it says this product that is very important and before we can go in and make any customizations here let's just save and add a background onto this so i'm going to click on section settings go to my background here and what i'm going to do for my background is to add a featured image so i'm going to click here on this third tab and add here my featured image so i'm going to click on dynamic set my featured image so it won't really show here it will uh show properly once we have a product okay so now that we have this ideally i want to have a dark background and just show a little bit of the product here so i'm gonna come back over here to my background and add a dark color and then back over here on my image i am going to change my blending mode to multiply great the final step to this technique is to come back over here to your background i know i'm going back and forth a lot so uh let's just pull this down a little bit until we can see just a little bit of the product there so let's go down a bit again to about let's go to 80. there we go all right so i think that would work so now i'm going to save this and it's time now to go and customize my product so i'm going to go in here because you can see it's quite difficult to read our product here so let's set our title here to pop-ins uh change from regular to bold and we're also going to change our color here so we can cycle through these and see which color you'd like to use for your product so i want something that really stands out so i'm going to go with that make it all caps and what i'm also going to do is i'm going to make this even bigger so let's go in and just bump this up to about 42 okay so so far so good i'm gonna save that and now i'm gonna add a bit of uh padding in my section here usually i like going to about 100 on my padding here and let's do the same to the bottom here and i think that looks much better we may need to uh apply this both to the top and the bottom just to make sure okay let's go with uh 1 32. all right so i think that's great now i need to just drag this to the top okay so that's going to be our main product area all right so the next part now is to add another module so i'm gonna click here on this plus button and this is going to be our woo breadcrumbs and here it is i'm gonna select it and next i'm gonna go to design text i'm gonna change the color here we're gonna change our font to pop-ins we're gonna uh increase the size a little bit and also in fact we can leave it like that but if i make it all caps that doesn't really look great so i'm going to just save it like that and that's looking better now here i can also play with percentages because this works better uh when we have mobile devices so let's go into our section settings here go to design spacing and instead of using pixels let's add five percent and if you want you can just bump this a little bit and see what that looks like so we may want to go with eight percent all right that's great and while we're here we're going to add a margin here of say 40 to the top save okay so that's our first part this is going to highlight our main product so let's continue here i'm going to click on this plus button and this time i'm going to add regular and this is going to be a two column structure so our first module here is going to be an image so let's go ahead let's go ahead and add wu image i'm going to select it so first things first i'm going to add some rounded corners here so i'm going to click on design border and i'm going to set this to four that's great save that now over here i'm going to add my title so let's go again and add our wool title there we go i'm going to set that we're going to go into our design title text change this to pop-ins so we're not going to do much here we're just going to keep it basic and let's choose our color so i'm going to go with that for my color and we are going to save this now it's time to add a description to our product so i'm going to click here search for wool description selected and again i'm going to come over here to my design text changes from default to pop-ins we're going to increase the size to about 16 increase our line height to about 0.8 so that's taking shape i really like that i'm going to save moving on click on this plus button we're going to add our price so it's going to be woo price select that again we're going to change our price text from default to pop-ins we're going to increase the size a little bit 34 make this stand out by making it bold and we're going to change the color excellent so our price is looking great now what we need after adding the price is the add to cart so i'm going to click on this plus button so let's go for woo add to cart there we go and now it's time to customize this uh quickly so let's start here with the color size now here we need to change this from default to pop-ins we're gonna make this all caps the color is okay and then over here i'm gonna change a few of this so our first thing we're going to change here is the font so let's go to poppins we're going to increase the size a little bit so we're going to go to 14 and that's already looking much better now over here on our add to cart i am going to start here with um this area here we're going to give this a border and a background so let's go ahead and come over here to our field background color so for that let's try something like that i think that already looks much better because it's going to be consistent now with the colors that we use throughout our site so i'm going to leave that as it is next i'm going to come to the button here this add to cart button i'm going to activate use custom styles button and for our text color i am going to use this color here and for the background color i'm going to use this orange and i'm also going to use that for our border and you can see already that looks great so you can also play around with our background color here to see which one works better but i think this is a much better option okay so i am going to now save this so you may want to also add some sort of rating here so let's add our woo rating and here it is select that now the beauty of this is we can go in and customize all this so for our rating i'm going to click here and choose our star rating so for our star rating and we can go with yeah we can go with something like that we can also increase the size here a little bit so let's go up to about say 18 maybe even 20 and let's add some letter spacing as well we need to space the stars and then we're gonna come over here now and stylize our text change it from default to pop-ins and for our text color here we're going to use that and we're also going to increase the size a little bit right so 16 works great so now we have our star rating we have pretty much all the information that we need here i'm now going to save this and the next step now is to save so i can show you what we've done so far because i know i've just been going in tweaking tweaking tweaking but ideally you wanna see what things look like so let's go ahead and do that so i am going to save this now and uh close out of here save changes now let's go to our site in fact we can just come over here to our cart let's refresh this now when we take a look at our products we can now see that this now has taken effect you can see our colors here have been updated our add to cut button here is there and this is looking great so far now let's go in and do for the customizations we also need related products here and product description so let's go in and add that information now all right so i've gone ahead and added my related products here so you can see this is looking way much better and this template now has been applied across all my products on my website so let me show you what happens when i click a different product so let's say i click on this one here you can see the layout is going to be the same throughout all of this so we have our image here in the background and pretty much this is looking great and we also have our related products here and also our footer okay so this is great the next step now is to build our home page because this page is very very important as well because this is where people see when they land on our website so let's go ahead and do that so i'm going to come back over here to my site and i'm going to go to pages click on all pages so the page we need to work on is the home page so i'm going to click on edit with divi we're going to build this from scratch and for our design here we are going to start off with um our header so i'm gonna click here on regular in fact we need full width so let's go with the full width header for this design and what we're going to do now is we're going to add our content here but what i usually like doing here is to make sure that i see my complete design so i'm going to come over here to design layout make sure that this is set to full screen so that i can see everything so now i'm going to save this and i'm going to drag this to the top like that okay so that's great so the next step now is to go in and add all my elements in this design so let's start off by adding our background image so i'm going to click here on this tab to add our image and the image i am going to add is maybe this one here of happy people shopping now i know i have a background color here so let's just get rid of it for now and then save so i can see now that my color here is in the background of my section settings so let's go ahead and um so i can see here that my color here is in the settings of my full width header so let me go right there to the background and fix this in fact we may need to design this from here anyway so let me add my my image like that and you can see my image has been added to my background and then back over here we're going to decide whether we're going to have a dark or a light background so uh let's see what works so if we try to go with the light background here uh we could go to our blend mode and set this to lighten and then back over here we can then increase a bit of transparency just like that just so that we can show a bit of what is happening here in the background or we can do the opposite and have this dark and just show a little bit of the background so i think the dark version is better so i'm gonna choose my dark color here and i'm just gonna drill this down a little bit and remember now that we've chosen a dark color we need to go in and change this from lighten to a multiply so now you can see this is looking way much better all right so the next step now is to go in and add our titles and our content in here so i'm gonna go back to my text add my title and then i'm gonna add my description as well now i can go in and customize this by coming over here to the design tab so let's start with the title so let's change the color to that so it's easier to read and then for my description text i'm going to change this from regular to semi-bold and we are going to increase the size to about and for my button i can either leave it like that or i can design it and uh add a bit of color to it but you know what i'm going to leave it as it is and what i'm also going to do here is i am going to um adjust my size so let's go to sizing and for our content width we're going to reduce this to about 62 so i can see here there's a bit of a problem so let's go here and add some line heights to our text here and you know what we need to make it bold so for our line height i'm going to set this to 1.4 [Music] and i'm also going to increase my size here a little bit to about 36 save that okay so that's not looking too bad so i'm going to save this page right so ideally i need this to be full screen so let's fix that on our template so i'm going to now go to my dashboard but i'm going to do this in a new tab and then i'm going to come all the way down here to our theme builder and go go to my global body and i'm just going to change here and set my width to a hundred percent so that should fix it i'm going to save now save this one more time and now if i come to my design here and refresh it this is now full screen so that's looking great and i really like how this looks uh so far so let's move on now and add other elements on our page so i'm going to click on this plus button to add our regular section and the first one here is going to have our text and this is going to be my title so i'm just going to call this latest products and let's design this now so i'm going to come over here and for our texts we are going to change this to pop ins and let's make it all caps from regular to semi-bold i'm going to increase the size a little bit add some letter spacing okay so now let's go ahead and save now let's add one more in fact we don't need to add a module here let's move on now and add another row so in this row now let's search for our shop module so this is going to allow us to add all our products on the main page and we can add these however we want by choosing what we have here so we can come over here now to our elements you can add our shop pagination if uh we have a lot of products here on our main page but now the good thing is you can see that all this is designed it has um all the elements that we need our pricing and everything looks great so um what we're going to do now is to customize this a little bit more so there may be a bit of work that needs to be done here so what i'm going to do now back on the content here we can change the product view by showing our latest products featured products sale products and so on so you can see here that this module is versatile we can use this for so many things but i am just going to leave this on the default so it shows uh most of our products over here now on the design what i may want to do is to uh make a few changes to our overlay here so you can see the overlay here doesn't look great so i'm going to come over here to overlay so the icon can be this color here and then the background color this time i'm going to change this so you can see there this is the effect of that so now i'm going to click on the eyedropper tool drag this down a little bit to about halfway and you can see now my overlay is now showing and that and that is consistent with the colors on my website so that's looking great the price here may it may be a good idea to change the price here and make it bold and maybe even change the color so let's make this bold so i'm going to come over here to regulars change this to bold yep now that's looking much much better i really like how it's looking now so pretty much that's my home page i am going now to save this and uh i am happy with that down here uh let me go back in and make a few adjustments here so i'm gonna reduce the size of the text so let's go down to about 16 and for our color right let's go with [Music] right let's go with something like that so we're going to save and let's add a divider in fact you know what there's no need to add a divider so i'm going to come over here now to design spacing and uh let's set a hundred here both to the top and the bottom so that's great so i have my main landing page here with my products and i like how this is looking so far okay so i'm going to save that now if you have any other things that you may want to add here it is very easy to add we can add maybe a video here so let's go ahead and do that so i'm going to click on this plus button click on regular so we're gonna have a one-third two-thirds column and over here on the left we're going to add some text so i'm going to add my text module here so what are we going to do here is first of all let's go into our background and add a background color it's much easier if you work this way so if you add your background color first it's easier now to see what you're actually doing on your site so with that added i'm just going to bring this down a little bit because i don't want this taking over my full design okay so i'm going to we're going to go with that and save now let's add our elements over here so i'm going to go back in here let's add a title to this so i'm just going to paste it in here we're going to set this to heading 2. let's save that now let's add another module again it's going to be a text module let's select that so this could be information about our shop i'm going to paste that save it right there over here now we're going to add a video let's select it now straight away we're going to add an image overlay click on this plus button and we're going to use this as our image like that and that just makes our video look much better you can see now that is beautiful all right so what we're going to do next is we're going to customize this icon it looks way too big so we're going to go to play icon use icon size we're going to make this smaller and also just to keep our consistency here we're gonna add three as our border there we go so that's looking great let's have a look right so we have our latest products here and then we also have information about our store and i may want to go in here and remove this because that doesn't look very nice so let's save this and i think this is coming from the footer here so let's go in and fix that so we're going to close out of here go into our global footer and let's just check and see if the margins are set over here so it's definitely not here so let's take a look and see where that is coming from so i'm going to go into my section settings here design spacing so let's just make sure we don't have any margins here so next we're going to add our padding and that's looking all right so i'm going to do the same to the bottom here okay that's great so our design here has some breathing space so there's one more section that we need to add here and this is our email opt-in so let's go ahead and do that so i'm going to search for email opt-in so this is for discounts so you may want to build your mailing list here so this is how you can quickly grow it so uh let's go in and first of all remove our background over here like that and now we need to go and customize this text so let's give this a color so we can see what we are doing so now that i've added the color it's time now to customize everything else so let's go ahead and add our title so i am going to go back to my content click on text add my title in here now i don't need this description text here let's get rid of that next we're going to go over here to our design layout and we're going to make sure that we want uh body on top form on the bottom just like that and now we need to customize our form fields so we're going to go into our first first one here which is the first name and let's give this background and let's make this a bit more transparent as well right now we have the button to work on so i'm going to click here on our button activate use custom styles for button and let's start with our text color so let's go ahead and add that and for our background color we're going to use this orange here for consistency and also add that on our borders okay so that's looking great so far we may want to uh center this so i'm just going to come back over here now and make sure my text alignment is set to center and then finally what we need to do is to go back to the content and make sure this is connected to our email service provider so you want to come over here to your email and i use fluency rm so this is how you would edit if you click on add you can add your account name here and that will connect it now over here on the fields we don't need the last name so we just need the first name and email and then we're just gonna hit save okay so that's gonna be our opt-in so that's great i'm gonna save this now and that's our email part our email opt-in part so that's great let's just give this a bit of padding as well so i'm going to give this a 100 and save so pretty much our landing page has been designed and this is looking great we're going to exit the visual builder now and let's take a quick look at our design right now and that looks great this is our section opt-in and we have our footer all right so this is looking great so the next page we need to work on is the contact page so let's go ahead and work on it so i'm going to click enable visual builder so we're going to build this from scratch i'm going to add two columns on the left side here we're just going to add some text and this will be the shop information so we can start here with the address okay we're going to add the phone number so now let's go in and stylize this i'm going to go in here and turn this to say heading 4 and we're going to do that with the address as well set this to heading four uh in fact you know what let's see what heading three looks like so i think rating three is better okay so we're gonna go in set this to a heading three and that's looking much better and we can also add more information here on the right so this is where we need to add our contact form so let's go ahead and add that so let's add contact here we go so that's our form all you have to do now is to come over here to the email add your email address so that when people add their email their information here it gets sent to your email address right so we're going to save that and we also need a title to this we're going to click here on this plus button and add a title in fact we need a text module right let's go ahead and select it and we're going to say send us an email and we're going to set this to heading 3 and save this bring this to the top okay so that's looking great so what i may want to do as well is to go into our row settings here click on design sizing and for our custom gutter width let's reduce this a little bit maybe to even one all right so that's looking great i'm going to save this and then finally i am going to add some padding to this so i'm going to bring it to about 100 let's save this that's our contact page you can even go further and give this page a huge title there on the top if you wanted to but this will do the job so now i'm going to hit exit visual builder and we have our contact form now if we go to our shop we need to create a shop page so to do that we need to create this as a template so i'm going to come back over here and click on this plus button and let's search for uh wool pages and here we go here is our shop create template so let's delete this for now and add a custom global body so for this we're going to build this from scratch start building single column and what i'm going to do now is to look for our shop module and this is going to be similar to what we did on the main page which is uh have all our products here so let's go in and do a few customizations here so we're going to add our price change this to bold and we're also going to adjust our title here and just make sure that this is also set to pop-ins and bold we're going to increase the size a little bit okay i think 18 works great and for the images we're going to add a border and this is going to be three and for the sale let's change the batch color to our orange and we also need to change our text here to pop ins and the size i think that's a bit too much let's bring this down to about 18 all right so that's looking great um let's go ahead now and save this and we can also give this a title to the page so let's go ahead and do that by clicking on this plus button and adding our text module and we can just call this our shop we're going to set this to heading 2. now let's stylize this by coming over here to our heading text change this to pop-ins changes from regular to bold oops that's not working so we need to be working on heading two pop-ins change this to bold we're gonna add some letter spacing so let's go with eight and uh let's center this save that and then we're just gonna drag this to the top like that all right so that's looking great uh we're also going to add some padding here to the top all right so now let's save this okay so with that saved let's go now to our shop and now you can see that our products are now showing on our shop page so i can see here we need to add a bit more uh space here on the top so let's go ahead and go back to our module so let's add some margins to the top so i'm gonna go to spacing and we're gonna add five percent and save save one more time and now let's refresh our page and now we can see that we have space there on the top and this looks much much better so uh you can further customize this by going in and um adding a bit of a description here where it says r sharp uh that may make this design look much better in fact let's go ahead and do that so i'm going to go back over here to my custom body click on this plus button add our text module so let's add our description text design text change this to pop-ins and let's change this from regular to semi-bold let's increase the size a little bit and give this some line height and then we are going to center this and finally let's go into our sizing and reduce the width and center it okay i think that's going to look great and then finally we just need to give this a bit of breathing space here so let's go to spacing and bottom padding let's just give this about 25 all right so we're going to save that save it one more time and now when we refresh our page we now have our main shop page so now we've pretty much uh completed our design we added our contact page and we also completed working on our homepage now let's take a look at our site so far so here we can see we have a beautiful landing page in fact let me remove myself from the bottom there so when i scroll down we have our latest products here and it's showing our all eight results and when you scroll down further we also see a bit information about our online store and we also have a video to go with it and then further down here we also have an email opt-in option here where people can add their email to get discounts and then finally we have our footer area so this is great now let's take a look at our product pages so if i click on any of these products like for example here it's going to take us to a product page which we spent a lot of time designing and this is what it looks like so you can see here this main area here shows a preview of our product with a description and also the categories and then when i scroll down here we can see that we have a before price and after and when we scroll further down we have our related products and if someone leaves a review on our products we will see the reviews over here so when you scroll down further we have now our footer and our little footer here at the bottom and we also have our contact page which we put together quickly which only has our form and our address but like i said you can add things like a map over here just to make it more dynamic and then we also have our shop just in case uh people want to directly go to the shop this is where they land and as you can see here this design is beautiful it has all our products and like i said if you click any of these you're going to have a consistent layout and you can see here we have this beautiful camera there in the background and uh it has all our related products and our product descriptions so this is it this is how you create a professional looking online store step by step i know there may have been a few steps that i may have missed so if i have and you have further questions please leave your questions in the comments box below and i'll do my my very best to help you out with that alright guys thank you very much for watching see you again in the next video take care

Channel: Funnels to Income

Views: 940

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: cyvc_jyVNBU

Length: 76min 16sec (4576 seconds)

Published: Fri Oct 15 2021