How To Make An Online eCommerce Store Website With WordPress (NEW FOR 2018)

In this extended video tutorial we are going to build this beautiful stunning e-commerce website and working to go through this step by step let me show you around the site first so here is the homepage and you can see it's simple and it is elegant we have this beautiful categories here to categorize your products right here and also showcase your products this is what your shop pages going to look like there is a grid here to show the various products that you sell and there's interactive features in this shop grid we also have filtering options here on the left that you can also have if you wanted this is what a product pages going to look like it prominently shows the images that you have of your product and when a visitor hovers over the image is going to show the different portions of it like that and then here is a variable product and I'm in a show you how to create variable products on this website that's a product with different colors in different sizes so your customers can go here and choose what they want and then added to the cart and you know it's nice we have this really nice shopping cart icon in the header so if someone adds a product to the shopping cart it's going to be there in the header they can move their cursor over it and see everything in the shopping cart jumped to the cart or just go straight to checking out here is what the shopping carts gonna look like this platforms been except coupons and here is where people can filter the different products that they've added to the cart here is the check out and this is the most simple yet elegant checkout screen I've ever seen on a website organa talk about taxes and shipping and all of that with this e-commerce website it's a full e-commerce tutorial is probably why the video so long and then right here is the best part of all your gonna learn how to use a page builder to make it a point and click is simple to change anything you want with the website now here is why you want to invest your time in watching this tutorial in the first place I don't just show you how to make what I made I show you how to make anything that you want to make and that's what you're going to get out of investing your time watching this video I'm going to show you to how to make the website that you you want to make I'm going to show you how to have the e-commerce store that you want to have I meant to give you all the tools the knowledge in the training in this extended video so that you can build anything you want not just what you're seeing right here really use something called WordPress which is free to be using a WordPress theme name*and that's also free and this page builder that makes it point-and-click easy that's named Elementor that is also free and then were going to use WooCommerce to power this e-commerce platform and that is free as well so all the tools that you see me using throughout this video they're not going to cost you anything and the reason I chose tools that were not at a cost you anything is because I wanted to make it as easy as possible for you to get an e-commerce store up and running if you don't know me my name is Adam and I'm from WPCraftercom where I make a WordPress tutorial videos for non-techies if your new year consider clicking on the subscribe button and if you don't want to miss a thing click on the notification bill and you too will let you know when I have new videos hey I look forward to spending this time with you showing you how to build this website showing you how to build a site for you a platform for you where you can sell your products let's just go ahead and jump right on into the tutorial let's take a moment to go over everything that you can expect to learn in this tutorial video now I am going to preface and just say right up front obviously you could tell this is going to be a long video and what you're gonna notice is that my talking pace the pace that I speak is perfect for increasing your playback speed so one of the nice things about you too if you're watching this on YouTube right now you can increase the playback speed if you like however I I speak at this pace on purpose because some people prefer it to be slow and methodical but you can be speeded up if you like so I know when I watch my own videos back I watch it at 1

25 pace and many people that are subscribers to the channel will watch my videos back at a 20 pesos eventually you can get through the material twice as fast so here is what to expect in this tutorial video first work anew set up a domain name and order a web hosting accounts then were going to install an SSL certificate this is crucial if you already have a web hosting you must have an SSL certificate were going to go through what that is essentially if you don't have it you are not going to be able to accept payments on your website and that's crucial for an e-commerce based website it's something you have to have some hosts give it to you for free some web hosts charge $99 per domain per year for it so when we talk about domain names and hosting and all that kind of stuff I'm the new show you some Webhost that are not going to hose you in terms of the cost of an SSL certificate but this is one of those things you want to get set up right from the beginning and working to do it in this tutorial next were going to go over briefly how to create a logo or some resources to have a logo created choosing a color palette choosing a font pair these are all important things if you want to personalize your website and actually build a brand these three parts are very crucial then you're gonna learn about WordPress this is going to be the platform that we use for this e-commerce website it's the foundation and the really use something called Elementor which is the what you see is what you get page builder so that we can build beautiful pages in the beauty of how this tutorial is going to go is I'm going to teach you in such a way that you can use what you learn to build anything that you want to build for yourself so you're not going to be limited to just what were building in this video it reminds me of that very famous parable if you feed a man he'll eat for a day but if you teach them how to fish he can feed himself for a lifetime and I'm sure I just butchered it but you get the point I want to teach you how to build websites not just give one to you I want to teach you how to do it using Elementor neuronal learn that in this tutorial then you're gonna learn WooCommerce WooCommerce is what your web store your E store your e-commerce platform is going to be based on in urinal learn about WooCommerce in this video then to wrap the video up your gonna learn about search engine optimization is knocking to be in depth an in-depth tutorial I do have separate in-depth tutorials on search engine optimization but it's going to be enough to get you started and then working to do two crucial things I'm in a show you how to backup your website it is crucial that you have regular backups for your website were to cover that and then security is also crucial you have to have security on your website especially because it's going to be an e-commerce website so if you stick with me in this tutorial to the very end I promise you that I will have taken every minute of your time and consideration and will not waste any of it I want you to have all the tools that you need to be successful and have the outcome that you're watching this tutorial for and that is to build a full e-commerce website so at this part of the tutorial working to talk about website hosting now even if you're familiar with website hosting if you already have a website or you had a website in the past I don't want you to fast-forward through this section because it's going to be worth your time to listen to this part of it to the tutorial about WordPress web hosting and because most importantly it's the most important decision for any website if you choose the wrong Webhost you are in for a world of hurt and that's why it's so important to make the right decision with the web hosting company that you choose and primarily you're going to want to avoid certain companies and you basically want to avoid E IG and Go Daddy companies EIG stands for endurance International group and they own their a web hosting conglomerate some of the web hosting companies on the list them out here just they to name a few that they own they are really bad web hosts and the scary part is you actually hear a lot of people suggesting these web hosts and it's probably because they don't realize it or they're being paid a lot of money to suggest these Webhost and it actually saddens me because I know people that go there have bad experiences and the people that have use these services and said they had a great experience then I asked the next question what are you monitoring the uptime are you checking the speed of your Webhost and if you're not monitoring uptime and if you're not checking the speed of your website you really don't know if your host is any good so some of these companies are Hostgator I'm sure you've heard of Hostgator Bluehost and host monster and there's a whole list of these CIG owned companies and you really want to avoid them if at all possible they're known for gobbling up web hosting companies laying off the support staff and then consolidating everything and then it all goes downhill from there and also go daddy you you I know a lot of people get their domain names at Go Daddy and they're fine for that I personally prefer a different company however their web hosting is bad it is extremely extremely bad in their servers are overloaded and what that means is they have so many customers on a single Web server that it makes all of the websites is slower so that is what happens with Go Daddy now if you have used either of these and you feel like you had a good experience I'm happy for you but I would question if you are monitoring the uptime of the websites and if you're checking the website speed so these are just the and you know just kind of the ones you want to avoid now one of the biggest criteria in the web hosting company that you choose is they must support WordPress now when I say that I'm not saying that you are allowed to use WordPress or it says WordPress someplace on their website what I'm referring to is if you are in a situation with your WordPress website and you need help that you can go to their support and they're not going to say sorry that your your deal that's not us you're going to have to figure that out on your own that is what I mean by they must support WordPress their support staff must know how to support and be willing to support you with your WordPress-based websites you'd be surprised most hosts are not going to help support your WordPress based website now a web hosting company is not liable for things that you do to massively break things so for example if you set your WordPress password to the word password and then someone hacked into your account destroys your website that's not going to be their responsibility that will be your responsibility but if you need help save your having some kind of a problem with the plug-in that you installed you should be able to go to your web hosting company and they'll manually go in there and remove that plug in or you're having some kind of line of code that pops up and you don't know what that is or you're having trouble installing something in you can go to them that's what I'm talking about is they must support WordPress and this is why I don't recommend going with tiny little mom-and-pop neighborhood web hosting companies and that's because they don't have the support staff to be able to invest the time in giving you proper support and they typically don't have a proper infrastructure to keep your website secure to keep your websites optimized and next requirement is they must offer free SSL certificates I said in the tutorial overview your and learn how to do and install in SSL certificate on your website and here's the thing if your web hosting company does not provide them for free you're probably get a pay anywhere between 30 and $100 per year per website for an SSL certificate '96 just you know money that you don't have to spend if you choose the right web hosting company so that kind of piggybacks back to avoid DIG and Go Daddy companies while those companies yearning to be paying for SSL certificates and is going to get really expensive really quick so it's better to choose a web hosting company that is been to give you a free SSL certificate because you have to have an SSL certificate you just have to these days if you don't have an SSL certificate on your website and someone uses the Google Chrome web browser and they visit your website it will say in the top bar you put the website address it will specifically Satan not secure and you don't want someone visiting your website using that browser which is the most popular web browser inhabits a not secure that's just stuff that you don't need next thing I want to talk about is shared hosting versus managed hosting versus a VPS now these are phrases that just get thrown out there and there's a whole bunch of other phrases cloud hosting managed hosting optimize hosting all these different phrases now I wish there was like some standardization with it however Juergen have web hosts that throw out all kinds of fancy phrases so sometimes it might be hard to know what your purchasing so let me just try to sum it up in a nutshell your shared hosting is your hosting account to be on a server with other people who have their web hosting accounts on the server and you guys all share resources that's why it's called shared hosting now good Webhost don't pack as many customers on a single server because if they do that it's going to affect everyone so that your shared hosting so you are vulnerable if some other web hosting account on the same server starts to have problems it can cause problems for other people however a good Webhost will be monitoring everything on the server and they will stop problems before they happen then you have this next level called managed hosting and this is a different hosting environment that is more optimized for WordPress and sometimes they'll also bundle in additional services like backups staging servers things like that automatic updates of your plug-ins and WordPress and that's can be your managed web hosting it's gonna cost more money but for a lot of people the performance gain will probably would be worth it and also the managed environment of making sure everything's updated that might be worth it as well next is a VPS which stands for virtual private server you don't hear it referred to is that these days you more herein referred to as a cloud hosting or something along those lines else some web hosting providers use that cloud word the wrong way but it's cloud web hosting a lot of times your cloud web hosting it's going to be completely unmanaged you're completely on your own you need to have a PhD in something called Lennix in order to be able to make everything happen it's not that it's impossible to not that there's not tools out there to make it easier to manage your going to have higher performance but if you are new to web hosts you do not want a VPS right now that will be something when your website starts to get a ton of traffic and you need dedicated resources you need ultrahigh performance and you have someone there to take care of it for you now I have a special website set up called order new hostingcom and I want you to visit ordered new hostingcom and that is where I put together a list of Webhost that meet this criteria and are also very reputable companies and almost universally regarded as the best web hosting companies that there are there going to provide support for WordPress users are to provide free SSL certificates are not going to overload their servers and lasts which import which is important you can start out at the shared level of hosting you're just getting started out it's less expensive and there's an upgrade path you can go from shared to manage to VPS as your needs change so here's what order new hosting looks like I've got these recommendations right here my top recommendation is InMotion hosting now what's nice about what I've set up on this page for you is I have a series of training courses now these are paid training courses here some on various page builders here some on some of the common things are and want to do with your website and here's my higher end courses right here I have a special package is where if you order from the host that I recommend and then send me a copy of your receipt I'll actually give you free access to these courses so that you have all the tools that you need in order to be successful with your WordPress base website so with InMotion hosting you can see right here is the biggest offer you're going to get a page builder course in these three other courses all in all it's worth almost $500 I'm also recommending A2Hosting and Siteground and they're all going to be on this page and over time I'll probably expand on these recommended hosts as time goes on so this page might look a little different when you come to it so let's take a look at these web hosting companies in order a web hosting account the first one was working look at right now is a Siteground no on Siteground's website we can scroll down and you can see right here they have a web hosting and I'm in a go ahead and click on where it says learn more and let's take a look at their plans right now so they have to replant startup grow big go geek in they all have different prices and they all have different things included now Siteground is an excellent Webhost it also is the only one that I recommend that has metered hosting and what metered hosting means is it's going to be limited to the amount of visitors per month depending on the plan that you go with so that this plan right here for 395 per month is going to only be good for 10,000 visits monthly so for me I would definitely need this plan right here which is for 100,000 visits per month she would be able to come here and decide which one would fit for you but you have to keep in mind that it's metered web hosting that isn't so bad depending on how much traffic you anticipate getting on your website and that's how they can make sure that their service is high-performance but it is definitely something to consider next we have A2Hosting right here and they have several different plans for you to choose from now the higher priced plans you're typically going to want those types of plans for e-commerce websites or maybe a learning management website not your just basic brochure website but your site that you're going to expect multiple people to be on and doing different things and staying on your website other than just reading so you can choose one of these packages right here what is nice about the turbo package is right here it says the turbo package is going to be faster and a lot of that is because it includes a plug-in for WordPress that's going to make it run faster and then right here you can see they also have a managed web hosting plan right here and this is going there to give you a little bit more service with your website for you next is a web hosting company that work and actually set up in this tutorial video and that is InMotion hosting I have lined up a 50% to 57% discount on these web hosting plans down here and this is also the web hosting company where I'm going to be giving you the biggest or largest bonus right here of free courses so here we are and they have these three plans and you could see that the lowest you can get this launch plan for his 295 now when you hover over the order button it reveals how much it costs and so forth what if you only wanted to get service for one year it's going to be $449 times 12 if you wanted it for two years or three years you can just as easily do the math you would just select the one that you wanted so the launch plan is going to be good for one website actually here let me scroll down okay see I get some information wrong sometimes okay so right here it says on the launch plan you can host two websites on the power plant six websites and on the pro plan you can host on limited websites okay so these are the three plans that you can choose from now they also do some really nice things if you have a website someplace else though migrated for you they also have all US-based support which is very nice they also have something very interesting so if you're on this page and you go to web hosting you can click reappearances WordPress hosting now this is something that they just launched I want to see me like middle of 2017 so these are fairly new offerings for them so this is WordPress optimize the specific hosting your WordPress-based website is going to run faster on this WordPress optimize hosting and you can see the various plans that they have available here these plans also are metered however it says suitable it's not a hard Requirement so they're knocking to be tracking how much traffic you get and telling you you have to upgrade and so each of these plans you could see some of the differences they're not what I like about InMotion hosting and all of these hosts is you can start small and work your way up so for this video this tutorial I'm in a go ahead and start small because I know I can work myself work my way up as soon as I start getting traction so I can start on the launch plan and then work my way up to the power plan and then the pro plan or just go straight for the man is WordPress hosting everybody's different so if you're not price-sensitive you might want to start out with some of the manage WordPress hosting options right here if you're not price-sensitive but if you want to just start someplace so first thing is working to choose a data center so if you are in Europe or Asia you'd probably want to choose Washington and if year in the United States or Central or South America you might want to choose Los Angeles honestly it doesn't really matter as much as it would have maybe 10 years ago however if you're really concerned about this and some people are you might want to check out A2Hosting which is the second hose that I was talking about however you're going to most likely be perfectly fine with Washington or Los Angeles right here mine is currently in the Los Angeles data center next you have the option of paying for a dedicated IP address this isn't so needed these days you can get it if you want if you're going to have a website where you want a high-end paid SSL certificate that there are certain certificates like for example you can see right now with InMotion hosting on their website you see right where the URL is it says InMotion hosting like that that's usually an indication of a more premium SSL certificate that usually over $100 usually around $300 per year it's called an EV certificate and you would need a dedicated IP address for that so if you're not a bank then you probably don't need a dedicated IP address so will leave that at no thank you and then right here words as content management system auto installer let's go ahead and choose WordPress and so what this means is after you order it's automatically going to install WordPress for you it's just one less step that you're going to have to do let's go ahead and click on continue now is where you would either order a new domain name or you would connect in a domain name that you already have someplace else so if you've already registered a domain name someplace else like maybe a Go Daddy or another popular one is called name cheap you would just go ahead and click right here where it says I already own this domain and you would enter your domain name and then click on continue what ends up happening is you order the hosting account and then there is some instructions on how to point your domain name from wherever it is to your new web hosting account or you can just check right here and purchase a new domain now with InMotion hosting these are the only extensions that they support

comnetorgbizinfo

us so if you're in the UK and you wantededu or you want one that's not on this list I recommend going to name Chibacom to register your domain name that being said I recommend if at all possible to go with acom domain name I I I I know nowadays there'sIL-1

