Create A Free Online Store 2024 ~ A Free Shopping Cart Tutorial For Beginners

if you're looking for a complete how to make an online store ecommerce website for beginners tutorial to build a fully functional professional shopping cart website or add a shopping cart to your existing website at absolutely no cost to you then you come to the right place [Music] [Music] [Music] hi i'm bethany and i love to write right now i'm at san souci in ocho rios jamaica one of my favorite travel spots i recently got the idea to make a wordpress website so i could share my writings with others and offer my readers practical advice i wanted my website to be mobile friendly easy to navigate and simple to update i also needed a shopping cart and a blog it turned out so well that my husband and i decided to make a tutorial to show others how to use wordpress i hope you enjoy making your website as much as i had fun making mine thanks bethany hello i'm yoda and welcome to my youtube channel in this website tutorial you'll learn how to build a website that has an amazing intro video professional logo eye catching graphics and all the bells and whistles the pros use at absolutely no cost to you this video uses all the current web design and web development techniques to build a fully responsive website that automatically adjusts to meet the screen needs of any computer laptop tablet phone or any other handheld device to get started the only hard cost we have is web hosting and that's where your website lives that's going to run us three to ten dollars a month with your web hosting you'll get a free domain a value of 15 as well as an ssl key which makes your web pages secure and that has a value of about 99 as for software requirements there are none everything we're going to need we're going to do online as for system requirements this website tutorial is compatible with both windows and ios systems all you need is your favorite browser and access to the internet and you're ready to go i recommend chrome and firefox as browsers of choice as i've had some students in the past that had complaints about compatibility issues with safari opera and internet explorer now during this course if you run in any troubles just leave a comment below the video and i'd be more than happy to assist you and don't be shy about asking for help i've been a webmaster instructor aka the web yoda for over 20 years and i love to hear from my students but if you could please pay it forward if you could like the video subscribe to the video share the video tell your friends about the video those are the kind of things that help get the word out though so other students like you can find this video there was something else oh at the end of this video i'm going to discuss the four biggest mistakes people make that drastically hurt your search engine placement turns out the solutions for these four things are really easy and they're free so i think we're ready to get started so without further delay let's go ahead and look at the website we're going to build today today we're going to build bethany's new website which is self-dash selfdashtastic.com we'll learn how to do an intro like you see right here and we'll learn how to add it to our website now notice that this text flies into place at just the right moment once the home page is revealed you're going to be able to learn how to do that effect as well as all the other effects that are shown in this website now definitely don't get intimidated i know this is going to look really fancy it's going to look very professional but you're going to be able to do all this trust me it's not going to be a problem at all now you're not just a passive participant sitting in the audience watching a magic show as i put the show on you're actually gonna learn behind the scenes how to do all this it's very simple it's very easy and you're gonna be surprised how quickly you can build this entire website if you don't have a logo we'll learn how to make a logo scroll down notice how these items animated out we'll learn how to do that we'll learn how to make these category sections in many cases those are services for example scroll down we'll learn how to do that animation but we'll also learn how to remove the background from that animation so that it just has the girl coming in we'll learn how to do these call to action areas and notice how they also animate it in from the right and the left and then we'll learn how to make the buttons grow when we hover over them scroll down we'll learn how to make an image carousel in this case it's just images of words of wisdom but they could be any images you want and then we'll learn how to do another animation similar to the one we did above and then if you need an email newsletter we'll integrate that into your website and then we'll learn how to make this footer at the bottom it looks exactly the same on all pages [Music] under about we'll know how to make this fancy header and then we'll learn how to integrate text so that it can wrap around a picture like it does here and then we'll learn how to import the words of wisdom section so we don't have to create that again we'll skip shop for now we'll learn how to make this super fancy gallery notice as we scroll down how neat those are when they slide in together and this is also a light box so any of these we pick on it'll bring it up and we can scroll to the left or the right let me close that out and then we'll learn how to make a fully functional blog with a unique header and then the individual blog items like this and when you click on one of those we'll learn how to format the blog post to have all these extra features nicely formatted like that and then we'll learn how to make this contact us page where we have a really nice clean form like this and then near the bottom we'll have a map and the map can zoom in and out and change it to whatever you need it to be and then we're going to add a shopping cart and in the shopping cart we'll have five different types of items the first is a simple item like this coffee mug you notice when you move across it zooms in let's add that to our cart let's go back to the shop and then we're going to add a variable item so let's say we're going to do this t-shirt here in a variable item it has more features to it so in this case we might want a gray t-shirt and we'll choose small so it fits bethany and if you notice at the bottom you may also like these are called upsells we'll learn how to do upsells let's add that one to the cart and now down here where the upsells are let's go ahead and add the white hat to go with that we'll also learn about related products let's go back to our shop we'll learn how to sell services through our website for example travel consulting we click on that we can add that to our cart get back to the shop we'll learn how to sell digital download items so for example we'll add that to the cart bethany's self-tastic complete collection and then we'll learn how to sell affiliate items so let's say you had items to sell that are on amazon or etsy or somewhere else and you just wanted to link to those so here's an item for example it's on etsy that bethany sells and when you go and look in it you can zoom in and see how nice the quality is and then when you click the buy product button it takes you directly to etsy to the area where you can purchase that item let's go back now if any time when you hover over the shopping bag it'll give you a brief description of what you have in your cart and at the bottom look at this recently viewed items that's really nice we can also click on this to take us to the cart and from the view cart we'll see that we actually added this one twice our card is fully functional just like any professional shopping cart is so for example we can reduce one and update the cart we'll learn how to make coupon codes so i'll come over here and i've got a coupon code of save 10. i can apply that and look at there i save 10 dollars we'll also learn how to do free shipping so in this case it's free shipping to the united states so i can choose that and then we can proceed to checkout and it has the ability to handle return customers if you had a coupon code we already did that and our shopping cart allows us to do any major credit card as well as paypal and we'll show you how to set all that up so you're able to do that now you should be able to learn everything you need to know in about two hours time i know on the surface it could look intimidating super complicated but trust me you can do all this i've got step by step all the way through showing you exactly what to do and if you're running any troubles just leave below the video i'd be more than happy to help you out so we're ready to start on our website but before we can build a website we have to have a place for our website to live and that's what web hosting does for you otherwise you'd build a website on your local computer but only you'd be able to see it you want to be able to have the world see it so you have to get hosting so everybody else can see your results finding great web hosting solutions in the matrix of hundreds of choices can be frustrating at best you have to understand that nearly all web hosting review sites make sure that the web hosting company they are affiliated with always get the best review so basically that web hosting company is number one to them because they get paid if you decide to use that company i have been hosting websites for over 30 years with the first five years being me supplying my own hosting i have used at least 10 of the hosting companies shown here either personally for my clients obviously not all web hosting companies are created equal and there are only a few that stand out from the rest but how do you reveal the best web hosting provider with all the fake reviews out there as puzzling as this might sound i was able to find my answer while not allowing my own bias to interfere for me i like to turn problems inside out in this case i was looking for the web hosting review that reveals a web hosting company that sucks the least so first the quick answer to the question of who is the best web hosting company for me is simple hands down it's hostgator hostgator is definitely the best web hosting solution for me my clients and for web yoda but the obvious next question is why is hostgator the best choice well webiota did some research to try to find some authentic web hosting reviews and they settle on some results from pc magazine you have to understand that pc magazine has been around for nearly 40 years providing essential technology information to the end user for our purposes every year pc magazine does an editor's choice award to determine the best web hosting companies and shown here the top six web hosting companies for this year with hostgator being number one it turns out the hostgator has been rated the number one web hosting provider by pc magazine for many years running basically hostgator collectively has the features you need their server reliability is amazing their 24 7 support is amazing their prices are good or better than anybody out there i personally have been using hostgator for more than three years now i host over 200 domains and websites with them webiota also decided to go with hostgator for all their needs in fact webbiota partnered with hostgator and as part of that partnership web yo to students receive up to 75 off plus a free domain name now for you to take advantage of this offer you simply need to go to your browser and type in hostgator.com front slash web yoda now this takes you to the partner page for hostgator and web yoda and it reveals our three choices for hosting plans currently as part of this partnership hostgator is going to offer us a free domain name provided we sign up for one of their annual plans and it turns out this is actually the most affordable choice for us if we scroll down we can reveal the pricing for each of the plans all three of the plans come with one click install so that means when we go to install the software it's going to allow us to build our website we can just click a link and it'll install everything for us they also come with unmetered bandwidth which means we don't pay for the traffic that comes to our website no matter how small or large that might be and finally they also come with a free ssl certificate which typically runs around 99 a year and you say okay what is that what do i need that for well that's a little lock up here in the top left it allows your page to be secure so the information going to and from your website is secure at this point you need to decide which one of the plans is best for you for our purposes i'd recommend the hatching plan if you have one domain or the baby plan if you plan on building multiple websites and then if later you find you need additional features you can just upgrade to the business plan and pay the difference so in your case you probably need the hatchling plan which is a single domain so we'll choose that the first step is to pick a domain name that works best for your purposes in my case for this example i'm going to use choose my domain name and if we click to the right it'll tell us if it is available in our case it is available so we're going to scroll down the next item is domain privacy protection and basically what they'll do is for 14.95 a year they'll hide your name your address your information like your email and stuff like that from people being able to see it now for me it's going to be on the website anyway so i don't feel like i'm giving anything away so i'm not going to choose to pay for that next we already picked our package type we chose the hatching plan because we only have one domain so we want to look at our billing cycle within the billing cycle if you purchase one month it's 5.48 but it's only for that first month and then the price goes up if you go all the way up to 36 months it's going to be 2.71 and it's going to be 61 off now to get the free domain you're going to pick 12 months 24 months or 36 months so let's go ahead and pick the 12 months it says 76.40 but let's see if we can do a little bit better than that now we're going to pick a username in my case i'm going to pick admin yoda and a security pin then we want to put in our billing information they'll scroll down to additional services now we don't need any of these services but i'll explain them real quickly the first is an ssl certificate we already get that for free so we don't need to add that the second is for them to protect us from hackers i know firsthand they're going to give you protection whether you ask for it or not so there's no reason to pay for this additional thing they're going to want to protect their servers from both the internet and from you so they're going to definitely stay on top of this next we don't need to pay for an email for our domain name i'm going to show you how to make an email forward for your domain at no cost at all next they offer a backup service where it'll do daily backups but i know firsthand they do monthly backups for you and also if you click on this link at the very top up here i'll go ahead and give you a video that'll show you how to make your own backups without having to pay them a regular fee like that we'll turn that off and finally hostgator offers some seo tools for nearly three dollars a month but there's plenty of free tools out there so we're not going to worry about that if we scroll down you want to make sure the web yota coupon code automatically spawned in here so you get the best possible price and we look down and we see that now we're at thirty three dollars which is really a great deal that's money for the whole year it also includes our free domain name at no cost to us and that comes with 24 7 365 support instant activation of our account money back guarantee which is awesome 45 days collectively all these features leave me feeling very confident that i'm making the right decision today so we're going to scroll down we need to agree to their terms and now we're ready to check out but in my case i own the domain i'm going to use so i'm going to do one last thing at the top so scroll to the top and i'm going to choose i already own this domain and i'm going to change this to say choose yourdomainname.com that's the one i own so now we go back down to the bottom and we're ready to check out now and my purchase is complete it is now setting up my account once our hostgator hosting account is complete and ready to go you're likely to get a survey that looks like this one but at this point we're going to go ahead and go off script and save ourselves a lot of time and a lot of questions if you didn't have this video to follow obviously following these steps would probably get you to the goal that you wanted to do but we're going to be able to get there faster and easier we're ready to set up our email forward and install wordpress so to proceed you're going to go ahead and head to your email and you want to look for an email from hostgator.com that says your account info at the top if you purchase a domain name while setting up your hostgator account then the next piece of information will not apply to you if you already owned your domain name and didn't purchase one with this process you're going to need to get your domain name to point to your hosting area to do that you need to point your domain name to the name servers for hostgator all of my domain names live at godaddy.com so i needed to go into the dns at mygodaddy account and point that domain to the hostgator name service as shown here now if you're not using godaddy.com it should be a similar process and if you have any trouble just contact your domain company and they can give you further assistance to log into our hosting account we're going to need our username and we're going to need a password we're going to take that password and we're going to copy it to the clipboard and now you want to go to the control panel which is how you access your hosting space so we'll click on this link and that takes us to the control panel login page now my username and password are already there so i can just choose login and that takes you to your hostgator control panel also known as your cpanel as promised i want to quickly show you how to make an email forward within the email section of your cpanel you'll see the email forwards option called forwarders the easiest way to find this option is to type forward in the search box which reveals the forwarders option then click on the forwarders icon now we're ready to set up our email forward we're going to choose add forwarder and we're going to put in this case i'm going to put yoda there's my domain name and where do i want it forward to i want it to forward to in my case yota webbing dot com add forwarder and now any email sent to yoda at chooseyourdomainname.com will be sent to my email address yoda at www.com obviously this would be your domain name and whatever email you wanted to send to now we're ready to install wordpress if we click on hostgator at the top left it takes us back to the control panel because the options shown below are always changing i wanted to give you the most reliable method of getting the same results you see in the video in the search box below type the word soft and this will reveal the soft tasculous app installer then click the sawtaskis icon to load softasculous now in the search box type wordpress this reveals a wordpress installer now simply click on the wordpress installer to load the installer now before we proceed with our wordpress installation i wanted to address how to deal with wordpress installation errors in very rare occasions when you're trying to install wordpress you may get an error i've already installed wordpress so that i can demonstrate that error then i can show you how to correct the error then we'll install wordpress correctly so let's go ahead and click on install now like we think this is going to work and don't worry about the settings right now we'll worry about that next time through and i'm going to click on install at the bottom it starts the install and then it gives you an error now in this case it's just telling me it already exists but this error could be any area where something went wrong our goal is to get rid of the install error so we can reinstall correctly to get started click on softasculis at the top left right here is a summary of our installations if we click on that it shows a complete list of the installs we have on this account at the bottom of the list is the newest install this is the wordpress that we want to replace so we can click the trash can at the right then scroll to the bottom choose the remove install button click ok because we're sure that installation has now been removed and now we're ready to install wordpress so at this point we can go back to softasculus choose wordpress and now we're back to the installer and we'll click on install now and we'll go ahead and proceed to install our wordpress the first option is which version do you want to use the default will be the latest version we'll use that next you'll choose your domain if you have multiple domains they'll be in that drop down now over here it says what protocol do we want to use the problem is it can take a little while for the secure key to be activated so we're going to go and turn this off for now we can activate it later so we'll just choose the regular one like that and it shows that currently our ssl certificate was not found and that's because it takes hostgator about 24 hours to get that up and running under site settings the site name is the company name so let's say this was for web yoda i'd put webviewer and then the description is whatever the description for the company is so let's say i put free online courses you can leave this unchecked we want to pick a username and a password i'm going to pick yoda user then you want to pick a secure password so let's hide that so i can put a secure password in there now the admin email is where any email associated with your website will be sent so for example if you needed to reset your password that's where it would go now since we didn't set up this email forward that's not going to be good enough for us so in my case i'm going to pick one that does work so for me it's going to be yoda.weber.com for you it'll be whatever your regular email address is you can choose a different language if you like we don't need to select any plugins we're going to do all that ourselves no reason to make any adjustments to the advanced options and no reason to select a theme now we're going to do that ourselves as well when the installation is complete where do we want to send details to i'll use the same email address and now i can click install this says that it could take three to four minutes i've found it doesn't take really that long at all now that wordpress has been successfully installed we're ready to open up a new tab and look at our website at this point we're probably going to have to take a small break and that's because we just set up a hosting account that has a new domain the hosting is immediately available but the domain takes a while to propagate across the internet so that it's able to be accessed to test to see if your domain name's ready simply open up a new tab in your browser and go to your domain name and if your domain's not ready you'll get a message that says this site cannot be reached so you're likely need to take a break for about two hours and then come back again and go back to your domain and refresh and see if it works when it's ready you'll get a page that looks like this one that says website coming soon or you might get your new website home page so let's go ahead and close that test tab now we're looking at our completed wordpress installation page again now that wordpress has been successfully installed we're ready to open up a new tab and look at our website to access our website we simply go to our domain name and go to our website before you can start editing your website you need to be able to access your website admin to do that you simply go to your domain name front slash wp admin hit enter a login box will come up now simply enter the username and password you created during your wordpress installation so in my case yota user password paste that in hit login and now we're logged into our wordpress so if you've been following along with the video you probably already know by now that selfdashtastic.com already exists so for us to build a new website we're going to have to have a sample area so in this case i'm going to build sample.selfdastastic.com and i'm going to go to wp dash admin to bring up the admin for her website in my case my username was already there so i can paste in my password and login and now i'm at the fresh install for bethany's new website now one of the first things i want to do is get something set up for us and so if we go over here and we highlight over where it says self-tastic if i right click on that i can open the link in a new tab and what that did was it opened our new website in our second tab and now i want to go to bethany's live website in a third tab so we can follow along in real time exactly what it is we plan to accomplish in most cases when i build a new how-to video i make a script for that video so that it's easier for me to create the video and at some point when i was using the script in a previous video a student pointed out that i should make that script available to everybody since it was very useful well it was a great idea and so that's what we're going to do next so let's go ahead and open another tab and to get to the script we're going to go to webyota.com selftastic and the last thing we want to do is download all the content i use within this website so when you're following along you can build the exact same website so i'm going to open up another tab and this time i'm going to go to webyota.com content and now i'm going to scroll down to the project we're working on selftastic.com and that was another way to get to the script but we're going to click on this link here and it's going to download selftastic for us and when it's done on mine i can click on that and show in a folder and you see it's in my downloads folder and then i can right click on the file i can choose extract all click on extract and now it makes a folder containing all the content i need opens it up in a new window so i can close that one bring that over here and when i click on that this is all the content we're going to use to create this website so i can go ahead and close this tab and this tab is a script for building the website and this tab is bethany's real website and this tab is the site we're going to build and then this tab is our admin for our wordpress so we can build the website now that we're ready to get started i wanted to cover a couple of tips that'll really help you out first some subscribers have pointed out that i tend to talk too fast this is unavoidable as my processor runs a little faster like a child's processor probably because i refuse to grow up fortunately youtube offers a feature to slow videos down to meet your needs so for example i'm going to go to this video in a new browser window now within the video i'm going to choose the settings gear i'm going to choose playback speed 0.75 now this is what 75 sounds like which should probably meet your needs now i'll choose playback speed again i'll choose normal and we're back to normal speed next i want to scroll down and within the content under the video that i've provided there's going to be an entire set of time stamps that allows you to pick any particular spot in the video to proceed let's go ahead and close that tab and the last tip i want to give you is the script itself when you go to the script it's got a lot of information here tells you the plugins we're going to cover that anyway in the video it tells us about the astra theme then it has a whole bunch of royalty-free video clips you may be able to use royalty-free images you can use and it has all the notes i'm going to need for the class for example all the colors i'm going to use are found here now two things that are nice within this is if you need to find a hex color and we'll talk about that a little later if you click on this link i'll right click and open link it comes up with the ability to pick a color so let's say i wanted to pick a red and now this number right here is your hex color all you have to do is click this icon and it copies it and now you have that color alternatively the other one we'll right click on this choose open link this gives you the ability to pick this type of color and this digit right here is to say how much transparent it is so watch when we go like this see how that gets transparent right here so that gives you some idea here's your color settings and then here's how transparent it is and then again you can click there it makes a copy of it and you can use it in your website let's go back to the script and now you're into the getting started section these are all the notes i made for myself so i can make the video but you can also use these to your benefit when you scroll down you'll probably notice to the left of yoda you talk too fast is a bunch of w's and you're going to say to yourself hey yoda why are all the extra w's i will tell you bethany decided she was going to get a new kitten the kitten decided he wanted to play on my keyboard it hit the w and i decided to leave it in the course okay random facts we've already covered the hosting we've already covered wordpress and now we're going to jump into themes and plugins now for the most part i won't be showing the script i'm just going to be using the script but you know that it's there for you as well now admittedly i'm no bob ross but i definitely do my best to keep things fun and easy i hope that the tips i just provided you will ensure your experience building your website will be met with confidence and enjoyment so we're going to go ahead and go back to our wordpress admin at this point if you already have a website then there's really no reason to watch the steps on how to build a website instead you can go ahead and proceed to the section called enable ssl which is the first step in the process of adding a shopping cart to your website so the first step in building bethany's website is to remove all the stuff that's not going to be part of her website so let's go ahead and click on pages first and we don't need any of the pages they have here we're going to make our own so we select that check box there and it selects all of them under bulk actions we're going to choose move to trash and then we'll choose apply and as an additional step i like to click on trash choose them all again bulk actions delete permanently apply and now we want to get rid of all the plugins that were pre-installed because we're not going to need any of those we're going to use all of our own so i'm going to go down to plugins and this brings up a list of all the plugins that were pre-installed again i can select next to plugins that check box and it chooses all of them bulk actions and before we can delete them we have to deactivate them so we'll choose deactivate apply now i can choose plugin again so it selects them all bulk actions delete apply ok because yes we want to delete them and this will remove all the pre-installed plugins now we want to add the theme that we're going to use for bethany's website so we're going to go to appearance themes choose add new and we're ready to upload a theme so first we're going to download the theme we need but you might say to yourself that here are all the themes why don't i just pick the one i need well the answer is you could do that but i can't guarantee that the theme we're going to use or the plugins we're going to use are always available in all environments so if you don't have your hosting with hostgator the theme and plugins may not be available in your environment to make sure the theme and plugins we need are going to be available i've stored them permanently on the web yoda server so let's go ahead and get our theme now so open up a new tab and we're going to go to webyota.com front slash themes scroll down to the project we're working on there's self-dash tastic.com and we're going to click on astra theme that takes us to the astra website but it also downloaded the astros theme right there we go and close that now we want to go to webyoder.com front slash plugins we want to download the plugins we need for this project so again we'll scroll down to this project selfdashtastic.com and we're going to need to download all of these plugins and as we download them i'll give you a little bit of information about what each one of them is the astra starter sites we'll click on that that's going to allow us to install a fully functioning complete website including a shopping cart in case we want one then we're going to download header footer for elementor that's going to allow us to build a free header and footer for our websites instead of having to pay a premium for it then we're going to download profile press and profile press allows you to set the icon for your blog instead of being whatever the default one is and then we're going to download social sharing and this plugin makes it real easy for someone else to share your blog posts and then we're going to download the classic editor a lot of updates and changes have made to the wordpress environment and by having the classic editor as well as the classic widget it ensures that we all see the exact same environment so that what you're following along on your admin matches what's in the video now we're going to download duplicate page and duplicate page allows you to take a page you've already created and make a copy of it and then edit that to be your new page which is significantly faster than building a page from scratch now we're going to download really simple ssl and what this plugin does is ensure that the secure pages are the default for your website and next we're going to download the woocommerce stripe gateway and the woocommerce stripe gateway is what allows you to accept credit cards on your shopping cart in case you're doing the shopping cart and now we're going to download woocommerce taxes and shipping and this gives you an automated way to do taxes and shipping in case you add a shopping cart to your website and finally we're going to download the woocommerce plugin itself and that's the plugin that allows us to add a free shopping cart to our website so now all of those have been downloaded i'll go ahead and close that and now we want to go to our downloads folder so i'll bring mine up and it shows everything that we've downloaded so far i'm going to go ahead and click on date and that's going to allow me to see these in the order that they were downloaded so now let's go back to our wordpress admin now we can choose upload theme and now we're going to choose a file and you want to go to your downloads folder then we're going to select astra.zip that's our theme we'll choose open install now and once it's installed we need to activate it and it's that little link right there and that activates our theme in almost all cases you'll immediately be able to update it to the most recent version so we'll choose update now now our theme is updated now if we come back to our website and hit reload you notice that it's changed a little bit still nothing like the site we're going to build but we're getting closer so let's go back to our wordpress admin and we're ready to install the plugins we're going to need for our website so we're going to choose plugins add new now we want to do upload plugin choose file we want to be in a downloads folder and the first one we're going to do is astra starter sites so we'll select that choose open install now activate plugin ready for the second one add new upload plugin choose file the second one is header footer elementor open install now activate plugin ready for the third one add new upload plugin choose file wp user avatar that has a new name profile press but the original file name is still the same so we'll choose that one open install now activate plugin we're ready for the next one add new upload plugin choose file the next one is social sharing by danny open install now activate plugin add new upload plugin choose file and the next one we're going to do is the classic editor open install now activate plugin and choose add new upload plugin choose file the next one is classic widgets choose open install now activate plugin again add new upload plugin choose file duplicate page open install now activate plugin now at this point if you're following along in the script you'll see that we're not going to install the other four at this time we'll take care of that later so we've installed all the plugins we need for now also at some point profile press may ask you to create pages we're just going to do no thanks when it asks us that because we don't need that so we'll go back to our wordpress admin and another thing you're going to find is always a lot of little advertisements you can close each of those and try to clean things up a little bit this says to install elementor that's going to be taking care of a different way for us next thing we want to do is update our plugins so we're going to choose to select them all bulk actions update apply and we can scroll down and watch it do its thing now all of our plugins are updated and now we're ready to install our starter site now watch what happens when i click right here i want to see the library it's going to give me this sorry you're not allowed to access this page don't know why sometimes it doesn't do that usually it does so i'll click the back arrow and then we'll go back to the starter sites when we click on c library again it's going to work what we want to do is scroll down choose build your website now and we're going to choose elementor which is the world's most popular website page builder so we'll click on that now for some reason you didn't have that option for some reason maybe you had already tried this before your option to choose would be up here as well now what we're looking at right now are all the different website templates they have to offer it's totally amazing what they have already pre-built and basically a lot of times you can find a website that's just about everything you need it to be now there's two types of templates in here if we go over to all we can choose premium and it shows only their premium versions and if you decide on a premium template for your website go ahead and visit dot com front wpastra.com web yoda and this will guarantee you the best price in most cases you can find a free site that will work and for this example we're going to use a free site so let's go ahead and change that back to all now notice there's lots of different categories that you can look through to find the particular one you're looking for in our case we're going to do one that's called cosmetics as our default so if you type cosmetics in the box you'll see that the ones that are available under that heading show up and the one that we're going to want looks like this in my case it's the first one it may be farther down the list if you want to go ahead and click on that and this brings up the starter site we're going to use to build our website there's a number of options you can fill in here but we're going to do all that ourselves later so all we need to do is click on skip and continue we're going to scroll to the bottom we're going to choose continue it's going to ask us a couple of questions so let's go ahead and fill in the boxes we'll put yoda yoda at web yoda.com i am we'll tell them we're intermediate and we're building our website and i don't really want their newsletter right now scroll down submit and build my website now it's installing our starter site and remember earlier we didn't install elementor ourselves that's because it's going to install it here so there's really no reason i add that extra step this process doesn't take very long i speed it up just a little bit right here so that we didn't have to wait as long congratulations installation complete took 33 seconds they give you an option to view your website here but we already have a tab to do that so let's go up and go to our second tab and see what our new website looks like look at there we've got a fully functioning website with a shopping cart already built into it how nice is that so that's for free from astra themes and you could basically build any website they have in that collection either the free version of the premium versions and start with a website that's already completed i love it but in our case we're going to take this website which is pretty cool as it is and build bethany's website which is i think even cooler so let's go back to our wordpress admin i'm going to close this little window it takes up space and i don't like it now since we're going to be building bethany's website first before we do any of the shopping cart related things and some people may not even choose to use the shopping cart we're going to go ahead and disable the woocommerce shopping cart for now and then we can reactivate it later when we're ready so the first step to do that is we're going to go to plugins scroll down and we'll just deactivate woocommerce next we want to remove the shop button in this case on our website it's right there to do that we're going to go to appearance menus and now we need to choose the menu we're going to look at so we're going to pull down that menu there and choose primary menu hit select and now we're looking at the primary menu inside of the one that says shop i can remove that for now and now at the bottom may have to scroll down to get to it save menu and now when we go back and reload our site there's no longer a shopping cart in there for now so go back to our wordpress admin and at this point i wanted to discuss the things that can go wrong murphy's law states that when things can go wrong they will go wrong and you will experience this yourself it's in my experience plenty of times while building websites that random unexplained things can go wrong for example once i wanted to update my theme and the theme button would not work another time i clicked on my widgets page and instead of seeing these widgets the page came up empty like this another time on my shopping cart where there should be stars under the review there were just a bunch of s's instead another time inside of my customized options only a portion of the options were showing up instead of all the options i expected to see so i know right now you're saying yourself hey yoda what am i going to do about these things what happens when they go wrong i will tell you in most cases the problems can resolve with a simple keystroke if you're inside the page that you want to fix for example let's say it was this page i can hold down the ctrl key and the shift key and then i can hit the reload button at the top left and in most cases that'll solve the problem and you'll see the corrected version alternatively you might also try clearing the cache inside of your browser you may try restarting your browser or you might also try viewing your website in incognito mode to see what the rest of the world sees and at this point if you're still having problems just leave a message under the video and we can work on your problem together now as a last resort you can always restore your website from a backup when things really go wrong unfortunately if you don't have a reliable backup solution in place when something goes wrong with your website you stand to lose everything i personally use backupbuddy which has saved me many times over the years either way you want to consider a backup solution that meets your needs if you're looking to make scheduled automated backups of your wordpress website where you're in full control as well as make manual backups at any time that you can store locally on your own computer then you'll want to check out my wordpress backup and restore video at some point now in my case i also install the backup buddy plugin in bethany's new website and periodically as we go along i'll save where i'm at in case something goes wrong i can always restore to where i'm at so at this point i'm going to scroll down i'm going to choose backup buddy i'm going to choose complete backup watch it do its thing which really doesn't take that long and when the backup's complete i scroll up and i choose download the backup file and this downloads a complete copy of the entire website and the database in case something goes wrong and now we're ready to make some adjustments to the header section of bethany's new website if you look at the real-time one there's a logo to the left and a menu to the right on our as the logo is above let's go ahead and get started in making some of these changes so go back to our wordpress admin we'll go to appearance customize header builder and notice down here it shows us the orientation of the stuff that's up here so for example i can move this one over here and it shows that logo over there i can move this one over here and it shows the menu over there now we're going to choose the site identity and logo button and we're going to change our logos so we'll click on change logo i wanted to point out an interesting quirk about the media library sometimes when you load the media library it'll be in this mode which is upload file mode however sometimes when you load your media library it'll come up in media library mode where you see the pictures and you see how it could be confusing if i bring up a screen that looks like this but yet you go into yours and it looks like this it could be confusing so just keep in mind that if you see this but you expect to see all the pictures all you have to do is click on media library to bring up the picture version so let's go back to the upload files now i can select files here but the much easier way to do that is to bring up that folder we have that has all of our content in it but we can drag stuff from the content folder directly into here so i'm going to scroll down and look for my logo and there's my menu logo i can drag that over i can choose select we're going to skip cropping and we'll scroll down we'll change the next image now it's in our library so i'll choose it again choose image scroll down and what width do i want it and this little icon here says on a regular computer screen and i want the width on a regular computer screen to be 230. see how that made it the correct size there now if i click that icon now it's in tablet mode and in tablet mode i want it to be that size and also i can move this to the left this to the right we click that icon again it shows us phone mode i want to go ahead and make that 180. we want to make sure both of these settings are turned off which they are by default and now we want to upload what's called the favicon icon and that's a little icon like right here where you see the web yoda one on bethany's you see the self-tastic one and on these two tabs it shows the wordpress default so we'll choose select site icon you want these images to be a minimum of 512 by 512. we'll go back to our library and here's our logo for the favicon i use the ping format for most files it's a very versatile format so i'll drag that over i'll hit select choose crop image and now you see it showed up down here and when we refresh this page it'll also show up so we'll hit publish now we're not seeing it here just yet but if we come over here and we hit reload i held down shift and control when i did that to make sure i got a better reload and now it shows the new icon the logo is to the left the menus to the right we're making progress now notice this doesn't have our logo yet and that's because this is a transparent menu bar so we're going to go ahead and go back and change the logo in a couple of other places the logos we've done so far will make sure the logo shows up correctly in your shopping cart in case you're putting a shopping cart on your website so if we scroll to the top we can hit customize transparent header and now we scroll down and we're going to change these two images so that logo is right there choose image again or change image use that one hit the choose image button we scroll down now we're looking at the phone version still if i click that it displays the computer format again i want to make that 230 for the computer as before and then for the tablet i'll make it 200 and for the mobile again 180. let's choose publish go back to our new website hit reload and now we have a nice logo here but you're saying to yourself but you don't have a logo what do i do i will tell you if you're looking to make a professional logo for your website online at no cost to you in about five minutes time then you'll want to check out my make a free logo video at some point the next thing we want to do is to be able to change this font this font may be fine for you and you don't need to change it but i want a different font for our menu so we'll go back into our wordpress admin i'll choose x and just for consistency i'm going to show you how to get to these things each time from the top menu so we're going to go back to appearance customize header builder choose the primary menu button choose the design button scroll down and here's the menu font option they really hide this stuff don't they so i'll click on the pencil and i want the family to be open sans condensed i'm going to choose 24 i'll choose publish come back over here reload and i like that a lot better now i want to look at how to set base colors for your entire website so we're going to close that out again for consistency we'll start at the dashboard we'll go to appearance customize global colors and now here's your colors for your website the only one i'm going to set right now just so you see how it works so i'm going to choose this and i want to scroll and i'm going to put my background color in there and you're like well where did i get that color from i came over to our script i scrolled to the top and these are all the colors that we had pre-defined me and bethany sat down and figured out the colors we wanted you'll want to go in and decide the colors you want and then when you save them in a file you can always get back to the ones you need for the different things you need to use them for so in my case the background color was this light blue and that's where that number came from right there we came back over here i can hit publish and you could set all your default colors for your website within here the what's there is going to work fine for what we're trying to do for right now and one of the last steps that we want to do that have to do with kind of the setup of things is when you come to the website and let's say we clicked on testimonials notice how it says the word testimonials here now the page name you assigned to a web page is called the slug name so in this case the slug name for the testimonials page is testimonials to make wordpress use the slug name as the page name requires a specific setting in wordpress and let me show you what i mean if i come back in here and you go to settings and then you go to permalinks this defines the different ways that your urls for the pages can show up but in my case was already setting because if you make a change and so if you're following along and you built your website with a different theme or something like that yours may not have the permalink set the same way we want to set them typically post name is liked better by search engine so we like to use that now i'll scroll down hit save changes and now if we go back to the website we're working on and we click the home button we're going to start making this page look like this page so let's go back to our wordpress admin and we're going to choose pages and that brings up the pages that are in our website and then down where the home page is out to the right when you're hovering over it you can choose edit with elementor and that loads our home page up into the elementor editor now the elementor page builder is the most popular page builder on the planet and you're going to find out real quickly why that is it's just really easy to use super user friendly it's fast reliable all those fun things now before we get started making changes to our page i wanted to give you a little bit of background on how this works at the very top you see these icons and this is the section edit icon this allows you to control the section which in this case is this whole area here whereas this section is that section there and that's a different type of a section we'll talk about that notice how it's got a little border on here if you click on that that's called an intersection see right there and keep going down and we click on here that's a section in itself so each one of these it's basically a row is what a section is now inside of a row can be columns and this little icon here defines the column so as we scroll down this particular one here has more than one column in it notice there and there and this one here has a column here a column here and a column here so you see that's the section we click on that it shows a section in this case it's called an intersection i'll tell you how that's different we'll use that later but it's still a section and inside a section there's columns so a section is a row and then the columns inside of it there's a column marker so you edit the column by clicking on those and then inside of a column this is a cell you can put different widgets so that's a widget and see the little icon that's how you edit the widgets so when you scroll down to any area here's the section that edits the section and then here's the column if i click on that now i'm editing the column and then inside of that look there's one two three different widgets if i click on that it's editing that widget if i click on that it's editing that widget if i click on that it edits that widget furthermore within each section within each column and within each widget are three different ways that you can edit so for example where it says are happy clients if i select that on the left i can change the content so here's the content i can change the style of that content and then i have advanced settings for that content and that's true for anything so when we come to the top and we click on this content up here that is the section at the top here is the layout in this case the style for that section and the advanced settings for that section and if i go to the column here is the layout for that column here's the style for that column and here's the advanced for that column and then inside of this if i click on a widget there's the content for the widget the style for the widget and the advanced for the widget so that's enough to get us started and the first thing i want to do is change the background from being this cute girl to being the one that's going to be on our website so we'll choose the section at the top and then we're going to choose between layout style and advanced we're going to choose style and here's the image that we're going to change so if we click on that i need to put the new image i'm going to use here so we'll bring up our content folder and now i'm looking for the cover image and it's that one right there cover home i'll drag that over and then i'll choose insert media and now it has that image we can hit update at the bottom go back to our website hit reload and it's that easy pretty neat huh so let's go back to elementor and one of the things you might ask yourself is well where did i get this image i will tell you if you're looking to access the best royalty free photos and images online at no cost to you then you'll want to check out my best free stock photos and images video at some point or you can simply click on the link at the top right and visit it now now as that promo mentioned you can basically get almost everything you need for free online and that's how almost all the art within this website was collected was to get free images online so if you're wondering why didn't we just use a free bethany picture well she decided she didn't want to be the click bait on everything so as a compromise i picked a different picture as the main picture for the website so now let's make some changes to our website this text right here we're going to use some of this stuff i'll click on that widget like that and on the left hand side it's already defaulted to content and in this box i want to put welcome to and then we're going to set some style for that typography is basically the font and stuff like that so we'll click on that we're going to set the font to open sans condensed we're going to choose a size of 23 and the weight which is how bold it is we'll set to 100 that's what 900 looks like that's what 600 looks like and we're just going to use 100 and now let's change this heading right here so we'll choose that widget and then on the left we'll choose content and we'll type in that now i really didn't want this all the way across i kind of wanted it to be two separate words so you're going to learn a really neat little piece of code if you do a less than the letter b the letter r and a greater than that's literally the only html tag you ever need to know and that tells it to make a line break and what it did was is it put self on one line and tastic on the other now we'll go into style typography and for the font i want to use landrina shadow so we'll choose that and we'll set the size of that to 122. look how cool that is now i don't like the line spacing in between that being so big so if you scroll down here's the line height let's set that to 100 that way they're nice and close and i want to set the margin to zero and let's look at what margin is if we scroll to the top inside of our advanced we've got margin and we've got padding well i want to set this margin from being 20 i'm going to set it to 0 and notice that it took this space out here as we go along we'll see some differences i'll show you how margin and padding are different right now it would be difficult to tell but both of those things give you a certain amount of space around whatever the item is but for now let's just set that to zero and we'll discuss margin and padding in depth later now for the next line now we want to change the text in this widget i'll choose that one be the best you we'll go to style typography for this one i want it to be open sans condensed we'll make this 30. we'll change the weight to 100 and we'll choose a line height of 19 and that just kind of told us how much space we want between this text and this button right here now i want to change this view more button to a learn more button i'll choose that widget under content where it says view more i'll put learn more and over here for the link i'll put about and now we can hit update go back to the page we're working on hit reload and wow look at that we're making progress so let's go back to our elementor and now i want to add the intro video but to add the intro video i first have to add it to the media library and to add a video i have to do it outside of elementor so i'm going to choose this icon here and then i'm going to choose exit to dashboard now i'm going to choose media and that takes us to our media library and this is the same one we're using inside elementor it's just that some things you can load here that you can't load directly into elementor and now i'm going to go to our content folder and i'm looking for our intro video and there it is i'm going to take this drag it to the left now that that's loaded i'm going to select it so that i can get this link over here and i will copy the url to the clipboard and now i can close that we'll go back to pages we can go back to home edit with elementor and now we're going to select the section at the top again we're going to choose style but instead of choosing it to be a background which is just the classic one we're going to choose this little video choice and here we can put in a link so we'll paste our link in there and look at there our animation automatically worked right out of the box now it's playing over and over again here's an option play once we'll turn that on so that way it'll only play once and when it's done what we see is that there's no background then we're like but it was there what happened well the reason is is now we need to scroll down and there's a section called background fallback we want to click on that and we'll choose the image we already uploaded like so hit insert media and now it's there we can hit update and that allows it to have the image that's going to be there after it loads we'll go back to our page and hit reload and watch the animation but also notice this text is already on the page right there but on bethany's site when you reload it loads the intro and then right after the intro finishes that little menu slides in boom pretty neat huh that's what we want to do so we'll go back to elementor and this is the column we want to set to delay until after the intro video has completed and so what we're going to do is we're going to choose that column and now we'll go to advanced and under advanced one of the options is motion effects and for the motion effect we want to choose fade in from the left and then we're going to set the animation to 8 thousand eight thousand milliseconds is eight seconds which is a little bit longer than our animation is so we go ahead and click update go back to our version of the website hit reload now the intro shows and at the end of the intro slides in the text really neat huh but you're saying yourself yeah that's pretty neat intro but i have no idea how to make one i will tell you if you're looking to make a free video entry for your website online at no cost to you then you'll want to check out my make a free video intro video at some point now we'll go ahead and go back to our elementor and we're going to scroll down and we're ready to work on this next section now in this section i want to build a category section typically use it if you had services that you wanted to highlight or feature in your website this particular piece of code right here i don't need it so i can right click on that little icon and choose delete and now let's start working on our category section first we'll delete this widget right here and also i can right click on that little icon and choose delete now for this header right here i'll select that icon and over here i'm going to change that title to beat that text and the color we're going to use if we go to set style we can choose a color i want to be that color kind of a brownish color now to get out of color mode you just click the tab again so it kind of toggles let open and close like that now for typography the family i'm going to use the site pretty much we're going to use open sand condense on a whole bunch of stuff and the padding around this so if we go to advanced do padding again we'll talk more about this a little bit later right now see this icon that's linked together that's linked apart if they're linked together and you add one they all add together and if they're linked apart if they're not linked then you change them individually i want them linked together that's the default and i want to put 20 in there and that puts space around that particular item again don't worry too much about the difference between margin and padding right now i'll discuss it a little bit later when i have a good example for it now i'm also going to delete this widget i don't need it and now we're ready to add a widget we haven't done that yet to your elementor environment to add widgets we have to get to the collection of the widgets to get to the collection of the widgets we choose this icon right here and these are the different widgets we have at our disposal notice some of these have locks on them because we don't have access to those the one we want is the one at the top is called intersection basically it allows you to make a section inside of a section so if you hold down on that with your mouse you can drag it over and see that little blue line that's where it's going to land at it's kind of tricky sometimes to get it to land where you want it i want it to land under the text and now i have this new section now in this first box i want to put an image so we'll go back to our collection of widgets and here's the image widget i can drag that over and again notice i can choose where it's going to land by moving it around and i want it in that box right there just like that and now i want to set that image to be one of my categories so on this side over here i can click on that image and they're not in here yet so let's go to our content and we're looking for categories and we've got six categories i'm going to select all six of those and i'm going to drag them over all at once to save me some time later now they're all loaded if you click on it that tells you which one you're going to select and over here it tells you the particular name of whichever one it is so in my case that's my first category i want so i select that and insert the media and now we've added an image to our website pretty easy huh now what i want to do is show you a trick for reusing widgets so here this widget here is a title widget if i click on that it says it's a heading i'm going to right click on that and tell it to duplicate now i have a second copy now if i move my mouse over the little widget icon edit i can hold down on it and drag it wherever i want it and i want to drag it under this picture like that and then i want to change this text so i have that one selected already over here and change the title to say personal development i'll go to style typography in this case i'm going to change the font we're going to choose work sans and i'm going to choose a size of 22 and now i want to make a copy of this because i want to be able to reuse the layout that i already have so just follow me on this if i wanted to duplicate this picture i could right click here and duplicate but what i want to do is duplicate the whole column so i'm going to say right click and duplicate now i want another copy so i'm going to say right click and duplicate now i've got three copies and now on this fourth column i want to get rid of it so i can right click on that and choose delete and now i have the three that i want now at this point i can right click on that intersection and choose duplicate and now i have six of those so you can see quickly instead of having to build everything from scratch we have a lot of the stuff that we're going to want to use already and now we can customize these one of the things that i don't like is how much space is around here so let's choose this one i'll come over to advanced and we're going to set this to zero even though that worked for the top title it didn't work down here i'll set it to zero and i'll disconnect these and then i'm going to set the bottom one to 20 by itself now i need to fix all the other ones the same way i did this on purpose because i wanted you to see how to copy the style so here we made a style change on this one so i can right click on this one copy it and when i right click instead of pasting it to make a new copy i'm going to paste the style and it just fixes the style and i can do that for each one of these so you can see that's a neat way to be able to make changes quickly to the style without having to do all the work over and over again now i just need to change out the pictures and the text to match so to change this one i choose that image i come over here and i pick my second image hit insert media and then i'm going to choose that text change the heading over here and now that one's changed and then i'm going to do a little magic to get all these to change real quick since you know how to do that and now they're all changed a little fun fact that's a picture of me and bethany at one of our favorite resorts at our wedding now if we click on update and go back to our website and hit reload and you don't have to wait for the intro to load before you start scrolling down just so you know and there's our new section now in bethany's when you hit reload on it notice that these things come out to the sides like that and so we want to do that next so we'll go back to elementor and now we're going to choose this column icon we'll go to advanced motion effects and we want to slide in from the right to the left so for the animation we're going to slide in from the right then we're going to put the delay hit 1000 milliseconds which is one second now we'll right click on that column copy right click on this column paste style and now that one's set it didn't move but it did set it so now we'll come over to this one select it advanced motion effects we're going to slide this one in from the left 1000 milliseconds which is equal to one second right click copy right click paste style now for this one we'll select it advanced motion effects and then this one we'll choose zoom in again one second right click copy right click paste style now we can update go back to our website hit reload and notice how those slide in but let me do it again notice how this one is on top so they're stacked in a different order than i want them basically we want this one and this one to be on the top and there's an easy way to do that so go back to elementor we already have this one selected under advanced for z-axis we put a number one the default zero that'll make this one sit a little bit higher and we'll do the same thing here advanced the index of one hit update we'll come up here hit reload and they're coming in exactly the way we want them now we're ready to work on our next section so let's look at bethany's site and we scroll down we're going to make this animation right here and we'll also learn how to make the background transparent for the umbrella girl so now let's go to our script and we're in the inspiration section and we're going to learn how to make the girl transparent so first we're going to go to unsplash and we're going to do a search for girl umbrella yellow and there she is and we can download that if we want it gets added to our collection in our download folder and you go to your download folder you see the picture that's there now it's going to be the whole thing the question is how do you get just the girl part cropped out that's a really good question right i will tell you if you're looking to edit photos and images online at no cost to you then you'll want to check out my how to edit photos online video at some point so now let's go to our script now we want to go to the photo scissors this is a website that allows you to crop a picture and it says upload an image show you how easy it is here's my images there's the one we're interested in click open uploads the picture notice that it cropped the girl out no problem you can take this and go like that obviously i made a mirror image of this but it gives you generally the idea of what you're trying to do and then you can choose download download load resolution the low resolution is fine for what you want to do and you can go back to your elementor we scroll down so now that we've successfully made our umbrella girl have a transparent background we're ready to start on our inspirational section and then add her to it the first thing i'm going to do is going to change this background so we're going to click on this and it's called an intersection this one right here see how there's an intersection is there and the main section is there we want to be on the intersection we want to be on that section there specifically and then we'll go to style and then we'll click on the picture and now we need to upload a picture and we want to go to our inspirational pictures so here's our content and scroll until we get there they are our inspirational pictures and there's the background i want drag that over hit insert now we want this to be center center for the position it already is but check that to make sure instead of size cover let's change it to contained and now in this intersection there's two columns a left and the right if you grab the edge in between you can slide it left and right and make it change its size and get it roughly to 40 percent on the left and 50 or 60 on the right you can also choose the column and then specifically put it to 40 that's a little easier and the other one by default will be the difference now let's add the girl we'll go up here to where we can pick from our widgets we'll drag over an image and then we'll add our image so we'll go back to our content folder and there's our transparent girl that we created drag that over we hit insert now her image has been added so from here we're going to choose advanced i want to put some padding at the top so let's say 200 that moves her down a little bit and then we're gonna go into the motion effects default let's fader in from the left and let's give it a thousand milliseconds or a one second delay for bringing her in like that and let's let it come in a little more slowly just because we can ta-dah there we go now we can just hit update just out of curiosity it's nice to see our work sometimes come over here we'll hit reload and there she is we're making progress back to elementor we're going to choose our section tab right here to edit the section itself and then we're going to go to style and see that background's white we're going to change it to one of the darker cyan looking colors and now we're going to go to advanced and change this from 0 to 35 and change that 100 to 0. in bethany's you see this little wave brush thing going on right here we want to add that so let's go ahead it turns out being at the bottom of the section above so we got to scroll up choose that section then go to style and then we're looking for shape divider we're going to add the shape divider at the bottom and the type of shape divider we're going to use is waves brush so we scroll down and you see that's what it looks like and there's lots of different ones you can choose from it's worth checking them all out to try different stuff in this case we're going to use the waves rush and then we're going to set the color to that same blue that's in the section down here see how it matches now and then we're going to set the height to 60. there's a lot of extra space right here i want to come back up here we still have that selected we'll go to advanced and we're going to change that from 200 to 100 so that brings it in some and this itself will adjust itself out a little bit to bring that down in a second to make it look more correct now over here this particular header this widget we're going to drag it below the other one like that and then this one we're not going to need so let's delete that one and then this button obviously we can make a button but i want to show you how you can recycle stuff so i'm going to take this button i'm going to bring it down here i'm going to put it right there because we can just use it there and make it work for us and it saves us the trouble of making one come back up now let's work on this first header here the bigger one and let's make that say be inspired and we'll go to style we'll set the color to be white and we'll close the color out we'll go in typography i'm going to choose a font of mozzarette we'll make it 80 and make the thickness be 700 now the margin for our header we go up here we'll click on margin and we disconnected those right there is going to be 29 and basically that just allows that to sit a little bit lower and so for this text if we choose that widget we'll change the text to live your best life good advice click on style color is white close that go into typography font laura we'll make this one 40. and we'll make the weight 500. and now below this we want to do an image carousel and so we need to go up here and choose this icon that displays all of our widgets now the one we want is called an image carousel but instead of scrolling down looking for it we type the word image it'll bring up all the ones that have that in common there's the image carousel we can drag that over that puts it above the words that puts it below the words where we want it i can choose that now we need our inspirational pictures so we'll bring up our content these are our six inspirational images drag those over now they're loaded we can just click create a new gallery and insert gallery now it's got three of them there for now we're going to tell this to be large and we're going to sell it to put one per slide and we're going to say image stretch equals yes and that looks about right now notice that it has these dots here and it has these left right arrows so you can have navigation built into the carousel i don't want that for this particular carousel so under navigation i'm going to tell it none and that gets rid of the arrows in the dots and then down here under additional options pause on hover that means if i put the mouse over it it stops showing new pictures well that might be nice in some situations but i want it to continue to show new pictures whether the mouse is on it or not so we're going to turn that off our animation speed let's set that to 4000 and we'll change this from being a slider to fading and that'll fade in between the different pictures like that and now you see when we added this stuff in there this wave sits exactly where we needed it to sit which is really nice so let's go ahead and hit update we'll go back to our page hit reload and look at that our inspired section is really working well so now we want to work on our call to action section these little sections that have like an icon some text and a button there called call to action let's go back over here the first thing i want to do this is an inner widget so we're going to drag it i want to bring it down to this next section into the light blue section and then this logo bar right here this logo carousel i can right click and delete that i no longer need that and now we want to build out our call to action section and the first thing we'll do is put our little brush divider here but will it put at the top of this section so you can see how you can do it either way so i have that section selected i go to style shape divider it's going to be on the top this time click there waves brush pick the same color as this color right here like that close that out set the height of it to 60 and we've got that part done and so let's start to format this i'm going to click on that column and we're going to choose advanced and where this says 0 25 0 i'm going to just change it to zero twenty zero twenty just a little less space on that don't waste so much space then we're gonna choose this icon widget and we're going to go to style and i'm going to set the color a little bit darker and then for the header we'll also go in set the color to the same color close that out and then typography we will pick montserrat we'll make it 32 tall and a weight of 300 and then for the text section we'll choose that widget and i want to go into style and i'm going to use a special kind of alignment normally if you've got left center or right i'm going to use justified and i'll square things off it looks a little weird with this sample text when we put real text in there it'll look a little bit better and then we'll go into typography and a different font railway i'll make this 21 and a way to 200 and then a color for this will be the same color we used for the icon in the header so everything kind of matches and i'm going to choose right click on that icon and choose copy right paste style right pay style and on this header right copy right click pay style right click pay style and for the text box right click copy right click pay style right click a style now for our button i'm going to choose the button then go into style and i'm going to change the button color to that not much different and then when you move over the mouse we want it to grow a little bit so what we're going to do is we're going to choose the hover option and then on hover the animation we just want it to grow look at that pow now right click copy right click paste right click paste bring it over bring it over many ways you could have done that just showing you a different way now we see that there's content in these but it needs to be changed obviously so let's go ahead and change the icons first so i'll click on that icon go to content choose here and i can search i want to do a heart icon so we'll choose that one and now for this one we'll choose that icon you don't always have to click the little box i try to have it because i know that works better come back over here come up over here we'll look at comments we'll pick that one insert and then we'll choose the last one come back over here question i'll choose the first one insert and now since you know how to change the text on these i'll just use a little magic to make those happen okay that updated the text but i wanted to do the buttons together because we hadn't had as much practice with that so we'll choose the first button come over here on the left and this one will be learn more and we'll point that to our about page the second one will say contact me and we'll send them to our contact page and the last one we'll say tips here and we'll send it to our paypal page let's hit update go back over let's reload the page scroll down and it's looking a lot better but let's add some animation to this so we'll come back in here choose column one go to advanced motion effects fade from the left take this one advanced motion effects fade from the right choose this one advanced motion and we'll zoom that one in just like that we'll hit update and we'll reload looks pretty good all right so on bethany site the next one we're going to do is this words of wisdom section and ours does not look anything like that right now we'll come back over here and to do the words of wisdom section we're going to do a carousel and we're going to go ahead and insert a new section above this just so you can see how to insert sections in between i'll click right there now i have a new section and i'll click on the plus sign i just need this to be one column and i will choose that section i'll go to style and we're going to set the section color to white now i'm going to scroll to the top and i'm going to right click on that header and copy it just another way of showing you how to recycle stuff come back down here right click and paste it and now for the text we'll change it to say words of wisdom and now we're going to go to our collection of widgets and we'll type the word image again to find the carousel we're using the carousel differently this time we'll click on here to add pictures to our carousel we'll bring up our content and we're looking for words of wisdom and there they are so we'll select all those drag them over all at once we'll click on create a new gallery we'll click insert gallery for the image size we'll choose full we can see the whole word slides to show let's say five we want to scroll one at a time i don't want any navigation now we'll look in the advanced section again i don't want to stop the animation if i hover over it i only want about 500 milliseconds in between that's half a second and i want to slow that down so it's gonna do it slower that's nice just like that we'll hit update go back to our page hit reload and we're making progress so we're going to go back over to elementor and i don't really like the spacing here let's come back into advanced for that widget i'll put zeros in there disconnect them i want 70 from the top because we're going to put a brush wave thing here but i want these closer now what's interesting is is that if i do a margin i can do a negative margin on that and look how it brings it up so we'll take that negative margin of 25. for all practical purposes that's the main difference between padding and margin in most cases we will see some other examples as well but with margin you can bring things closer together by using a negative number instead of a positive number so we want to put our brush divider right here we got to choose the section first and then we'll click on the shape divider and it's going to go at the top and it's going to be our waves and our color is going to be that same color close the color we didn't pick the right waves did we waves brush we'll change it to 60. and that's looking pretty good we can hit update now since i know we're going to want to reuse the words of wisdom section i want to go ahead and save it as a template now so we can use it later so i'll go ahead and go up here we can right click choose save as template we'll give it a name choose save now that we've saved our words of wisdom section as a template we'll be able to reuse that in any other page in our website so let's go ahead and close this window come back over here reload and that's looking pretty good now we'll look at bethany's website again the next section we're going to do is this practical advice section again we'll utilize a transparent image slider so let's go ahead and go back to our page now the next section of the website is a testimonial section bethany's website does not need a testimonial section but you might need one for your website so one of the things you might consider is to leave this the way it is or you potentially could come up here copy this button come down here paste the button and then change this to say more testimonials and you could have a page of testimonials and in fact the default site also has a testimonials page so you could point to that and repurpose it and have a testimonials page for yourself so since bethany's website doesn't need testimonials i'm going to delete this section we're also not going to use a latest product section here so i'm going to delete that section and then i'm going to click the plus sign so i can make a new section in between and then we'll click the plus we want this to have two columns under layout instead of content with boxed we're going to say full width and then the left column we're going to make it 55 which makes the one over there 45. i'm going to choose that section it's already chosen but choose style and we're going to add a background so we'll click on the background classic click there now we need to get our correct image for this so we'll go back to our content and there's the practical advice beach we'll drag that in insert media and now we have our beach scene in there the positioning we're going to use is going to be top center and the size is going to be cover i know you can't see anything yet but it will reveal itself now in the left box we're going to put an image let's drag an image in there like that and then we're going to put the image into the image widget go to our content and we want the q a image this time drag that over insert media and now for this left column i'm going to go in advance and we're going to set some padding and we'll turn that to 90 on the top and 40 on the bottom and then we're going to copy the words of wisdom heading and then we'll come back down here and right click and paste it that'll save us from some of the setup for that and we'll go into style we'll set the color to black and we're going to change the height of that to 50 and then below that we're going to add a widget if we type the word test brings up testimonial put that under it and it's kind of like an all-in-one widget it has some text and a picture and stuff like that in it and for the image we're going to put a profile picture for bethany and there is the practical advice profile picture we'll drag that over insert and for the content we're just going to put questions and answers from quora we'll put her pin name of pepper low and positioning we'll choose top and then we'll go back to the top and look in style under image we'll set a size of 115 for the image size for the content style we're going to go into typography and we'll choose droid arabic 24 and we'll set the color to that and for the name we'll go into typography and we'll pick open sans condensed and we'll make it 30 and we'll set the color to that make it a little easier to see on the sand and we'll go back where it has title designer we're not going to put that at all we'll just take that out now on the right hand side we're going to choose that column and we're going to tell the vertical alignment to be at the bottom that way when the picture slides in it'll be sliding in at the bottom and then we're going into advanced and even though these look like they have no value at all i'm going to open those up and make sure they all say zero and now we're going to add our image to the right column so we come up here choose our image widget choose our image go to our content folder there's the transparent bethany she's very transparent very genuine great person got that size pull a line left and if we go into style we can set the width to 400 [Music] that does not look right the default was percentage we wanted pixels 400 see it happens to me too murphy's law i hate that guy we'll go into advanced motion we're going to fade in from the right we're going to fade in slowly from the right and we're going to wait a thousand milliseconds one second to do that we hit update we'll come back to our page we'll hit reload look at that we got it working i don't really like all this extra space here so let's go back and fix that and that's because the words of wisdom had extra space when we made a copy from the other header so we'll go into advanced and we'll change this to zero and that looks pretty good we can update and then where it has the name here for bethany inside of this widget let's go ahead and make a link to contact we'll hit update reload and that looks much better now we want to do the sign up and that's pretty straightforward we look at the one over here we just basically change the text out because everything else was okay for our needs so we'll come back over here and we're going to change this text out so we'll click on that come over here paste that in notice i had br tag to allow this to break in the middle and now i'm going to choose alignment right i can make it look exactly like i want it to look over here if you click on this widget it shows this shortcode form this is not the way to do this there's a better way to do this so we're going to delete that widget and you're like but it was fine it worked well maybe but we want to do it more correctly if we type in this box wp forms we come up with two choices this is the one from the company itself wp we'll drag that in the box now over here or over here we can select the form so we'll go in here we want to choose sign up form and now it looks the same but it's more correct now when we build our contact page it'll also have a form like this and we'll be able to set both of those to point to your email address at the same time so we won't worry about making that update just yet so we hit update come up here hit reload and that's ready to go and i forgot one last thing this wasn't supposed to continue to say words of wisdom it was supposed to say practical advice so i'll say update and that'll be fixed so now we're ready to build a footer for our website and our footer will be the same on every page so let's go ahead and go back to elementor and now we're going to have to exit to the dashboard so we'll click there exit to dashboard the first thing we want to do is remove the footer that came with the website then we're going to replace it with one that's much better so the first thing we're going to do is click on appearance customize footer builder and then we're going to delete all the fields that are here now we'll hit publish and we can exit out of that now we're back at our dashboard now under appearance we're going to go to elementor header and footer builder we're going to choose add new intermediate for myself or just choose skip the title is going to be website footer the type is going to be footer choose it makes sense to display on all pages but really what we want is the entire website so don't make that mistake all pages doesn't include posts so anytime you posted something to your blog it wouldn't show up there so you want to choose entire website and that'll mean it'll show up on all pages all posts everywhere scroll down user rules all we'll check that box to enable for elementor choose publish now we'll edit with elementor and now we're ready to build our footer you're saying to yourself but you know i just saw what the footer looked like why should i have to do it all the way you're correct i will show you we're going to build it using a template so we're going to click on our folder we're going to choose this little icon here which imports a template and now we're going to go to our content folder and at the bottom are a whole bunch of templates and one of those is the website footer we'll drag that over now we have a website footer we can insert the footer and it automatically loads it in exactly what you need it to say obviously you change this to be whatever content you need whatever image you need but it's already set up easy to use just like that now if you're going to have a shopping cart you might want to change this one over here it says about you can change it to shop you could also have more but i didn't really want more and we put shop there and now it'll go to the shop when we get ready to do that hit update come back over here hit reload scroll to the bottom we already have a footer it's just that easy so now our home page is totally complete okay okay so it's not totally complete what it's totally complete on is your desktop what we need to do is to optimize it for a mobile as well and then you can apply that to tablet too now to make other device adjustments first of all we click down here on the responsive mode and then at that point you can choose between the different views that you're seeing and we're just going to focus on the mobile version and you can apply what you learn here to all your other pages in your tablet so we'll choose the mobile device and notice this wraps funny so we'll choose that we'll go into style and for the size let's just set that to 100. now that works also the website intro videos aren't typically compatible with mobile devices so if you find that your video intro is not working on a mobile device rest assured it's not your fault so let's scroll down now i want to change the padding on this a little bit and if you go to the bottom of that section i can change it here as well so we'll choose the section and we'll go into advanced and we'll set that to 40 20 40 20. and then for this text i want to make that just a tiny bit bigger so i can select that text go to style typography and we'll choose 26 now when you scroll to the bottom of this section you notice how the wave is really tall we don't want the waves to be that tall on the mobile device so we're going to change that this particular wave is at the bottom of this section so we'll choose that section we'll go to style shape divider we know it's at the bottom and we'll go ahead and set that to 30. now we scroll down see that looks good now while we're already in that mode let's scroll down and do the other ones so we'll choose that one style shape divider 30. see if i missed any yeah i missed that one select that section style shape divider height 30. okay now all this looks pretty good so we'll leave that alone however this isn't working out it's got too much space up here and she kind of takes the whole screen so we'll choose the umbrella girl and we'll go into advanced we'll do 60 at the top we'll unconnect that we'll do 30 on the left and we'll do 30 on the right at the bottom we'll do zero now we want to work on this piece to bring it up a little bit and make it smaller so the first thing we'll do is work on the padding for that column so we'll choose the column choose advanced now notice these have the little phone next to it this means we're only editing the phone version i'll type 10. we'll select the be inspired go to style typography we'll set the font to 40. it's still wrapping so let's move it down now it doesn't wrap so now it's at 38. now that's a little bit close at the top so let's go ahead and go back into our padding on that we'll disconnect these and let's set the padding at the top to say 30. now we want to adjust this font so we'll select that we'll go to style typography and we'll set the size to 28 and now there's too much space below be inspired so we'll choose that we'll go to advanced change this to zero brings that up and that looks real good now so we'll scroll down there's not enough spacing at the bottom of that wave so we can choose that column and at the bottom let's try 50. there that looks better now for the about me the spacing looks okay but look how close that one is so we're going to choose the icon and we'll go to advanced and then for the margin at the top we'll put 60 and that looks good same thing with this one we'll select the icon go to advanced and set the top one to 60. now for the words of wisdom that's a little small so i'll click on that choose style typography let's try a size of 40. that worked out good now this section here really doesn't work really well look at the text how it fits in there funny and it's a wrong color and i wasn't able to find a way to make this work well that made any sense but it's a good chance to see another feature and that is we're going to select that section we'll go to advanced and under responsive we're going to hide that section on mobile now you can hide a section you can hide a column and you can hide a widget so you have that flexibility in this case we're just hiding the whole section now we'll scroll down this particular piece of text here let's go ahead and choose that and let's center it there's no way to center this any easy way unfortunately and that should do it now what you can do is you can click this little tab right here and this gives you an idea of what it's going to look like on a mobile device so you scroll up and you see is there anything else i want to change about this but it looks pretty good so we can bring that back out choose update and the mobile updates to our home page are now complete so now our home page is totally complete and we've accomplished a lot in a small amount of time so i'm going to go back to my elementor i'm going to exit elementor and now that i've personally completed a substantial amount of work i'm going to use my backup buddy again if you have another method of backing up it's a good time to do it i'm going to choose create backup i'm going to choose complete backup let it do its thing now the backup is complete come back up download the backup to my computer that is complete and now i have the most recent backup of everything that i've done so far so if anything goes wrong i can at least get back to where i am right now so now we're ready to start on our next page so we'll go back to our dashboard and we're ready to start on our about us page and let's go ahead and close this down here we're going to go to pages we'll hover over about and choose edit with elementor now that our about page is loaded in elementor let's go ahead and go back to bethany's site and see what her about page looks like so i'll scroll to the top click on about and we're going to build this nice header we're going to put some text in that's going to wrap around a picture and we're going to put that background that has self-tastic in it let's go ahead and go back to elementor the first thing we'll do is update the background picture for the about section so i'll choose that section go to style choose the image now we need to bring up our content folder scroll to the top and now we're looking for our header images so we'll scroll down and there they are and the one we want at this point is going to be the about header so i'll drag that over now that's loaded we can insert media notice there's some shading on this image we're going to do some shading ourselves but it's only going to be enough to shade the top so that the menu shows through a little bit better and i'll show you how that works we're going to go to the background overlay section and these are the two colors that are associated in here we'll choose the first color we'll set it to that and i'll close that and i'm going to start with a location of zero which is the top edge up here and then i'll go to the second color paste that in now if you're interested where am i getting these particular colors from i'm getting them from the about us content in case you want to do the same thing then i can close that and notice how it's light at the top and it goes dark to the bottom if i change this angle to 180 it turns it upside down now it's a little bit dark at the top and light at the bottom and then for the bottom location i'm just going to change it to 24 because i only wanted to come down a certain amount of space now if i click on update and we go back to our site and view it scroll to the top click on about notice there's a little bit of shading here it made our menu show up just a tiny bit better and that's what we were looking for so let's go back to elementor and now let's work on the header so we'll select that we'll make the align left we'll go into style let's set the color to white it already is white but just in case we'll go into typography we'll set the font to lundrina shadow size 90 and then we'll go into advanced we'll open up our padding and let's set this to to 150 that pushes that down just nicely like that we can hit update and now if we look at bethany's you'll see there's a little bit of a shape divider here we're going to add that same effect using that same cyan color we'll go back to our elementor let's go ahead and choose that section and now we're going to scroll down choose shape divider and we're going to apply it to the bottom and we're going to select tilt opacity and then we'll set the color update reload our page and there it is we're going to end up using this header on a lot of pages so what i want to do next is save this as a template so let's go back to elementor we'll right click choose save as template give the template a name hit save our template has been saved so now we can close that window and now we want to work on the next section so the first thing we'll do is choose that section go to style we'll set the background color and then we're going to set a background overlay notice that there's something in the background already we'll choose background overlay there's the current one we'll choose that bring up our content folder now we need to find our logo background overlay so we'll scroll down to our logo section and there it is we'll drag it over now it's loaded insert media we're going to choose ours to be top left and we'll leave it at fixed we'll leave it at no repeat our size will be covered and we'll set our opacity to .05 so we can see it a little bit better so now you can see that shows in the background but it doesn't get in the way of the text now i want to adjust the padding for this section so we'll scroll back to the top go to advanced let's just make this 100 at the top 100 at the bottom we're not going to use any of their content but we do need one cell i'm just going to take this one and delete that column and then i'm going to scroll down now delete this section and i'll delete this section and now we're left with the one section we need and then i will delete that widget and i'll delete that widget and i'll delete that widget and i'll delete that intersection so now basically we have a header a heading and we have a text editor now alternatively you could come over here and you could have dragged a heading over and you could drag the text editor over it as well so we'll select the heading and we want that to say about me and we want to go to style we're going to set the typography the font will be montserrat 32 a weight of 300 now we actually have two of these we only need one i'll delete that one we're going to edit the other text editor so i select that we'll come back in here to style we'll choose a color of that typography we'll set the font to railway size to 21 weight to 400. now we'll go back to content and i'll paste in the correct content and now we want an image over here to the right and to do that we're going to click on add media and now we need to get the item that we're going to be adding so let's go to our content folder scroll to the top and there is the about picture we'll drag that over it's loaded insert into post and it's at the bottom but we don't want that there so let me click on that and delete it and i'll show you what i really wanted to do i wanted to scroll to the top select right there so i can set it in there choose add media select the image insert now it's inserted at the top we need a few more adjustments here so we'll select the image this icon here will align it to the right so now all of a sudden the text wraps around it nicely we'll click the pencil for the size i'm going to choose full size if you wanted to add a link you could add it there we'll do update and it wraps nicely let's hit update go back to our page hit reload and we're making progress now on bethany's page she's got the words of wisdom section so let's go back to our elementor we'll scroll down we'll choose the folder icon we'll choose the words of wisdom section click on insert always choose no on this question now it's been inserted into our page we can hit update go back to our page hit reload and now we just need to add the black waves brush above the footer we can go back to elementor so words of wisdom is already selected we'll go to style scroll down shape divider we're going to put it at the bottom we're going to choose waves brush we'll set the color we'll set the height to 60 and notice this is overlaying funny right here it's okay advanced we'll unconnect those and let's see what 50 does looks just right so we can hit on update go back to our page hit reload and this page is complete now inadvertently even though i told this font to be railway somehow it got saved as default so we need to choose this widget go to style typography and where it says default we'll choose railway and notice how it changed there we'll do update we'll go back to our page and now see it's the old font here we hit reload that's the correct font now we go back to elementor and we can exit elementor and go back to our dashboard so let's go ahead and go back to pages and now that we've made the about page i want to make some duplicates of that page so that i can use them later so i'm going to go over and hover over about choose duplicate now here's our duplicate i'm going to choose quick edit the title for this page will be gallery the slug name will also be gallery status published hit update now we'll make another duplicate for our blog page again we'll hover over the duplicate choose quick edit this one will be called blog slug name blog published hit update and we're going to make one more copy and we're going to make a services page even though bethany's site doesn't need a services page yours might so we're going to make a services page for you in case you need one so we'll go to duplicate this and again hover over that so we can choose quick edit title equals services slug name equal services status is published hit update and that should be all the duplicate pages we'll need for a while and now if we go back to bethany's site scroll to the top you can see these are the different items she has we want to go ahead and make our menu match hers so let's go back to our dashboard we're going to choose appearance we're going to choose menus make sure we're pointing at the primary menu still and this is what our menu looks like right now we're not going to need a testimonial for her site but if you need one you'll leave it so i'm going to take that one out also you can decide whether or not to leave a home button on many websites these days the logo itself is clickable so you don't really need a home button so it's kind of up to you whether you want one or not i'm going to leave ours there for now now for bethany's website it needs a blog it needs a gallery you might add services if you're going to add the services page that we're going to create we'll choose add to menu and now you can drag these around to organize them so i want the gallery to be here and i want the blog to be here scroll down save changes changes saved and now we're going to quickly build a services page in case you need one for your website so we're going to go to pages i'm going to scroll down hover over services edit with elementor and there's our copy of our about page and what we're going to do is delete every single widget here and then we're going to choose the folder and then we're going to import a template and we'll go back to our content folder scroll down to the templates here's our services page drag that over and here's our complete services page we'll choose insert i'll always choose no and look at there you have a complete services page you can make updates and changes to that yourself we'll hit update your services page is complete we'll exit to the dashboard and now we're ready to work on our gallery page so let's go back to pages we'll hover over gallery choose edit with elementor see how nice it is to start with a page that already has a lot done for us so we'll go ahead and change that text to gallery let's change our background have a different background for the gallery select that section so we can change the background image we'll go to style click on that now we need to load the correct header so let's go to our content folder scroll down to headers and there's the gallery header drag that over choose insert media our header is complete now we want to work on the next section and we're going to go ahead and delete this header and delete that text editor and the first thing i'm going to do is show you the free gallery so we'll come up here choose type in gallery and there's the basic gallery drag that in now we want to add pictures to the gallery we need to go back to our content folder and here's our gallery pictures we'll choose that one hold down shift and choose that one so they're all selected we'll drag them all over at once and let them all load at the same time they're all loaded and by default they're all selected so we can create new gallery you could reorganize these if you wanted to and then we'll choose insert gallery and there's our gallery we'll scroll down we'll set our image size to medium columns four let's hit update let's go back to our page scroll to the top let's see what that looks like we need to hit reload because our menu is not there yet our new menu there's our new menu choose gallery and there's our gallery so we can see this is a nice looking gallery and not bad it's also a light box gallery so we click on that but it's just not as fancy as the one that bethany has if we go to her gallery see how nicely those load in like that now at our gallery if we made all these pictures the same size it would make it look a lot better than it does and that's basically as good as you're going to be able to do for a free plugin at this point but in my case i'm going to want to go ahead and go back to elementor and i'm going to upgrade to elementor pro so you can see how to use the pro version of the gallery now that upgrade is complete i'm going to delete the current gallery i'm going to come over here type in gallery and we want this one it's just called gallery but it ought to be called super fancy gallery choose that we want to pick our pictures they're already loaded from before so we'll just select them all create gallery again you can switch these around however you want to organize them insert gallery and now see it automatically made things fit nice together like a puzzle but we're going to scroll down and the layout type we're going to do is masonry look at that and we'll use four columns that's the default we can choose update now let's go review our page again we'll hit reload and i just like that a lot better obviously it's up to you but for me between that and the other things i can do with elementor pro it was worth it for me if you decide you want to get the pro version of elementor at the best possible price just go to webveder.com front slash elementor and choose the elementor pro button so our gallery page is complete so we can go ahead and exit to the dashboard to blog or not to blog that is the question at this point there's many reason to have a really good blog on your website and there's people who just don't need a blog if your website doesn't need a blog you can remove the blog button from your menu bar and go ahead and proceed to the contact us section for the rest of us we're going to go ahead and create a blog so the first step in adding a blog to your website is to create a header for all of your blog posts as well as a header for your blog page that contains all your posts so let's go ahead and go to appearance and then we'll go to elementor header footer first we'll create a header for your blog page the page that contains a list of all your posts so the title will be blog page header template type will be a header and where do we want it to display we want to display on our blog post page user roles all we'll enable this for elementor we'll publish choose edit with elementor i'm providing a template for both the blog page header and the blog post header so let's go ahead and click on the folder we're going to choose the upload arrow bring up our content folder scroll down to the templates and there's our blog page header we'll drag that over and there's our blog page header we'll go ahead and insert i'll always choose no and there's our blog page header obviously you'd change this out to be whatever you needed it to be we'll choose update exit elementor now we want to create our blog post header so we'll choose add new we'll set the title to blog post header template type header display on all posts user rules all enable for elementor choose publish edit with elementor now we're in elementor we'll choose the folder going to choose the upload arrow again go back to our content folder now we're going to choose the blog post header which is this one drag that over and there's our blog post header go ahead and insert that always choose no again make whatever changes you want here we'll choose update exit elementor and now your header for your blog page and your blog post is complete so the next step to adding a blog to our website is to remove any old posts so let's go ahead and choose posts on the left so now we can select all the posts in this case one bulk actions move to trash apply and that's all gone now we're ready to add our first post so we're going to choose add new let's visit the script for a second i want to point out how helpful it is to have all the information you're going to need to do your post obviously you're not likely to just make these up as you go along so i collected all the information for the different posts we're going to do to make this easier so for example the title of the first post will be this so we'll set the title to that and now for the content paste that in and notice at the top this is already bold because in the google doc i did it was already bold so it allowed me to import some of the formatting as well blog posts are organized into categories so over here we want to add a category in this case this particular post is a life lessons so i'll add life lessons hit enter and it automatically checked it now if you don't give it a category it'll automatically use uncategorized next we'll add tags for this particular post i'll hit add and these are basically like keywords that are associated with the post i also want to point out if you need to make changes or adjustments to your categories or tags under posts categories and tags allow you to make those updates and changes scroll down now we want to add a featured image i'm going to choose set featured image we want to bring up our content folder again and the images for blog will be near the top so there's our first blog and there's our six we're gonna have six in this example drag those over and our first blog is the puppy set featured image now i normally make my blog images about 800 pixels across just as a reference now we can scroll up and choose publish now if i want to see this post just as an example i can right click on this link and open in a new tab and we can look at that tab and there's that header we made and this is the post just like that not bad huh let's go ahead and close that now we're going to add one more post together so i'll click add new and then the other four will use some magic to make those since it's all the same process so the second blog post the title is that the content for the post is that this one's going to have multiple categories so we'll choose the life lessons we'll add a new one hit enter this will also have mental health personal development and we'll scroll down we'll put some tags in that are terms associated with the document scroll to the bottom set our featured image and there's our blog 2 image that one is now set scroll to the top now if you didn't want to publish immediately you could go inside and choose a date that you'd publish something i'm going to publish this immediately now we can right click on that open a new tab check it out and there's our second post notice it automatically added the share post plugin so other people can share your blog posts we'll close that i'm gonna go ahead and add the additional post at magic speed okay so now all six posts have been added and let's go ahead and look at this particular post right click open in new tab i'll bring that up this particular one bethany wrote about people that wanted to make money using blogs and so if you have an interest in doing that this might give you some more information as well we want to make a couple of changes to this to make this more user friendly first of all notice it says buy yoda user instead of by pepperlow and if we click on that has picture of me we don't want that well she doesn't want that so we'll back up how do we fix this we'll go back to our wordpress admin so the two things we'll change are the profile picture and the pin name the first thing we'll change is the profile picture and we're going to do that inside of profile press and i go to plugins and then i scroll down to profile press and i choose settings i'm going to choose profile and cover photo now i want to scroll down where it says disable gravatar we're going to choose to disable that now we want to choose an image at this point we want to upload a profile picture for bethany for her blog bring up our content folder there's her profile picture for the blog drag that over select save changes next to change the pin name we're going to go to users i'll click on the username we'll scroll down and for a nickname we'll change it to pepperlow and for the display name we'll choose pepperlow there's also a section to do bio info let's put a little bio in there choose update profile profiles updated now if we go back to our post and scroll down where it says yo to user if we reload it'll now have bethany's pen name pepper low if we click on pepper low it now says pepper low has her picture and it has her bio pretty nice right now if we back up we're looking at a post now one of the problems with this post is that there's no way to really get anywhere else other than the post itself so a really convenient thing to have is a sidebar over here that has a lot of controls that you can use within your blog so let's go ahead and add the sidebar so we're gonna go back to our wordpress we're gonna go to appearance customize we'll choose sidebar under blog post we'll choose right sidebar we'll hit publish and then we can close out of that now we want to customize our sidebar to do that we're going to go to appearance widgets now the sidebar that's going to be the one that's on your blog post is called the main sidebar and for whatever reason there's a lot of stuff in here i may or may not want the defaults for these are never exactly the same so what we want to do is we want to clean this up now if we go to the script file this is basically what i want to get i want to have a search box i want to see recent post i want to see recent comments archives categories meta and a tag cloud and we'll talk about those but basically we're trying to get to that and we're currently seeing this so the first thing that we can do is delete all of these that just say block on them i think as much as anything they're just duplicates and now we have the list that looks like this one except that there's one extra one that i want to add to this now on the left hand side are all the widgets you could add to your sidebar and you could probably find other plugins to add additional stuff if i scroll down the one i'm interested in is called tag cloud if i click on that i can choose where i want it to be it's got by default it's chosen the main sidebar i'll choose add widget and when i scroll up now tag cloud has been added to the collectional widgets on the main sidebar we're not going to give it a title it'll automatically say tag cloud also you can organize these however you want that order right there matches what we have on our list again you could pick other ones if you want to put stuff in there but these are basically the general tool set you're going to see on most blogs and there is no save on this page so basically it's already saved so now if we come back over to our post and we hit reload and now you can see the sidebar has been added we have a search box we have recent post comments archives categories meta options and a tag cloud the next thing you might wonder is say okay here's the default but what kind of control do i have over this and the answer is really not much the free version astra the free version of elementor neither of those give you any real tools for doing any updates and changes to the formatting for the posts themselves so unfortunately kind of stuck with the excessive padding and the default font and things like that i know you're saying yourself hey there must be a way to fix the spacing in the fonts for free right absolutely i will show you so what you want to do is go to your script and you're going to look for a section under the blogs that's called the just blog post font and spacing and this is cascading style sheets css don't worry about what it does just worry that it doesn't what you want to do is select the yellow text copy to the clipboard and now we're going to go back to our wordpress admin we're going to go to appearance customize and at the very bottom is additional css we'll click on that we don't need this little window so we can do close and right here there's nothing in there yet so we're just going to paste that in at the top and now we'll do publish and now we'll come back over and this is what our page looks like right now this is what the fonts look like this is what the spacing looks like we hit reload look at that we have better spacing now we have a different font that doesn't take up so much room it's a lot cleaner than it was before and it was free so at this point we want to be able to access our blogs from a blog page if we click on our blog page actually let me clean this up real quick we've got extra tab here if we click on our blog link it takes us to our default about page remember we made a duplicate of that we'd like that to come up with our blog so let's go do that so we're going to go back to our wordpress admin we'll close that to get to our dashboard we're going to go to pages we'll hover over blog choose edit with elementor and from within here we're going to delete the top section and the delete that about me section and leave words of wisdom we'll choose update and now we'll exit elementor we'll choose appearance customize scroll down home page settings for post we'll choose blog we'll hit publish and now we'll visit our website again and hit reload and look at there there's our header and there are all our blog posts now unfortunately no matter how much you talk to yourself about hey yoda this really doesn't have a lot of formatting what can we do about it i don't have an answer for that because unfortunately there wasn't really an easy freeway that i was able to do that there must be free plugins out there that will allow you to have more control over your blog layout than this but i haven't been able to locate them however just for comparison if you have access to elementor pro it's possible to make this page look really professional with very little work at all and that's what we're going to do next so we'll go back to our wordpress and where we had post page and we set to blog let's go ahead and set that back to select and we'll hit publish now we're going to exit out of that to our dashboard so let's edit this page again with elementor now at the very top we're going to insert a section we'll choose our folder we'll choose my templates now we want to insert our blog page header so we'll choose insert always choose no so at the very top we will not need this intersection that has the logo in the menu in it so we're going to go ahead and close that one not the one at the top but that one right there so we close that now there's not a lot of space there let's choose the widget that has the word blog in it we'll go to advanced and where it says 200 let's put 300 now we want to add another section just below our header and in this box we'll hit the plus we'll choose a single column now we want to go up to our widgets again we'll type in the word posts that's the one we want right there make sure your icon matches that drag that over and there it is that's looking nice now let's go ahead and change a couple things on it first of all we'll set the skin to cards that's really nice now let's go ahead and do some formatting on this so we're going to go to style we'll go into content under title for typography we'll set the font open sans condensed we'll set the size to we'll close that next we'll do the excerpt typography font open sans condensed we'll set the size of this to 21. we'll close that finally the read more typography font open sans condensed and we'll set this one to 16. close that now hit update now go back to our blog and hit reload and look at that we have a really nice looking blog now now i understand it took elementor pro to make it look that good but that decision is going to need to be up to you whether or not you feel it's worth paying for element or pro to be able to get a nice fancy blog that looks like this now we're ready to work on our final page of the website before we start on the shopping cart and that's the contact us page so let's go ahead and go back to elementor and now we'll exit out of elementor back to our dashboard to start on our contact us page we need to go back to pages now we want to go down and hover over contact choose edit with elementor the first thing we'll do is delete their header and add our own so let's delete that now we'll choose the plus sign to add a section we'll go to our folder and remember we saved and our my templates are about us header so go ahead and insert that always choose no now we'll choose the about and let's change that to contact now we want to change the background image we have a special one for this page so we'll go to style click on the image now this is one of the situations i talked about earlier it didn't come up with the pictures this time like it had before i don't understand why i want to bring up our content folder now we're going back to our header images they'll be near the top and there's our header image for the contact page drag that over choose insert now we're ready to work on the next section let's go ahead and change the message us we'll choose that go into style typography we'll set the font to open sans condensed size 30. close that we also have a background that we're going to use so we'll choose that section we'll go to style click on the image now we want to go back to our content folder scroll to the top there's our background for the contact now notice it's not going to matter that the pictures aren't here i can still drag that over and it works fine choose insert now we're going to scroll down we'll set the settings for this soon that'll allow this to point to your email under contact us let's put some content there like that i'm going to make that a little darker so i'll go into the style for that change the color to that close that out we'll go into typography font you guessed it open sands condensed size 21 we'll put a weight of 400 that looks nice we'll close that now we want to put a profile image under this so i'll go back to our widgets let's drag an image right there we'll select the image go to our library we'll scroll down the image we want's already in here that one right there insert media scroll down let's go ahead and style we'll set the max width to 75 that's percent by the way we learned that already and now for follow us let's edit that first we'll go into advanced instead of 100 for the margin top we'll put 70. go into style typography font open sans condensed size 30. that looks good let's close that at the bottom is our social media we'll choose that i'm going to go into style and set the size to 32 make it bigger go back into content these can be added subtracted organized so for example i can take instagram and drag it to the bottom like that now you're going to set each one of these so we'll go ahead and set hers now to close these be sure you click on the name because if you click on the x over to the right you're going to actually delete the item and that would be bad now in bethany's case she doesn't have a youtube so we're going to use that one differently so we'll recycle that one we click on it we'll go to here in the box we'll type medium and there's medium we'll insert that now for the link we'll put her medium link you can close that back down i think we'll put that one at the bottom now let's do the facebook one set the link to that close that now we're ready for twitter our twitter link is that close that let's put twitter at the top open instagram set the link close it and we're okay with that now let's come back on this side and work on it a little bit okay and choose this widget we're gonna come over to the left hand side we'll go ahead and set the address like that close that out now i'll put the phone number like that change the hours like that obviously you could pick different ones you can also move these around you can add one right there so let's go ahead and go to style under text we'll set the color to that close that typography change the font open sans condensed let's make that 21. and weight of 400 now we want to work on our map so we can select that widget we can put our location zoom at 15 is fine i think we want this a little bit taller maybe come down to here somewhere let's try 500. that looks good we'll hit update come back over to our page we'll click on contact and look there we already have a contact us page it was that fast isn't that nice but now we need to get the forms to point to you in this case they're going to point to bethany but you get the idea so let's go back to elementor now we're going to exit elementor to the dashboard now we want to edit our forms as well as set the forms to point to the email we want to go to to do that we're going to go into wp forms and then i'm going to choose the contact form that's the one we're going to edit so i click on that now this works very similar to elementor that's why it's such a great product and everything we're going to do with this basically is free so suppose you wanted to add a subject line on the left hand side grab the single line text widget drop it in just like that now if we choose field options and we select that field now we can edit that field and we can make it say subject now suppose you want to go all the way across under advanced set field size to large and now it's all the way across so now let's say you wanted to have a phone field come back over to add fields and you look and you're like uh oh there's no phone field oh wait here it is and you click on the phone field upgrade to pro that's quite convenient everybody's going to want a phone number yet we're going to have to pay for it but you're saying to yourself hey yoda there's got to be a way around this don't you have a trick for this absolutely i will show you so we'll close out that window now instead of picking the phone field let's go back up pick the single line field we'll drag it in let's say we want to set it there and then we'll go back to field options we choose that field set the label to phone now we have a phone field now let's say you want that field to be required you notice the ones with an asterisk next to them those are the ones that are required so for the phone field if we turn this on right here now it's required it has the asterisk next to it now we'll go into the advanced and we'll set the width to large now we have a phone field but what's the difference well the main difference is when somebody enters a phone number in ours it's not validated to make sure it really is a phone number now we want to set where the email is going to go to so on the left hand side if you go to settings and then you go to notifications right here send email address that is the email that it's going to send to by default it's going to be the one that's in your admin and that might be fine but in our case the admin was mine but we want these to go to bethany so we'll put that in there and we can set the subject line for the emails so let's change that i'll change it to say self-tastic comments and then who do we want the from name to be we'll say from there we can leave the rest alone let's go ahead and click save now i'll close that and we'll go ahead and make the change we need for the sign up page as well so we'll click on sign up we just want to go into settings notifications this will also go to bethany for the subject line join club self-tastic set our from name everything else can stay the same hit save obviously we didn't do a lot in wp forms only the stuff we really needed but if you're interested in learning more make sure you watch my video if you're looking to learn more about what wp forms can do for your website then you'll want to check out my wp forms for beginners video at some point so we hit close and now we want to test this out to see that we get email so back to our website we'll hit refresh just to make sure we're looking at a fresh copy and notice now it has the subject line now this is going to go to bethany so let's send it from me subject line test hello world hit send and our message was sent successfully good job now one of the things you might be interested in is you might have said to yourself hey what about some formatting here what can we do well again without getting the pro version they really don't give us a lot of tools but you're like but yo do you always have a piece of code for us so we can do it without having to pay for it i know you're right and okay i will show you so what you want to do is you want to go to your script and look under the form section for a section called format your forms so once again you'll highlight the yellow code like that copy it to your clipboard now let's go back to our wordpress and now from here we're going to go to appearance customize scroll down additional css let's click on contact over here so we can actually see this working and that's what it looks like right now down below this let's hit a couple extra lines paste that in and look at that it changed everything up just a little bit again i'm not going to try to teach you css but you can look in here and see that some of these things can be changed and get a little bit more flexibility if you like we'll choose publish go back to our page that's what it looked like before hit reload that's what it looks like now now officially our website's complete but there's one more step that we don't want to forget and that is to turn on secure pages for our website to do that we're going to go back to wordpress we'll exit to the dashboard now we want to install the plugin that's going to allow us to make our pages secure so we're going to go down to plugins add new plugin upload plugin choose file make sure we're looking at our downloads folder and now the one we're looking for is really simple ssl hit open install now activate plugin now for some reason you didn't have this plugin already you just need to go to webyo.com front slash plugins scroll down to this project and then download the plugin you need now once that's installed it immediately says hey go ahead and activate but i don't want to do that just yet i'm going to do is we want to scroll down find the plugin and we're going to go to settings tells us we're not connected yet we know that but what we're really looking for is this check mark it found an ssl certificate detected for our website if you don't see that message you need to contact your hosting company to ask them how to get your certificate activated because without a certificate we can't secure your web pages since we have a certificate all i need to do is click on go ahead to activate now it's been activated once you've activated your ssl and you weren't in secure mode it's likely to want you to log back in so for example our next step is going to click on elementor and when i did that it asked me to log back in so i'll choose login so our next step was we clicked on elementor it brought up this page and it has these options we're looking for the option called tools so we click on tools and then we're going to click on replace url so in this box we're going to put our original url when we didn't have secure pages so i'll paste that in and notice it just has http then in the second box i'm going to paste the same thing but at the beginning i'll put an s right there basically going from non-secure pages to secure pages and it's going to look throughout the entire website and see any places that finds this and replace it with this we'll hit replace 261 rows affected that was a good thing now if we go back to our page notice it's not secure we hit reload now it has a little lock there and now we're secure so our website is officially complete and if you don't plan on adding the shopping cart to your website there's one more thing you'll want to check out at the end of this video i have a search engine optimization section that will teach you how to make your website liked better by the search engines let's go ahead and go back to our wordpress and let's go back to our dashboard now we're ready to add a shopping cart to the website we just created or you can add this shopping cart to your existing website now if you're just coming into this video and you're ready to start adding your shopping cart you first want to do the section just before this one called enable ssl this will allow you to make your pages secure which is going to be a requirement before you can do your website and it's been my experience that there's a 99.9 chance that you won't have to pay anything to get the shopping cart up and running to meet your needs there are a few exceptions however and i thought i would review those before we proceed so i'm going to open up a new tab in my browser and i'm going to go to webyota.com front slash woo stands for woocommerce shown here are five premium products offered by woocommerce the one that bethany wanted was the tracking product this allows you to add tracking to your shipping the other ones if you're going to do a booking website for let's say hotels and things like that if you want a subscriptions website or if you want to be able to sell tickets online or if you want to have memberships like a club like a gym or something like that but if you're not doing any of those things then you're not going to need any of these different products so we'll go ahead and close that and we're ready to get started on our free shopping cart it's been my experience after watching hundreds of hours of other wordpress shopping videos that most of the people want to do the fun stuff first and worry about the boring details later this turns out to be a huge mistake as those videos quickly get sidetracked solving unavoidable problems that disrupts the flow of the video because of this we're going to deal with the boring stuff first and have our fun later the 12 steps that follow i refer to affectionately as the dirty dozen they're not any fun and can be downright boring but they're extremely important if you want your shopping cart to function correctly please carefully follow these 12 sets closely to avoid mistakes after that i promise you the fun begins if you just completed the selftastic website with us then you've already downloaded the plugins we're going to need i assume some of you have your own website and you want to add the shopping cart to it so to accommodate you we're going to do a quick field trip we're going to open a new tab and we're going to go to webyota.com front slash plugins and you're going to want to scroll down to the section that's about this video selftastic.com and then you're going to want to download these three plugins those are the ones that have to do with the shopping cart for the rest of us we already have those so we can go back to our wordpress admin and we're going to choose on plugins add new upload plugin choose file and the three that we're interested in are woocommerce wu services and the gateway for stripe these are the three plugins we're going to need and the woocommerce may have already been installed for you when you install the starter site if that's the case you can skip that one so let's go ahead and do the gateway first so we'll choose that one choose open install now activate plugin add new upload plugin choose file now we're going to do woocommerce services open install now activate plugin in the final one add new upload plugin choose file you choose woocommerce i already have that one installed on here but if you don't go ahead and go through the process of installing that so you choose file install activate plugin now for the ones of us that did the starter site we need to scroll down on our plugins so we go to plugins now we'll scroll down to woocommerce and we're just going to activate it again because we had deactivated it now that that's activated we'll scroll down and we can see that these need to have an update done so we can choose update next to that one and update next to that one now everything's up to date let's go back to our website just out of curiosity and hit reload notice that nothing changed and what i was looking for was a shop button and a shopping cart now if you install woocommerce brand new you may have gotten those but we're going to need to add those so go back to wordpress we're going to go to appearance menus make sure you're looking at the primary menu we're going to choose shop add to menu we scroll down we can see it and let's look on bethany's it's right after about so we're going to drag that up to there like that save menu and now if we reload ours we have the shop option now we want to add the cart to the side so go back to wordpress we're going to go to appearance customize header builder we'll come over here we'll click the plus symbol now we can choose cart and there's a cart and it put it over there to the right exactly where we wanted it we can click on publish let's go back to our site hit reload and now we have a cart if we go to the shop page we still have a cart we go to our blog still have a cart so it's showing up everywhere which is exactly what we wanted now let's go back to wordpress exit to the dashboard let's click on dashboard and what we're looking for is this message right here you may or may not have this message basically if you see this message update woocommerce database just click on that button to update it and then it says update in progress you can choose to view progress and it's complete it didn't take very long because we don't really have anything in our shopping cart but if you had a really large shopping cart the database update could take some time next there's one more step to activate our shipping and taxes plugin so we need to go back to plugins scroll down there it is and to do that we're going to need to install jetpack and connect it so i'm going to choose that now it's activating it'll connect to their website and if you already have an account and you're logged in it'll automatically authorize you then take you back to your wordpress otherwise you'll need to set up a free account with them to complete the process once the connection is complete it'll come back to wordpress and you'll see this message obviously they want more information from you but we don't want to give them any so we go to dismiss we move our mouse over here and we're like hey it doesn't click and you're like hey yoda it doesn't click what do i do i will show you if you move your mouse up just a little bit all of a sudden is clickable i find that quite convenient don't you so now we got it thanks we understand that our database is updated you don't need that we don't need that we don't need that next we want to create our woocommerce pages they're probably already created but we want to do this step just in case click on woocommerce i do this in case you already attempted to use woocommerce maybe your settings aren't the same this ensures we all see the exact same thing so i'll go to status click on tools and we scroll down create default woocommerce pages click create pages okay missing pages have been installed next i like to clean out any products that already exist in the shopping cart by default so i'm going to go over here to products choose that so we're going to go ahead and delete all the products to give us a clean shopping cart to start with to select all the products we can click right there under bulk actions move to trash apply and to be very thorough we're going to click on trash select them all again delete permanently apply now i'm going to go down to categories and we'll do the same thing there we'll select them all bulk action delete apply everything will be deleted but the uncategorized because that's the default when you don't have one we'll look at tags if you have any tags you want to delete those same with attributes if you have any attributes you want to delete those now we want to set some general woocommerce settings so let's click on woocommerce we can choose to ignore that we'll choose settings and the first thing you'll do is put your address for your store so in our case i'll put our address for our store and then you want to pick the countries you plan to sell to in our case we're going to sell to specific countries and those countries will include united states and canada shipping locations will ship to all the countries we sell to make sense default customer location meaning where do they start at they'll start assuming they're at our home shop this is really important we choose that it turns on taxes and it also activates the tax tab when we save this page we definitely want coupons so that's enabled but we'll use the defaults for coupons and the defaults for the currency settings work for me as well save changes now we're going into products notice the tax tab is there now the shop page the default we'll use as shop we'll use these defaults here the placeholder image is for when you don't have an image yet for the item you're trying to sell and we have our own placeholder image but i need a link for it to put here so what i want to do is add it to the media library but i don't want to lose my spot so i'm going to right click on media open a new tab i'll go to that tab and now i want to upload my placeholder image so we'll go to our content folder we'll scroll down to the placeholder image and there it is we'll drag that over we'll select that and now i'm just going to click copy url to clipboard and now i can close that tab now i'm back to where i left off placeholder image we'll put that in there like that now measurements for us we're going to use pounds and we're going to use inches scroll down we're going to use the defaults for enabled reviews and for product ratings so we can hit save changes now we want to click on inventory by default enable stock management is on that's what we want how long can an item be held in a shopping cart it's set to 60 minutes that means if somebody chooses an item and puts it in their shopping cart they get the choice to buy it for 60 minutes after that it goes back to anybody can purchase it we'll leave it at 60 minutes we'll use the notification defaults for the notification email address bethany uses sales selftastic.com the low stock threshold says when does the system send you an email when you get that low i think two is a little too low so we're going to move this to five and what that means is when we get down to five of any item it'll send us an email to inform us that we're getting low on that item we're not going to hide any out of stock items in the display format always show quantity remaining if you leave it in this mode and you have 50 of them it will tell you 50 in stock and i think that might tell somebody oh i can come back at any time no big deal i'd rather just say available but when it gets down to this 5 i wanted to say 5 in stock 4 in stock 3 in stock and so on and to do that we'll just choose a second item and it's only going to show us the quantity in stock when you get to the low numbers so we can do save changes for the downloadable products we're going to use all the defaults so there's no reason to go into that section so the next section we're going to do is taxes we want to enable automated taxes so it does all the work for us it's worth pointing out that the auto tax options are for the united states only for all other countries you'll need to handle the taxes manually based on your country's requirements prices entered with tax for us the answer is no this means if we have an item for sale for nineteen dollars it's really nineteen dollars plus tax we're going to use the defaults for the rest of this so we can just hit save changes now we're ready to go into the shipping section so we'll choose that we need to set up shipping zones for both the united states and canada so we'll click on add shipping zone and the zone name for our first shipping zone will be united states and the region will be united states now we're going to choose to add a shipping method and the first one we're going to do is a shipping rate that's a flat rate i encourage using flat rate for everything just like a lot of websites do it's really complicated if you do variable rates because you have to have the weight and the size of every item you're selling so it's really preferred to have a flat rate and that's what we're going to use exclusively so i'm going to click on add shipping method now that it's added i can hover over that and choose edit at that point you have to decide what amount of money is the right flat shipping rate for you we're going to use 6.99 in florida it's taxable to do shipping so we set it to taxable you need to check your area to see if shipping is taxable save changes now i want to add another shipping method for the united states and this one's going to be free shipping now that's created i can choose edit and for the free shipping what are the requirements i want to require a minimum order or if they have a coupon and then down here what's the minimum or amount we're going to say 50 so if they have 50 worth of stuff in their shopping cart they're going to get free shipping or if they have a coupon for free shipping they're gonna get free shipping now the question is if they have fifty dollars in their cart and they take a coupon off now it's forty do i wanna still allow them to get free shipping and i'm gonna say yes i am gonna allow them to still get free shipping i'll leave it just like it is save changes so now i have the shipping rate set up for united states if i scroll up i can choose shipping zones again and now i'll set up another one for canada so i'll click on add shipping zone and the zone name will be canada and the region canada now we're going to add a shipping method we'll start with the flat rate again we'll edit the flat rate and we're gonna ship anywhere to canada for twenty three dollars flat rate save changes we're gonna add another shipping method again we'll add a free shipping method add shipping now that's been added we can edit it choose edit now we're only going to give them free shipping on a minimum order amount so we'll choose that one and the minimum order is going to be a hundred dollars again we'll leave the coupon code thing alone but i want to change the title on this and we're going to change it to free shipping on a hundred dollars plus for any order that's over a hundred dollars and it's for canada uh save that now that being said i need to go back to my shipping zones because i really want to do that for the united states so we'll choose the united states my flat rate shipping is okay but i want to change the label and the free shipping so i'll choose edit so free shipping by itself is just not explanatory enough so for the us orders we'll put that that way it's pretty clear that it's a us order that's fifty dollars or more or the coupon save changes and later on when we create a coupon the coupon we're gonna set it up only to work in the united states now that shipping methods are going to set up we're going to defer payments until the end because it's better to have a bunch of items in our shopping cart before we do the payment so we can see it actually work so now we're going into accounts and privacy and in these top two sections i want to enable everything and the reason is i want to make it as easy as possible for people to check out and easy as possible for them to create an account we'll use the rest of the defaults scroll down save changes our next section is email settings we'll choose that if we scroll down right here we can view our email template and it creates it in a separate tab and this is very generic anybody who sees this they know that you're using a woocommerce basic cart see it even says woocommerce down here our goal is to make this look less generic so let's come back into our wordpress the first thing we're going to do is add a header image but again we need a link so i'm going to go back over here right click on media and open it in a new tab and i'll go to that tab and now i need to go to my content folder and now i'm looking for my email logo happens to be right there drag that over i recommend a width of 400 pixels for your email logo now i can select that copy it to the clipboard now i can close that tab go back to wordpress and now where it says header image i can go ahead and paste that in like so we're going to put our from name to be self-tactic.com the from email address sales selftastic.com we'll change our footer text to not look like it's woocommerce thank you for shopping with selftastic and we're going to change the base color to match the colors of our website so we'll choose that obviously you could change other colors as well now we can hit save changes i can go back to this tab and hit reload and notice how it didn't load this remember how i talk about the special key control shift reload let's see if that fixes it and there it is so this is basically the template it'll look like it'll say something different here obviously when it actually sends the emails out but that looks a lot more like an official email so we can close that tab now we're back at our wordpress now each of these can be customized the only three main ones that matter for me right now are these top three they're currently set to the admin email so i want to manage each one of these change it to the sales email address it's kind of annoying because you have to go back in each one of these like that go back in for the last one like that save changes go back to emails and the other change that i make is in processing order we'll choose manage and where it says additional content we're going to put something a little more personal like that scroll down save changes and we're done with that section now we're laying to the last one integration and advanced guess what let's just use the defaults and we're done it's time to have some fun so our next step is to add some products to our cart so we'll choose products it said add new and then it went away because we have no products yet but the next time it'll say add new so instead we click create products this time the first product we're going to add is a white cap and then we'll put in the description for the white cap we'll scroll down this particular product will be a simple product which is the default we're going to set our regular price at 25.99 and our sale price at 22.99 it's a taxable item we'll be using standard taxing because it's the automated method now we'll go to inventory and we want to use a sku number and sku stands for stock keeping unit it is a way for you to track your products each item has a separate sku number to identify it uniquely so we'll put in our first sku number i'm going to use a0001 and you're probably saying to yourself but you know why does it matter what you got an a on there what what's the point what does it do i will tell you it turns out that the skew system is one of the most important things that you'll integrate into your shopping environment let's look at a real world example just to get an idea of how and why this would work the way it works we'll start with the spreadsheet that i have for the items we're going to enter into our cart that each of the sku numbers has a portion of its number and a portion of it it's a letter a sku number is not so you can just identify exactly an individual item it's for keeping inventory and you say but i still don't understand what do you mean well let's look at it this way suppose you had a whole bunch of boxes for every item that's in the inventory spreadsheet they had to be sorted into the locations that you were going to store things so when you look at the inventory sheet you see it starts with an a and it goes b c d e f and then when you look at the storage area now it makes more sense we got storage box a b c d e f and so on so the idea is the first letter is going to tell you where the item is stored whether it's in a box whether it's in a room regardless of what location you have it at the letter is going to tell you the location of the item so when you're trying to ship things out if you know the location of the item you can find it a lot quicker it also means that you don't have to look through as many items to find what you're looking for so in my sku system the letter designates where the item is and the number is still a unique identifier so back at our wordpress our first item a0001 it'll be stored in location a and it's the first item we have now manage stock yes we want to enable that and we're going to say we have 50 of these we're not going to do any back orders we're leaving the threshold at the store wide default that we set earlier at five and this particular item if you only wanted to sell one at a time you could choose that we'll have an item like that later but right now that doesn't apply now we'll click on shipping this is the only time we'll look at shipping it'll remind you why we're doing flat rate imagine having hundreds if not thousands of items and every single one of you need you know the weight the length the height the width all of that just to ship it out it's just not worth doing that's why nearly everybody does a flat rate shipping linked items attributes advanced will cover all those things later for a simple item we're not going to need that i'll scroll down we're going to put a short description in as well and just like with a blog you have categories and tags and our first category for our hat is going to be apparel so we'll add that but there'll be multiple categories because items can be found in different categories we're also going to make a category called hat and it's going to have a parent category of apparel see how that works add new next these could be for men and women so we'll add those categories and there's the women and that's all the categories we're going to use for hats now we'll want to add some tags which are basically just characteristics of the item so we'll choose those tags hit add and again just like we had with the blog there is category and tag options over here when you want to make updates and changes to your categories and tags later now we'll scroll down and we're going to choose a product image and now we're going to bring up our content folder and now we'll go to the beginning of our inventory and we end up having multiple pictures for some of these items so in this case we have four pictures for a001 we'll choose all four and move them over we'll choose the hat by itself as our featured picture now on the right hand side if you want to make the search engines happy in the alt text box put text that describes the item and for the title put the same information we'll set the product image and now at the bottom we can add a product image gallery we'll click on that we've already added the other pictures so now all we need to do is choose the other pictures and notice i can only choose one at a time but if i hold down the control key i can choose extra ones so now i have all three of those chosen add to gallery and now down here in the gallery if i want i can move them around like that now this item is ready to be published so we'll scroll up choose publish and our first item has been published so let's go back to our page and click on the shop and see what happens look at there we have one item already we scroll down we can click on it learn more about it there's our item we put our mouse over it it zooms in we can add it to the cart it's been added to the cart we can view our cart it's a real cart all we did was add an item look at that isn't that great so let's go back to wordpress and add another item we'll click on add new ready for a new item this item is going to be a gray cap the gray version of the one that we just did and there's the long description it'll also be a simple product regular price 25.99 sale price 22.99 taxable standard basically these are going to be the same for most of the products we do now we'll go to inventory now we need a new sku number this one starts with an a also because it's going in the same box or the same room or the same location as the other hats notice that now at zero zero zero two because we incremented that by one we'll enable stock management that way we can pick a quantity and everything else will be the same scroll down here's our short description now we'll go back up to our categories and these will be apparel hats men women we already had all of them again and now our tags add those now we're ready to do our product image and product gallery pictures so we'll click on set product image bring up our content folder now we're going to choose the next four which are the gray hat drag those over we'll choose a hat by itself as the set product we'll set the alt text in the title text save the product image there it is now we want to add our gallery images we'll pick those three add to gallery again we can organize them down here this product is complete so we can publish it we go back to our cart hit shop now we have two items look at that we'll go back to wordpress and this is going to be our third simple item and i'm going to use a little magic because our next three items are all simple items and we're just going to add them all the same so i'll just do those quickly for you now our next item will be a different type so we'll click on add new and it's referred to as a variable item this is going to be a men's long sleeve t-shirt there's the long description but it'll have different sizes so that'll make it vary so instead of being a simple it's going to be a variable product and we're going to skip some of this stuff and go straight to attributes because the variable product is set up differently so we'll choose attributes and there's only one choice in the box so we're going to add that and the attribute type is going to be size and the value are the different sizes now notice they have that little character in between that's called the pipe symbol here's an example of where you'll find it on different keyboards we're going to choose use variations and then we're going to choose save attributes now we're going to click on variations and under the add variation option create variations from all attributes we'll choose go and we'll choose okay and it says four variations were added we'll click ok and see there's four different ones now small medium large extra large makes sense right now what you want to do over here is click on expand now we need to set the individual information for each one of those we'll open that up and now each one of these will have its own unique information now to keep from making mistakes i do these in stages so let me give you an example i'm going to start with the sku numbers and my first sku number is going to be this which is b0003 but it's got an s on the end to indicate that it's a small make sense so i'll scroll down next one will be medium so it has an m on the end scroll down next one will have an l on the end for large and the last one will have an x on the end for extra large now i'm going to go back up so it gets a little bit tedious because there's so many different things to enter in for all these items so you've got to be really careful so a regular price for our small and medium and large will be the same however for our extra large it's going to be a little bit more we'll scroll back up again i'm also going to have a sale price on these the small medium and large will all be the same at 19.99 whereas the extra large will be 21.99 scroll back up now we want to turn on manage stock and set our stock to 50 for each one of these manage stock 50 manage stock 50 manage stock 50. now we want to choose save changes because that saves our changes within our variations so now all these are set now we can put our short description scroll back up for our categories and it's apparel it's men we're also going to have another category called shirts and it's got a parent of apparel and we'll add that new category and there it is let's put in some product tags like that now we want to do the product image in product gallery we have three pictures for this one we'll set product image go to our content folder and there's our shirt drag those over and we'll choose that shirt for our main picture set our alt text and our title text save there's our product image now let's pick gallery so we'll pick the other two add go back up publish now we'll add another variable product let's be a woman's short sleeve shirt there's the description it'll be variable we come down to attributes and that's the only choice choose add but in this situation we're going to have two attributes the first attribute is going to be color and they'll be either white or gray use variations save attributes so we'll click add again second attribute will be size and there's our sizes used for variations save attributes now we'll choose variations we'll pull this down create all variations choose go click on ok now this time it made eight variations four that were gray and four that were white for all the different sizes we'll click on okay once again we'll click on expand and now we've got to fill in all this information we'll do the skew numbers together just so you can see how it changes and then i'll use a little magic to do it quicker to fill in the rest the first variation is the white shirt and all the white shirts are going to be zero zero zero four so the next one will be that with an m the next one will be that with an l and the next one will be that with an x the next four variations are the gray version so now they'll have a new skew number zero zero zero five with an s for small m for medium and l for large and then x for extra large get it all right so now i'm going to use a little magic to do these faster because there's eight of them all right so now i want to slow this down for a second to show you one thing that you may want to be able to do and that is the individual pictures for each of the items can vary so if you have a white shirt for example you can show a white picture if you have a great shirt you can show a gray picture so let's go ahead and click on that bring up our content folder and here are our girl shirts and their all of them are we'll drag them all over and this is the white shirt so we'll choose that one set the alt text and the title text set image and go into the next one do the same thing choose that item that's already set scroll down choose that one choose that one set and then the extra large choose that one choose that one and set now when you get to the next one these are the gray shirts if we choose that we'll choose gray shirt put our alt text in set variation scroll down again the gray shirt scroll down again the gray shirt and one more and there's the gray shirt so now they have all their variation pictures we can go back up take our categories apparel shirts women put our tags in there and add our tags now for our product image we got six pictures we'll pick one of them we'll pick that one and then for our gallery we'll pick the rest of them all right now we can publish that now let's go see how our variable items work out we go back to our shopping cart let's click on shop look at that we're starting to look like a real store let's look at the men's shirt first so we clicked on that look we got a variable price depending on which one you get and let's choose an option we'll choose a medium we'll add it to the cart now that's been added to the cart we can go back to the shop and now let's look at the girl shirt we choose that one we scroll down now we can choose whichever color we want so we'll choose the white shirt and we'll choose a small add to cart now it's in our cart we can click on view cart and look at there looks like a real shopping experience doesn't it pretty cool now let's add another type of product so we'll go back to wordpress we'll choose add new and this is what's going to be referred to as a virtual product or a service for example it's going to be a wellness consultation there's our long description under product data we're choosing a simple product but it's virtual and again the most common virtual product would be services we'll put a price of 2.99 it's not on sale services are not taxable so we'll turn that off we'll go into inventory put a sku number we're not going to manage this one we'll allow it to be an unlimited amount but we will sell these individually so you can only buy one at a time at this point we get to use our advanced tab to put a note to the buyer we will contact you via email to schedule your zoom consultation let's put in a short description scroll back up now for our categories we'll have two new categories the first one will be services add new the next will be consultation which has a parent of services add new now we'll add our product tags and we'll scroll down for our product image bring up our content folder and there's our wellness picture drag that over put our alt text for our title text set product image there's only one image so there won't be a gallery we'll publish it now the next two products are going to be exactly like this except that they'll be for health consultation and travel consultation so we'll use magic to do those a little bit quicker and then we'll go check out our cart to see how they work and our three virtual products have been added so let's go ahead and go back to our website and see what they look like so we'll click there alright from here let's choose shop and now we have our different consultation items let's choose the travel consultation add to cart been added to our cart now we can view our cart starting to look like a pretty pricey shopping trip all right now let's go add another type of product go back to our wordpress and our next product will be a digital download product let's click on add new and is the self-tastic complete collection and it says specifically this is for download only so people don't get confused and think we're going to mail them a real book the simple product it's a virtual product and it's a downloadable product our price will be twenty dollars sale for 15.99 now we need to choose the file name so let's click on add file let's choose file go back to our content folder scroll down there is our complete collection let's drag it over insert file url there's our downloadable item when they purchase a downloadable item the link they get is a unique link to them that gives us the ability to control how many times it's downloaded so here we can set how many times will we allow them to download it let's say five and does it expire no we won't make it expire it's a taxable item and go into inventory there's our new sku number it'll be an unlimited product so we don't need to manage it and they're going to be sold individually let's set up a short description and then we'll back up and go into advanced we'll give them a little note it says they can download it the five times now for categories we'll have a new category called ebooks add new category let's choose some product tags now let's choose the product image bring up our content folder scroll back up i passed it there it is let's drag it over put some alt text title text set product scroll up publish now we have a downloadable item go back to our cart hit shop now let's scroll down and find that item there it is we'll choose that item now inevitably one of the questions is going to come up is where did you get this cool look like this to have it on the tablet in a book like that i will show you if you go back to your script and go down into the section for the digital product number one and scroll down you'll find a link and if you go to that link it allows you to make all these little covers you just upload a picture and it does all the rest of the work and it's free it's neat stuff right so i'll close that now let's add one of these to our shopping cart let's add it to our cart the next item we're going to do is an affiliate item so let's go back and click on add new an affiliate item is an item like if you were going to sell something on amazon and you just had a buy now button and then you got credit for it when they click through the button if they bought from amazon so this item is going to be a pink rose headband there's the long description and under product type we're going to choose external or affiliate there's the url to it it's an item that bethany sells on etsy we'll leave the default for byproduct for the button regular price of 69. there's the sale price go into inventory enter our sku number give it a short description now let's look at the categories a couple new categories so add new we're going to do accessories and we'll add that one we'll also add headbands and its parent will be accessories add new and this will also be in the category of women now let's add some tags like that now we want to add our picture go to our content folder and this particular item has four pictures send those over we'll choose that as our main picture alt text title text set image bethany makes all these by hand by the way it's pretty neat stuff right go ahead and pick our gallery pictures which will be the remaining three add to gallery we can sort those and we're ready to publish and now we have three more affiliate items that we're going to add and i'll use magic to run these a little quicker so that we can get through them and then after that we'll look at our shopping cart and see what they look like and now we have four new accessory items so let's go back to our shopping cart so we'll click on shop and there one of them is let's choose that one look at there we zoom in on it see the detail and everything and now when we choose by product it takes us directly to the etsy page and if we're affiliated with this we'll make money off of it being an affiliate but in this case it just sends people to an item that bethany's selling on etsy now we can back up to get back to our shopping cart another thing that's neat is down in categories if you choose category then you get all the items that fall into that the next thing we want to look at is what are linked items and let's go to bethany's shopping cart to see if we go to her shopping cart they're already set up and if you choose this t-shirt for example under the t-shirt or you may also like this item so basically these items are linked to these items this selling technique is referred to an upsell so once you've chosen something they've picked other things that you might like also now below that is a section of related products and these are done automatically for you by the system and i like that because basically over time it figures out what the best related items are relative to whatever it is that you're trying to sell so you can do it manually yourself and we're going to see how this works or you can rely on it to do the related ones for you as well so let's go back to our wordpress and we're going to do that exact thing so we're going to go into our products and then we're going to choose that shirt and now we're editing that shirt and we scroll down under linked products we choose that we can do an upsell and that's what we're doing right now as an upsell so we'll do an upsell and if you start typing in anything that's associated with it it'll come up with all those choices so a white cap will be one of them i'll type cap again and the gray cap will be the other so those are our upsells for that particular item if you go to her shopping cart a cross sell is an item that when you're in viewing your shopping cart shows up here so you see a difference an upsell shows a relationship between two things directly on the item across cell says well we'll show them this right before they go to purchase maybe they'll want that so now in our wordpress we could cross-sell anybody who bought the t-shirt we might be thinking maybe they want to have the collections of the writings as well so we can go in here and we're looking for the complete collection and there it is so we're going to upsell either one of the caps and we're going to cross-sell the complete collection of self-tastic writings so now we can come up and update and just to see how that works we'll do it on one more product so we'll go back to our products list and we'll go down to the girl t-shirt we'll choose that one we'll scroll down to linked products and we're going to upsell the caps there's the white one type cap again there's the gray one and then we're going to cross-sell the complete collection of self-tastic writings and choose update so now if we go to our cart clicking on shop now let's pick this shirt and if we scroll down you might also like there's the two hats so say somebody comes in here they pick a median shirt and they scroll down they decide hey i'd like this gray hat to go with it i'll choose that add to cart and now we can view our cart and because we had chosen that item to purchase okay so here's where we're at in my cart i have an item that if you pick that item it'll cross-sell it but yet there's no cross-sell item here and i'm like i don't understand and then you know i'm like why is it not there and then it hit me i will tell you it's already in the cart and it's a one item purchase so we'd have to remove it from the cart and when we remove it from the cart even though it doesn't show up here if we click on our cart to bring it back up again now it's there so you can't cross-sell an item that's already in the cart so that's why that wasn't showing up problem solved right now what's next so when we go to our shop page it's not bad but there's some things we can do to make it look even better and easier to use and that's what we're going to do next so now we want to go back to wordpress and then we're going to go to appearance customize woocommerce product catalog and this gives you ability to set a bunch of things we're not going to set all of them but just get a brief understanding of what we might be able to do for example we can set the number of columns i'm happy with the number of columns we have right now but the products per page i'd rather this be a larger number i hate to have to hit more all the time so i'm going to set that to 24. then if we scroll down it has the information about what is displayed for each of these items so for example these two are turned off one of the things that i think is a really good idea is to have an ad cart button so i can add this without having to go see the item here it is i want it now so let's turn that on and then i'm going to move it to the top that way all those line up i like how they line up like that next i don't really care to have category listed here it takes up space that i don't want to use so i'll take that out maybe move it to the bottom and now i kind of like to have the price up one this is kind of personal preference and that's a lot better so we can hit publish go back to our cart this is what it looked like before let's reload and that's a lot better for me i mean mainly because if i want this item i can just add it to cart so that's a really good thing i think now what can we do next well first of all these are really ugly and this is white it doesn't even match well that's not good what can we do about that well there's no real controls on that you're saying but yoda you always have a piece of code right absolutely i do i will show you so let's go back to our wordpress and let's back up from here we'll back up again and we're going to go to additional css scroll to the bottom now when you go to your script under the shopping cart section you'll find a section that talks about mods for the cart and it has the css built into it so we're going to select that code right there copy the clipboard come down to the bottom of the css we've already done and we'll paste it in and look at there we fixed that part so now that's the color we want basically we just put the color in there that we wanted and that matched the rest of our site now if we go back to our script to change the sale icon this little piece of code will allow you to change the colors you can pick whatever colors you want just adjust them out so we'll pick that and we'll add it to the bottom and look at that now they're actually usable they make sense so hit publish go back to our site hit reload and that's just a lot better now if we view our cart there's something that i found really annoying and you'll probably go oh well i get it you already already knew the answer to this it's no big deal but for me i i couldn't figure it out at first look at this item right here travel consultation well how do i get rid of it these you can go up or down so say i go down on that one i can hit update cart and it'll take it out but how do i get rid of this well the answer is is that there's an icon hidden right here you can't even see it really until you move over it well that's not good that's not really good at all well let's fix that so we'll go back to our script scroll down kind of did that out of order that's okay there's that piece of code we'll come in here add that hit publish now let's reload now you can see them makes perfect sense right so that's a good thing come back over here now the other thing i didn't really like is this stuff is all left justified and i want to make this stuff centered i think it would look better that way of course there's no controls for this but i've got code and we'll use it so there's another section for aligning and spacing we'll choose that code copy it to clipboard come back over here paste it in and now they're all nice and centered let's go ahead and publish that and we'll go back out and look at what we did and that's just a lot better and the last thing that i wanted to be able to do and none of these things are in the free version by the way and i'm not even sure that there's a paid version of it that'll allow you to do this stuff is that i wanted to be able to have some control over these fonts so i'll come back over inside of here there's a section on set shopping cart font we'll copy that come back over here paste it at the bottom hit publish come back up reload look at that that matches the rest of our site so this is really good stuff and it's free which is good now this doesn't mean that it's going to change every possible place i couldn't make this work everywhere and i can't guarantee it continue to work forever because they change stuff all the time but it worked a lot better than i thought it would so if we give you the cart for example it does have some of this stuff but then other things it didn't change so you see it's not perfect but it's still it's pretty nice if i go click on this item it looks pretty good now now one of the things is difficult if you're on the shopping page is to go to different areas quickly you could do a sort here okay great or if you click on an item to go somewhere else quickly from there well what we need is the same thing we have in our blog we need a sidebar and that's what we're going to add next so we're going to go back to wordpress and for the sake of making this completely consistent let's exit out of that we're getting ready to go right back in kind of that area but some of these things it's better to come out to go find them we're going to go to appearance customize sidebar so on woocommerce we'll put a right sidebar and on a single product we'll put a right sidebar and then we can hit publish and now if we go back to our shopping cart here's a product we hit reload and there's not going to be a sidebar i mean there's a sidebar but there's nothing there so we gotta populate our sidebar so we're gonna go back to wordpress we'll close out of that we're gonna go to appearance widgets and here's our woocommerce sidebar and here's our product sidebar so anything we do we have to do to both of them so that they both have the things we need in them so the first thing i want to do is a product search so let's scroll down and find that one here's product search and we're going to add it to our woocommerce add widget search to our product sidebar add widget and so it's added it to both of those see how that worked out the next one we're going to do is filter products by price again you can choose the ones you want i'm just showing you ones i use so we'll choose that one we'll choose we're commerce sidebar add widget and there it is again and we'll choose product add widget like that next one i'm going to want is product categories and here they are we'll pick woocommerce add widget product sidebar add widget and now i'm looking for recently viewed items that's a neat feature to have so here's recently viewed products we'll add it to the woocommerce sidebar and we'll add it to the product sidebar a little bit of customization inside of the products categories i want to hide empty categories i don't want to see those i need to do that in both of them so i'll come down in here and i'll also hide that and now for the view recently i just wanted to show four items you hit save on each of these i guess keep it happy scroll up to the woocommerce sidebar change this to four save that save that okay so now let's go back to our website and hit reload and look at there we have a sidebar now there's our accessories apparel drinkware all our categories but there's no recently viewed products so let's try viewing something let's go and view that one now we scroll down now there's recently viewed products how about that huh now we'll go back to our shop and there's our filter by price that's really nice now one thing that's kind of annoying if you come to the cart page you're looking down and here's the stuff and that makes sense i get that but now when you go to proceed to checkout you're like i just want to check out i don't need all this stuff and it's really shrunk all this stuff down so this is not a place that i really want a sidebar so how do we get rid of that i will show you we're going to go back to wordpress and then we're going to go back to pages from here we'll go to checkout just click on checkout so from here we scroll down where it says sidebar inside of here we choose no sidebar we scroll up hit update and now if we go back to our shopping cart and hit reload it's no longer there how about that worked out right next we want to work on some legal stuff and that is the privacy policy terms and conditions and refunds first we want to make a privacy policy page so we're going to go back to wordpress go back to pages now we're going to hover over the contact page and choose duplicate now we'll hover over the new one choose quick edit we'll set the title to privacy policy set the slug name to privacy dash policy published hit update now we'll edit that one with elementor we'll change the wording from contact to privacy we'll go ahead and choose this section and the width will change from 800 to 1000. let's delete the message us widget we'll change get in touch to our privacy policy let's delete the email widget now let's insert a text editor so let's go to advanced let's set the top padding to 20 bring that down a little bit now if you visit your script you'll find sections on privacy policy and terms and setup there's a link for both of those to get sample content that you can work with i've already done that and made ones i'm going to use so if i'm here i'm going to bring up my content folder and find my privacy policy and i'll open that up i'll copy all that and i'll close it and then i come back into here come to my content tab and i'll paste that in there i'll go to style typography open sans condensed 21. and i'll do update and now our privacy page is complete so we'll exit out of elementor so now we'll go back to pages because we want to make our terms and conditions page now we're going down to our privacy policy page and duplicate that page now we'll hover over the new page choose quick edit change privacy policy the terms and conditions slug name terms dash conditions choose published update now we'll choose edit with elementor for that page where it says privacy let's change that to terms our privacy policy change that to our terms and conditions now i'm going to go to my content folder and get my terms and conditions file open that up copy it close that come back in here paste that in choose update exit elementor go back to pages scroll down to privacy policy again make a duplicate edit the new policy page set the title to refund and returns policy slug name refunds choose publish update edit with elementor set the title to refunds change our privacy policy the refund and return policy for our content we're going to bring up our content folder open our returns text file copy it to the clipboard close that come back over here paste that in hit update and now our returns page is complete and now we want to make these three files visible within our website to do that we're going to exit elementor then we're back at our dashboard we're going to go to appearance customize woocommerce checkout we'll scroll down we'll set our privacy policy page to privacy policy and we'll set our terms and conditions to terms and conditions now if we scroll down we're going to make a small update to the privacy policy window right here and what you're going to want to do is go to your script and you're going to want to look for the section that's about legal stuff and near the bottom of that is yellow highlight and we're going to copy that to the clipboard and then we're going to come over here and we're just going to paste it on the end like that maybe put a space in there now we can publish we'll go back to our shopping cart you should be on the checkout page already and if you are you just want to reload and this will change right here so we'll hit reload and now the terms and conditions have been added here there's our refund so if we click on refund policy it'll bring that page up just like that back up and then there's our privacy policy right there so all three of them taken care of that was a little dry let's do something fun we're going to make some coupon codes now to do that we're going to go back to wordpress we're going to exit to the dashboard then we're going to go to marketing and coupons we're going to choose add a coupon and the first coupon we're going to make will be a percentage off so we'll call this coupon summer we'll give it a description fifteen percent off entire order under discount type we'll choose percentage coupon amount fifteen let's look at our usage restrictions we're not going to worry about a minimum or maximum to spend we're going to turn this on individual use only only one coupon at a time is our motto we'll allow this to work on sale items look under limits we're not going to have any limits also under general you could put an exploration date if you wanted to we're going to do publish so let's go and try out our coupon we'll come back over here to our website have a coupon click here to enter it okay that's exactly what we'll do now notice that i had done this differently i wanted to show you it's not case sensitive so you can do upper lower case in any order and it works just fine we'll apply the coupon now if we scroll down our coupon code has been applied that was our percentage off coupon so let's go back and make another coupon this time we're going to make a fixed amount coupon so we'll add coupon we'll call this one save ten and this one will have a save ten dollars on a fifty dollar order so as long as it's fifty dollars i can save ten dollars it's a fixed cart discount the coupon amount is 10 under restrictions the minimum to spend is 50 individual use for our coupons no usage limits we'll hit publish let's copy that coupon go back to our website let's remove that coupon let's try our new coupon save 10. and that worked not as much of a savings but it worked now let's make a free shipping coupon go back to our wordpress add new and this coupon code will be called free shipping and the comment will be free shipping within the usa and this will be a fixed cart discount the coupon amount of zero allow for free shipping and that'll only apply to the usa one because the usa one when we set it up was the only one that allowed a coupon we'll go into usage restrictions the only thing we'll set is that you can only use one coupon no usage limits let's publish it now let's test it out we'll go back to our website remove coupon so let's go back and view our cart there's too much stuff in it right now to make it make sense and let's delete some items from our cart so we'll remove that we'll remove that remove that and see we're still getting free shipping anyway let's remove another one and let's reduce that one by one okay so now we're at 42.98 we're no longer getting free shipping we want to enter our shipping code we apply that and now we have a free shipping option and it's chosen free shipping but let's change our address just so you can see how this only works in the united states we're going to change this to canada british columbia shark gardens you should visit there if you haven't been there before postal code hit update and now notice there's no longer an option for free shipping even though there's a free shipping coupon because this is not in the united states so it worked every way it was supposed to work now i want to make a special coupon suppose you have a customer you want to be coupon to and only that customer gets to use it and they can only use it once that's what we're going to make so let's go ahead and go back to wordpress we'll choose add coupon and instead of entering a name let's just hit generate coupon code because this is going to be a one-time use coupon let's say we're going to offer this customer 50 off so we'll choose percentage discount the discount of the coupon will be 50 we're going to go into usage restrictions they can only use one coupon at a time we'll go into usage limits this can be used one time comply to all items in the cart and it can be used by one user we hit publish now let's take that coupon code go back to our cart the coupon code field apply the coupon and look at that 50 off the last coupon i want to make is a black friday coupon show you how to do a black friday promotion so we're going to go back to wordpress choose add coupon in this coupon let's say it will be black friday and the description will be black friday six percent off your order and it'll be a percentage so we'll put 60 and we'll choose a date let's say through sunday the 27th because we'll run a cyber monday so we'll choose that date go into usage only one coupon at a time we'll exclude sale items on this no usage limits we'll hit publish copy that come back go to our cart type in black friday apply the code and guess what it didn't work and do you know why because both of these items are on sale so if we go back to our shopping cart and we pick an item that's not on sale let's say like this mug we added that to our cart we come back over here now you look down and we'll apply black friday again and it applied successfully and it gave us 60 off but only off of the item that wasn't a sale item pretty neat right now everybody that runs a black friday deal has a banner at the top of their home page that talks about the black friday deal and so we want to do that we want to have a banner across here how are we going to do that we're going to go back to our wordpress we're going to choose appearance customize woocommerce store notice put our message in there and then we'll enable it look at that covers up our logo on our menu and you're saying yourself hey yoda it covers up our logo in our menu what are we going to do i will show you so we're going to back up so that we can get to our css section scroll to the bottom now you're going to go to your script file and under coupons at the bottom of that section is some yellow code we'll copy that come back to our wordpress paste that in and look at there it fixes it nicely so we can hit publish and we go back to our site look at that works perfect we go to the different pages it shows up on all the pages as well so i'm excited to say that we're now on our home stretch for getting our shopping cart complete the next step is to set up our payment method so that we can actually start making money with our shopping cart to capture the most sales with your shopping cart you're going to want to accept both paypal payments and credit card payments via stripe this means you're going to need to set up free accounts via paypal.com and stripe.com once you've established your paypal and stripe accounts you'll be able to complete the following steps to enable order processing on your shopping cart if you live in an area where paypal and stripe are currently not available then you may want to consider 2checkout.com which has been found to be a favorable solution for others in your situation so the first thing we'll do is activate paypal on your shopping cart so we're gonna go back to wordpress exit to the dashboard and now we're gonna go to woocommerce settings and now we're gonna choose payments and when you scroll down you may not see paypal in your list if you don't see paypal in your list it'll be down here here's paypal in mind i'll turn this on and i'll choose the connect to paypal button email address hit next password login agree and connect thanks for choosing paypal as your provider hit next and it's connected so now if we go to our shopping cart and we view our cart and we choose checkout it's not there so what went wrong ah how about we enable it save changes come back over here reload it's the small details right so now paypal is an option for payment which also means venmo is an option for payment and now we want to add credit card so to enable credit card payments through stripe we're going to go back to wordpress we're going to go to payments and now we can just turn on the stripe credit card version and we'll choose setup now you'll need to log into your stripe account so i'll open a new tab and log into mine now that i'm logged in i can move back and forth between woocommerce and stripe and get this all working so i'll go back to our wordpress so in woocommerce first i'm going to set the title just take the word stripe off of there and take the word stripe off of here i just don't want it to seem confusing now we need to get test keys so we can test out our shopping cart using stripe so we'll go to our stripe account and then we're going to choose on developers and then we're going to choose api keys now we're going to choose to view test data so we'll turn that on so now we'll hover over our first key and click it to copy we'll come back to woocommerce and paste it in that box now we'll go back to stripe and reveal our secret key now you can tell these are test keys they have the word test in them we'll click on that to copy it to the clipboard go back to woocommerce paste it in there now we'll scroll down and we need to get this url right here so we'll copy that the clipboard we'll go back to stripe we're going to choose webhooks on the left and now we're going to add an endpoint now we're going to paste our url into there the version will use whatever the current version is let's select events and the event we'll select is charge we'll select all of those add events add endpoint scroll down now we need to reveal our new secret code for that copy that to the clipboard go back to woocommerce paste that in go to the bottom choose save changes settings have been saved now let's go to our checkout let's try reloading this page and look at that now we have credit card options we'll select credit card options now this is in test mode so you can copy that number and you literally can paste it in all three places just like that you can scroll down i have read and agree we can choose place our order [Music] and look at there we've processed our first order it's a sample order but it was processed now we need to set this up to where we can do a real order which is basically the same so we're going to go back to wordpress i don't know why we see these funny little characters there let's try that control shift reload thing we talked about ha told you it would work those are all fixed now now we need to put ourselves in live mode so we're going to turn off test mode now we need to get our keys for our live mode so we'll come back to our stripe and now we want to get out of test mode so we'll choose this now we want to copy our live key and click there we go back to woocommerce we paste it in there and now we go back to our stripe we need a secret key but i got to generate a new secret key so i'm going to delete that one now i can create a new secret key and we'll call it secret key copy it to the clipboard click done now go back to woocommerce paste that in copy this url again like we did before go back to stripe choose webhooks we'll paste in that url we'll use the current version now we want to select events we'll choose charge we'll select all add events scroll to the bottom add endpoint scroll to the bottom click to reveal copy that to the clipboard go back over to woocommerce paste that in scroll to the bottom hit save changes go back to our shopping cart let's choose an item the mug add it to the cart let's go to checkout look at there we have real credit card stuff now so we are actually live but i just saw something that kind of makes me glitch and i wanted to change it for mine you may be fine with it let's go ahead and go back to our shop let's choose a different mug for example we'll choose that one and notice this little button pops up for the google pay i don't really want this on mine it kind of makes it confusing for the purchase process so i'm going to go ahead and go back to wordpress and then if we scroll down on our stripe settings we can turn this particular item off and that'll disable apple pay and google pay now we can hit save changes we'll go back to our cart and when i hit reload the google play button will no longer be there so that's a choice whether you want to toggle that on or off so the final step is processing your orders and that's kind of quite simple i'll show you real quickly how that works just go back to wordpress and under woocommerce choose orders we can click on order you want to process and now you can fulfill the order and once you fulfill the order under status you change it to complete and then you hit update and your order is complete well done so that's just about going to do it you've got a fully functioning website that has a fully functioning blog and a fully functioning shopping cart all of it for free but if you still have a moment please check out my search engine optimization tips that come up next so we've reached the end of creating the website i hope you've enjoyed taking the course i know i've enjoyed being your guide and your instructor but as promised i had four really key things that i wanted to add at the end of this video that will help your website show up in the search engines better the first tip is that inside of wordpress there's a place that specifically discourages search engines from indexing your site once your website's live you don't want it to be discouraged from being indexed so let's fix that exit to the dashboard and then we're going to look for settings and under settings we're going to reading and this may or may not be set depending on when and how yours was done and look at that search engine visibility discourage search engines from indexing this site i definitely want to turn that off and hit save changes tip number two there is an amazing plugin out there called yoast every website that ranks higher than yours probably has yoast also free so we're going to go to plugins we're going to add a new plugin and over here type in yoast 5 million active installations tells you something so let's go ahead and install it let's activate it now you have the most powerful plugin for doing seo available tip number three secure pages google likes websites that have a lock google likes websites that are mobile friendly so if we can do both of those things we're going to ensure that our website's liked better tip number four you want to make sure the search engines think the value of your website's stronger than any of your competitions obviously having a lot of great graphics and great content your website makes a difference having a really good look and feel like this website makes a difference however one of the number one things that improve your search engine results is by having other websites point to you if somebody else's website has a link to you that's called a backlink the more backlinks you have the more important your website seems to google the more backlinks the people who point to you have the more important they seem which also means the more important you are now it seems like a lot of work but if you go to jose1.com these guys will teach you everything you need to know about backlinks that's basically all they do and if you look at it jose one seo literally is their middle name so they know what they're doing now under seo solutions it shows you the basics the terminology and the details they'll teach you everything you need to know as far as making your own backlinks how it works how to make the system work for you and if you decide you don't want to put the time in to build them yourself you can also contact them so if you decide to use jose one services be sure to mention the promo code web yoda and that'll save you 50 off your first month with 100 guarantee on that first month if you don't like it you get your money back now i truly hope i covered everything you needed in this tutorial now if there was something i didn't mention or you had additional questions please leave them below be more than happy to answer them for you but if i don't know the answer i'll go hey i don't know but if i do know the answer i can find the answer i'll give it to you and maybe we can work on it together so i really enjoy doing this i hope you had a great time as well the only real payment i'm looking for if i could possibly get a subscribe out of this possibly a like out of this that'd be super helpful but outside of that i just hope you have a great day peace out you

Channel: WebYoda

Views: 472,515

Keywords: shopping cart, online store, how to make an online store, webshop 2024, online shopping 2024, make online store, simple online store 2024, online store beginners, wp webshop 2024, free cart 2024, free cart, online store 2024, free shopping cart tutorial, shopping cart tutorial, webstore design, wordpress webshop tutorial2024, shopping cart 2024, webshop tutorial, simple shopping cart, simple online store, webshop, wordpress shopping cart, build a wp cart, create a wp cart

Id: hRmK6gmfxDo

Length: 250min 11sec (15011 seconds)

Published: Thu Jun 30 2022