co and all these things and I think nothing will ever be as good is acom domain name go ahead and enter a domain name now now after you enter it it's good to see if it's available and if it is it will let you proceed if it's not available it will let you know that so that you can choose a different domain name so I've gone ahead and enter to show the demo one I know that that's available and the actual domain name I'm going to use for this tutorial is to show the demo so then I want to go ahead and click on search and it's going to check the availability and this is when it lets me know that it's available and then all I have to do is click on add to cart right here and you could see right here it added the domain name and the domain name is actually going to be free of charge it's normally $15 per year but it's going to give it to you for free but it also added domain privacy and it's up to you whether you want domain name privacy or not so essentially whenever you register a domain name you have to have a valid name address and email address contact information tied to that domain name and its public anyone can go and see that information or you can get domain privacy and it's kind of like your info is just unlisted and there's this domain privacy companies information there instead now you're totally you not totally private I mean it's it's private from public eyes however if there's a legal situation or anything like that it is very easy and possible to send some important documents to the domain privacy company and they will immediately give up your information so it's more just to protect you from the casual person so if you do want that you can just click on continue if you don't you can just click on the X right here in it will remove that and take your balance down to whatever it is now let's click on continue and in this step because I removed the domain privacy it's just asking me one more time that's okay persistence is actually a good thing I'll go ahead and click on continue and now it's going to take me to the billing section and so what you want to do is enter in your email address here so I've gone ahead and entered an email address I'm in a click on continue and it will take me off to the next step okay so this is the step where Juergen enter in all your billing information now there's one important part to this and that's right here where it says referred by and it's is optional I'm asking you if you would enter WP now typically when you order you it will automatically know that you came through from my websites and when you do get your receipt you can send it to me and I'll get you those access to those courses that I promised you however sometimes it's just safer to put WP in here as well that way they'll be written information there so they know that you came from my website you'll just go ahead and fill this out and scroll down now right here is the option to choose your payment method and you can put in a credit card or a debit card now there's one glaring thing missing and that is that they don't have a PayPal option so if your only way to pay for this web hosting account is via PayPal it's actually okay you can pick up the phone and call them or you can contact their life support so they have live chat on the website you can say hey I want to order new web hosting account but I can only pay through PayPal and they will set you up now when you do it on the phone or you do it that way just let them know that they have to put the order with WP and you'll be fine so then once you enter all your information click on review my order then you can complete the order and you're going to get two emails from InMotion hosting and let me go through those now okay so the first email you're going to get is your receipt and this is what it looks like I blurted out my information I hope you don't mind now this is what I need you to forward to me offers at WP I need you to forward this to me if you would like access to that bonus package of courses just go ahead and send this off to me than what I do is I take it I verify that you did purchase it through the link on my website and then I'll be able to go ahead and send you access to the courses so this is the first email that you're going to get and then you're going to also get a second email here is that second email right here now I will tell you that sometimes when you order a new web hosting account the web hosting provider will want to call you before they create the account and verify that you actually did place this order that happens and so that might happen when you order a new hosting account if not your many get that receipt that I just showed you and you're going to get this welcome email right here now this welcome email has some important information in it first it's going to give you your login ID which is really just the email address you used when you set up your account but then you need to click this button that says to get started set your password here you need to click on that and what it's going to do is it's gonna take you over to InMotion hosting's website and its can allow you to create a password then once you've created the password now you have your login and your password and you're going to be able to login so I'm in a go ahead and log into my account right now and here I am logged in now don't get rid of that email that you just got from InMotion that had the link to create your password because when you scroll down on that email it's can actually have your WordPress login information okay so now that you are logged in to your web hosting account let me just let you know if you're using a different Webhost a lot of times they're going to kind of look similar and I'll get into that in a moments you could still follow along now first thing we want to do when we first log in as we wanted go ahead and write off the bad turn on that SSL certificate so I need you to click on manage free basic SSL certificate you click on this right here and then what were going to do we just have to wait a sec it's just analyzing your web hosting account to take a look at all the domain names on it and then after a moment it's gonna show your screens and look like this here on the right you see it lists out the domain name I'm just gonna read this one important bit right here it's as if your new domain is less than four hours old or you have not pointed your existing domains DNS to the account we can't issue a free certificate so just keep in mind if it's a brand-new domain name you might need four hours to wait before this can be issued all we need to do to turn on SSL is to click right here it's is off and I'm to do that and it's going to turn on and that's all there is to it now an SSL certificate for free will be issued to you and you'll be able to use that to start using your website in a secure environment okay so let me go back to him and to go back to bed here now that we did that in that was actually so easy it's more complicated with other web hosts now what I want to do show you where the main meat and potatoes of this control panel is going to be and it's good to be right here and it's gonna say cPanel now this is an industry standard thing cPanel or Control Panel so even though this is what InMotion's looks like you're going to have the same thing with Siteground the same thing with A2Hosting the same thing with most of these shared web hosting providers they're all using the cPanel with InMotion if you chose the managed hosting it's the same thing it's going to be in this thing called cPanel now there's a couple things I want to do before we log into WordPress for the first time in the first thing I want to do is modify the WordPress site so that it knows we only want to use a HTTP SVS a cell certificate for the website some to scroll down here and click right there where it says WordPress and it's gonna pull this up right here now when you scroll down your gonna see a list of all the WordPress installations that you have here is the one that was automatically created when we signed up for our web hosting account if you look at the URL right there it shows a HTTP not HTTPS and we just want to change that and it's actually really easy to do all we need do is click on this little edit details icon right here so let's do that now and then it's gonna pull up this screen right here and the second option is URL and we can actually change this so I can click here and put an S like this and oops not as a you wanted to be corrected so now it's HT and this is exactly what we wanted so now we can scroll down to the bottom of this page and save our details just click on the Big Blue button save installation details like this and now it says the installation details were edited successfully that's perfect so now let's click back your word says cPanel and networking to do two more things in cPanel first I want you to just double check now if you're not using emotion in you using a different hosting account you're going to want to do this as well I want you to scroll down to where it says PHP configuration and click on this now with InMotion hosting they started by default which is a good thing putting you on this thing called PHP seven now if you have an old web hosting account someplace chances are you're on an older PHP version and what you're gonna want to do is change this drop down to PHP seven and as time goes by you might want to put it at PHP 71 or 72 but it's safe to leave in on PHP seven essentially this setting is going to make your website run a whole heck of a lot faster however a lot of old web hosting companies they put you on this old 56 version and the reason they do that is for greater compatibility and less headaches for them if you run into a problem however that is a very old version and if you just switch it to version 7 your websites cannot load a lot quicker okay so now that we verified that were on PHP version 7 let's go ahead and click on home and that's gonna take us to the home of the cPanel now if you're looking for something in cPanel you can just go ahead and enter it right here and it will pull it right up and this is pretty universal so what we want to do now is want to create an email account that were going to use later on the website so let's go ahead and click on email accounts now this control panel like I said cPanel is industry-standard if there is ever something that you wanted to learn how to do you can do a search for for example how to create an email address in cPanel and if you entered in that search you will find instructions on how to do it so just know that cPanel is what you have it's what most web hosting accounts are based on and there's lots of resources out there available to you soon I will get to go ahead and create an email address and this is good to be an email address that working to configure inside of WordPress so when WordPress is sending out any important emails this is the account that it's going to use so on my website I just use adam@wpcrafter

com so you can make your this email address is whatever you want to get as many email addresses as you want actually something to go ahead and enter is to start filling this out okay so I've gone ahead and I'm going to create the email address adam@showthedemocom I popped in a password and here's the quote or you can make it unlimited or leave it at that it's not going to be really something where I'm leaving a lot of email addresses there to go ahead and click on the create account right here and it is going to what minority made my email address so here you can see a list of my email addresses and it's just this one right here and what we can do if we want these settings for configuring this email account in an email program or maybe something on your smart phone or or maybe a program you might have on your computer just click right here it says set up mail client like this and then we just choose which program were going to use or what I prefers I just like to scroll down here and just grab the settings right here in working to use these settings later on so I suggest you just make a note of it so you already know the username it's gonna be your email address you created the password and then here is the incoming server in any kind of port information in the outgoing server and the port information for that working to take this information later working to plug this into our website so uses this email address when it sends outbound emails so now we can just scroll up and click back onto cPanel and this is really where you're gonna configure everything related to your web hosting account is here in cPanel you're mostly never to use it though you just maybe create a new email account or something like that there's really not a ton that you're going to do in here so now let's log in to WordPress for the first time now remember I said to hold onto that email that you were sent by InMotion to create your password I want you to pull it up right now and I'm in a pull mine up so now I've just scroll down a little bit and what this does is it says right here login to the administrative dashboard and this is actually for your WordPress website you can go ahead and click on the link that is there which is admin using your domain and it lists your email username and password you can use your email and this auto generated password this is your WordPress login don't worry about your password I know it looks crazy work minutes change that password here in a moment but this is going to be your login information so I'm in a go ahead and open up this domain name right here and start the login process know what you're going to do is your and a copy it into your clipboard and then you're going to go ahead and paste it in right here now the only difference is you see how it says HTTP will we want to change that and make it a HTTP so just go ahead and enter an S right there and then hit on enter and it's going to take you straight to the login page so now you can enter in your email address that you used to create your hosting account and working a piece then that crazy password okay there's minds all just go ahead and click on log in and it will take me right on and so now I am logged into WordPress for the first time I just wanted to just stop for a moment and congratulate you you are doing fantastic so far you've accomplished so much you made a wise web hosting decision you set up hosting the domain name and you set up an SSL certificate not something that a lot of people have a trouble with but you've already gone ahead and done that and you have installed the WordPress and you are ready for action great job so now let's take a deeper look at what WordPress is so that when you're going into WordPress want to go in a moment during a feel more confident your to feel more comfortable in this new tool that you're using so first of all I guess what most people describe WordPress is is a content management system so essentially just means it's a program that gets run on a server in the cloud that allows you to add content to it that you can then display on a website address is a content management system and with WordPress working to be creating pages these are standard pages of content like a contact page of services page that's kind of content that stays the same and then we also can create something called posts or better known as blog posts and this would be more information that is aligned with the dates so for a business this could be may be news or updates or some new information like that but WordPress is not limited to that you can also have other types of content so in an e-commerce scenario you would have products if you're using WordPress for a learning management system you might have courses and lessons so even though out-of-the-box WordPress supports pages and posts you can create any type of content in WordPress it is extremely extremely powerful now the structure of a WordPress-based website and any website at the very top of the webpage you have what's called a header and at the very bottom you have a footer in these two areas are typically identical on every single page or post or type of content that you're on or pager on on a particular website the header stays the same the footer stays the same what's in between is all the only thing that is different from page to page so what is the anatomy of a header you might have a logo and you might have a menu and so in a word press we create menus and we can add a logo to the header we create these headers and the same goes for footer at the footer that's the bottom of your webpage you can put all different types of information in there may be a mini contact form or a list of popular pieces of content on your website however you want to use it next on the anatomy of a WordPress-based website as you have a content area and that's everything pretty much either below the header and above the footer just kind of like a sandwich it's kind of the meat right there in the middle but then on some pages or post on your website you might want to have a sidebar that might have additional information may be other links may be another menu and that might stay the same typically for a page the entire content area of the entire area underneath the header and above the footer is just to be or your content edge to edge top to bottom typically on a blog post you'll see a sidebar but you can have the sidebar on all types of different content in WordPress now what people talk most about with regards to WordPress or WordPress themes and WordPress plug-ins so essentially a WordPress theme is can it kinda be the framework of how your website will look on the front end of it so not the back and were your creating stuff but on the front and it's going to have all the styles and the layout and stuff like that in it that's your theme and there's thousands of themes to choose from there some you want there some you definitely don't want in the same goes for plug-ins what that is is it's a little thing you can add in this can add some kind of feature functionality perfect example is by default WordPress doesn't do e-commerce by default WordPress doesn't do an online course or learning management system so what you do is you install a plug-in to add those features so for e-commerce you you add WooCommerce for a learning management system you can add learn '96 or LifterLMS and there is an entire ecosystem of of companies building themes that you can buy and P in companies of building plug-ins that you can buy if you want to create a landing page there's a plug in for that if you want to turn your website into a membership website there's a plug-in for that if you want to add online booking to your website there is a plug-in for that and that is why WordPress is so powerful is because of this plug in system where you can easily add new features to your website so let's go ahead and jump into a fresh installation or this fresh installation of WordPress that we have right here now this is fresh and untouched and there's a list of things I like to do when I first install WordPress but right when you login to WordPress for the first time it takes you straight to the dashboard, to show you something real neat here that actually a lot of experienced users and WordPress don't even know in the first thing is where it says screen options right here so on the dashboard we see all these bits of information here and you might not care about any of this information you might want to disappear well on all these different menu options here on the left that take you to different parts of WordPress you have this screen options here to show you real quick what options it's giving us for the dashboard when I click on screen options it reveals this panel and I can enable or disable any of these if I don't want to see him again so for example this big welcome or about this at a glance so I can go right here to where it says at a glance I can click on the checkbox bam it disappeared I want to back I can click on that now the screen options are all throughout WordPress and it's one of those things that you might want to be aware of so here's all of our menu options and this is going to kinda tie into the presentation that I just gave her I talked about a content management system so right here is for creating those blog posts right here is for your media if you want to upload an image or something like that it's going to be right here it says media and here's where I can create a new page now also with posts you can allow people to leave comments are called blog comments and they're all going to be right here and then this tab right here that's his appearance this is where were going to be able to choose a theme and then were going to be able to kind of start putting the pieces together of creating a menu adding what's called widgets widgets are if you wanted that thing I was talking about a sidebar you add these things called widgets to the sidebar and also to your footer and then here's our menus customize and that's were we to go in and customize our theme and then we have our plug-ins which I talked about you can install of see a list of installed plug-ins or add a new plug-in right from within the interface now to use the backend of WordPress you have a user account in working to go inherent set up our password and things like that you can also have multiple users and there's different types of roles that you can assign to these users that limit what they can do when they log into WordPress next we have some general tools you're really knocking to be in here that much is it just works importing data or exporting data and then we have the settings panel right here in this we are going to go through right now we have general settings writing reading discussion media and permit links so we actually need to go and tweak some of the settings that I like to tweak when I first log into WordPress now what happens is when you add plug-ins to your website these plug-ins may add menu items here so these menu items will be on every WordPress based websites but some of them you're to see additional listings here additional menu items and that's because when you add a plug-in it adds a new feature in it might add a menu item here so with the e-commerce example it will add a products menu item for the learning management system example I will add maybe something that's his courses or lessons or the name of the plug-in so this is going to look at different depending on what you have on your website now let me at last explain what these red dots are so you have a red dot here next the plug-ins in it has a one right here next to updates and then even up here in these are indicators that there's something on your website that needs an update and you're going to get three types of updates with WordPress and it's very important that you stay on top of your WordPress base website and make sure that these things are always up-to-date you're going to have WordPress itself have updates you're going to have your theme have an update and you're going to have plug-ins have an update now in this case you can visually tell we have an update it says one here it says one here but we can see right here it's an update to use this plug in in this are just some default things that are installed when you first install WordPress let me show you how to do an update in the organist are cleaning out WordPress and were going to reset the password so you can click here or here to get to the same place it's gonna take you to the update so I'm just gonna go ahead and click on updates and this is gonna list all of your plug-ins or themes that need updates so right here in a list a with there's a WordPress update right here in the list are your plug-in updates and right here your theme updates so I can click on this checkbox and then I can click on update plug-ins that's one way to do it the other way is to click into plug-ins directly and you can see a list of all your plug-ins and this will let you know this needs to be updated and there's an easy button right here I can click on I just did and it's going to go ahead and update that plug in for me is very important to stay on top of updates they can either add new features and functionality to your website or they can also be adding security patches and updates to your website so it's very important to stay up-to-date so now let's go through the steps I like to follow when I first install WordPress and at first when you click on posts and pages right when you install WordPress it's going to have some information in there that you may not want so I don't want this default post I can hover over it click on trash and what that's gonna do is it's going to put it in something called the trashcan and you can see right here trash has one so then I click on trash and then I click this button here that's his empty trash and it's as simple as that the same thing for pages on the click on pages it's going to have this sample page of the click on trash and then I'm in a click right here it says trash and then a minute click on empty trash a click on comments but there isn't going to be any and that's because comments are linked to posts there was a comment in there but since I deleted the post it also deleted the comments the next thing I like to do is go to settings and then click on general and this is where working to set some general settings for our website the first thing I like to set is my site title so by default typically when you do a fresh installation of WordPress just to see my blog and this is where you want to maybe say something about what the website is about and maybe slip in some keyword phrases that someone might search into Google in order to find your website you might want to put that information right there for the tagline I usually actually take that out but you can have it if you want but what's really important is for the email address that this is a current email address that you're going to receive the emails this is the email address that WordPress is going to use to notify you of updates and and any administrative purpose next I need you to go where it says time zone and we want to put your proper time zone in here and that's because of WordPress emails you and there's a timestamp you want that timestamp to actually makes sense because it's your time zone so when you click on this you can set it based off UTC or if you scroll up your to start seeing a list of city names broken up by country so I would choose Los Angeles and here's Alan I don't see Los Angeles that's because I'm not in America the section for America so I need to just keep scrolling up until I find Los Angeles and there is Los Angeles you only have to do this once and then I want to scroll down here and click on save changes the next thing I like to do in this is incredibly important click on where it says permit links this is a very very important this is how the links to the various pages on your website are going to look you get to choose how they're going to look and there is a way of doing it that everyone just needs to do and that is the click right here where it says post name so this is what your link is going to look like it's going to be the name of your website and the title of whatever piece of content this is a much better link to give out to reference to have shown Google than something like you know your domain name a bunch of numbers tied to a date and then a piece of information like the title of your content so just leave that on post name scroll down go ahead and click on save changes now let's take a look at your user account so hover over to users you can go straight to your account by clicking on your profile or you can click on all users and you can see a list of users so here is the user that was automatically created when I installed this WordPress based website so I'm in a go ahead and click on that now I want to scroll down and show you some information right here this is where you're going to change your password change your email address and also change or configure how your username will be shown on the front end so there's different pieces of content where it might show the author that would be like if you're writing a blog post and it shows the author so by default it's set to show this and I probably don't want to show this so this is where output what I want to show this is typically what I enter Adam at WP next to Wertz's display name publicly asked this is where you and I want to change it to what you just entered in and it also doesn't hurt to put your first name and last name in there next the scroll all the way down and then right here is where you can change your password so what you'll do is click on generate password now WordPress by default wants you to be very secure in that is an insane looking password you don't have to use that you can enter in a different password right now and then click on update profile so I'm going to do that because I don't like the auto generated password I wanted to be password that I'll know hey word of caution do not use an easy to guess password it is a bad idea so to go ahead and enter my password okay so I've gone ahead and updated my password now some other things you can do if you wanted to change the color scheme back here I like leaving it the way that it is so all my websites look the same but if you wanted at your website you can go ahead and choose a different color scheme if that's something that interested you now your username is not something that WordPress in the user interface here lets you change if you want to change your username you can do that there is a plug-in that allows you to do it called username changer in this part of the tutorial you're going to see how to install plug-ins so that would be something you would just search for an ad if you wanted to change your username or you can just be like me and use your email address as your username when you're logging in you typically don't want certain easy to guess username needs to be user names like admin or administrator or the domain name or something like that you want to avoid that so now let's take a look at themes so I'll go to appearance and I'll click on themes and this shows you a list of themes now these are the three themes that are installed by default depending on your Webhost it might not have all three let me show you how to delete a theme you obviously only need the theme that you are using so first let me show you how to delete a theme you can just click on where it says theme details click on delete and essentially and then click on okay essentially this is less files that are going to be on your web hosting account so like once again click on delete confirm and it will be gone now let me show you how to add a new theme so what you can do is click this button here that says add new and it's immediately going to take you over to the WordPress theme repository but I like to just call the WordPress theme directory now these aren't all the only themes available for WordPress these are all free themes that you can download directly in WordPress but you can also go and purchase WordPress themes anywhere on the Internet and they usually give you a file now in those situations you would just click on upload theme and then choose that file and that's how you would install your theme now let me tell you that there are tens of thousands of WordPress themes there are a large amount of outdated themes and there's a lot of just crummy WordPress themes also there is this sort appear popular latest and and favorites so I click on popular that usually will your where you're going to start now just because a theme is here in the popular and might be on the top 10 or something like that that does not necessarily mean it's a great theme either that can mean that they have a great marketing team that's out there spending tens of thousands of dollars per month so that people will know about the theme and install it it does not is just because you're in this popular list it's not an indicator that the team is actually any good and if you wanted to install a theme all you would have to do is click on what you can hover over it and click on install and then it will go ahead and install that WordPress theme for you and now when I click back on themes you can see I just installed this WordPress theme the same is pretty much for plug-ins if I click on plug-ins organ to see a list of my plug-ins now these are installed by default some host do some host don't this is how you delete plug-ins I can click on delete and then confirm it and now that plug-in is gone I can activate a plug and just click on activate and then you can see the color of it's going to change to that blue and that's how you know this is an activated plug-in but then if I don't want it I can click on deactivates and then I can click on delete and confirm and now that plug-in is gone now if I want to add a new plug-in I can click on add new and it's the same thing that went with themes there are free plug-ins that are listed right here but there's also ones outside of here that you could purchase and then upload and the same goes when I described with themes that just because you're in this featured list that doesn't mean it's any good just because it's in the popular list that does not mean it's any good typically with plug-ins you're going to do searches here and click right here and you're going to do a search for your plug-ins or categories typically you're gonna want to get recommended plug-ins and I recommend I have a whole series of plug-ins that I recommend for all different things that you would need but one thing to point out is what you see right here is not necessarily the best so the same goes with themes if I see a plug and I like I can click on install now it's going to download that instant that plug into my WordPress website I can click on activate if I want I don't want to I can click back to installed plug-ins and then I can delete that plug-in if I want to in this case I definitely do nonetheless thing I want to talk about is most of the appearance side of your website that is going to be dependent upon your theme is going to be in this item here called the customizer it's a different interface in WordPress that you're going to be using in order to access all of the options that your theme may give you so I click on customize like this it's gonna take me into this thing called the customizer so you can hear me reference the customizer often and here's all these thiols settings that are related to your theme your colors your fonts putting in a logo all the various options of how things look and what's also nice is you have these controls right here to see how your website looks on a tablet and to see how your website looks on a mobile device and it just shrinks it like that and this is how it looks on a tablet and back to the desktop like this this is also an alternative location where you can create menus if you wanted to and then when you've made any changes you can click on the publish button and that makes your changes now live so to get out of the customizer you would just click on this X right here you're back into WordPress one thing that's interesting with WordPress's there's always more than one way to do the same thing so you saw you could create a menu in the customizer but you can also create a menu right here underneath the parents click on menus and here's our interface to create a new menu in this right here is the default menu that is created with when I installed the WordPress user menu items here's a list of the various menus it's real simple you create a menu you put your items in the menu and then you sign the menu to a location she can assign it to the top the header area into a footer it all depends on the options that your theme gives you you can rearrange things just like this you can stack one menu item underneath another menu item I can see what I wanted to add if I wanted to add this homepage I can click that click on add to menu and now I've added that I can reorder it it's really flexible this menu structure and the last important thing to take a look at is this thing called widgets and what widgets are is when I was explaining WordPress has these things called sidebars well this is where you would you would add content to those sidebars and also when I said WordPress has footers this is where you can add content to those footers To do it through these things called widgets so here are the widget areas so we have the sidebar we have the footer and lawn in front foot or two now these are different based upon your theme so this is your entire footer is split into two sections for the one in foot or two and these are widgets these are all just there by default and what you can do is you can click on any widget like this and you can delete it if you want by clicking that and now my widget is gone I want to add a new widget here's my widget options right here if I wanted to add a navigation menu I can just drag and drop that right there and then choose my menu and then click on save and I've added content to the footer and the same goes for all of these widgets plug-ins will add widget options and also themes will add additional widget options in widget locations so just think of widgets is how you add content to other areas that the theme controls in the header may be the sidebar or the footer it just depends on your theme so the last thing to do is to go right here and click on visit site and working to be able to see what this WordPress based website looks like right now this is just running the default theme and it set up the default way just like this now I'm not a big fan of this theme so that is basically what WordPress is it's a content management system where you create pages posts and other types of content you have the header the footer and menus that your Dean controls and those usually stay the same on every page the of the content area which changes from page to page and you have a sidebar and what dictates the style is your WordPress theme and there's free ones and paid ones and to add features to your website you would add plug-ins so now is where the fun begins were going to go ahead and install theme and working to install the plug-ins that were going to use some to go ahead and click on appearance to choose themes and then right here I'm in a click on add new and then I'm going to click on my actually we don't need to click on popular'85 Do a search for it enter Astra AST RA and it's going to pull it up right here don't worry if the thumbnail image looks different when you're doing it it's because they updated from time to time to go ahead and click on install and then after that I'm in a go ahead and click on the activate option here it is click on activates and now we have our first theme installed and activated tough that's actually interesting that the thumbnail already changed that's hilarious now we it's a good idea to always keep a separate theme so you'll have another one in case your troubleshooting a problem you can always switch to it so we don't need three themes here to go ahead and delete this 2016 theme and I showed you how to do that in the prior portion of this video so now that is done let's go ahead and click on the plug-ins and we should have the list of plug-ins all deleted the default ones that came with this let's go ahead and click on add new now these are in no particular order so first let's type in Astra Sites here it is let's go ahead and click on install now and is just gonna take a moment to download and on this one working to go ahead and actually activated right now not to do that for all of the plug-ins we install Sonoma to go to add new again and this time I'm going to put in a plug-in named really simple SSL now what this plug-in does and you can see it's on a ton of websites with this plug-in does is it will make sure when someone goes to our website that they are pushed to the SSL version of it so though go to if they enter in a HTTP and then the website this will make sure they actually get redirected to the HT to the secure version of your website someone go ahead and click on install now I'm not going to activate that one just yet now the next plug in that I want to install is named iThemes Security here it is this is a plug and that's going to keep your website safe from any kind of hacker that might try to break into it is going to protect the login form it's gonna do all kinds of great security related things so my click on install now and this is another one were not going to activate it just yet next were going to add up drafts and that CUP DRA FTS and this is going to be our backup plug-in and what this does it's so awesome when it makes a backup you can have it send it to dropbox or someone off site location and that's what I love about it I use it with dropbox you get a free dropbox account and when it makes its backup it'll be right there in your dropbox and then you have the extra added protection if your dropbox pushes files to your computer now you have a backup of your website and all these different locations so I'm in a go ahead and click on install now and this is another one that were going to go through setting up later in the tutorial okay now working to install a plug-in named Yoast well I think it's actually called WordPress SCO but he used to be named Yoast and if you enter in Yoast it'll pull right up why OAS T now this is an SCO search engine optimization plug-in it's really one of those essential plug-ins to have on your website and it makes it your website fully optimized for search engine ranking obviously you have to go in and do a bunch of things but this allows you to actually do it working a touch on that towards the end of this tutorial go ahead and click on install now next were going to put in that email sending plug-in so do a search for SMTP so when you enter in SMTP were going to go with this one right here WP email SMTP GiveWP form so go ahead and click on install now for this one and now let's go ahead and take a look at our list of installed plug-ins and you can see everything that we've done so far so we have asked for starter sites and that's active we want that working to do the security later the backup later the SMTP for sending emails later and will do Yoast our SCO plug-in later what I want to do now though is click on activate for really simple SSL were to go ahead and activate this and what this is going to do is fully enable your website to force everyone onto the SSL certificate for encryption Mrs essential for any kind of e-commerce or just any kind of website you have to be on the SSL certificate these days or like I said earlier you see were to secure if you don't have an SSL certificate Google skin essay not secure in that's not what you want with your website so go ahead and click right here where it says go ahead to activate SSL will give it a moment to do its thing now when you do that the next thing you click on you're going to have to re-login so if I click on dashboard it's going to make me or force me to re-login which is okay it's only the first time you activate that plug-in and pretty much once it's activated on your website you're not to touch it again so right now why don't you log back in to your website a camel to go ahead and click on login it's going to put me right back inside and I am all good you should see this message that says SSL activated and that's can let you know that you are good to go and get rid of this message you don't have to see it anymore by clicking on the X right here off to the right and you are all set so now is where all the fun begins just a moment ago we installed and activated a plug in that name*starter sites and we also installed and activated the Astra Theme remember this thumbnail may change now you're going to see an option underneath appearance that says Astra Sites and let's go ahead and click on it now from time to time Astro will move things around so maybe this might be consolidated into here or something so if you notice something isn't aware I'm showing you in this video if you just the thumb around a little bit I'm sure you'll be able to find it but right here were looking for Astra Sites now first thing is were being prompted to make a choice and it says select groups select your favorite page builder now for this tutorial working to be using this page builder named Elementor so I'm going to want you to click right there on Elementor now what you're looking at is a beautiful beautiful thing you're looking at a list of fully designed websites that you can restore by clicking one button that is not crazy will actually think is more like three button clicks but you know that's a just a technicality so we can scroll down while there sort options right here and then you could search is not enough for you to really need to search but we can scroll down and see all of these amazing designs that we can easily restore and it's all free it's all that's all just available for free now some of them are going to have this agency tag on the top right those are templates that are not so the theme that were using is named Astra and they have a pro version and they also have what's that what they call an agency version that has all of these really high-end designs that you can restore the one click but they're super generous the the Themis free Astra starter sites is free and it's enough to get up and running so you can scroll down now technically what were doing in this video with WooCommerce and e-commerce it can actually be added to any of these designs so like I was saying at the very beginning of the video if you don't like the design that I'm using I'm going to actually teach you how to build an e-commerce website out of any of these designs and then I'm been also teach you how to make any of these designs your own so you're to be able to have full power and control to do anything that you want so these two right here are e-commerce specific and therefore the agency license holders there are all have some information in a moment about it here's a agency version here and it has some more design to it but these are really e-commerce related right here and you can see there's a wide variety of templates here in their all top-notch so if you like the way maybe have a garden store and you like the way this looks well you can easily follow along in the entire tutorial and choose this instead of the one that were going to choose the same thing goes for this really simple pet services one I really like that it's a really good template and easy to work with and see you have this wide variety here I love it here's a great one if you're gonna sell some beauty supplies so WooCommerce in the e-commerce platforms can work with any of these and that's just one of things I love about this but I'm to go ahead with this one right here the brand store because it's very much e-commerce related so any of these you can go ahead and click on this details and preview button and what's gonna do this going to show us what the websites can look like in the right we can decide if we want it or not and then when we have made our decision we can go ahead and move forward so right now it today restoring this is the two buttons that I need to click I need to click on install plug-ins and this is Bennett's restart and install all the required plug-ins which is essentially Elementor in the e-commerce platform and then after that I will click another button to restore all of the content it's good to do everything it's gonna make our menu for us it's it's gonna do so much for us all the heavy lifting it's going to do now I do think they're going to add an update so there's an additional step where you can just choose specifically what you want it to restore so if you are going through this process and there's an X extra step I'm sure to be self-explanatory how to move through that so I would go ahead and click on install plug-ins in its canoe install whatever plug-ins are required now this is real simple just Elementor which is going to be our page builder were to learn about that in a moment and WooCommerce which is the e-commerce platform some of the various templates are going to be maybe an additional plug-in or so maybe a contact form or something like that it might add to it now it's important to note that these website designs are all like really practical in ready to go now like with this you just change that image you can just change maybe this bit of text right here I mean this thing is ready to go okay so now it's installed those plug-ins all I have to do is click on import this site so click on that and it's given me this morning technically you don't want to restore this site to an already existing live site it could cause some issues now we haven't this is all brand-new and fresh WordPress installations were not and have any problems so remember I was just a moment ago telling you there might be an extra step added to this restoration process it's to make it so you could technically add some of this to an existing website but for us we don't need to pay attention to that just go ahead and click on okay it's going to go ahead as can a greater pages is going to create our menus is going to create all the styles it's going to configure everything but don't worry because I'm going to actually show you how to change everything and I'm in a show you how to make this exactly how you wanted to look but it is extremely powerful out-of-the-box and you can see it has a really nice shopping cart in the header mean this is just it's just a beautiful beautiful web design and it's just another moment away for it to be ready okay now it says done view site so when I click on this button it's can open up a new tab and it's gonna take me to the front end of the website and you could see your website is already looking good all we really need to do is customize this a bit didn't change or put our products in ourselves and change some of these images in the background and put these different links to the different categories of products were adding and you are going to be off to the races it already put together our menu when I scroll to the very bottom it put our footer together just like this I mean this is amazing how easy it was to get to this point and you have multiple different pages right here so there's an about us page I can click on right here and we have this beautiful about us page and you're gonna learn how to fully customize every aspect of this website right now but before we do that let's go ahead and let me walk you through choosing a color palette choosing a font pair and then creating a logo right so first were going to figure out what colors that you want for your website now typically you're gonna want to or three colors so your first color you're going to want identify is going to be your primary color and this is the color that's going to be predominantly used on your website and this would probably be used maybe 60% of the time or 70% of the time on your website and the second color is going to be your accent color so sometimes you might want the the color of a headline to be a different color and so this could be your accent color and there's various times you might want to use an accent color and it would be just different than your primary color and then as an option you could also choose 1/3 color which I like to call your pop color and this would be the color that is going to be different than your primary and your accent and it's good to be a color that would would attract someone's eyes to and you would probably use this on where you want their eyes to go so typically like a button right so you would make your button this color because you want people's eyes to gravitate over to that button so they know where they need to go next so here is a website called colors and that spelled COO L ORSco and you can go here and they've got a lot of great color pallets so if I click on explore it will show you a variety of color pallets now the way colors are interpreted in WordPress or pretty much anything that is design oriented is with the hex code so every single color has a unique hex code and this is the code you would copy in your in a pasted in certain locations in WordPress and that's how it's gonna know the exact color that you want to use is it with these of various hex codes while look at this like every color seems to have that that yellow on it that's interesting look at that I wonder what's going on there so for example I can go ahead and click on save this color palette right here and I would go ahead I would click on view and you would see the colors right now, go ahead and click on okay this is new let me get rid of that okay here we go so here is the colors in that color palette you see how you have this #and then in these six characters that is going to be your hex code and it's can be numbers and letters and so if I use this code right here in WordPress in certain locations it's going to show this exact color and so what we need to do is get these various hex codes actually like this color combination this right here with this but if you use this color as your primary color this as maybe your accent color and then this is your pop color and be really interesting color palette so what you would do then is you just copy these hex codes into your clipboard and will be using those momentarily now there are more websites than just the colors in order to find color pallets you can go to Google and do a search for color pallets and you can definitely see the many different websites for that another tool that I use I'm using Google Chrome and I recommend using Google Chrome if you're doing any kind of website stuff because there's a couple needed tools and in the first one I want to introduce you to is a right here it is called color Zillah now if you go to Google and do a search for color Zillah the first result will be this right here and what chrome does is it allows you to add these things called extensions that allows your browser to do more stuff so you would go ahead and click the button right here and it will add this to your web browser and this is what you'll see it's right here it's kinda hard to to maybe see if I hover over to Cisco or zealous when I click on it and it allows me to identify any color on a particular page so for example let me go back to that color palette right here so obviously I know the color pallets are but say you're on a website you really like a particular color or shade of a color and you thought maybe I want to use a very similar color so you would take color Zillah you would click right there choose pick color from page and now you have this black box that showed up and you can hover over different colors on that page and you'll see in that black box it will identify what the hex code is and so all you would have to do so say like this little blue right here I can hover over it there I have the blue if I click on my mouse now it copies the hex code in to the clipboard of your computer and you can paste that into a notepad so this is how you can go to a website that you like and you might like the color scheme that they've chosen and you can use a similar color scheme or test out a similar color scheme so I want you to go ahead and pick out a primary color and an accent color and gives in consideration of the pop color that you may want to use now since you're new to web building you might want to just stick with the default colors that we restored you might want to just use black or something like that and then later on is your thinking about doing more with your website then you can start playing around with these of various colors but it's the process of choosing different colors is what will really make your website unique to you and your brand next we need to look for fonts and so here's a great website I like it's called font peridot CO I love this site so essentially with your WordPress-based website you're going to be able to customize the fonts now the way this works is you'll typically have a two or three it's kinda similar to the colors right you're typically in 1/2 two or three different fonts so you can have one font that will usually be for your headline and you might also in use that same font for your menu and then you're going to have a body font so that's the body of the website you can have a different font for that you have the same font to the same font family that's fine but you typically have the the opportunity to have two different fonts there and then sometimes you might want I've actually don't have it I'm going to quote a phrase for it yet but that said third Fontan on times when you're on a website you see a certain section of it where it might be cursive or something that would be a starkly different font and I can be your third font I guess I I coined the term pop color maybe that's your pop thought as well so what I like about this website is it shows you all these different font combinations that work well together that are immediately to be available in your WordPress site and it's just a matter of choosing it from a drop down so when I scroll down this is what each one will typically say don't say the name of one font and the name of another font so the headline here is cabin and the body text right here is old standard TT so you'll just want to find a font combo that you like and then remember the name or maybe write it down in a notepad because will be configuring WordPress with that so here's another fun combo and you can just scroll down this is a really classic one Joseph and Sands that's the headline now you don't have to go with how they are pairing it you can feel like one headline in one body font that aren't necessarily paired here that's fine this just gives you an opportunity to see what they look like Montserrat this used to be very popular but it's lost its popularity right now it's really popular it will Meriwether is a very popular and that's for the text right here that actually looks good I might change my font my website to that another very popular one is this Playfair display let me show you if I can find that here as a headline let's see I'm just scrolling down so you get the point you can come here and see what you like and the different things with the different fonts how they look together I'm not seeing Playfair maybe if I just did a search on the page but you get the point want to come to a site like this and go ahead and pick out a pair of fonts that you really like now let me show you another way of identifying fonts that you like and that is that it's similar with the colors there is another Google Chrome extension called what font ice to say what the font I don't know why I was say that but it's just called what font and you can go to Google and search for what font and it will take you here and you can add this to chrome and it adds this little font option right here so if I go back to this page I can click on that and what it does is now when I move my mouse cursor over any font it tells me what it is so it says right here this is Montserrat and when you click on it it shows you the name of the font if it's bolder normal and then it's going to tell you the size I don't know why it's not showing me the size right there so let's scroll down this one showing the size so I can click right here and I can see it's the average font that's the name of the font and I can see the size and this is helpful when you're on the various websites and you think man I really like that font or that font combination will you can use this web browser extension what font and Cohen NC with the names of these fonts are so that you can test them out on your website so you definitely gonna want to choose a font I think choosing a color combination and a fun combination that's unique to you and your brand are the two biggest things you can do to really make your website your own and really make it stand out so your assignment right now so go pick out some colors into go pick out some fun pears now the best thing is none of these are set in stone so when you're setting them up on your website if you change your mind later it's going to be super easy to change later as well I know for me I'm in the process of changing some of the fonts on my websites but it's pretty fun and it's very powerful to be able to very easily change these fonts and I'll be showing you that here in a moment okay now it's time to talk about getting a logo for your website now a logo is not a requirement but it's certainly something that is going to make your website and your brand more memorable now I went to Google and I did a search for free logo and I spent some time going through some of these websites and actually a lot of them are really bad they're either not really free or their very low quality now I did find one that is interesting and I do want to talk about it and it's canvas

com you probably already heard of camber some go ahead and open this in a new tab in but before I go into cans I'm going to go ahead and show you some paid options for getting a logo now one of the places that a lot of people go to I actually don't like the service personally but I do know a lot of people that have have gone there for logo designs is 99 designs in the way this works is you're not hiring a designer to design your logo directly you're actually starting something called a logo design competition where you say here's the requirements of my logo arms clicking on pricing right now here's their requirements of my logo and if you are interested in making this logo go ahead and make a design submit your design and out of everyone that comes up with the design I'm gonna choose a winner and I'm gonna pay that winter 299 for this plan for 99 for this plan so essentially the higher you guarantee you're going to pay the more people that are going to be interested in taking a risk of their time in coming up with the design and submitting it and you work back and forth with them to get it perfect for you so they essentially have these three packages here you have the 299 and they're saying you can expect to get 30 designs and each planet goes back like that they do have this money back guarantee I would read up on it before if you're interested in this I don't really think it's quite so simple to get your money back from one of the services I haven't personally used 99 designs and I've seen people get seen plenty people had come up some really does this lousy web designs using 99 designs but it's so worth a shot that interests you another marketplace for design work is a fiver now fiber is also very risky there things you could do to minimize your risk essentially if you're not familiar with fiber it started out as a website where people could say I will do this for five dollars now it's grown way past that since then for sure and it's a marketplace for now people can charge what they want to charge even though it still called the fiber so when you go to fiber and that's with two RRs F IV ERM and a link to it in the video description box into a search here for logo design think I scroll down the it should give me an option up here it is a logo design so or you could just search for logo design actually like this they recently added this where you can thinking try to find the right designers that you might be interested in so it's kind of reduced logo design into three different choices so first you would choose one of these so if you wanted a kind of a flat design you'd click on here then you choose what you want to pay or what your budget is the 5 to 25 to 3200 or greater and so this is going to this is going to filter out the designers that don't offer design work in that price range and you can start seeing some of the designers here so let's choose the $3200 and then the last one is the speed at which you wanted so if you need it fast in up to three days go ahead and click on here and so it's gonna show you all these logo designers that are in meeting these requirements that you just set up so you can click on any one of these I'll just go ahead and click on this one I'm not endorsing this person I've never seen it before I'm given the pop up to join I don't want to join let me get away okay there you go so typically right here the logo designers can show you some of their work now you have to be careful when you're looking at someone's work because there's no proof that it's someone's work right they could be putting any logos here and you wouldn't even know now once you start getting here you see how this pop-up came it's like someone's review and how long off how long ago it was reviewed six days ago this is when you actually get to see their real work so if I scrolled across and I saw what they're actually creating for people then you can decide if this is a designer that you want so far I'm not really impressed with this designer now let's scroll down so typically all of these fiber sellers are going to have multiple packages and they tell you what you get in each package and each package is going to have a different price and all have a break down a lot of times it involves the source file you're gonna want this thing called the source file and so with most designers the first and cheapest package will not get you that source file but the middle or the most expensive package will typically the difference between the middle and the most expensive package people are typically going to have this social media kit which I don't think is really that necessary these days and especially a stationary design that's not really that necessary here's another big differentiator in people's different packages is how many design concepts give you 12 and four and here is the delivery time you want to pay attention to that and what you want to do is you want to go with a designer that is going to say something like this hundred percent satisfaction guarantee so essentially what there that means is one of two things either one they're going to stick with you in with all the back-and-forth communication in order to make sure they make the design for you that you want or it could mean that if you're just not happy though go ahead and kick you out a refund so I do like it when people have some kind of a satisfaction guarantee that they'll offer you a refund if they are not who they say they are now here is the biggest problem that I have experienced with five or yeah you can get some some designs kicked out but what these people are not is there not like branding people so they're not sitting there because they're just grinding through these designs right there not sitting there thinking okay let me get an understanding of the brand let me get an understanding of the business let me get an understanding of who they are and what they are doing this is something that that you don't usually get in one of these fiber gigs are just taking a word in the name or word and what you say the description of the business is in there just trying to crank out a design as fast as possible that's not to say you can get some really nice design work done on fiber I'm just saying that that has been my personal experience and lastly for designer you can see right here how many orders they have in their cubes so this designer right here has 17 orders ahead of you so this just gives you an idea of their workload and how long you can expect to wait for your work to be done but for me I'll tell you you can probably get some good results just make sure you know the package you're getting and go with people that have good ratings a lot of ratings have recent work that you kind of like their design style people that will stand by their work and offer you a refund if you're not happy and also communication is pretty important as well you want someone that will understand you and understand your business so that is fiver let me go back to canvas now Kent is a web based service for making different graphics and designs and I was actually surprised when I went to canvas and I saw that they also have logos there and I thought well it's been a great way to get an inexpensive logo now there's pros and cons with it so for free you can use any of these logo designs let me see if I can scroll down if this is the page that actually had him so look at some of these logo designs and use these as a starting point and I'm like man this a lot of these are nicer than what is just saw on fiber right timing these are great knees would be kind of like starting points and they've got a lot of them these are just a few of them they've got tons and tons of these logos that are starting points the only thing is it when you want to export that logo if you're not on a paid can for plan you don't get the high-resolution logo that you may want and you also more importantly don't get a transparent version they want you to get this thing called Canon of a pro which actually is kind of worth it it's I think like 10 bucks per month let me see if there's a link down here for X I'm not seeing it I think it's $10 per month and they will let you have the first month of for free so technically you can go in and start designing the logo if you like it and then maybe sign up for the Pro and then you can cancel it before you have to pay for it that's a thought so let me just log in here with my account it's free to create an account let me log in with my account and go ahead and show you this logo thing okay so I'm logged into my account and you can see I was already playing around with some of these logos here so when I first login I see this year it's as created design and these are the different things that you can design and I'm a go ahead and click on the logo right here and it's can open me up in a new tab just doing this to show you some of the designs so you can see right off the bat that some of these designs here there are actually very nice I mean you can get something that works just perfectly for what you're trying to do and it's very inexpensive it's free or if you wanted that transparent version you can go ahead and pay your sign-up will soothe the cost is here in a moment so I'm in a scroll down and let's just choose is something real quick you can also do a search so I'm just going to do a scroll like this and see what I can see to see something that fits the space now it's also important to note with logos if it's going to be a wide logo you you typically don't want really tall logos you want a more wide logo something like this right here it's can usually fit better in a website header then something really tall like this let's at another thing you definitely want to keep an eye out for alright so so far I haven't seen something I like Texas right here is pretty cool we probably would want to change that image right there this is actually really cool right here as well I like the topography this is nice it's the go ahead and choose one here and get started with it so okay, choose a basic one and it's this one right here I go ahead and click on it and then what it does is it places it right in here and then you can literally change this to whatever you wanted so I can click right here on the letter let me highlight it and change it to a see their ego and then right here I can highlight this and type crafter just like that so if I want him to do that I could and then for this I can go click on it and then off to the right I can kinda tighten that in a little bit or let's see maybe I need to just move it over there you go it's moved and then I can change this text to whatever tagline I may want and then for the color I think I can just go ahead and click this box and you can see here's the color and if I click on that I can choose a different color and then that's kind of like my green and you can see I almost already have a really nice looking the logo here so probably one of things I should do is come out with some kind of a longer tutorial video on using canvas up now we have this design you can see how quick it was to make them get rid of this Realty group I'm in a highlighted and let's see how minute click on it and then here's a little trashcan on the top right and there ago I got a nice looking logo I'm happy with it so now what you would do is you go ahead and click on download and when you change this is the option you want this transparent background and you you can get it and this is what I was saying that you need the paid version in order to get that some to go ahead and click on this and learn more and see okay so here it is it says right here you would need to sign up for the Pro version of Campo but look at this you get a 30 day free trial so you could literally come in here make a beautiful logo and then you know decide to keep it or not keep it you don't end up paying anything summit click on that okay so here we go this is the pricing that I wanted to see so I guess you need a credit card but you'll have to remember to cancel it but I bet you don't have to call you can cancel it in the web-based interface she could literally go here sign up for the monthly 1295 and then you know cancel it if you don't see yourself continuing using it you could still have your logo with the transparent background and it even says right here that they will remind you three days before your trial ends so this is something to think about if you want logo and you definitely need a transparent background for it would be to go here some skin to go ahead and download it right now it pops this up but there are so many beautiful logo templates in here I think the logos templates and here are better than the actual logos that we saw moment ago on fiber and what it does is all your designs it saves them all and you can at any time go and change them or reuse them or do whatever you want okay it downloaded I'm closing this but you can do this just be fun and I like looking in your just for logo inspiration I mean you can get excellent logo for a restaurant for any kind of a local business for religious organization and you can come in here and they probably got a template that's almost a perfect starting point for just about anything I mean these are really nice designs and they've really nailed it and so that's why when I went here and I searched for free logo and I came across can file which I've used before I was really impressed that they do logos now on probably most people are unaware of that so anyways take some time and figure out what you can do with the logo whether you have a designer you already have a logo where they're going to go the inexpensive route and use canvas or just hire someone on five or you definitely gonna want to go ahead and have a logo created and a lot of times the color scheme that you you are designer comes up within the logo would be the colors you use on your website or vice versa if you're using canvas on your own and you have already choosing some colors for your color palette you might want to use those in your logo so this is all I have for you on creating a logo okay so now we are back into the WordPress administration area right here in now you've probably learned more than you thought you were to learn about logos and colors and topography and all of that and so now we can actually take what information and training you just got and actually start applying it to this website design so earlier in the tutorial I mentioned that you have this thing called a WordPress theme and we happen to be using the Astra Theme and the vast majority of the settings for the Astra Theme or anything for that matter with WordPress is going to be found in the customizer so what you can do is go to appearance and then there's a customize option right here that will jump us straight on into the customizer however if you are also on the front end of the website and you have this administration bar appear you'll notice that there is a customize option here as well so why don't you go ahead and click on that and it will take us right on into the customizer so this is where working to have the theme settings remember the theme is what we used to control the header and the footer in the menus to put our logo and choose our colors all of those global things that have to deal with our website there can be done right here in the customizer some to walk you through them right now so the first tab right here is going to be for site identity and this is typically going to be your logo so when we click on it we see here we get to logo options one is the normal logo size and then there's something called a retina logo and that would be exactly doubled the size of that normal logo and what that's gonna do is if someone is on your website and there on maybe an Apple device or a laptop or a computer that has a 4K screen much higher resolution it instead of showing this logo it'll be a little on the blurry side because the resolution so good it will instead show this one right here so I can tell you right now on my computer I have a 4K screen it's actually showing this logo but shrunk down to that size so it looks sharp and crisp Syrian want to put your logo in here for these two various sizes and it's actually quite simple to change the logo I can go ahead and click on remove and it removes the logo and then I will click on a select logo and then all I need to do is just drag and drop a new logo file across so I have a file right here on my computer just can use this up for demonstration purposes you said just drag and drop it across and then I'm a go ahead and click on the select right here now what happens is it in WordPress takes you to this crop image screen don't look at this and think that you actually have to change the size of your logo because you don't you can click on a skip cropping and then it's going to go ahead and put that in there now the reason why were not seen the logo right here and that's because eyes like I said a moment ago this is being displayed on my computer screen because I have a 4K screen but if I was to remove this then it would go ahead and show this logo right there in one of the things I love about this Astra Theme is we can control the size of the logo right here so if we had it and we wanted it to be larger we can just make it wider like this or if it was showing to widen we uploaded a logo that's too large we can just adjust the size here just like that and you also have control over it for mobile devices so when you click on this you can have a mobile specific setting for tablets and for mobile devices now what you're also able to do is if you wanted to set your site title right here you can check on this box and it will actually show the site title right there now this doesn't actually look that good but that is why we have this in-line logo and site title option so fight check this box it's going to move the title just off to the side like that we could do the same thing if we entered a tagline typically though when you have a logo you would just not show any kind of text here it would be just the logo but if you wanted to have kind of an icon type of logo like I have on my website which just the sea these settings work fantastic for that summer to go ahead and disable that right there also right here you can set what's called a Favor con so that's the little icons that will show up in someone's browser might be up here or to be on the tabs that are just above this you can upload an image for that or choose the same one so I'm go ahead and reset the logo back to what it was okay now we are back to how it was okay so let's go back and here we are now let's take a look at some of the layout options and right here we have our container and this is kind of a complicated concept to explain this is how wide your website will look on computer monitors see you can have it fixed so this you can go ahead and start with the launch plan I will say if you get this Pro plan it does come with additional resources for your web hosting account but for this tutorial working to choose the launch plan summary to go here to order now and I'm in a go ahead and choose the three year option that's going to get me the largest discount let's go ahead and click on that and then it's can open up in a new tab and it's gonna take me straight to their shopping cart okay and through this checkout process there might be some options or encouragement to upgrade to one of the other plans you can choose that if you want or just click on no thanks so let's go through the order process really quick Template is using a 1200 pixels wide so if you wanted to squeeze more in there for wider monitors you can adjust this setting and you know what I'll probably have to have a more specific video on containers that all link down below so that you can understand the difference but there is a box to layout and so essentially your container is what's going to be underneath the header and above the footer how much space is used here and how it's used so right now we have its full width from edge to edge but we have other options we can have it be boxed so the content is kind of restrained and so you have some of those options there and you can choose this option based upon different types of content that you have so you might want to look a little different for a blog post and you most certainly will okay so let me go back now here's an interesting option and I love that this is here click on primary header and so this is your header and the theme has several header styles for you to choose from now right now are using the most typical logo on the left menu on the right but you can click this option right here which I think would be very fitting for an e-commerce website this puts the logo on the top in the menu just below it I really like that a lot and if you're in a country where your websites in your writing is right to left you might like this layout works right to left to go back to right here ask them and leave it right here I kind of like this for an e-commerce website not just pay attention the fact that it does take up more height but it looks really clean it looks really good now right here we have that shopping cart in the header this little icon right here for the shopping cart to talk more about that in a little bit you don't have to have that if you don't want it that we can change this from from the shopping cart icon to nothing and this will actually just remove that shopping cart I icon now I really like the shopping cart icon someone to put that back in there like that a lot and you also have some options of how this will look on a mobile device so let's go back and you also have layout options for blog posts you have layout options for the sidebar the footer let's take a look at the footer so when I scroll all the way down we have that footer down here and we have these four columns so if I click on the footer widgets right here it's good to show the layout so if I didn't actually want this at all I can just click on disable and watch what happens that whole footer area proof it completely disappears and were just left with this little bit here for our copyright although I think in this site it's good to actually have it so check that and get our footer back now right here is the footer bar and that's this area right here now you can choose this layout there's a couple layouts we can get rid of entirely we can have it where there's information on top of each other or it's on side-by-side so right here you can have it be anything here and anything here on the rights right now it sets a custom text but you have options of having a special dedicated menu down here that's really nice if you have a privacy policy or disclaimers or things of that nature maybe even a site map and you might want to have a special menu for the footer and you can assign it but right now it's just that the custom text and you can change the text to whatever you want if you don't want to say this you can just highlight it and check make it say whatever you would like it to say and that's can it be our footer bar okay so let's back up again now you hear words is WooCommerce these are the layouts for the page with all of our products and the layout for the individual products working to take a look at that when we get to that point in the tutorial something to go ahead and back up now here is where we can set colors and background colors sewing click into their and let's first click into base colors so we have our main theme color right here and if you want to change any of these colors you just click on select color in this is where you would put that hex code in that we talked about when we were in the tutorial and talking about choosing a color palette so I could go ahead and choose any color and you'll see a change right away so if I wanted to make it say this green just so it's a very noticeable color you can see right there it started to change green and when I hover over these you see a changing as well and other spots you will see how this color choice carries into lots of different aspects automatically for you in the theme so you can see this sale badge right here it's pulling actually from that color so there's a lot of things that are going to just pull from this primary theme color and this is why the Astra Theme is so easy to get up and start using is because it kind of configures itself with minimal information from you some to go ahead and put that back on the default color which I think might've been this black or something along those lines which is fine probably this one right here so this right here is our text color so we can change that let me reset that we have our link hover color and then we have our predominant background color so you can just come here and pop your colors in very easily summon to go back and for our footer widgets we have the colors there as well so when I scroll down we can have control over the colors here and we have the same color options and this is the background color that you see in the same goes for right underneath that this footer bar you can change the color of the background and the colors that you see there in case you have full control but you have really good control over the colors that are used in the theme now let's take a look at the topography options right here in this are going to be where you're gonna put your fonts and we saw the video about choosing a font pair so right here which is base topography you can set your main font family that you chose and there's all these different options here but I I hope that you took the time that see a font pairing that you really want and you really like and here's the weight and the style of the font which is capitalized under case or lowercase you can also use the font size right here you have all these options now here is for the actual headlines and you have full control over the font of the headlines that are used throughout your website some to go back let's take a look at the content options now this is going to give you control over the font size of the various headings that you may use in your website design and what is really nice if you have these mobile device specific options right here that makes it so easy to make sure your website looks good on all devices some to go back now you also have control over the sizes of fonts used for blog posts and you also have it for single posts or pages so you have all these controls but is not an overwhelming amount of controls it's just enough to get you where you want to go now we also have a default button styling so we can click here and so we can check choose the text color the color of the text when the mouse cursor is hovered over a button and then we can choose the button background color and then the background color when you're hovering over a button you can also around your buttons a bit so you can set a border radius on my site I like to set this to five so it's just a little rounded right here it's real sharp edge so this is going to rounded just a little bit were actually skin around it is much as you want you can make it appeals shaped or anything like that and right here we can choose the padding of your button and I haven't talked about padding yet but I'm in a talk about that soon that is spacing on the inside so there's two things called margin and padding margin is spacing on the outside padding is spacing on the inside so the distance between these two buttons is margin but the inside distance between the lettering and the edge of the button that is your padding bottom to talk about that a whole lot more later on in this tutorial and that is your buttons now here is where we can control our menu so right here we have our menu I can click here on menus now this website has some menus already created and you can see where they are assigned so this area right here is called the primary menu and when I look at these list of menus you can create new menus I see right here the main menu is the name of this menu and it's assigned to the primary menu so if I click in it right here I can see all of my menu options and exactly how they're ordered and I can see these are sub menu items of this category and these are submenu items right here you can easily rearrange anything so if I wanted the about us page 2 show in a different location in the menu I can just drag and drop it up and that's going to move it right next to where it says home you see how easy it is to put your menu together let me go back I really liked where that was this right here is to show a list of those Gorgon and talk more about that later in the tutorials I just wanted to show you the menu right here and if you scroll down this is how you assign the menu to a location so you can see right here is an option to assign a menu also to the footer so if I was to create a new page for this website I would probably maybe want to add that to be something that's available in the menu some to go back now these menus are used in a sidebar on the shop page and will take a look at those later on I just wanted to show you how to control and set up and make this menu be exactly what you wanted to be okay so now I want to take a look at well widgets were not really using much right now this are the in footer area of the website so when I scroll down we have footer widget 123 and four actually there's are menus I was saying these might be sidebars on the product or shop pages there actually down here so I have a quick link menu a for her in a for him menu and that's being assigned to these widget areas so widget area one is a navigation menu named quick links now you can add additional widgets to to this area you could just click) you see a list of widgets I can click on one and easily add it or I can also remove a widget if I didn't like this I can do this arrow and click on remove and it will delete that widget so these are our widget areas and this is what makes up this footer now if I wanted to change any of the options that are in this menu I will go to the V menu which was in the settings that we just saw so this was the for her menu I could go back I can go back to menus I can click on it for her and then here it is so I just wanted to change the ordering I could go like that in your Missy jeans was just move up to the top and so that's how we can get the footer to look exactly how you want it to look okay so let's go ahead and back up now lastly there are some WooCommerce this is going to be the e-commerce platform there are some specific settings that we can go ahead and put in here however working to come back into the customizer after we've gone through the part of this tutorial where were learning everything about the e-commerce website and lastly in the customizer is this is called additional CSS this is where you can put little/styling snippets of code now in this tutorial were not really dealing with any code which is really nice but from time to time you might need to add a little bit of custom CSS I have advanced tutorials on that your doctor need that for most of what you're going to do with this WordPress based website but this is where you would add that if you were ever asked to do it now all we need to do is click on publish in any changes we've made have now been published to the live site so the main change we made was this right here so let me click on the X get out of there and then I'll go to the front end of the website and show you that there is our new header style so I just don't want you to be intimidated with all of the different options because if you've noticed Astra is a very simple to work with it's very smart in how the options are you pick a color and its use in various locations throughout the site the same goes for fonts and it gives you exactly what you need to get the job done however there's also a pro version of Astro that were going to go and take a look at now okay some of the Astor website and you can get there by visiting WPCraftercom/Astra AST RA it will take you straight over here also have a link in the video description box and let's just take a look around at this this Pro version and kind of what you get with it so let's first take a look at the pricing and this is by no means saying you absolutely have to get this now because you don't have to get this now but it's nice to know that this is a developer for you when you're ready for it if you'd like to do more with your website if you want to support the developers this is something that is definitely available for you so first let's take a look at pricing and then I went to show you around the Pro version and just full disclosure I am using the Astra Theme on my website and I'm using the professional version some go ahead and click on pricing so you can see the Astra Theme what were going through in this video tutorial is completely free completely free of charge I've never come across such a high quality theme and it also happens to be free and as you've noticed so far there's been no purchase required for anything now they also have the professional version and it is $59 it can be used on unlimited websites you get support and updates for a year and then if you want support and updates after the first year you can renew and it's a 20% off discount here's a short list of some of the things that you're going to get actually when I click on see all features your ego some it's gonna run through these and then I'm going to try to shoot at my best actually show them to you soon get a transparent header to show you that sticky header that's when you scroll down the header will kind of stick to the top you can get dynamic page headers that something I really need to demonstrate to you it's very powerful you get more color options which is nice you have more topography options as well you can do something called custom layouts I'd have to demonstrate that on a different video I love custom layouts this is one of those teachers that really sets Astra Pro far and above every other theme that I've come across as his custom layouts you can have additional footer layouts so we just looked at the footer and we saw that there was no footer or the four widgets where you can have more layout options the scroll to top link that is what you can see right here this little purple thing right there and you get more options for your headers you can build more complex layouts you can white label it that's usually for someone that's developing websites for someone and you don't want them to know you're using the Astra Theme get additional blog layouts site layouts and here's the big one you get WooCommerce extra WooCommerce stuff and I'm in a mostly demonstrate that in this video additional header designs spacing controls this is amazing I'm using this right now and this is a very very helpful and the mega menu has not come out just yet so these are what you get with the Pro version seeing it on a list like that isn't as good as actually seeing it in action so here is a site built with Astra and Astra Pro and I'm in a show you some of the probably just the WooCommerce related features and I think when you see it you might understand why this is such a great value but like I said you don't have to jump into this right now it can be when you're ready so first you can see the beautiful transparent header so there is no color background here just blends in with the image that's there and then here is that sticky header you see him scrolling down and it's sticking there to the top so that is some of the pro features let's take a look at the e-commerce Summit click on shop right here and so here's one of the features that I like you can have this filter option so if you're in have lots of different products and you might want to provide filtering options if you click on this watch what happens you get this nice slide out option here side panel and there's a filter and you can put anything you want in this slide out option I really like that a lot now you can still have filter options without Astro probes it would be on a sidebar that's always there taking up space so this way you're able to actually show more products and then just show those options when someone actually needs to see them now there's another really nice feature on these products when you hover over it that has something called quick view so I can click on a quick view like this and then here is the product and now I can just go straight to adding it to the cart and check out so when I click on add to cart I can click on view cart but the point is it makes it easier for someone to actually get to the point of clicking on the buy button I really like that quick view feature just like that and then do an add to cart speaking of add to cart look at this you have a more customized add to cart options here so you can change the cart icon and you see were also showing the amount of the products or the amount of money that is required for the cart so let's go ahead and take a look at a product page right here and scroll down and you can see this is one have the gallery no I don't think it does let me go to product that does have the gallery in its okay here you go see get this really nice gallery with the multiple pictures that you can have here on the side that's another really nice feature let's take a look at the shopping cart so if I go here and I click on view cart this area right here which is one of those page headers that I showed you and all of these various pages are using the single page headers right here where you can do some really nice things and set the background image now when you click on check out it's probably not gonna work on the demo right here because it's not a live chat shopping cart when you click on that it also has the option of having a distraction free check out that's where when someone's at the checkout page it removes the menu items and just take your logo and puts it right there in the middle so someone could stay focused on checking out and that's a very unique feature that will certainly pay off in the higher conversions people actually completing their check out and there's also an option to have a multi step check out that is very good as well so can break out what you require are the steps required to actually check out the putting their contact information in and then completing the actual purchase so those are just some of the highlights of what comes with Astra Pro you also get supports you get direct support you can submit tickets and they will respond to you but what you're also doing is you're supporting the developer that has made this free theme and you're also getting something in return so I can't recommend Astra Pro enough I use it and I trust them with my website which is extremely important to me the amount of traffic that hits my website and so anyways if you want to check out Astrid's WPCraftercom/Astra I just wanted to show you what it can do when you're ready to get it if you're ready to give it get it it's right here it's ready for you it's easy to add to your website when you're ready to do more with it so now it's time to learn how to use the page builder Elementor all right now it is time to learn how to use Elementor and working to start off from scratch and at the end of this section of the two oriole you're going to have a vast understanding of what a page builder is and how to use it to build what you want to build so first let's just figure out and talk about what Elementor is so technically it's a page builder for WordPress page builder means it's a tool that's can allow you to easily through an interface build out the page of your website for each individual page and the reason we use Elementor's because there's really no easier way to build webpages because there is no coding required now prior to tools like Elementor if you wanted to build a website you had to know how to write all different types of code and that just was a unique skill set that only certain people had so you would have to go out and hire someone to build a website for you with a tool like Elementor you don't have to know any code there is no coding required to build a webpage now there are some best practices near learn all that in this video and some concepts you can learn all of that but the point is you don't need to have an education in coding you don't have to have any experience in coding you don't even really have to be a technical person in order to build a website that you're going to be thrilled to have so there's this transition from manually coding out websites to using tools like Elementor on top of WordPress to build amazing websites people don't really and code anymore they're now using tools like Elementor now Elementor is going to be used to create the content that's going to be below the header of your website and above the footer of your website that is called your container area of a any webpage and you're going to use Elementor for that part of your website let's talk about something called the page structure so right here you see an image of what my website looks like in working to go through in this tutorial how this is done and the page structure that goes into building something like this so let's talk about what Elementor does essentially is going to allow you to create separate containers on a page now just think of it like a container that might be in your house you have this container and you can put things in that container and you can have different container styles you can actually put some items in a container and then take that container and then put it in a another container so when were looking at your page and the page structure it's is simply just a series of containers now the phrase that you're in hear me say over and over again in the terminology that Elementor uses they're called sections so you have these section containers now your section container can have a unique background to it may be an image or video or maybe an image in kind of a color that kinda blends over it called the gradient maybe just a solid color these are called backgrounds that you can add to this section container and then this is section containers can I have different spacing called margins in padding and urinate hear me talk about that a lot margin is the space outside of the container padding is the space inside of the container it's very simple if you just think of it on those terms margin is the outside space padding is the inside space a big part of web design is spacing everything that you have on your webpage margin and padding you're going to come to understand that very good now your section can have columns in it and so can it be one call number to call him or three columns you can to have any number of columns inside the section container however column is kind of a container in its own and it can have its own unique background and it can have its own unique margins and padding's so if you had a section container and it had a solid black background and then you had to call them containers in there in that column one you wanted it to be a green background in the second column you wanted it to be a purple background columns can have their own backgrounds margin and padding the spacing then there's the items that you put into these containers and those I refer to as modules or elements or widgets you're gonna really hear those three terms used interchangeably so if I say you're to put this module in this element in or this widget in your inherent those three phrases that are typically referring to these things called modules so there's like a headline module there is a text box module there's an image module there is a video module there's all these different things there modules elements widgets use all those words interchangeably when were looking at Elementor so now let's go back and look at my website that my webpage again that I showed you a moment ago let's take a look at it again but keeping this concept in mind of containers sections columns modules and all of that so here is the first part of my website in this right here is what it's the header now Elementor right now is not used to create headers of course in the future and there can open up that functionality but today your header is best created with your theme remember how I said earlier in this part of the tutorial that Elementor you use it for the container and that's all the content underneath your header and above your foot or so this right here is my header and it's done with my theme let's look the next part this is a container it's its own separate container and you can see the the sum of the properties of this section container are it has a white background it's a kind of a basic container now when you look at this container how many columns does it look like it has in it and has to write on the right side you see a picture of me on the left side you see some text and some icons those are separate column containers now let's figure out what modules are actually in these column containers on the right you have an image and it's just an image of me on the left you have some text and some icons so you can start to look at this page of mine and start identifying the separate sections and what is going into building this page so let's take a look at the next one and this is a separate section and it has a green background and the element that I have in here remember I say modules elements widgets on menus all three phrases they all mean the same thing all I have is a headline in there let's look at the next one this is a separate section in this one actually has a contains my social media icons one container the section one column and it has the social media icons in it and the last part from the screenshot is this section as well and it has three columns here and you can see some differences each column part of it is an image some text and it has a white background you see that there there is this white background and so this is another section on my website so let's take these concepts for a moment will get out of the presentation and will actually start working with Elementor right now and I think all of this is just gonna start coming together and make complete and total sense so here I have just a demo website that already has some Elementor pages built with it so when you first install Elementor it's going to and activated its can add some options right here in option panel so this is the back and the setting options for Elementor and obviously when were inside of the page there's different settings there so these are more administrative some of the go ahead and click right here and you have these options you have a library so I'm in a show you in a moment how you are able to save these section containers and you can save them here our entire pages that you built you can save them into this library and it will make it very easy to reuse it on other parts of your website you can also export and import section templates or full-page templates but this will go ahead here and take a look at the settings panel now right here is the options of the areas of WordPress were were able to have Elementor work in that is by default pages and posts right here the more you at your website and it creates different content types there might be additional options here now here are some restrictions on user roles this goes into the WordPress and the user account system if you just have one log into your website then you don't need to bother with this setting right here but if you have a website with multiple different user types logging in you have some control over who can use Elementor on your website next right here is to disable default colors and fonts so if you enable this colors will be pulled from your WordPress theme and if you disabled this the cut the fonts will be pulled from your WordPress theme now you can do that some people really prefer to do that and there are some reasons why that is actually helpful thing it makes it easier if you want to change colors in the future or if you want to change fonts in the future I will say though that even on my website that I'm extensively using Elementor on I don't have these checked but this are some people's preferences okay so then we have these tabs appear still in the settings option let's go ahead and click on style and see some of the style options so here we can set our generic font I never use that option right there here is the content with and it said to 1200 so this was going to be how wide the content area is on your website this would go in line with your team in your themes setting this is interesting I would recommend leaving this and this is going to be the spacing between widgets so we talked about containers and they have these widgets elements modules in it this is how much spacing will be between them you could set this to zero if you wanted to manually enter that in or just leave it here at 20 now the next two options really have to do with your theme in integrating this with your theme most people will not need to change anything here but if you're using a theme with Elementor that doesn't support Elementor you might need to set these so that you can get it to work properly and here you have an option if you're going to use certain images where you want someone to click on it and have that image pop up you can see that in a portfolio type of page or some kind of a photo collage or photo showcase where you might want images were you click on it for to open up in a pop up let's take a look at some of our advanced settings are right here now or you're pretty much not can ever need to go to these settings but right here you leave the CSS print med method to external file now this is something that's good to know it's his switch editor loader method some web hosts may have trouble loading Elementor in that case you can come in here and enable this option right here I haven't been in a situation where I have needed to enable it but this option is here for a reason and it's good just to know that it is there if you're having trouble getting into the Elementor editor so now it's go ahead and click on tools and working to see some tools here that is good to be aware of so first this one right here regenerate files this is if you're looking at the front end of your website you just created a page with Elementor in your something's just not looking right you can come in here and just as a troubleshooting measure measure click right here it says generate regenerated files now Elementor has a template library and it will automatically sync but there's also this manual option to click on this button to initiate a sink so what happens is they will release new templates for free and also in the Pro version in this library and you might want to or maybe you're in a situation where something new is not showing and you can force it to sink Nexus click on replace URL this is very useful if you are building a website and at some point you need to migrated to a different domain name or if you started using your website without using an SSL certificate and then you wanted to switch to using an SSL certificate this will update the URL for you just put the old one put the new one and then click on replace URL whatever you do make sure you have a backup before you do it because it's not so easy to switch back if there's a problem next is a version control now what happens with WordPress plug-ins like Elementor is from time to time well with Elementor it's pretty regularly they release updates and so though push out a new version if you happen to have any problems with a new version that is released you can come here click this button and it will just revert you back to the prior version and this is good to know if you're ever in a pinch and you're wondering if an update caused the problem for you right here and I probably wouldn't recommend this depending on your skill level but you this might be good if you have a testing set up but this will enable beta releases to be is delivered to you as an update so you can leave it on disabled now for me I like it enabled because I want to test future versions obviously for what I do it's a good idea for me but it might not be a good idea for you next is one of my favorite features of Elementor I surprise they kinda bury it in here this maintenance mode right here now this is really cool so if you're building a website you want to have a under construction or a maintenance mode type of notification up and people won't be able to see your website while Elementor makes it super easy to do this so right here you can choose where you wanted to be coming soon maintenance and then you can choose who can access it so if it's log then that means you can access it when you actually log into your website and then right here you can choose a template and so that would be in the my library so essentially you could go to the library create a new page save it and then it would appear in this list here this is how you can put your website in maintenance mode so no one can see what you're doing that all they'll see is that page that you create or you select right here and also there is some Elementor templates for a coming soon page I really love this feature right here it's one of my favorite things with Elementor and it's very unique so it last is the system info right here and this is just some stats from your web hosting environment so if you're having a problem element and you reach out to Elementor for support they might ask you for this system info in here it is right there so here's a version of this report that is very easy to copy and paste and send to them so these are the back end settings for Elementor let's go ahead and now take a look at the Elementor interface so what we can do me click on pages first so here are some existing pages on this website I put this together just because I thought it would be perfect for kind of getting an idea of how Elementor works and this is a perfect website page to do that with so here are some existing pages but if you wanted to start fresh you would just click on add new you would give your page and name and then click on publish and then right here you'll be able to click on edit with Elementor and it will take you right on into the page building experience but what working to do is working to look at an existing page and just cannot deconstruct how it was built and start applying these concepts of containers called sections and they have unique properties like background colors videos and in and what you can place inside of them someone click on this page right here and since it's already been set up with Elementor announces edit with Elementor a minute click on this and it's can open up the loader and just in the second or two it's going to take me right on in okay so right here is the header and remember the header is not built with your page billers not built with Elementor it's actually from your theme so I can actually edit anything in the header but everything underneath the header which is starts right here and everything above the footer so when I scroll down this is the footer I can't edit anything in here but I can edit from here on so that is the container area of the website where we can have sections and columns and can drag and drop these elements before I deconstruct everything here on the right let's take a look at some of the settings and options we have available to us in the editing experience so right here were looking at a list of the elements that we can drag and drop in here and you can scroll down now if you have any at Elementor add-on packages it may add additional elements of you have Elementor Pro X can add some additional elements and settings you can always get to this part of the interface by clicking on this keypad dial looking thing right here this box it'll always take you back here and to make it easy to find different widgets that you want you can just enter it in in the search box here because you're going to find that there's certain ones that you just tend to use all the time now this global tab right here when I click on it this is a feature that is in Elementor Pro word allows you to save something say for example this I can just save this and use it on other parts of the website let me go back to elements so now let's click on the hamburger icon this is called the hamburger icon go ahead and click on that and this is gonna take us to the Elementor settings that we have when were in the editing experience so the first three options are really convenience features so let's first click on default colors this is going to allow you to choose a default colors that are going to be used by default when you drag and a module or element in here so there certain ones where it might have a headline and it's automatically going to pull this primary color in or secondary any texts it'll pull this color and your accent color so you can actually set these to your color palette quite easily so if I click right here where the blue is I can go ahead and paste in a color code and then save it and now what will happen is anything sent to the primary color will be all linked to this color and you can change it at a later point to this is actually very useful to come in here and set your color palette up someone said they recommend or suggest but you're probably just going to want to use your color palette I'll show you what I mean with that actually right now so let me go ahead and click on the dial pad right here and I'm in a drag-and-drop a heading in let's say right there and what color is it using that primary color right there in the same thing goes for other widgets that we have here I know for example the icon box I believe is the same thing a put that underneath my heading and you see it has that primary color so if I go back I'll click on the hamburger icon click back on default colors now I'm clicking on my primary color and say I wanted to make that white you see how that works and this is your primary color some just clear that out let me go back to the default one like that here's a reset option she'll want to go ahead and set those and then click on the apply button right here so no to go back by clicking on the hamburger icon and the same applies the fonts so only click on here we can set our primary headline secondary headline body text font and are accent text so on any of these you can click on it and it will reveal the options and you can choose your font through this long list right here and you can choose the thickness or better known as the weight and you can do that for all of these four fonts and it's the same concept this is the heading font right here if I changed this right here it would change it right there this is smart because if you have everything linked to these default settings here if you ever change your mind you can easily go here and change color or you can go here and change a font that's what's very nice about this so to go back and click on the hamburger icon now the color picker is similar so any element that has a color to it you get to choose your color and there's some default color options that are shown in these are those default colors so for example here's this green let me click on it and I'm in a choose just change it to some kind of goal like that okay so now it was green and now it is purple now let me show you how that's use them to click on apply and now I'm going to click on this headline right here and the color option for this is underneath this style option right here some click on that here's the text color and so here's a color picker watch what happens when I click on it we have the color palette and you see that last color there it is it was that purple that I selected so let me get back to that, click on the hamburger icon click on color panel and color picker and there it is so you can have your colors in here and it's just gonna make it so much more convenient when you're changing colors on your website so when I go back you see these are to be your default colors but these are to be the colors that are available in the color picker now here we have just some settings specific to this page now here we have some settings that we already saw when we were in the back end of Elementor but they're also available here so right here on global settings remember the style the font the spacing the widget space and all of that and right here is another option that we saw for the image of light box we can choose different colors for that let me go back there and then this and you concede with this icon this when you actually click it it will take you back into the back end of WordPress into those Elementor settings and of course here is the option to exit altogether from the page building interface okay so let's click on the number pad here and were back to our elements and let's look at these options that we have down here so right here we can go and see the settings that are specific to just this page so let's go ahead and click on that and right here is the title of the page and right here I is the is the template now there something that Elementor has for creating landing pages is called Elementor canvas and when you put a page in Elementor canvas mode it completely removes all of the theme generated elements such as your header and footer so you see I have the header and down below I have the footer if I click on Elementor canvasser to see them completely vanished and all I'm left with is my page and I scroll down you can see that footer is no longer there so that is Elementor canvas it's actually fantastic for creating landing pages where you want to eliminate all any distracting elements like a nap and menu navigation so that's where that comes in handy and also you can have the status or access to the status of this page or post and this one is published but I can put it in draft mode if I wanted private and I don't wanted to be available publicly yet and then we have this delete button here I'm glad that it lights up and read because if I was the click on this it's going to delete all the content on this page so it's sort of a reset button okay so click on the number okay so click on the dial pad here get back to my elements next we have the responsive mode options this is gotta be one of my favorite features with Elementor this is obviously what it's gonna look like on a desktop but if I click right here I can see what it will look like on a tablet and I can start changing things so if I wanted to make this font smaller I can click on it and I can change it just the four people that are viewing it on this device and there's lots of controls throughout Elementor like this so we see right here we have this alignment option this is mobile specific so I can make it have a different alignment for tablet or for a mobile device so now let's see with the mobile preview looks like and there it is so there's things member is talking about spacing there's margin and padding margin is the space outside of your container padding is the space inside the container or you're going to be able to tweak those based upon the device so that you can make sure you get pixel perfect website designs for all device types, to go back into my desktop view now and let's shrink that next we have our history in this is a fabulous feature with Elementor is it retains a history of several things so every time you click on this update button it's going to save that as a revision and also when you're making changes alive in the page it's gonna save each one of those and it's going to allow you to just do a quick undo or a quick rollback from just what you change so let's go ahead and click on that and take a look so we have the actions and the revisions remember the revision is each time you click on the update button now when I go here you can see I have two different revisions right here I can actually click on a different revision and it will go back to how this looked at that time and then you can jump forward you can also delete revisions there is an exit there to delete revisions let's go back to actions so these are actions that have happened since I last saved so I can go back on these as well and you saw what I added was this icon box and I added this headline but if I wanted to go back say to when I just added the headline I can click right here and what happened was is a got rid of the icon box and I can go back even more now was really nice about Elementor is there are keyboard shortcuts just like when you're in your word processor or email program or anywhere on your computer Elementor also has keyboard shortcuts so you don't have to go into here each time so I can even go back to when my editing started by clicking right here and now I am all back to normal now the next icon here is the I and this is really just the preview button another's two ways to preview it you can click on this it's gonna get you completely out of the Elementor interface and open it in a new tab when we do that now so it opened up a new tab and it's going to show me this page in preview mode and I'm completely out of the Elementor editor however there's another way that you can do it and that's what clicking right here this little tab when I click on it it makes the Elementor interface disappear and I'm in it and the previews type of mode as well I guess the pre-purest way of previewing it would be to click on the eye however you be in there's also a keyboard shortcut to make this show or hide as well that is available in Elementor I hope you're seeing how amazing Elementor is in full-featured this page builder is and it's amazing that it is free and then lastly we have this update button here and this is going to save all the changes that you've made when it's green like this that means there are changes that are available that haven't been saved but when I click on it you're gonna see that it's not green anymore and that's because I now have an up-to-date save which is really just backing up on these various actions that I did in this part of the video okay someone click on the dial pad again so now let's start talking about and kinda deconstructing this page here so when I start hovering over items like this you see everything kind of light up in different boxes so when you see this blue right here this means that you're at the section container level now if I click right here watch what happens it pulls up the section settings right here now get to these in a moment let's look at these other icons and what they do this option will duplicate an entire section this right here will give you the option of adding a section a above this section right here I can save a section to the Elementor library to use it over again and then right here I can remove a section entirely so when I'm in a do is click on the plus right here and add a section and there it just reveals and I want to click right here where it says add new section the first thing it asks me is what is the structure and so this would be just one column or two column with three columns and so on and so forth now you can adjust the amount of space that each column is so if you wanted to if you started was say this kind of a layout you wanted maybe the middle you change your mind you wanted the middle column to be larger to go to this it's really easy to manually do that now show you how so what I'll do is actually here here I'll just go ahead and start with a two column layout and so now we have this section right here we have a column right here and we have a column right here now before I get into making this section how we might want it I want to show you what happens I want to show you how to access the column settings you know when I'm hovering over this column we have this little option panel right here and when I click on that it's now going to be in the column settings you see how it's his edit column we have a similar layout style and advance options there so I'm in the column settings but if I click right here on the blue I'm in the section settings so columns and sections have separate settings and we have this menu option right here so right here I can click on this to duplicate a column I can click on this to add a column and I can click on this to remove a column let's just see how easy that is so her want to duplicate a call my click here and now we have three columns if I want to delete a column I can just click on the X and now I'm back to two columns let's do that one more time there is now I have three now I can also resize my column CC that I can just click on the edge and adjust the size now there's a more precise way in the column settings I just wanted to show you the column container itself in case'85 Go ahead and get rid of that I'll click on X now what I want to do before we look at the settings for sections and columns I'm just drag-and-drop a headline in here some and a click on the dial pad here's my heading to drag and drop it right there and there it is and so we have nothing here and we have the heading here so let's take a look at the settings for a section so remember your section column settings are to be very similar I just click here announces edit section so first thing is our layout options and then we'll have our style options that's gonna be the color of the background or an image or video in the advanced options that's gonna be where these this margin and padding options are going to be in some other options so we have first some options here of the placement of the content so essentially what this option means is the contents not going to be from edge to edge that means the module the background will be edge to edge but the actual content won't be edge to edge it'll stay within the same frame as your webpage okay next we have the columns gap so right now that's the gap between these two columns I can get rid of it or go through any of these settings if I wanted to automatically add a gap between these columns I considered default height for the section so right now it's just this the default is the amount of space it needs to hold its contents but I can do a fit the screen so that means this section will take up the height of the entire screen or I can go to a minimum height and then I have this slider right here so if I wanted it to be a minimum of this height I can do that if I want to exit let's do something like that in this it has a mobile option as well so on different devices I can have it be a different minimum height then we have the content position this is where the content will be positioned in the entire section so right now it is set to middle but I can go to bottom and you can see the content went to the bottom I could go to the top like that or I can leave it in the middle and that's how you would space your content scoops that was actually the column position I'm sorry the same concept flows into content position as well okay and you can change your structure if you wanted to after the fact that we have our style options right here and so we have our background this is the first thing we can choose we can add a border we can have a shape divider which is really cool and we could set some default topography options for this section so if I wanted everything in this section to have the font to be white I can send it here in one location so let's go ahead and add a background so right here I can choose from classic this is just get a big color here is a gradient so this is a blending of colors and I can choose a background video and now when you see these hover options like this you can see this in various locations this would change the settings beneath it when the mouse cursor is hovering over that area it's a very neat feature so let's go ahead and put a color in and I can show you how that works I'm in a click right here and then here's a color picker I can click right here and I can just choose the color of my choice you see that was the same color as the font let's put something different there we go and I have a color in their and that's simple so I could also put an image in soap I clicked on that I click on media library these are just some existing pictures that are on this website right here how about this dog right here let's see click on insert media and there is our image now what happens with images if you haven't made it the size you want there is this position option so I think I'm in a go center bottom to get the dog in there there we go how about center rights actually know about middle center there we go now we have the dog and there she was have to just pay attention to the size of the images that you upload and how it may fit now we have other options for how a an image will display in the background we can try playing around with the size to see if we can get that looking any better so here's the defaults here's the auto setting is not making a change here's the cover setting and that actually makes a really big change and it looks a lot more like the image here in the picture I actually come like the way that looks now a lot of times when you use an image or video and you try to put text on top it's a little hard to see the text that's what you might want to put a background overlay this would be overlaying a color or gradient over the image so many click on that and I'm in a choose a color overlay so I can click right here and let me go ahead and choose a dark color and you see how it starting to make it easier to read the text when I do that and I can adjust this to adjust the transparency or how strong that color comes across and now it's making it a lot easier to read the text and this is pretty much the same settings are going to get or a column that's probably not gonna look good in this section I'm creating right now but we also have these shaped dividers and you could put them on the top of the section or on the bottom of the section and it will add a shape so let's try to add a shape to the top why not so here is a list of them and I'll just show you one or two and you'll get the point I've made videos on this before there is a shape divider right there and you have all these controls to change how it looks and you can change the height of it if you just wanted it to be subtle you can do all sorts of things with this you can flip it you can change this color right there there's so much control you have over this typically you see people use it on the bottom and it looks good when the section on the bottom has a solid color so here's mountains on the bottom like that you can play around with it but you can see how this is a very powerful design tool when you come into the settings here and less I said about the topography this is your fonts you can set it so you can have a setting that will be applied to all the text that might be in a particular section so for example heading color so if I wanted to change all the headings colors I can just go in here and set it for the entire section and click right here in this case I might go with the white font and there it is so you can see that you can set topography options for an entire container section if that is what you like and that is our style options and you can have a lot of these style options are most of them in the column setting so numb to go ahead and click on advanced and this is where we have margin and padding so margin is your space outside of the container so if I increase it on the top it's gonna push the container down because it's space on the outside now padding is space on the inside so it will stretch the inside let me give you an example of this actually let me get rid of the sheet divider really quick so that was down here under shaped dividers it was the bottom shaped divider I'll switch that to none and then I will go back in here all right so for margin and padding you can click on click or leave this click this will link the same values together so for padding if I start increasing it like this you notice how they all increase okay that's when they're all locked together and you can unlock it if you wanted to just by clicking right here so I'm in a go ahead and I'll leave the margin locked okay and see what happens when I increase it you can see what's happening it's the space outside of your container so when I increase that it add space above and below that is margin patting is different so with padding it is the space inside so as I increase this it's adding space right here and if I increase this it's can add space on the bottom and that is what padding is and you can also control left and right patting if I wanted to increase it actually this would be the left padding watch what happens when I do this it pushes that text inside like that so spacing is a big part of web design and it's important to understand how to use margin in patting margin is the space outside padding is the space inside and for these two controls there is a mobile options right here so you can set it on a per device basis and you're definitely going to want to do that so me a lot this back up and then delete it out here some entrance animation options some technical I options here with CSS responsive options this is really really neat so you have visibility options so what this means is if I only wanted this container to show on a desktop and not on a tablet or mobile I can just click here and click here and now this will only show on a desktop I use this a lot I'll create a section just for my desktop and then I'll create one just for mobile devices and so that's how you would go ahead and do that and then this right here is just an advanced feature in Elementor Pro's actually very good feature I happen to use it a lot cane that's add custom CSS here's a little on the technical side so that is the section container and here is the same thing I'll just quickly jump through it the same thing for columns now columns right here you can set the column with remember I was here adjusting it you see how the numbers going up and down when I do that you have full control over that number just by manually entering something in here is our same styling options right here and here's our same spacing of margins and padding's and that's the same options we found inside of the section so we've covered a ton already we talked about sections in columns and elements and here are elements and you just literally drag and drop them in each element is going to have its own setting panel as well so right here this is the heading elements and when I click on it right here there are options for the content that's in it the style and advanced so you're already familiar with style in advance now these options are to change based upon the module that you're working with others also some stuff I wanted to show you here when you're hovering over a module you see that blue pencil in the top right when I hover over that this gives me options to delete this module or widget right here I can also duplicate it and right here I can edit which really just brings up the settings so I wanted to duplicate this I can just click like that and then I can just drag and drop actually let him go like this drag and drop that right there was a very easy to do now one of the nice things about Elementor is it has something called in the line editing so what that means is for the vast majority of text you have two options of modifying the text so right here when I click on this you can see right here I can edit the text I can go right here and edit it and it add it at and it gets added here in real time but you also have in-line editing so I can click right here and I can start typing directly here and when I click like that I have I can highlight something I have options I can bold I can underline and I can italicize so if I wanted to bold that out I can go like that and now that is bold and you can see it changes what is here this is known as in-line editing and it's one of the great features of Elementor so you have two ways of doing it so this headline has these options I can make it a hyperlink if I wanted I could just pop something in there I can change the size of the text right here I can set the alignment so if I wanted to write a line I could do that and you have mobile options for that and then in the style tab we can have unique topography options here we can have unique color and if I click right here it's his topography have options and another thing right here is take shadow which is really advanced and really cool we can actually place a shadow underneath it so it's easier to read and just by actually clicking on that it actually added a shadow and there's a subtle difference between the two you can do some really neat things with this text shadow option what's nice is you know in here and play around with the settings and everything and you can if you don't like and you change your mind you can just click this right here and it puts it back to default also with elements we have the style of our spacing or margin and padding just before it's in those same options here so some of the most commonly used elements are going to be image so you could just drag and drop that there and then right here you can click on delete and then click here again and choose an image click on insert media and there we put a picture in that was very easy and you have your alignment and all of that another commonly used elements going to be the text editor this is just to be normal paragraphs of text you can see that right there so for this we have the same in-line editing we have our content box here and we have a style tab right here and I can change the text color to what I want to if I wanted to make it white there is my text color and you're already familiar with a lot of these options already and then let's go back here we have an option to add a video a very common element you're going to use is to add a button here let me clean this up a little bit and will take a look at the button this is probably one of the most powerful modules that you have so this is how your button starts and you can choose different styles right here you can change your text I think this also has in-line editing yes so I can start changing the text right there popular Lincoln you can set your alignment you can set a default size so if you wanted it large now we can adjust what's it called what's this called hears it margin or padding it is going to be padding's organ to change that in a moment you can also toss an icon in there if you wanted so let's just throw something in knowledge jump into style and guess what we see here padding so it's all locked right now so if I start increasing get it just removed all of the padding and now there's just one little pixel of padding so you can go here and maybe set it to 10 and then unlock it and then maybe add some more to the right and the left of the button to make it just gonna look a little better so let's try to make it 2525 so there you go I usually like my buns to be a little wider maybe like that and see how it's adding some additional padding to the side there it is okay let's make these the same and you can totally have control of the button you can control the topography right there button is something where you're going to maybe want something different for the hover so you can have control over the text and the background on the normal state and then the hover state so for hover I'm going to make the text why it's and then I'm going to make the background something like this purple so now watch what happens I hover and the button changes just like that there's also some animations if you wanted it to do something when someone hovers there it is you see how that changed so you have full control here it's just getting comfortable with these style options here's our border radius I told you I usually like to have five there is some there by default so here it is let me go to five I think it might've been five by default there it is and we can also do some box shadow this puts a little shadow underneath the elements and it can elicit off the page and so that is the button you're going to use the button a lot there's dividers and spacers you can have Google maps your to use image boxes icon boxes photo galleries lists counters progress bars I don't really use progress bars that much myself but that your progress bar right there here's the counter I don't usually use counters that much either but there is a counter and you have full control over the style as soon as you start getting comfortable with it we have tabs toggles there's all these options here's just a matter of jumping in and getting comfortable with it here's the testimonial this is a fabulous element that is available to you and so let me just go ahead and click right here the X and get rid of it so you can see we just have a big section here with the headline right here we have a section in and has this color in the back by click here this is just the heading this right here is just the text editor this right here is just the button there are three columns in here this is just a column with an image and here's a column with an image that's all that there is and here's another section and this time there's an image in the background and there's a headline and here is a another section it's one big section and then this part right here has these three columns in it to kind of showcase the services but if I click right here this right here is just the image module in this right here is just the title and that's all there is image and title and is just repeating like that and so that's why wanted to show off this element was because it's arming this pages because it's very nice and simple and you can see easily how this is created so anyways this is the Elementor interface you can just go ahead and click on updates and then you can click the hamburger icon and then you can click on exit the dashboard now it's important to note that Elementor is growing and they make changes from time to time so you might jump in there when you're watching the video and maybe a button moves or an option moved but it's usually pretty easy to go ahead and figure it out just in the situation if that does happen to you so now let's talk about something else okay now there's Elementor but there's also Elementor Pro Elementor Pro is $50 for a single site license $99 for a three site license and its hundred and $99 for an unlimited license I have an unlimited license I actually bought it the first day it was available for sale and what it is is an add-on package for Elementor so it doesn't replace Elementor it just works hand in hand with Elementor if you're interested in checking that out just visit WPCraftercom/Elementor and I'll have a link down below but let's take a look at why you might want to consider Elementor Pro and just for disclosure purposes I use Elementor Pro on my website WPCraftercom

com so your 1st'b0 to get some professional module some Pro modules and there's a whole list of them on the Elementor website when you visit WPCraftercom/Elementor but some of the highlights are this amazing forms of modules you can create beautiful forms opt in forms forms with lots of questions it's extremely powerful and integrates with different autoresponder services it's pretty pretty impressive when you take a look at it it's very impressive you have this post grid module that's actually what I was using on my homepage where you see the list of different blog posts in pieces the content that's the post grid so it's a beautiful way of displaying all the blog posts that you might have on your website another popular module is the slider module slider is what you'd sit can see sometimes on various websites you go to write on the homepage right underneath the header and they'll be some content and then it will slide away in some more content will show that's a slider another very popular module and I think is one of the most powerful that they offer is a pricing table option and you can create some beautiful pricing tables with the Elementor Pro module so there's obviously a lot more to Elementor Pro there's a ton of extra modules that are extremely powerful now the reason I pointed out these these fours because these four are typically separate things you would have to pay maybe 50 bucks each for I know there's many forms plug-ins that are hundred dollars or $200 a year there's PostScript plug-in slider plug-ins pricing table plug-ins and you get this all with Elementor Pro and that's just some of what you get another thing that's really neat is you get to have global sections and elements and so what this means is if you want to create a section and have it show on say all across your website there's two ways you can do that you can save it and manually restore it on all those pages but the problem is what happens if you want to change something you have to manually jump to all those places where you put it and change it now if you have a global section you could have one that is applied across your website so when you want to make a change you just have to change it in one location I extensively use this global section and global element feature of Elementor Pro it's very powerful next you have this spot to put in custom CSS this is a little on the technical side I can tell you I use this all the time and I do have a video out on adding custom CSS to Elementor who and I actually forgot to show you this was their template system I'm in a have to jump back in there actually one when I do that right now because this is actually important when we jump back into Elementor here '96 I can't believe I forgot to show you templates okay so here when you first create a page and jump into Elementor you can have this ad template option so when you click on it it's gonna show you their template library any of these templates that have this Pro badge on it are only available in the professional version of Elementor so there's plenty of templates here that are available that are in the free version as well so all you have to do is click on it and then click on insert and it literally downloads it from the cloud and puts it right inside of your website you can see some of these pro templates there very beautifully designed their perfect source for inspiration and they also serve as a great learning tool on using Elementor this is really neat with the shape dividers I always like how they do that so you can literally restore one of these templates and see how they did it and that's a good way of learning that when I scroll up there's also filtering options here so you can mark your favorites and you can also see what's most popular and what's trending and you can see what's new and I will say they are consistently adding new templates to this template library so that is the templates and so you get those Pro templates with Elementor Pro and next is some features that are just about to come out and that is Elementor being able to create the header and the footer of your website so you wouldn't have to be limited to whatever your theme offered you you be able to do it in Elementor Pro and you will also be able to make stylish blog posts or content layouts with it that is a little on the technical side as soon as they launch this on and have a ton of content out on it it should be out in the first 1:45 thousand 18 now if you did want to get Elementor Pro you can easily add it later on at any point but I have a training course called Elementor essentials it takes you much deeper in training on how to get the most out of Elementor and design beautiful websites with it I normally sell this course for hundred and $99 however when you visit that link WPCraftercom/Elementor could take you to a page on my website where I'm to show you how if you were interested in purchasing Elementor and you did it through the link on that page how you can get this course for free so instead of paying $199 for access to this training course will actually enroll you for free you can follow all the instructions that you see there@wpcraftercom/Elementor so that is it for this Elementor tutorial okay so now that you know pretty much what there is to know about Elementor let's now try to apply that to this website template that were working on it right here so you can see this is a section right here there's two columns but this column right here it's empty and here is the calm and we have these two buttons and we have this information right there and then here is very interesting grid so we have one column or we have a section here with two columns and we have section here are two columns but the what we did is we manipulated the spacing of the columns and the size so that it would create this grid like you see and then down here we just have the four columns that are automatically pulling information and from our store and then we also can let's take an example of the about us page and you're going to be able to see here how it was completely built with Elementor as well so we have this big page title here we have this column here this is actually jump into editing this with Elementor so we can dissect it I probably should've started with the homepage that's okay we can always back backtrack to that so alright so right here's our section you can see it and if I clicked right here we have our title we can change the text here we can change the text there okay and if I wanted to see my section settings I can click on that I can go to style and I can see were you we've got that cream color that were seeing we can literally just go ahead and click here and we can change this color to a different one if that's what we actually wanted we can do that I'm honestly not to say this actually here let's put in the practice this history so I can go back to editing started there we go is not good okay and so here is a section and we have two columns right here this one is using the let's see if I click here this it has an image carousel actually and this is how it's rotating the images and so that is the module there here's a column this column has a different background color it has this color there and we just have these bits of text right there in the same goes for here here's that tab module so if I click on it this is what a tabs module looks like so here's the first tab second tab and so on if you click on it it will show the contents of this tab just like that and you can click on it again to collapse it and you could do the same thing right there to see it you can rearrange these tabs all that you wanted or you can just get rid of it altogether if it's not your thing you can also change the positioning it is horizontal but you can change that to vertical and then here you would have full control over the style and how that looks and the same thing right here we've got this section with this image in the background and then right here we have a column in this column has this background color but it's slightly see-through let's see how they do that when I go into my column settings and that's going to be the style and right here is the color but this knob right here is the transparency of itself I go and put this up you won't be able to see through it all but as I go down you're gonna see that you're now able to see through it to careful with it because you want the text to still be readable and there we go that is how that is done let me actually jump out of here and I'm in a go to the homepage so I'm looking to save any of that when I click on pages and I'm in a go to my homepage in them to click on edit with Elementor it's in a pop up and let's see how the home pages and it's all pretty simple with that knowledge we've got this container right here this section container here's a calm and here's an empty column and then underneath that we have four columns and that's how they're doing the button here and the button there and right here we have a headline as well when I click on it there is our title in this right here is I think it's a called the divider there it is so the divider is an option that was right here and that's just to put lines to divide various things you can change some things about that if you wanted here is that part where I said we have two columns here and we have two columns here and they each have this interesting spacing that just alternates perfectly to make it look like a grid and then this is a background image in the column so if I go right here and I click on our column settings and then I click on style you can see it is a background image for the column and then right here we have a title and then right here we have a button say you wanted the button to be off on the right to you can just click on it and then put a right alignment the middle alignment or left alignment and if you wanted to change the link to have a go to a specific part of your website you would click on it and right here it says link you would just drop your link in it's that simple and there it is and it's the same thing right there and here we have a title as well so this right here is how this website is assembled and let's go ahead and jump out of here by clicking the hamburger icon and then click on exit the dashboard and then let's click on leave and that's pretty much it to making this template look how you wanted to look or if you chose a different one remember the beginning I said you could choose any of them if you chose a different one you now have full control over making it look how you wanted to look or creating something entirely new now that you have this knowledge of Elementor how there's sections in containers and and you just can visit any website now and look at it and understand how the structure is so that you can replicated or be inspired or know how to make the website look the way that you wanted to look and that's why I wanted to teach you or take the time to teach you Elementor first and then you can look at the website and start dissecting it in making this look exactly how you wanted another were done with the Elementor side of things we really need to start digging in to the e-commerce features I know this video is kind of long but it's okay because there's hyperlinks down below you can jump to different parts you can pause and finish it up tomorrow so what were to do now is jump into the e-commerce features of this website so let's take a deep dive into WordPress e-commerce and talk about is using WooCommerce which is a plug-in for WordPress that will turn your WordPress website into a full-featured e-commerce website now here's the thing that I want you to know upfront is that it's going to be easier than you think for some reason WooCommerce initially just comes across as very overwhelming having an e-commerce store can come across is very overwhelming and a lot to take in but I want you to know that when you start digging into it it's going to be a lot easier than you think to get up and running so here's what essentially an e-commerce website in these e-commerce features really do you're going to list products and there's different types of products were to go through that and then you display those products on the front end of your website next you sell those products and then fulfill the orders and that is all there really is to an e-commerce web store and that's pretty much what were going to cover right now so let's go ahead and take a look at the different types of products that you can have on your e-commerce website so you can have a physical product obviously that's something that you physically ship then you can also have a virtual product and what that is is a product where you're not necessarily delivering a download or something like that there's nothing being shipped this would be kind of say an appointment if someone wanted to schedule an appointment with you and you sold it an appointment that would be a virtual product and then we have downloadable products and this is where after someone completes their purchase they will be given a link where they can download in a secure area the file or whatever you are offering them as a download now let's look at the four different ways of actually setting up these products in WooCommerce so there is the simple product and this is just a standalone product that you sell then you have the option of having a group to product so this could be kind of a product bundle so if you have two or three items you can bundle them together as a group to product and sell that then there's also an external product this is where you're not actually fulfilling the order maybe it's an affiliate link to Amazon or something like that this would be a perfect usage of an external product and then you have what's very common is a variable product this is where you'll have a product and there's multiple variations of variation could be different sizes small medium large variation can be different colors it can be whatever the if it's an electronic safe in their storage it could be 32 GB or 64 GB so this is a very common it's called a variable product and this is where someone will land on the one product page and then they will choose the variation that they want to inure to be able to set up whatever variables for product that you need to do you don't have to create them all as separate simple products then once you have all your products set up in your website then what were going to do is control what's called the product category and this is also called your shop page so this will be the page on your website that you are displaying to all of these products in a grid maybe there's filters were people can filter it by price and they can just click on the product that they're interested in and for each product that you have in your store you can set the visibility options you have full control over the visibility if you want that product to show in the shop page and that's how basic having an e-commerce website is now what can be a little overwhelming because it's different for everybody in different situations is two things the first one is taxation and how do you tax products now the issue with taxation is it's different depending on your country or your state or your location it's going to be different so Juergen actually have to find out how taxation needs to work but there are several different types of taxation have full control over it in WooCommerce so one of the main options is origin-based taxation that is can it be the taxes are based upon where your shipping the products from or where the product is being sold from this is origin based taxation this is actually how Amazon you use to tax Amazoncom in the United States they used to do it origin base so if you are not in the state where Amazon was you were not having to pay sales taxes and that went on for a long time until laws were changed the other way of taxation is shipping based now the challenge was shipping base that means I'm going to charge taxes based upon where the product is being shipped to that can actually get very complicated to manage because there are so many different locations they all have different tax rates it's actually kind of complicated this is where some of the challenges come into play with having an e-commerce store in this is managing and dealing with the taxation and other our services that will automatically manage all those tax rates for you so it makes sure that you're charging the correct tax rate however Juergen have to do a little bit of the heavy lifting to find out how you're supposed to charge taxes based upon where you are and then there are what's called tax classes these are categories you could put products into so there's standard and that's typically what you're gonna leave for most your products but then there's a reduced tax class in a zero tax class now I I think this word classes is quite confusing we are going to see it in taxation were also gonna see it in shipping these tax classes wanted you just think instead of classes think of categories so a product can be standard taxation reduced taxation or zero taxation and these are things that you actually set up on each product so working to take a look at taxation in WooCommerce and I'm also going to give you some resources to make sure you have that all dialed in next the big thing that can be a little complicated happens to be shipping and that is basically how are you going to charge the right amount for shipping depending on how your choosing to ship so you can maybe just include free shipping and this actually wouldn't be overwhelming at all if you included free shipping or maybe you would have flat rate shipping and then this is very easy or if you want to charge accurate shipping based upon what Juergen actually have to pay for the shipping and then pass that off to the purchaser of the products you're going to need to learn about table rate shipping and this is the same thing where you create complex rules to make sure you're charging the right amount everywhere you would ship to based upon the carrier that you're using for shipping and then like we had tax classes there's also shipping classes or categories so you can charge different shipping on different products and then so what you would do is you would create these shipping I like the word categories I don't like the word classes so you can create these shipping categories and so maybe a category is free shipping may be another one is flat rate shipping and so you can create these and assign these just like with the taxation you can assign it on a product byproduct basis so obviously if you want to make this whole process easier you will maybe just to flat rate shipping or maybe just include shipping into the cost of sending the product or selling the product free shipping that's an easy way to do it but WooCommerce is designed to meet any e-commerce web stores needs but I don't want you to get overwhelmed by the taxation in the shipping I know it can seem overwhelming but what's most important is that you get started building your website filling out the products and getting it all set up and then you sort through that you will sort through that and figure that out don't let that be a roadblock for you but you are going to have to spend some time figuring out your situation it's impossible to cover all the situations here in a tutorial video so let's go ahead and jump back into our websites and we will start digging into WooCommerce so for something to go through the settings of WooCommerce and then I'm going to go ahead and take a look at the products and then will set the way that the look on the front end of your website so when you install and activate WooCommerce or can have these two options here there are these two menu items you can have WooCommerce itself this is where you find your orders you can create coupons

She reports your settings are in a be there and then right here is your products and this is where your basically and load up and categorize all your products and that's pretty much all there is to it so let's go ahead and on WooCommerce go ahead and click on settings and will walk through some of the settings in WooCommerce now each of the settings panels are going to be in these tabs and when you're in a tab like for instance if I click on products you're going to have a sub menu items right here this might not be so obvious slits click back on general and start going through the settings and start talking about them so this a general tab is where working to set up information about your store this is were going to put the address of your store you can load in your state or country and you're going to go down here and you're going to set where you actually sell to see you can limit your store to only selling to your country or certain countries and then right here is we where you can enable taxation and tax calculations and then what's very important is the set your currency options so I'm go ahead and start filling this out for me right now okay so I filled out my address I limited it to just selling in the United states and also shipping only to the United States and I change the currency I said it to the US dollar I'll go ahead and click on save changes and now let's go ahead and click on the products tab and take a look at some of the options that we have here so this is that tab where we have the multiple sub- options right here I just want to point that out so you don't miss those are right so here we are so this is where you're going to tell WooCommerce which page on your website is going to be that shop page where you list all of your products out then we have some options here when someone clicks the add to cart button and we can choose to if someone clicks on it to immediately take them into the shopping cart if you wanted to do that here you can set in some measurements for your products and then here you can decide whether or not you want to enable reviews on your products and product ratings let's go back up here and then click on inventory now with WooCommerce you can actually have it manage the stock of your products and so here's the option in order to enable stock management and then here is where you can decide how it will manage and hold the various products how it's going to notify you if you're low on stock on particular products and then how to define if you're low or not on stock of certain products as you have these thresholds that you can said here and these notifications and then you can decide how to deal with a product that is out of stock you can just decide to hide it if you want from the catalog and then right here you can choose how and even if you want to display that quantity so this is probably not good if you have large numbers of quantity in stock but it is very good when you're running low to induce scarcity in whoever's shopping on your sites you can choose the never show or you can have it show just when it's a low quantity or you can have it always show I cannot like this showing only when it's in low quantity myself but that's can it be completely up to you now here is the options for downloadable products so if you don't have any downloadable products that your offering on your shop and that this option will not be for you now here are the options there is the file download method I would just go ahead and leave that as is but then the access restrictions are quite interesting you might want to check here were downloads require a login so someone actually has to be logged into your website in order to actually do the download this would probably prevent people from sharing a download link if you required that someone be logged into the website in order to start the download and then right here is an option for you to decide when you want to grant someone access to a download by default with WooCommerce when someone places an order it goes into processing and then you would manually go in there and complete an order now there is a little add-on extension that can automate that for downloadable products but right here with this box checked it will grant download access when it hits processing and that way the person that purchases the download doesn't have to wait for you to come along and mark their order complete now let's take a look at the shipping tab so right here we have the various shipping options which is shipping zones shipping options shipping classes now a shipping zone is actually perfectly explained right here it's a geographical region where a certain set of shipping methods and rates apply so the way we actually see this in normal life is when someone puts in the shipping address there's only certain options that are available to them so you can have a local zone so if someone's in a particular area near you you can have a local pickup option available for them it's based upon their address and another example is if you wanted a for example a zone just for an entire country you can do that and charge a flat rate shipping to that group when you're shipping to that location and then another example would be to have a entire zone for a continent like Europe and charge a flat rate shipping so these are your shipping zones based upon where your shipping next let's take a look at the shipping options that are available to us so right here by default this is enabled to enable the shipping calculator on the cart page and then here's an option if you wanted to hide the shipping costs until an address is entered so if that shipping cost is going to change based upon where someone is you'll probably want this enabled and then here are options of what you can allow someone to enter for a shipping location so you can force it to be someone's billing address or a shipping address or have them not have an option so you see this a lot I do whenever I order anything where I enter in my billing address and then it pre-fills that out to be the shipping address and I then would have to if I wanted it shipped to a different location I would just go ahead and change the address in there but there is this also security management is your right hereto for shipping to the customer billing address this would probably reduce any type of fraud if you're selling high value items because typically when fraud occurs someone makes a payment was someone else's payment method and there's a billing address but then they'll ship it someplace else where they can get access to whatever was purchased now let's take a look at shipping classes now shipping classes is an interesting concept so essentially this is a way for you to group different products into categories for the purpose of changing how you charge for shipping so say you had a flat rate shipping of $10 but on certain products you may want to charge an extra two dollars or something along those lines were you would create a shipping class and we would set it up so that any product that's in that shipping class will be charged a flat rate plus this extra amount so in this interface right here is not where we actually set up that information this is just where we actually create the class and then were to go into a different screen where we go ahead and put in what that surcharge is some to go ahead right now and add a few shipping classes okay so I've gone ahead and filled it out I put large shoebox and if you don't put anything here for the slug it's just going to use an auto generated based upon what you named the class and then I have my description here something to go ahead and click on save as shipping classes and now I've gone ahead and created my first shipping class so now I'm in a go back to shipping zones and I'm going to set up a shipping zone of four flat rate shipping all you do is click on add a shipping zone and then fill this out so I've entered US domestic for the zone name and for the region I've chose the United states and right here in the click on add a shipping method and so these are the options that we get which is flat rate free shipping or local pickup and what I want is flat rate and then would go ahead and click on add shipping method like this and it's going to go ahead and add it so now I have my flat rate set up and now I need to just put some information in there about the charges so I click on edits and I get this pop-up right here in first I will choose if the shipping cost is actually taxable this is another situation where you have to see what the laws are in your area then we enter in the cost of the shipping so for Mama to put 995 and then right here we see the shipping class costs and so right here is that shipping class that we created large issue boxes so what I can do is use one of these formulas so when you hover your mouse over the? Right here is the option so I can put Brad I can put say I wanted to charge an extra two dollars per shoebox or shoe order that someone places on top of the flat rate I can put to then the*which is multiplication and then in bracket QT why that's for quantity so this is what it would look like and there it is so when I put a product in this category large shoebox so for each shoe sale it's going to charge the flat rate +2 dollars just on those items someone to go ahead and click on save changes and now we've gone ahead and created this flat rate shipping option right here and this is where you'd also want to add in a free shipping option if you wanted to do that now I'm going to link to this article on the WooCommerce website right here specifically on table rate shipping so that you can read through it if you wanted to create some more complex rules for shipping your products either around your country or around the world there's an article here that walks you through it's a tutorial article that walks you through table rate shipping this would probably be a good topic for a dedicated video table rate shipping but this is a great tutorial right here on that okay so that's good to be shipping go ahead and jump on over to our check out right here so we have these options right here as well underneath checkout so the first option right here is how you do you want to handle coupons so you can not take coupons at all if you didn't want to and just unchecked this right here and how you want to apply those coupons if you want to calculate multiple coupons and then right here is the checkout process now this is one item where I don't think WooCommerce should have enabled by default but they do and that's this enable guests check out so when you uncheck this box this means that someone has to create an account on your website in order to make an order this is what I definitely think you should have off but it's up to you based upon what you're selling and how you're selling it right here is for secure checkout we don't have to deal with that if you have an SSL certificate you should have your entire website on SSL there was a time where it wasn't as much of a requirement but you did need it when someone was actually checking out however nowadays you need to have an SSL certificate across your entire website now here's where you tell WooCommerce which pages on your WordPress website are your your shopping cart and your checkout page and if you wanted an optional terms and condition page right here these checkout endpoints you're gonna want to leave those alone those are just some different slugs that's pretty technical and there's really no reason to modify those now right here's where were going to list the order of our payment gateways and this is if you were offering more than one ways to pay now it's up to you how many ways you want offer to pay I do think a good rule of thumb for convenience is to offer both PayPal and a striped stripe is an extension that you can add to WooCommerce and it's very easy to integrate in you could take a direct credit card transactions on your website and also PayPal now what that does is it gives your customers an option so some people they preferred not to use PayPal and then there's some people that prefer to use PayPal I know for me I like PayPal because I find it convenient now the actual options for these different methods and how to enable them on your website or not is going to be at the top and that was what we saw it right here these are worry to see links for each of these payment methods this might be a good point in the tutorial to go and add the stripe payment gateway by going to plug-ins add new and I'm in a go ahead and open this up in the new tab and then right here we can just do a search for the word stripe when you enter in stripe it's going to be the first option right here this used to cost money but then at some point WooCommerce made it free which is actually good that they did that then just go ahead and click on install and the Marina go ahead and activate it let's click on activate right now and now it's activated so when I go back here and I go ahead and do a refresh organist see stripe is an option there you have it you have all the various stripes and when I scroll down here they all are so what we can do if you wanted to do the PayPal and stripe we can go like that and then right here it says credit card is striped we can go ahead and put that at the top and now what were going to do let me actually save my changes then were going to go and take a look at those options and enable them so let's go ahead and first click on PayPal because it's right here and what you want to do is just click right here to enable PayPal to begin with now these are some options of how this payments can appear now right here for PayPal email you'd want to enter in your PayPal email address this is not my PayPal email address just make sure you enter the correct PayPal email address and you always always always want to test the actual payment to a couple test payments to make sure you're actually getting the money and then right here you put your receiver email you're going to want to get this PayPal identity token when you hover over the? It tells you exactly how to get this identity token so that you can pop it in here and then right here we have some options of the info that will get pushed to PayPal the shipping were the billing address and then we scroll down here this is what you're going to need to do to get Juergen have to get this API credentials from PayPal that when you hover over here it gives you information but here's a link that will get you all the information you need in order to get those API credentials now I know very old PayPal accounts you any old PayPal account actually had access to these API credentials but I think if you're to go create a PayPal account today it actually needs to be a business PayPal account in order to get these API credentials so let me go ahead and click on save changes and Alice take a look at stripe okay so this is where you can enable stripe by just checking right there and you can enter in the title how it's can appear when someone goes to check out with stripe and then there's it's actually so simple was striped when you log in to get the information you need here so first you'd want your test key and secret key you put that in there and this allows you to run tests on your payment gateway just make sure when you're running tests and you verify they work that you disabled this test mode because people have gone live with their e-commerce site and they forgot to take it out of test mode and let's just say it's quite a disaster here's some additional information on how it's going to look on your website here's an interesting option when you enable this it wouldn't be your standard check out for putting in your credit card it will actually be in little pop up that stripe generates to collect the credit card information the nice thing was stripe and also PayPal wins with PayPal PayPal source the payment details and this is you no credit cards or things of that nature same as stripe of someone purchases with stripes that information the credit card and all that information you're not actually storing it on your website you really don't have a liability there and then right here you have some additional options for how stripe will look on your website it is so easy to get stripe working with your website so that's good to be our check out and payment option let's go ahead and click on accounts so this is where you're going to tell WooCommerce which page on your website is the account page for your customers so when your customers login to your website or they can click on my account and what happens is they'll have to log in they could see some information like recent orders and things of that nature and so this is going to tell WooCommerce which page on your WordPress website is for that you can obviously click right here and change it to a different page if you didn't wanted to be this one and so these next options are to be about how these accounts get created so right here this checkbox is telling WooCommerce to create the account when someone checks out you can also have open registrations on your my account page I would recommend that because it could attract spammers just automated bots creating accounts and then right here is some more options regarding log log and then here's what happens and how an account is actually created with this checkbox you're telling WooCommerce to automatically generate a username from the customer email I definitely recommend that and is probably good idea to let your customers generate their own passwords or if you wanted to check this box were WooCommerce will generate that password for them here some more account endpoints you can just leave those as they are that's what I recommend and click on save now accounts what you notice it doesn't have any sub options which is nice now is you want to add a new menu item you can just click this plus and here's a list of pages we have created and we can also see a list of posts specific products or when you categorize your products you can show the different categories which is what we are showing here this is the category genes so all of your products if you put it in the category genes Look at emails that WooCommerce is going to send various emails for various things new order counsel order failed order there's all of these different emails that get sent out now you can customize these but before we do that let's scroll down and look at some of the actual bigger options so here we go email sender option so this is gonna be the from name of the from email address so you might want to put your store name here and your stores email address here or the one that you want people to be able to respond to and then right here you can add a URL to an image and this would actually show in the header of these emails that go out and then right here you can put some text in that will be in the footer of the email that goes out right here you can change the colors to your brand's colors so you would want to probably for the base color not have it be the WooCommerce purple whatever your brands colors is and then here's the background color the background of the body where the text is and then the color of the actual text so this would probably be the main color that you're tweaking it right here and then you want to save those options so on these emails right here while obviously on these first three want to make sure it has the right email address that you want so these are to be notifications to the store owner these emails here are going to be going out to the customer so on any of these you can go ahead and click on configure and it's can it bring you to those options so you can enable or disable if you don't want to be notified of new orders you don't have to you can uncheck this make sure your email is there or wherever you want these notifications to go and this is what the subject lines going to be it's automatically gonna pull information in from the actual order and then here is the email type it's going to be an HTML-based email and that's required for to look good if you wanted to change anything and I probably don't recommend doing that but if you did you would go ahead and click on view template to look good I would recommend leaving this on HTML but you could change it to plan text if you want but you want to leave that on HTML and there is like a template file with all kinds of code that you're not going to want to edit but if you did need to there some instructions here of how you can overwrite its even if you click on view template that's just not can think much sense the most people anyway so let me click on here to get out of this email and get back to our screen sure you want to go in there and make sure you have your recipients in their right customer these are obviously emails that are going to go out to the customer the shouldn't require much tweaking at all and then there some technical things here with the API you'll just leave these default but we have these options right here now let's take a look at some of the products and that's really where you're going to spend your time doing most of your set up work is adding products to WooCommerce so, go ahead and click on all products here the website that were working with has some in here so we can kind of get an idea of how these products were added so that we can get comfortable adding them ourselves so first let's take a look at this product on the front end of the website and click on view and open this up in a new tab right here and so here's how our product looks now were no set up products and get that process down in the morning to go in in and when to show you how to change the way this actually looks on the front end so here's our product image here is our title here is our description bit of text this is saying it's out of stock but we can change that very easy here's the SKU number you don't actually have to show that if you don't use excuse here's the category of the product and then here is a different picture of it right here that someone can click on everything pretty much happens with Wu creating products and it's going to be all mainly in this box right here so here's where we see our different product types simple grouped external or affiliate and variable so when I click on simple then we get our options here for a virtual product or a downloadable product now when you click on these these tabbed options here they can tend to change so if I click on a downloadable right here you notice how we have new options here and this is actually just pointing to those downloadable files and setting some limits and some expirations on it and so we can uncheck that and then virtual it tightens this up a bit and removes some options which was mainly the shipping option and then we have our simple product so right here we can enter in a price and a sales price if we wanted and you can even schedule a sale on a particular product some to go ahead and enter some values I've entered in 3999 and 2999 so it will be on sale and then you can click on the inventory tab and this is where you can put a SKU number in if you wanted to and you can set the stock status now right here is if you wanted to enable stock management on this particular product in the right here you have some failsafes if you have a particular product or you don't want to allow someone to order more than one this right here is the option for you usually want that with digital downloads I don't want someone to accidentally purchase to when they would only need one and then they would have to come back to you and ask you for a refund that's when I've use this right here the most then we can go ahead and click on shipping right here and this is where we can put in some criteria for the product like a weight and dimensions and also choose a shipping class not we saw earlier when I created the shipping class large shoebox and that would add two dollars to the shipping cost and that's what I've gone ahead and selected it right here now you can also link this product or you can link products together as up cells and cross cells so what happens is an upsell is when someone's checking out in there in the shopping cart though be presented with up sales are going to be shown to someone when they're actually on the product page so someone's looking at one product and you're showing another product which would be an upsell the intention is for them to purchase and upsell instead of the product that there on that's what the upsell is now across cell is product that would go along with the product so for cross sell you these only show when someone is actually in the shopping cart and they've already taken a product they and they put it in their cart then it's going to display these cross cells so crossbills are good for maybe having a product to be shown to a customer that they may need in their not thinking about it you see this a lot of times in electronics so for example I was purchasing a particular what's called a capture card but what do I need with that will I need the correct cables to go along with the capture card so when I'm checking out that would be good to show me the various cables that I may need so I can click a button and easily add that to the cart so I can click in here and do a search for a another product that's already in my e-commerce store and I can add it as an upsell or a cross sell next we have product attributes in this is part of the product variations so an example of an attribute would be size small medium large or an example would be color in the various colors of your products you can go ahead right here in add a new custom attribute or in the drop-down we already have one available and it's right here name to size so when that's clicked on you can click on add and then it's can add the size right here and I can just go ahead and put my value in there now lastly we have the advance option right here and this is where you can put some notes in that you might want along with the purchase and you can enable or disable reviews on this particular product and last we had that little bit of text that is actually going to show near the price so I'm going to change this text so it's pretty obvious how's that near the price and then here's where you'd see any reviews people left right here's where you can add the main product image but then you can add additional images in a product gallery if you had more than one here you could easily reorder them okay and as I scroll up you can add a category and start categorizing your product now here's something that is kind of important and that is catalog visibility so let me just click on edit so we can look at the options so by default it saying to show this on the shot page with all the other available products and of someone searching show this as a result right here if you choose shop only it just won't be in the search results and then if you check right here it won't be in the shop but it can be searched and then right here you can hide it all together so this would be an idea if you were having a cross sale and you don't want someone buying that cross sell product directly because maybe you're discounting a little bit so that example of a cable normally the cables $50 but in the cart your offering it for say 25 we you can hide it someone can just buy that alone actually have to buy it as a cross sell and this is when you can go ahead and hide that if you want so go ahead and click on okay let's click on update and see how the product looks in the morning to jump back in and take a look at the other product types someone ago here and now we have that price that we put in and remember I put that text at the bottom near the price just to show you that that is where that text goes and then right here we have the original price and look at this we have our add to cart button we also have a cell badge right here and we didn't actually change anything down here so now let's go ahead and go in and take a look at the other product options let's scroll down here so that was simple products and then we have a group to products in this is the product type or you're taking several products and kind of bundling get together as a single package that someone can purchase a bundle and so what you would do here is you well here's the stock status if you wanted to make this available at all but then you really need to go here to link to products in here were it says grouped products this is where you would search and add the products that are going to be part of this single bundle and if you have any questions about these just hover your mouse over the question and you can see right here it says this is going to be the list of products that are part of the bundle you can assign attributes to this we already explained that and we already explained the advanced options here for grouped products next is the external or affiliate product and this is where the button doesn't actually put them through the shopping cart it actually would take them to an external product URL and you can even customize the button text this is ideal if you have a store and you want to maybe refer people out to Amazon or something like that for products that you know your customers want but you're not going to carry you might as well send them to Amazon and get an affiliate commission I've been seeing this a lot because I've been on several websites about live streaming so there's these sites and they have a store but all of the products actually go to other places where they earn an affiliate commission which is totally fine so this is how you would use WooCommerce in an affiliate situation you can have the products listed but then right here you would go ahead and just link on out so right here you can do that askew to it I don't know why you'd want to do that you can link up sells to it and that's probably good idea you can assign attributes and we still have those advance options last is what most East commerce stores that are going to be and may be in the clothing business or or any type of product where there's can be lots of variations it's going to be the variable product right here and so this is when you want one single product listing it for different variations so someone would come here and get the different colors in the different size options versus having 20 different product options in the store you can just have the one products and these different variations for it so a lot of these options are to be the same ones we saw in the simple product where he saw SKUs stock management and they sold individually we also had those shipping options in the simple product we also had linked products for up cells and cross cells and we also had attributes so when you want to have these variations you need to first define what they are an attribute is color in size those are perfect examples of it so on this we really have color and I can click right here and add size just like this and click add so now we have two attributes in here I wanted to add a new one I could click on add and it's going to create 1/3 attribute where I would have to define what it is I guess I'm out of ideas but right here I would name what the variations going to be and I can go ahead and start putting some values in I'm going to actually remove that let's go ahead and do that and let's look at our size and color so right here let's put some values in so size can be a number or can be small medium large so right here we have some of them we have large we have medium we have extra-large we have small is small and there I guess we don't have small villages go ahead and add an S for that the way we would do that is we would click on add new and this is just going to add a new value and this is just going to add a new value here some to go ahead and enter as for small click on okay and it's going to go ahead and add small right here for me and there it is so if we wanted to use this for variations we want to check this box right here and then I'm in a go ahead and click on save attributes so now we have four variations for size let's go ahead and check are color variations that we may want for this product and so we have purple and red you saw how to add new ones right here and we have the option right here used for variations so now we have these two attributes color and size and we have the different options afford now what we need to do is actually create the variations now when we click on variations and go to created essentially what this is going allows to do is it's going to have kind of mini simple products in here for each of these variations so this is what were going to do and I'll show you what I'm talking about a medical right here to create variations from all attributes, click on go I'm in a click on okay and it's going to go ahead and create them all so for each small size it's going to create a purple and whatever the color other color was variation in its can do that for each of the sizes and so it's saying right here there's eight variations added when we click on okay and it's going to show eight variations here so we have each size and purple each size in red and it just created that for us now we can go ahead and take a look at one of these so each one is going to have these options to remove it or you can click here and guess what you can put the picture there and so this is how with the e-commerce site you can have different pictures that are therefore the variation so someone picks the purple one versus the red one you see it change colors so right here you can have unique images for each one of the variations you can have a unique SKU for the variations and these are all the settings that were already familiar with that we saw in the simple product so each variation can have its own price its own stock status and its own shipping class but right here it said as the same as parent so what I'm in a go ahead and do right now is him to go ahead and fill out all of these variations with a price case so I've gone ahead and added a price to each one of these I'm in a go ahead and click on the save changes and we just created eight variations of this product pretty insane right some to go ahead and click on updates and now working to take a look at the product on the front end and working to see those variation options so here are the two attributes color and size and when I click on the drop-down for color we have the different options and on size we have our different options here I probably should've put them in order small medium large XL that's an easy fix and right here it shows you the price range deep based upon the price I just put in all those variations and it doesn't allow someone to even added to the cart yet because they haven't made their choice so right here let's go for purple and then right here let's go for small and what you see is now it's displaying the actual price and I can added to cart and check this out I actually made a different price for red so when you choose red and now increase the price the 3999 and that's as simple as it is to create these variable products to have one product listed here and have these different variations now if I would've put a different image and for the red and for the purple the image would've just immediately changed and the buyer would've been able to see what they're actually getting I just didn't take that extra step but like I said it's super easy to do when you're in the variable settings for each one of these variations you can go ahead and put the image in for it so let's just check that out again and go right here and put a different image and that's really all there is to the products so now I'm in a show you some of the different styling options that are available in this theme for WooCommerce so let me go ahead and go back to the front end and I'm going to go to the shop page so many click on store and let's take a look at this and see what options that we have available for us so we have this this is a sidebar and we have these widgets that we can put in and we can also control how this store layout here looks so when I click on customize and let's take a look at the options that we have available to us alright so first I want to go to layout and then a minute click on WooCommerce and this is the shop pages on the click on shop and it's showing us some options here so the first option is how many columns so it's currently set to three but if you wanted you can reduce it down to two products per column and you can also set this on a per device basis in case let's put that back up to three actually you can decide how many products you want per page right now it's set to 12 and you can also decide what you want to have happen when the mouse cursor hovers over the product you can have it swap images or you can have no hover style next we get to see and choose what we want the product structure to be so right now it's the title then it's category its price and its ratings so right here this product has all four items title category price and ratings if I didn't want one of these here all I would have to do is click on the little eyes so if I didn't want category I can click right here in your to see the category just disappears and you have all these options here and you can even reorder them as something different makes sense if you wanted and add to cart button right here underneath the product you can do it that way as well I personally don't think it looks good unless you make sure every product has all four pieces of information something unchecked that just like that next we have a content with option for this page right here so now let's go back and I want to take a look at this right here this sidebar and number and look at the individual product number and look at the card page some to go back and that's gonna be a sidebar and that's found under widgets and here are the different widget areas and this is the WooCommerce sidebar so when I click on it and scroll up here's the product search if I didn't want this I can click on remove and it will be gone here is a list of categories if I didn't want this I can click on remove and it will be gone same thing goes for the filter so I wanted the filter at the top I could probably go like that and if I wanted the attribute filter I can go like that and now I moved the filters up to the top like that you see how easy that was you can have this look however you wanted to look if I felt like there is just too much information and I wanted to get rid of categories I can go like this and I could easily go right here and then remove that and it just disappears these are the widgets on the shop homepage here all right so now that that's done let's go ahead and look at the product page in the options we have available there I'm to jump back into layout WooCommerce an hour to look at the single product option now this is the free version of Astra it has limited options available for the single product if you did have Astra Pro there'd be a lot more options available here but essentially it's can allows to disable the breadcrumbs this right here is the breadcrumbs so they could see home category in the name of the product but if you didn't want that just check this box and it will just quickly disappear and push all of the content up so that's up to you if that's something that you would want so next to go ahead and click on add to cart so next let's take a look at our cart page options right here and what we do is we have the option to enable the showing of up sales or not this is completely up to you whether you want up sells the show or you want those up cells to be hidden now like I said if you had the Pro version of Astro you get a lot more cart options and check out options however what we have and what's been given to us is very beautiful to begin with so let's go back and I just want to just remind you how to enable or disable this shopping cart in the header that's an option underneath layouts right here underneath the primary header right here and it's custom menu item it said to WooCommerce if I didn't want that I would set it to none and then I don't have the shopping cart but if I would like that shopping cart I just go right here and I choose WooCommerce and I have my shopping cart back lastly I want to show you the settings for these buttons right here so if I go back and I go back again there's this option for buttons and here are all the attributes to the button I've got my button color I've got my hover color I've got my text color I got my radius I got the sizing in the padding and all of that so if I like to have maybe a rounded button I can increase this from 0 to 5 take a look at the add to cart button and see what happens as I'm upping this you see house becoming more and more pills shaped that is the button radius so there's 20 it actually looks pretty good at 20 just like that you wanted to change the color of the background of the button you can go here I can do something crazy like a red just make sure you stay on brand but you have full control over that right here this will probably be impossible to read the add to cart but you can put your colorcode right here and have full control over the color of that add to cart button he saw how easy that was and you also have control over how it looks when you hover that's the hover background color so I wanted to do this purple I could do that this is crazy I don't recommend it but watch what happens now when I hover it changes color like that CFO control these are all the controls that you need for WooCommerce to get started so now let's go ahead and take a look a quick look at coupons and then were in a test the checkout process some to get out here and I can actually save any of these changes I don't want to save this abomination of a button and then I want to go into the back end of WooCommerce anime to go ahead and take a look at coupons right here alright so here is a default coupon that we have in here there several different options for coupons so let's just go ahead and look at the anatomy of this one so when you first get in there you give it the coupon code just pop that in right here and then for general you can choose the type of discount whether it's a percentage or it's a fixed amount out of the cart or a fixed amount off of a specific product you have full control over discounts and how it all works and then you would enter in that amount right here here's an option for shipping and you can set an expiration on your coupon right here we have some usage restrictions we can set restrictions on a minimum spend a maximum spend individual use are just so many options there are obvious right here you can have this coupon only work for particular specific products now if you have a lot of products but you only want to couple for it to not apply you would just exclude those but if you had a lot of pride but you only wanted it on one or two of them than you would added specifically here to the products you can also discount entire product categories and exclude those categories as well and this is actually an additional way of protecting your coupon from not being shared out on the Internet you can restricted to just people estates a loyalty discount and so you can restricted to just people that have purchased from you in the past and you have their email address now right here you can set usage limits unlimited or you can limit their redemptions of its you can limit how many items it could be applied on and you can limit uses per user so you can create a series of coupons if you want for your website next week quickly let's take a look at reports so you can run reports is actually pretty good the reports that it gives you and the information that it gives you basically just can be based upon your orders now that brings us to what happens when someone actually buys something you're going to have the order listed here as pending and then you just process the order whether it's shipping or fulfilling and then you will mark the order complete it's actually very simple and there's options to mark a completed order refunded it's really simple to manage all of your orders here in the orders tab now let's jump into the front end of the website just test this checkout process on the go ahead and click on store and then let's go ahead and say click on this blue windbreaker jacket like this here it is I'm in a go ahead I'll leave just the one I'll click on add to cart like that and we get this notice that it has been added to the cart I can click this to view the cart but it's also now I'm getting this notification here in the cart icon and it shows me my products it shows me the quantity the subtotal it gives me an option to jump to the cart or jump to the checkout so let's take a look at what the cart looks like by clicking on view cart so this is where someone can remove items from the cart or increase the quantity decrease the quantity enter a coupon code your customers will do it all in the cart screen and you can see that this is beautiful it is simple it is elegant it is perfect and right here is the cart totals you can see the flat rate that was actually applied and right here is the actual total then let's click on proceed to checkout and it's gonna take you to this beautiful simple focused checkout page right here it's also giving them another option to enter in a coupon code and then they would just go ahead and enter in their billing date details right there and their address and their you know the option for shipping the products to the billing address for the shipping address right here is a recap of what they're ordering and then right here since I didn't actually put the stripe information in it's not offering a stripe but if I had we would have PayPal or stripe as an option and then once you click here it's going to take him straight to PayPal to complete the order and so that's pretty much all there is to having WooCommerce on your website I know it seems overwhelming at first but it's actually not that complicated once you get through wrapping your mind around taxation and wrapping your mind around it shipping some of put links to a couple articles on WooCommerce's website they all have these great videos on it so here is setting up taxes in WooCommerce right here is table rate shipping and then right here is going to be the flat rate shipping right here and there it's very well documented WooCommerce has fabulous documentation I'll just put a link as well to the documentation site and so you're deftly gonna want to check out where you live in the different sales tax regulations and you're also going to want to come up with a plan based on what you're selling of how you want to charge for shipping so that right there is your fast pass to WooCommerce so I know we've covered so much already in this video in there are a few things left mainly those plug-ins that I asked you to install that we didn't get around to activating yet and that's iThemes Security that's updrafts WP mail SMTP and Yoast SCO in the video description of this video I'm going to go ahead and put links to separate videos that I already have on these plug-ins I could add the content in this video but this videos long enough already having to squeeze in Elementor training hosting SSL Elementor WooCommerce all of that this has been a massive undertaking make this making this tutorial and if you made it this far I want to congratulate you and thank you and also let you know that I am genuinely here for you to answer any questions and help you with any additional help that you might need with this here on the channel I have a regular AMA's that stands for ask me anything where you can actually ask me alive on video also if you leave comments down in the the video comment section I will do my best to reply to those and I also have a blog post on this entire video over on my website at WP crafters so if anything ever changes I'll be able to updated their in written form just for you so if you found this video valuable and anyway I'd like to ask you right now to give it a like her a thumbs up and then if you could share this video with anyone that you think might benefit from it make sure to hit subscribe if you enjoy the content that I create and hit the bell notification if you want to be updated of future videos that I have that might update you on the current events related to this website that you just built hey I am so proud of you for making it this far I want to thank you for believing in me supporting and me and investing your time into me in this video and I hope to see you and the next video and when you scroll down here is a description and you can see were showing additional information and reviews in these tabs like this so let's go ahead and now click on edit product so we can see what this looks like in WordPress so this a first bit of paragraph text is actually what showed underneath the product image but right here is where

Free Email Updates
We respect your privacy.

wordpress themes for blogs

affiliate marketing