How To Make a Website - Absolute Beginners - All in One Step by Step - 2019

in this video I'm gonna show you how to make this website step by step with no step skipped we're making this website for Christina and I'm so happy to make this free website for her she had a life-altering accident and at first she felt sorry for herself but then she overcame it and she wants to show others how to overcome their challenges and she wants to help them with their dreams so we have our goal in Christina's case it's to become a life coach so what do we need we need content to attract people and that's one of the first things that we did is we made a blog for her the next thing in my opinion that we needed was a little bit of fuel and that is Amazon affiliates so when someone clicks on her blog post and she recommends a book or a product she can link to Amazon and when people click on that link she's gonna get a commission on anything that they buy from Amazon within 24 hours even if it's a TV or something unrelated to what she's selling and that will lead us to our next step which is analytics we need a way to track all of the people that are going on our website and we need to see what content that they really like and what content that they don't like so that we can double down on the content that people really like so that again we can get more affiliate sales and then create better content the next step is the newsletter sometimes people go on your website but then they really like it but then they just leave and they never come back they kind of forget about it so it's a really good idea to have an email newsletter that people can sign up for because then she can keep on sending them helpful articles that people really like and that will really bring us to the next step which is purchasing her product or services now she has a service as a life coach you can sign up for her and buy one month at a time or four months at a time or a year at a time and her goal is to really help you on the journey of life that's one of the things that I like about WordPress so much is that it's so flexible that it could really support whatever your goals are some other things like Squarespace wheelie and Shopify and Wix they're not flexible enough you have all of the features that you really need in order to support your goals and dreams with the design of this website you can make it any design you want you can make it look like Apple or slack or Chanel or Nike and we're using wordpress.org which is the open-source WordPress and not wordpress.com because I think that cost a little bit too much to get all of the features WordPress is the most popular platform in the entire world for creating a website and I think it's really cool so if you're ready then let's begin creating this website first let's do a quick overview of everything that we're going to learn and how much everything is gonna cost it's super inexpensive the first thing that we're gonna do is get your domain name then we're gonna get hosting we're gonna install WordPress and then you're gonna create your website so a domain name is about 13 dollars every year so that's not too bad the next cost that we really need and we can't get around is hosting hosting is a computer that's on 24 hours a day that holds all of your website information so it holds your images your logo your content the way your website looks everything like that if you only had a domain name and you didn't have hosting your website would come up blank there would be nowhere to hold all of that information hosting cost about ten dollars a month you can definitely get a discount and you can bring that down to three dollars a month if you pay a whole year at a time so again really inexpensive to have your website showing to the entire world the next thing that we're gonna do is install WordPress WordPress is a content management system it's the most popular one in the entire world and it is free so this is a thing that helps you manage all of your content instead of having to do all the code and everything all you have to do is install WordPress and then you can visually drag-and-drop all of your images all of your text everything like that on your website and again it's the most popular content management system in the world used by fortune 500 companies and I think it's great the last thing that we're going to do and the thing that gonna take the most time is you're gonna make your website and because you're making it yourself you're not hiring a web developer to do it that's gonna also be free so in this section it's gonna include making your website adding a blog adding a shopping cart learning about affiliates to make money in everything like that that's gonna be the bulk of the tutorial in the youtube description below i have all of the different steps listed out and the time in the video where that step occurs so if you ever want to skip anything because it doesn't make sense for your business you can just go in the description below and then click on something and it'll jump right to that section so the total would be $26 but i'm going to show you how to get a discount so the total is gonna be $10 to start or the total if you want to go a year at a time will be $36 for the entire year that's obviously a better deal but if you want to pay the least amount upfront then you'd go with the $10 one but if you want to save the most in the long run you would go with the $36 for the entire year alright so let's do steps one and two and we can do that in the same place we can do that at hostgator.com it's h OS t ta t o r dot c om and press enter I've been using Hostgator for 14 years now and I really love them Hostgator does give me a commission if I recommend them and you enter in my coupon code so I really appreciate that it helps me make these tutorials absolutely free they have 24/7 365 live chat and phone support and their prices are really great so you're gonna see all of these different options like web hosting website builder WordPress hosting VPS dedicated and domains and if you want the best in the fastest then you should go with WordPress hosting but because you can always upgrade later at any time why not just go with the least expensive plan so that's gonna be our strategy going in if right from the start you want the fastest hosting possible then go with WordPress hosting but I'm gonna stick with web hosting because it's the least expensive up front so just go ahead and click on web hosting so next we're gonna see three different plans here the hatchling plan the baby plan and the business plan the business plan just has way too much stuff and we're gonna stick to our strategy of always being able to upgrade later we don't need all of these things that they're offering and honestly most of them don't even help the difference between the hatchling plan and the baby plan is the hatchling plan offers a single domain name so like your website com where the baby plan offers unlimited domain names so like your website com your friends website org your mom's website net your other website com you can have as many domain names as you want I personally have the baby plan because I have a lot of domain names but still sticking with our strategy you're probably only starting off with one domain name so why not get the hatchling plan and then you can always upgrade later unless of course you know that you already have two domain names and you want to web sites right from the start but in this video we're only gonna have one website so we're gonna click on buy now for the hatchling plan now it's gonna ask you do you want to register a new domain name or do you already own a domain name you two click I already own this domain name if you got the domain name from somewhere like godaddy.com and you've already purchased it and you could just enter it right here but since we're registering a new domain name I'm just gonna click on register a new domain and enter that in right here next it's gonna ask you do you want to calm Dada online site store that website tech dot spaced-out host.net Club and I usually recommend going with the dot-com but sometimes the dot-com isn't available or sometimes you're a real cool person and you want like a dot space and sometimes that works out for your marketing so it really is up to you sometimes it's hard to find the dot-com so you can go with a different extension so now it's gonna ask us do we want all of these other extensions and the simple answer to that is no because we're sticking with our strategy of spending the least amount possible and really why do you want to clutter up your whole mind and process and just everything by having so many different domain names you don't need all it's not like someone's gonna try to copy your business with the dot online or the dot space so I really just don't think it's very necessary obviously they want to make more money but I think we can pass on adding a whole bunch of domain names and you can always add them later domain privacy protection this one gives me a little bit of anxiety to be honest with you I have the strategy of spending the least amount possible but sometimes if you don't enable domain privacy protection at first you'll get a lot of spam calls and this is because when you register a new domain name your information like who it's registered to so your name your email and your phone number can be found online connected to your domain name or your website name so sometimes people if they don't enable this will get a lot of spam calls at first it only happens at first usually but I know that spam calls and robo calls are so annoying that anything that we can do to reduce that sometimes it's worth it so at $14.95 a year it might be worth it to you but I'm still gonna stick with my strategy of spending the least amount possible and so I'm going to uncheck that in Section to choosing a hosting plan this is where things get interesting and we can definitely save a lot of money by having the right strategy for saving the most amount possible there's definitely ways to work this system so our package type is hatchling unless we went with the baby plan to get unlimited domain names and for the billing cycle we can see that we can sign up for one month at a time three months at a time six months twelve months 24 months or 36 months at a time and we can also see that the longer amount of months that we go for the bigger discount we get but the more cost upfront so if you want to pay the cheapest amount upfront then you'd go with one month at a time but if you want to save the most amount over the long run then you do 36 months at a time or three years at a time so one month at a time is about 11 dollars a month and three years at a time comes out to about three dollars a month so this one really boggles my mind should I show people how to do one month at a time so it's only $10 to get a entire website set up which is amazing or do I show people the 12 months at a time where I have a coupon code that saves 74 percent off and it's only $3.00 a month right now it's showing six dollars a month but in a second I'll show you how to reduce that to three dollars a month so obviously it's up to you whatever you guys want do you want to spend the least amount up front or do you want to save the most amount in the long term there's no right answer to it it's really whatever you want so I'm just gonna choose one month at a time you can enter in your username and security pin they then enter in all your billing info and don't worry this isn't my real credit card number I get some email saying hey Tyler your credit card number is showing it's not my real credit card number so don't worry about that fill out all the information like your email first name last name phone number you can use a credit card or you can pay with paypal expiration date and state I'm in California so I'm just gonna put in California zip code and we're done with that section and step four of all this it asks you do you want to add additional services I bet you can guess what I'm gonna say and I'm gonna say that no you don't need any of these additional services because you can always add them on later so the HTTPS which is SSL or security for your website already included that's pretty awesome some hosting companies don't include it and that sucks Google actually ranks you a little bit better when you have HTTPS security so that's awesome do you want to protect our site from hackers nope if you stay up-to-date with WordPress or you can get free security plug-ins for WordPress what you'll understand later then you don't really need this so do we want to get professional email from Gmail and we can always add it on later so no we don't your website already come with free email also but I do like the Gmail interface so that may be something you want to consider later on but right now we're gonna say nope let's just get our website set up first before we do any of that do we want to backup our hard work well we can do that ourselves and we can save $23.95 a year holy moly so it's pretty easy to do yourself so we don't need that but if you want you can always add it on later do you want to improve your search rankings and increase website visitors now I don't even know how they would do that honestly that is something that you have to do yourself I just really just don't I don't know no all right then we can see that it comes out to $23.90 however I do have a coupon code and that coupon code will save you the most amount possible I actually have two coupon codes one of them will save you the most amount possible Hostgator has told me that this is the biggest coupon code that there is and I get a commission when you enter it in so I really appreciate that it helps me make these tutorials absolutely free and I get to eat the first one is save code SAV e Co de SAV code press validate and we can see that amount goes down to ten dollars and 37 cents but sometimes every once in a while I have another coupon code that actually saves you a lot more well maybe not a lot more but a little bit more and that coupon code is start code s ta RT Co de and press validate and it does save more so that goes down to nine dollars and 38 cents but this is only for the first month the second month is gonna be about ten or eleven dollars also and that's because we went with a month-to-month plan if you start code on the 12 month plan it goes down to three dollars a month or thirty-six dollars for the entire year so it really is up to you do you want to pay about $10 for one month to start or do you want to pay thirty six dollars for the entire year going with the entire year is probably a lot smarter because you save a lot more in the run and it's amazing to be able to have a website and to spread messages to the entire world for $36 for the entire year but I still got to stick with my philosophy and pay the least amount upfront so I'm just gonna go with the month-to-month $9.38 the price may change a little bit here and there and I'm gonna click I have read and agreed to host Gators Terms of Service and I'm gonna check out now so congratulations we are all done getting hosting the next thing that we're gonna do is install WordPress WordPress used to be super hard to install but now it's just a few clicks so what we're gonna do is click on marketplace and after we do that we're gonna scroll down and click one click installs the next thing that we're gonna do is click on WordPress cuz we're installing WordPress and then we're gonna select our domain name we only have one so we're just gonna click it right here and we're gonna leave this directory blank because if we have something in there then it's gonna install on your website com4 slash something instead of your main website com and we can see right here it says let a pro do it for you where it's 399 or 199 or 99 and basically that's what we're gonna be doing right now so you're saving yourself a whole bunch of money by doing it yourself super easy all right so let's just click on next and then we can enter in all of the blog information right here for the blog title we can change this later but just put your business name for your username you could put your name or admin I'm gonna put my first name and last name and my email address then I'm gonna agree to the Terms of Service and click install once we do that it's gonna take a little while to install because it's installing all of these things on your website all of WordPress and it's gonna say installation is complete now might be a good time to copy or print this installation details out just because it's annoying to lose your password so I'm just gonna copy all of that to a text file and we are all done installing WordPress the next thing that we're gonna do is login to WordPress to log into WordPress we're actually going to open up a new tab and let's put in our URL and we can see this website coming soon page sometimes if you go to your website right after you've purchased your hosting it won't work it'll come up blank that just means that you have to wait a couple of hours in order for to work because your website takes a little bit of time to spread across the entire internet and work in every location but if we see this website coming soon page we know it's working and now we can login to our WordPress we're gonna log in because if you don't log in then you can't make any changes so to log in we're gonna go to our website ComNet org whatever it is forward slash WP dash admin then we'll see this page right here that's asking us for our username and password and we can find that on this page right here where we just installed it so we can just copy or type in our username and copy our password because it's super funky so I'm just gonna type admin and I'm gonna paste in that password then I'm gonna click login once you log in you're gonna be in the dashboard that's what the WordPress admin is called it's called your dashboard so after we've logged in we can hover over this and click on visit site and we can see that we have a WordPress website so this is what some people would charge you five hundred dollars or three hundred dollars or ninety nine dollars to do super easy this top bar up here is only shown when you're logged in so it's like the admin bar your customers aren't gonna see this anyone who visits your website it's not gonna see this you only see it when you're logged in to get back to the dashboard all you have to do is hover over your name again and click on dashboard so now that you're back in the dashboard let's start making changes the first change that I like to make is to change my password because that is a long funky password and I can't really remember it so let's go ahead and change it to do that all you have to do is click on users and then just hover over your name and click on edit and then just scroll all the way down to the bottom and click generate password it's going to generate a funky password for you hide this cuz I'm on the internet and I'm just gonna type in my own all right once we're done with that we're gonna click on update profile and we're all done our password is now changed if we see all of the stuff up here like Google Analytics optinmonster all this just mess up here that's there because these hosting companies add unnecessary plugins to your website what plugins are is plugins help you extend the functionality of WordPress so there is a whole bunch of things that WordPress itself doesn't make but other people thousands and thousands of people make so like a photo gallery or a way to really easily visually create your pages or a contact form WordPress itself doesn't have all these but people make tons and tons of plug-ins for WordPress and so you can install any of these things the problem sometimes is that these hosting companies they'll add in their own plugins that they want you to use or they want you to pay for or other companies pay them to include it on your hosting but we don't really want that so the first thing that I want to do is delete the unnecessary plugins so that we can start from a clean slate so to do that we're just gonna click on plugins and we can see all these plugins installed up here and that will mark off all of them and we're gonna deactivate all the unnecessary plugins and click apply and now those plugins are deactivated now we can mark them off again and go to it and press Delete and apply then press ok and that will delete all of the unnecessary plugins on your website so that you can start off clean and fresh now that our website is all clean and fresh the next thing that we're gonna do is change the permalinks so what on earth does this mean and the easiest way to explain it is to actually just give you an example so if we hover over our website and click on visit site and we scroll down to one of these sample recent posts we can see that it shows our website comm forward slash index dot PHP 4/20 19 blah blah blah professional websites don't have this index.php professional websites just have your website calm for it slash about or forward slash contact or forward slash the date and the blog name they don't have this ugly index.php so we want to get rid of that permalinks are the way to do that it helps you with displaying your website links so to change that we're just gonna go back into the dashboard by hovering over our website and clicking on dashboard then we're gonna hover over settings you can also click it but I'm gonna hover over settings and click on permalinks we can see that we have this custom structure here but we don't want that because that looks crazy so all we're gonna do is click on post name and that will make it super simple and exactly what we want and click Save Changes alright now if we go and visit our site and we click on hello world we are gonna see that that index dot PHP is gone and it's just forward slash hello - world which is perfect so we're all done with that the next thing that we're gonna do is make sure WordPress is updated it's very important to keep your WordPress updated that's what gives you all of the latest features and makes your website secure so hover over your website and click on dashboard then click on updates and we are have the latest version of WordPress so that's great so we're all done with that the next thing that we're gonna do is delete all of our unnecessary pages that WordPress or the other old plugins have added so just click on pages and check off this box to select all of them and move to trash and apply once it's in the trash let's just delete it from the trash so click on trash check that off delete permanently and apply so we are all done cleaning up WordPress and all of the pages the next thing that we're gonna do is install your website theme your website theme is the design of your website right now your website theme is the default theme which isn't that great it doesn't give you enough flexibility and enough options that we want so we want a much better theme getting a theme is super easy and that's what makes WordPress so great there are thousands and thousands of themes or designs of your website to choose from and of course you can customize it any way you want so to get a new theme all you have to do is go to appearance then themes then we're gonna see this add new button go ahead and click on it and we can search for a theme this theme is called the Astra theme it's one of my favorites I think that you're really gonna like it we can click on details in preview to see that it's rated 5 stars and it's been downloaded hundreds of thousands of times but I'm gonna skip all that and just click on install so now it's installing your theme it's installing a new design for your website and then we'll click on activate and your new theme is activated we can hover over our website name and click on visit site and we can see that we have a new design now this looks absolutely terrible but we're gonna make it look much much better this is one of the best themes to start off and it starts you off with a blank canvas so you can do practically anything the next thing that we're gonna do is install a maintenance mode plug-in so right now if you go to Cristina's website you're just gonna see this right here it's blank so we don't want anyone going to our website just to see a blank website instead we want to show them a coming soon page so to do that is pretty easy all you have to do is hover over your website name and click on dashboard and then click plug-ins then click add new to add a new plugin and now we're gonna look for a plug-in called under construction once we do that we can see all of these under construction maintenance and coming soon plugins we're just gonna go with the first one which has been installed 300,000 times and has a 5 out of 5 rating we're gonna click install now then we can click on activate and our under construction plug-in is activated we can dismiss that right there now what we're gonna do is we're gonna edit all of the settings so we can hover over settings and go to under construction and we can dismiss this and now we can see all of these different pages that we can choose for our under construction look some of them with the star on the corner are premium and you have to upgrade for that but a lot of them are free for Christina I'm just gonna activate this cyber check one and now it's activated we can go to Main and we can look at all of these different settings so we can prevent search engines from indexing the site temporarily but that's off we can have an automatic end date so that's off we can click it on and we can track it with Google Analytics we can move that on and put in our Google Analytics code which I'll show you later but we're just gonna mark them all off but we're gonna mark under construction mode as on so we're gonna save our changes and now if we go up here and we click on preview we can see what its gonna look like so this is what our page looks like right now and this is what everyone would see if they're not logged in this sorry we're doing some work on the site right here has the ability to be edited and so does this thank you for being patient we're doing some work on the site and we'll be back shortly and if we want over here we can hide this login button so let's see how to do that let's go back to our website and click on content and everything here has the ability to be edited for the headline we can change that right here and we can just put coming soon and we can change the sub headline or the content right here just put in we are almost done dot dot and for that login button maybe we want that off so we just checked that off and we can save changes now if we go back to our website we have to refresh so just click on refresh now we can see that it is indeed changed and we can also see that that button right here is gone but if we go and visit our website we're gonna see that it's gonna show the regular website and it's gonna have this text up here that says under construction mode is enabled but you're white listed because we're logged in so if you're logged in you're not gonna see the under construction but if you log out and go to your website then you will see it just like a regular user so now we're done putting our maintenance mode on the website it's now time to actually create our content but instead of having to make our website from scratch which is terrifying we can get a little help by installing a plug-in called Astra starter sites so this is a plug-in that helps you start your website it'll import all these pages and everything to populate your website in a really nice way and there's a whole bunch of different websites to choose from that's one of the reasons why I chose the Astra theme is because they have this beautiful Astra starter sites plugin that allows you to import so many different websites that are really just perfect and beautiful so let's go ahead and install that let's close this tab right here and hover over your website name and click dashboard then click on plugins to add a new plugin and click add new once we do that we can search for Astra starter sites and it's the first one with over a hundred thousand active installations click install now and click on activate once we do that our Astra starter sites is activated and once it's activated we can now import an entire website just in a few minutes instead of having to spend days and weeks and months building your website yourself we can just import this one and you can edit it any way you want so to do that all we have to do is click on see library or we can go to appearance and Astra starter sites then it's gonna ask what page builder are we using and there's one here that is so much better than all the rest and that is Elementor so we're just gonna click on Elementor and click on next and then we're gonna see all of these different sites that we can choose from some are them are labeled agency which means it cost money but a lot of them are free so let's just click on the free button and we can see all of these that are free and they're beautiful and it's entire websites with just a click of the button which is amazing for this one we worked with the Astra people and we built this website and then we handed it over to them so that it would be available here so we can click on preview and we can see this website it looks awesome and if we have a previously imported site we can say delete this previously imported by our websites blank so we don't need to do that then we're gonna click on import site alright and the process can take anywhere between 2 to 10 minutes depending on the size of the website and the speed of the connection but with the magic of editing we're just going to speed up this process so that you're not staring at a website that takes two to ten minutes to import all right so we're all done importing the website it took about a minute a minute and a half and now we're gonna click on View site and we can see this entirely imported website and it looks really beautiful and we can scroll down and we can see all of these different sections and this would it took so long to create but we did it in just a couple of minutes because the site was ready to import and of course you can edit anything that you want let's go and check out another page like the about page and we can see that this page looks really nice also and everything looks really good now we can click on the work with me page this is gonna be the page where people look at her packages and pricing and we're gonna have our fa Q's right here and a free consultation form so that we can get people as email and we can start talking to them we can also click on any of these packages and you can actually add to cart and you can buy it so this really is an all-in-one website where we have the blog the e-commerce the regular website and we just have everything and we can click on Add to Cart or maybe we want you know a different quantity we want 10 one-on-one coaching sessions we click on Add to Cart and it says this has been added to your cart we can view cart and we can also see it added up here so it's really cool so we can view our cart and you can even apply coupons or there's so many different things that you can do to really just control your entire website and we can proceed to checkout and right now I think those are in pounds but we can change it to US dollars which I'll show later but you can add in all of your billing information and payment information and then you can pay we also have a book section here because she wanted a section with all of her favorite books and we're gonna have that linked to Amazon so that she'll get a commission actually if someone buys her book on Amazon through her link and what I'm gonna show you how to do that we also have this beautiful blog here and of course you can change the layout of the blog you can change what it looks like of course you can change all the blog content all the images everything it's super customizable so this is an actual blog post where people can leave comments and read your blog posts and I think this is gonna be the main strategy of her website having super high quality blog content it gets ranked really well in Google people go there they read it they love it they want to sign up with her and there you go you got a business we also have a contact button where people can enter in their first name last name put a message and see her contact info find her on Facebook Instagram all of our social media everything like that the cart also has some cool functionality where if you hover over it you can exit out like that and overall the website just has so many features we can also click on this to go back to her home page but it just has so many features that you would really want in a website and you can change it any way you want and it's so much better to import a website then edit it rather than having to come up with everything from scratch why reinvent the wheel it's not necessary so that's it we're all done importing the website the next thing that we're gonna do is change your site title maybe you don't want this title up here and maybe you want something else so how do we do that it of course is super easy all we have to do is click on customize and then click on layout and then click header and click a site identity and this is where you can change the logo which I'll show you how to do later and here we can change the site title so maybe we don't want to say happiness compass maybe we wanted to say my website probably not this is where your business name would be so we're just gonna put in happiness compass for her because that's her website name or business name next we're gonna put her tagline a tagline describes your business so maybe if you're a graphic artist you would put I do vector art illustrations and logos this does show up in the search engines so make it describe your business we're gonna put we're smiles lead the way all right but I'm not gonna display the site tagline on the website and it will disappear from where her title and logo are then I'm gonna go back and go back again and go back one more time and we can also click on typography and go to the primary header and we can change the font size so maybe we want this to be 32 instead of 35 to give it a little more space then click on publish and we are all done with that we can exit out of there and that's how you change the site title and tagline now we've finally arrived to the fun part which is editing and changing your homepage in any way that you want to do this all you have to do is click on edit with Elementor and just wait for it to load and you have all of these different items that you can add to your website like heading image video button and you can click hold and drag them to this right side or to edit the content that's already here all you have to do is click on it and start typing we can also type in over here and we can also go to style and change the text color to any different color that we want and we can slide this around but I'm just gonna keep it as white and for typography we can change the font size so maybe I'll make it a little smaller or maybe I'll make it a little bit bigger maybe we also want to duplicate this heading so we can just click on the pencil icon and click duplicate and now there's two of them we can of course click on the pencil icon and delete that we can also drag in another heading below it for a subheading and we can start typing right here I'm just gonna put turn troubles into triumphs that sounds cool and we can Center it and go to style and change the text color and I'm gonna change it to white again once I do that I can click on typography and we can change the font size and you can also change the letter spacing so that there's more space between each letter we can see that there's a gap here so we can go to advanced and under margin unlink all of the values so they're not all the same and we can put negative 20 let's say in here and that will make it so that there's not such a big gap next we can click the start here button and we can change the text to get started or anything that we want I'm just gonna keep it as start here and for the link this is where it links to so we can change this to anything that we want but I'm gonna change it to the blog page so just click on that once you start typing it'll automatically suggest different pages to link to so just click on that next we can click style and we can change the background color of the button maybe we wanted a pink or a blue or an orange or just keep it green and we can also change the hover color of the button so when you hover over it it'll change to orange but you can change that to black or anything that you want everything on this page is customizable any way that you want we can also change the border radius of the button and make it square and if we add numbers it will make it rounded next we're gonna click on the entire section right here in order to change this entire section and we can go to style and we can see that that image is right there so we can change this image we can click on it we can go to media library and we can choose something anything that we want or we can upload a file by going to upload files and select files let's get a picture of kristina in here because it's her website so i'm just gonna find that image on my desktop and i'm going to open it the image is gonna upload and we can click on insert media now we have a fantastic picture of her and it's really starting to feel like her website we have all of these different options here so maybe we want the position of the image to be top center or bottom center or just Center Center with the attachment you can make it scroll or fixed if we click on fixed it's gonna stay in the same spot when we scroll see the image doesn't move but if we click on scroll then the image will move for size I almost always use cover because I think that's the best one but you can use contained which looks ugly and you can mess with the other ones but covers the best in my opinion for background overlay that's a overlay that makes the image darker or a different color and sometimes you want to use this if you have specific colors on your website and you just need to integrate the pictures a little bit more or if you think it looks cool or if you want the text to pop out a little bit more so we're making it a little bit darker so that you can read the text a lot easier and the text doesn't get lost in all of the white clouds or the white mountains and for opacity that's how see-through it is so you can make it 0 or you can make it a hundred or you could just make it 50 that looks pretty good so we're just gonna keep that down here you can see this little wave right here that's actually not part of the image that's part of all the really cool things you can do with Elementor so just click on the entire section and go to shape divider and you can see that the top has none but we can make the top have mountains which looks crazy or a wave brush we're just gonna keep it none and we can see that the bottom one has that wave brush we can do a wave pattern we can do mountains we can do anything that we want and I feel like the wave brush sort of gives this website and nature II feel so I think that's really cool we can change the height of it I'm just going to keep it at 50 and we're all done with that section the next section that we're gonna do is this one right here her name is not Sarah John so we're gonna change that I'm just gonna type in her name right here and this little line right here we can change the color or just keep it black we can change how white it is by taking the slider and sliding it up we can also change the length of it by sliding the width or you can type it in right here we can also edit all this text right here and we can paste in our own text so there we go that's her text in there now you can change this button to say anything that you want or a link to anywhere that you want I'm gonna link it to the about page so just start typing about and choose the about page next we're gonna change this image because this is not Christina so just click on it click on the image and find an image that would work I'm gonna upload the file and select the file choose the image of her and press open then I'm gonna insert media once that's done there'll be a picture of her that looks awesome and now we can scroll down to this work with me section we can edit that by clicking on the pencil highlight all the text and you can paste in your own text we can click on the link and change the link to your own link you should know how to do this by now I'm gonna start typing in work with me because that will link it to the work with me page next we can click on this image right here and we can change that image to any image that we want or of course we can upload our own image select files choose the correct image and press open then we can insert media and we have a picture of her again so that's awesome and we can preview it by clicking on this right here and we can see that that page looks pretty good but what do we do with this section right here the how may I help you well first let's update the website so it saves all of our changes and what we want to do in this section is actually add her latest blog post to it and in order to do that we need another plugin to display all of her latest blog posts so let's click on this icon up here and let's exit to the dashboard so we need to get another plugin so let's go to plugins and let's add new and we're gonna search for a plug-in called essentials add-ons for Elementor then let's just click on Install Now and let's activate it once we do that we can now go back to our website by hovering over our website and clicking on visit site and once again we can click on edit with Elementor that plugins gonna give us the option of displaying our blog posts right on the home page so it's really cool so just scroll down and let's change the title to recent posts and let's delete this section right here and let's delete this one right here and we can also delete this one right here and let's delete this one all right now let's click on this icon and let's search for posts and we can see this new widget here so let's drag it in and now it's gonna show all of our recent posts and we can see that that looks pretty cool so we can change post per page maybe let's put that as 3 so we have a little more space but we can see this gap right here so let's go to layout settings and instead of 4 columns let's do 3 columns and that looks awesome let's get rid of me there because I don't want me to be there it's her website so for meta position let's just do entry header that would get rid of me and under style we can change the background color or any of the different colors to make it look great and match our website I'm just gonna choose white for color and typography we can change the color of the title and the color of the hover so maybe we want that to be green when we hover over it that looks pretty cool matches her website and for typography we can just enter in a new size maybe a little bit smaller so that we can see it easier next we could see this little arrow button and that's under hovercard style we could change that to a magic wand it's kind of cool or we can change it back to the arrow which kind of makes more sense for the background color we can change that we can make it a green make it more see-through if we want it looks pretty cool and we're all done with that for the view more we can just type in visit blog and for the link we can just start typing blog and we can choose the blog then we can update that and our most recent posts will be on the home page we can get rid of all of that and just look at her main website and we can see we have customized the website exactly how we wanted it and that looks super awesome now you might be wondering what if I want to make a completely new section and I don't want to just edit sections you don't want some prepackaged template you want to create something entirely from your own imagination or something else you've seen on another website that's super easy let's learn how to do that let's exit out of here and to make a completely new section we're gonna scroll down and click on this plus button and we can change it to one column or two columns this is what two columns looks like up here we can change it to three columns which you saw with the blog post we're just gonna choose one column and click on this menu icon and let's drag in a title alright we can just start typing let's type in WordPress let's enter it let's go to style let's go to typography let's change the font family to permanent marker because that looks pretty cool let's change the font size to 80 or we can choose this as LAT oh because that looks even better more professional and change it to a hundred for the font weight let's make it a little more bold by putting in 700 you could also make it really thin by putting in 100 or just the default that's cool too we can transform it to all uppercase that looks awesome we can make it italic if we want or just keep it default for text decoration we can underline in or over line it or just keep it default we can click on the menu and we can add in a text editor and we can highlight all that text and delete it and put in our own text and put in you are in control of everything great we can go to style we can Center that we can go to typography and we can make that bigger we can go to back to the menu and we can drag in a button under it and what we can do it's really cool trick we can right click and we can copy this button and then right-click and we can paste the style so it just pastes the style of the button so we don't have to keep on remaking it over and over again then we can Center it and we can change the text maybe contact and we can change the link maybe we want to link this to the contact page next we'll click on the whole section and we'll go to style and let's change the background color so click on classic and for color we can make it orange or a blue or a green we can also click on the word press and we can change the color you've done all this but I just want to put it all together for you we can change that to white we can change this color of the background also to orange or green or we can even make it a gradient so it goes from green to red or green to blue we can even change the angle of it so that looks pretty trippy and the location so maybe it starts at the top or maybe it starts in the middle or maybe it starts at the bottom you can do so many things you're literally in control of everything we can also make an image as a background by choosing that and choosing an image and again we want to make it so that it is cover instead of default that looks pretty cool but let's make it a center Center so it looks much better maybe there's not enough space at the top and bottom so just click on the entire section and go to advanced and unlink the values so they're not all the same and let's do a hundred padding at the top and a hundred padding at the bottom and that's starting to look really good maybe if we click on the whole section we can go to background overlay and we can make the background dark so that the words pop so now you know how to make a super professional section that looks really awesome but we're not gonna keep that on her website that was all just demonstration so we're gonna exit out of there and we're going to update and now we are done editing and changing your homepage in any way that you want but will your website still look amazing on your phone or on people's phones the next thing that we're gonna do is show you how to edit the mobile version of your website luckily Elementor already makes your website responsive so it's gonna look pretty good right out of the box but we can make it look even better and perfect it by editing the mobile version only all we have to do is click down here on this icon and choose mobile that will make it look like the mobile version or the version that it looks like on your phone and as we can see it already does a pretty good job of making it look pretty good there are a few tweaks that I want to make for the mobile version only one of them is this title up here so we can just click on this entire section and go to advanced and we can make sure the cell phone icon is checked and let's take some of the padding out so on the right and left let's make it 20 instead of 30 and let's click on the headline and go to style and go to typography make sure it's on mobile version and let's make that much bigger next let's edit the head line below it and go to style click on the pencil icon and let's change the size to much smaller so it makes sense on your phone then we can go to advanced we can unlink all of the margins and let's change that to about negative 10 next we're gonna scroll down to the coaching section and we're gonna edit that and maybe let's Center this so make sure mobile is clicked Center and edit this one and let's Center that also then that's Center this line also and let's also Center the text style and Center alright that's looking pretty good let's Center this button very nice and let's scroll down to recent posts click on this column go to advanced let's unlink the padding and now I'll make it all zeros and that will make it wider on the sides next let's click on this edit right here to edit the post grid go to style go to colors and typography and let's change the typography and let's make this a little bit smaller alright that's looking awesome next let's go to the work with me section and again let's Center everything so click on work with me and Center that also and let's click on this section and Center it also style and Center let's Center this button too by clicking on it and centering it cool let's scroll down a little bit and let's edit this image go to advanced and let's hide on mobile turn that on and now that will be gone in the mobile version so that's really cool that you can hide and show different elements whatever elements you want to either appear on desktop or heíd on tablet or hide on mobile or show on mobile and hide on desktop whatever you want all right let's mark that off though cuz we actually do want her there just wanted to show you that let's click on the entire section and go to advanced again and we can do that for an entire section we can hide it or we can reverse the columns so this will stack the columns in a different order the opposite order of how by default they stack so we can make her go on top which looks much better all right we can click on the whole column right there and take out this margin on the mobile version so it gets pushed up a little bit more and we can change the margin on the bottom also so it looks a little bit better alright that's looking pretty awesome once we're done with that we can click on update to save all of our changes and we can click this button to see how it would really look on the mobile version and that looks really cool so now it looks perfect on your mobile phones or people's mobiles phones and that's something that really polishes off your website all right let's go back to our desktop view by clicking on that and desktop and we can see our desktop looks like it did before it didn't affect any of it and we can go back to our main website and we can see that it still looks awesome the next thing that we're gonna do is edit the about page we're gonna learn a couple of cool tricks to really polish off our website so to edit the about page just click on about and click Edit with Elementor you already know how to do this so it should be pretty easy alright so just click on about and then go to advanced and click on motion effects and under motion effects let's click on fade in left and we can see that that about now fades in so when someone reloads the page they can see any of these different effects so I think these are really cool there's a whole bunch to choose from fade-in up that's pretty awesome we can also do that for the divider we can go to motion effects entrance animation and fade in down so now that will look really cool we can edit this picture and choose her picture by uploading an image or just going to the media library and choosing her and then inserting media super-easy next we have all this text this lorem ipsum but we want to edit it by clicking on the pencil icon and then highlighting it all and just pasting our text in there or typing it in very cool under my passion we can click on it and then go to advanced and go to motion effects and we can change this also to fade in down and with the divider we can change that also to fade in up so one goes down and one goes up it look really cool click the pencil icon and we can change this and we can just paste in our text very nice and then we can click on this divider and go to advanced and motion effects again fade in down and click on the my goals advanced motion effects and we'll fade this up very nice next we'll go to this part and we'll click on edit and we will just paste in all of our text for the my goals section very nice now let's update and let's preview our changes and let's see all of those effects in action so there we go fades in very cool go to the next part fades in very nice it just adds an extra little touch to make it really cool so that's it that's how you edit the About section the next thing that we're gonna do is edit the work with me page to do that let's exit out of here and let's click on the work with me link then click Edit with Elementor and if we look we can see that our package and pricing section is blank right here and if we click on edit we can see that it's a shortcode so this is a code that's gonna display all of her different packages and this gets updated from WooCommerce and it's displayed with this shortcode right here so we can see on the left it says product limit so for and columns for so for different products under four different columns so I'm gonna show you how to change that later so we're not gonna worry about that right now under frequently asked questions we can just click on this pencil icon and we can begin editing so these are all the different sections on the left side here if we click on what is coaching we can change that title right here we can just paste in something else and beneath it is all of the paragraph content so we can just highlight that and paste in something else also so that's pretty easy we can just keep on doing that and I'm gonna speed it up right here because it's pretty boring to watch me paste in all of this content [Music] and if we look over here we can see that there's different plus icons and that's controlled by this icon over here so we can definitely change it if we want to we can make them a little more boxy or a circle or this angle right I think that's kind of cool and this active icon is the - but we can change that - we can change it to this up which kind of makes sense and to style it just click on style and we can change the border width and now we can see the little lines under it it's kind of cool that looks awesome actually really cool we can also change the border color maybe we want it to be green or blue or orange or clear and we can again make this zero if you want just to be really clean we can also go to the title and change the background color to orange or clear whatever and the other color to any color that we want and the active color is when it's active so when you've clicked on it now it's change color so there's all these different options that are really cool we can make a blue or orange or clear that and it'll be default then with the icon we can have a different alignment so maybe it's aligned to the right or maybe it's aligned to the left it makes a lot more sense to the left so I'm just gonna do that for the content we can change the color here the background color to orange or green or so many different options we could change the padding which is a spacing around it basically you can change anything and that's super cool I really like it that's an awesome cool little effect in cool section if we scroll down we can edit this free consultation maybe we can put something else like 30-minute clarity call no pressure all right so she's not gonna pressure you into signing up it's just gonna be a call to make sure that you guys are the right fit for each other I think that's kind of cool then we can go to style and maybe we want that size to be a little bit smaller just get it right all right that looks pretty good and let's expand that out a little bit make the column with a different width maybe 42 so it all lines up a little bit better then the text under it we can change that or we can delete it let's delete it next let's search for some icons because maybe one an icon list just to give a couple of points to convince people to call her because she's awesome all right we can go over here and we can change the icon of the different list items and we can delete them and then duplicate them if we want and then go to style change the spacing in between them click on divider or no divider go to the icon change the size so many different options go to text and indent it differently maybe to 8 go back to content and we can change the list items first point is talked about your goals and the obstacles in your way the next point is see if we're a good fit to work together the next one is answer any questions you have about the process all right that's awesome now we can go and click over here and we can see that this forum is a shortcode so it's a code that you put in to your website in order to show this form right here and we're gonna go over the form a little bit later so don't worry about that right now but if someone fills it out it will email her or email you and then she can call alright but we're all done with that so let's press update and let's press the little I so that we can preview it and we can see all of our packages and we're gonna change that later in this shopping cart section and we can see our FAQ is all there and the 30 minute clarity call no pressure and that is looking amazing really cool really cool page I think I think that's gonna really help her to get a lot of people to sign up the next thing that we're gonna do is edit the books page so let's close that and we can scroll up a little bit and click on books this should be getting easy for you by now and this page is gonna be our affiliate page so anytime someone clicks a book that Christina has read it's gonna go to Amazon and Amazon's gonna have a affiliate code on it and then Christina will get a commission I'm just gonna show you how to change the actual book covers and later we're gonna figure out how to do the affiliate part and I also think it's a really good business decision to put these books on here because it shows that she's qualified to give advice because she's read all of this information to edit the page just click Edit with Elementor and I'm gonna show you some cool effects and some new things that you can do to make the books page really pop so for this category we can click on it and we can change the category title let's just put mindset for achievement and to edit the book just click on the edit button and we can click on choose image and upload files and select files and we can upload a new file a new book and let's open it and we can insert media all right now we have that new book right on there if we click on style and click on hover we can change how when we hover over the book it'll do a little animation or it'll turn a little lighter so when we hover let's say let's make it more opaque by turning up the opacity so it's gonna be a little more see-through 50 percent see-through if we do that next let's change the transition duration so it's a little bit slower so it has a little bit more refined feel to it we can also get rid of those and under hover animation we can say we want it to shrink or we want it to grow that looks pretty cool and maybe we want to copy this style to all the books because right now it's just one of the books so we can go to copy by clicking the pencil and pressing copy and then click another pencil on another book and paste style so this is gonna paste all of that book style to the different books so we'll just do that for all the books and now we can see it has a cool effect next we can change the book name by clicking on book name and putting in a different title the same title as the book and we can go to get it now and this is where our Amazon affiliate link is gonna be it's actually gonna be in all three places on the book the title and they get it now but we're just gonna leave that blank for now because we're gonna do the affiliate part a little later so now we can press update and we can preview the changes and we can scroll down and we'll now only hover over the books it has a really cool effect so that's super awesome and it looks really polished I really like that that's cool alright so we're all done with the books page the next page that we're gonna edit is the contact page and this one's a little bit different because we're gonna actually be editing the contact form on the contact page and it's different because the contact form is a shortcode so we're gonna be able to see what that is and how to control that so let's close this tab right here let's go to the contact page and before we edit the contact form let's see how to edit this text over here should be pretty easy and you should know how to do this by now alright so let's scroll down a little bit and let's click on this text let's say this is where she lives I don't actually want to put where she lives because this is the Internet and the phone number and we can change all of that right here I don't actually want to put her phone number out online and her email so we'd put her email in right here then of course we can change all of her social media links so her Facebook Twitter Instagram whatever it is we can put right here so that's super easy and we can go to style and we can change the size of the social icons and again we can do that hover effect by making it a different color let's make it an orange and when they hover over it it'll change Orange so that people know that it's a button or green or just keep it as green and for hover animation we can make it shrink or grow or same thing like the books page let's put grow that looks great and now for the meeting potatoes the contact form let's click on the edit button and we can see the shortcode over here so we can't actually edit this contact form here this shortcode is a code that activates another plug-in that shows this contact form and we can see it says WP forms ID equals eight so that's the ID of the contact form because you can have a lot of different contact forms for example the work with me page has another contact form so it needs that idea in there title equals false so don't put a title description equals false so don't add a description to the contact form so that code displays the contact form but how do we control that code let's go see how to do that so what we're gonna do is we're gonna update it to save all of our edits then we can go to our website comm four slash WP dash admin to get back into the admin and on the left side we're gonna see this WP forms so this is another plugin that we downloaded that was downloaded automatically when we installed this website and it's actually pretty awesome so we can click on that and we can see these three different contact forms we have the footer subscription form the contact page form the work with me page we didn't go over how to change the work with me contact form because I wanted to do it here all you do is click on that and then you can change it right there but right now we're changing the contact age forum so just go ahead and click on edit now we can see this visual builder for the contact form which is really awesome we can add all of these different things to it and you can upgrade to the pro version if you want a whole bunch more options but everything that we need is right here so we don't need to do that so let's just do the free version so you can click on it and we can change the label of the first name if we want we can say your name or keep it as first name the format do we want it to be simple do you want it to be first name last name it's kind of cool do we want it to be first name middle name last name not my favorite let's just keep it simple we want to make it as simple as possible for people to fill out their information is the first name required so if it is required then it's gonna not allow you to submit the form unless that's filled out so yes that's required I want to know people's first name the field size is it small medium or large pretty understandable placeholder does it have something in there before you even type so a lot of forms do this we don't need it but a lot of forms do it that's up to you do we want to hide the label or show the label we want to show it because then people won't know what it is unless it has a placeholder there's different layouts that we can choose from but we're not gonna mess with that next we can go to last name and your email for your email it's definitely required for confirmation email sometimes people put in their email address wrong so it's a good idea to confirm it twice and as long as they're matching it'll allow you to submit the form if they're not matching it'll say hey your emails aren't matching please make it right I'm not going to enable that I think let's just take the risk and not annoy people so much for your message we can change all that we can go to Advanced Options and change the size of it maybe we want it to be small or large but we'll just keep it as medium for this field if we click on it we can see that there's different checkbox options and we can change that and it is required you've got to know that you're loved special or resilient or something else or excellent how about that we can also add any field so if we click on it then that field will show up and we can drag to reorder it let's say we want to add in their phone number here and we can require that we can go to advanced and we can change all of that information also alright but we're not gonna do that so we're just gonna delete that and press ok and if we go to settings we can get the different settings so what's this contact form name what's a description the form CSS class which is a little advanced we might go over that though the submit button when it's submitted it sends but it takes a second so it can say sending we can enable or disable the anti-spam honeypot for notifications we can see all the different notifications and this will notify us when we get in so it's gonna send us an email saying that they filled out this form and here's all the information that they filled out so this is where the admin email goes you can change it to a different email this will be your default email though the one you signed up WordPress with email subject so when it's alerting you that someone filled out the form we wanted to say their first name we can also put in if we wanted first name filled out the form so from we definitely want that to be from their first name and then from email let's say it's at WordPress at your website com that's usually the thing to do reply to who are we going to reply to so we want to reply to their email which was named your email so that's not your email that's actually their email so for message we want it just to be all of the fields so all of the fields that they filled out we want to end the message so we get all of the information in our email next let's click confirmation this is the notification that they will get once they fill out the form and they've clicked submit we can show them a message saying thanks for contacting us we will be in touch with you shortly or we can make it a different page and send them to a page that we make saying thanks for contacting us really big so I Thank You page we can create one or we can redirect them to a URL we can make them go to Google after they submit it that'd be weird but you can do it I'm just gonna make the confirmation type message because that's what most people do and it makes the most sense so we can click Save and we will save all of that and if we click on embed we're gonna see that shortcode that we're able to put into our website in that form will show up so you just copy that and you could paste it into the form so let's exit out of there visit our site go back to the contact page and we can see the form right here and if we fill it out let's just put in my name is Tyler my last name as the mmm my email is ty at Tyler com it's not really it's Tyler more gmail.com and my message is it is great and I mandate that I am loved and submit that and it is sending we see that confirmation thanks for contacting us we will be in touch with you shortly and now we can go to my email and we can see if it's really sent there so go to gmail.com and then we can see it right here it's sent from WordPress at happiness compass com that's alright and it has all the fields in here my fur name last name my email or their email it is great and I mandate that I'm loved and it's sent from happiness compass and that all looks really cool and really nice so that is the email that you will be receiving from your customers and now we can exit out of there and we are all done so now we've learned how to edit pages really well but what if we want to learn how to actually create a entirely new page and of course we can do that and it's super easy to make a new page let's go back into the dashboard by hovering over our website name and clicking on dashboard then we can click on pages and we can see all of our pages and we can click add new let's exit out of here and let's add a title so this title is gonna be why me basically why choose me as a life coach under page attributes we're gonna select element or full width and now I'll make it so that the element or page goes all the way to the sides instead of being boxed in then we can click Edit with Elementor and we can begin creating our site but this is a little bit terrifying just looking at a blank canvas again of course we can build it piece by piece like we did with the home page and I did show you already how to create sections from scratch but I usually don't like to do that because it takes so much time and there's already pre-built things that you can add to this so instead of clicking the plus we're gonna click the folder an element or itself is gonna give us a whole bunch of different options to choose from to import a page as a starting point so we can scroll and look through all of these and see something that really integrates with our website really well maybe this one and click insert and just wait a little while for it to insert and we can see that it imported all of those images and the pages and it looks really really great we can click this button and we can press ctrl Z to undo that and click the folder and now we can go two blocks so blocks is like pages but instead of the entire page it gives you different sections and I actually like this better because then you can mix and match the sections that you actually need together in order to build your website so there's a whole bunch of different blocks and we can choose different categories and maybe we want a hero category which is like the top of the website and we can insert this one right here and we can see that that looks pretty cool we can go to this column up here and we can delete it and we can go to this section and we can delete it we can change the text right here so maybe we'll put why me and we'll Center it then we can click on this menu and we can drag in the text editor and go to style and let's make the text color white so that we can see it and we can Center that and we can click on the read more button we can change that you should be getting pretty good at this by now maybe we'll make it cops and under link we'll put contact and we can select the contact page and Center the whole thing so that looks pretty awesome now we can click on the entire column and go to advanced and change the padding so the padding is a spacing around it and we can make it zero then we can go to the whole entire section and for content width we can change that right here so the text doesn't go all the way to the side because if it goes all the way to decide it's kind of hard to read and it doesn't look as good for minimum height we can say that it'll be 85% of the screen or a hundred percent of the screen or whatever we want we can go back to style and we can choose another image if we want click on that let's go ahead and choose Kristina again and insert media and that looks really awesome it looks like we totally customized it in any way that we want we can go to background overlay and maybe make that a little bit lighter so she pops a little bit more we can add in a shape divider at the bottom if we want maybe we'll make it a little bit wavy and change the height so that looks pretty cool next let's click on the folder again and let's add another section let's add a testimonial section and click on insert and we can insert some testimonial and instead of customer reviews let's just do reviews and we can go to style and typography and we can bring that down a little bit and we can see all these really cool reviews here scroll down a little bit and click on the folder icon again and we can go to call to action scroll down or up let's use this one right here press insert and that looks pretty cool and we can change this right here type in get in touch all right good let's click on this section here and go to style and we can change the color of the text so it pops a little bit more then we can go to this button section and instead of purchased now we'll put in contact now start typing in contact that contact page is gonna show up we can click on it and now that contact button will link there pretty awesome let's click on the entire section and go to style and for background we can click classic and then we can change the color and we can change the color right here maybe we want it to be a green that looks a little crazy we can make it lighter looking better looking better or we can change the background type to gradient so it'll start at green and then I'll end at a darker green or a lighter green or a different green for a location you can change that location it's a very subtle effect but it's kind of cool we can see it so now it's like one green to another green and it's very sharp and we can change that angle looking pretty trippy all right that looks pretty cool actually I like it we can click on the folder icon again by scrolling down and clicking on it and we can go to let's see portfolio that seems pretty good portfolio of our work and we can click on insert and that portfolio will insert it's looking a little dark though because they use all black and white pictures so let's change the headline to gallery let's delete that right there we don't need it let's go to style and typography and bring that down a little bit it's a little bit too big let's click on the gallery and we can see over here that there's four images in the gallery let's clear that and delete them goodbye and let's add some images all right which ones these are pretty cool one two three and a four all right so create it then insert and now insert all of those images into the gallery and that looks awesome now we can update that and we can view our page and now we have this awesome page let's close that with our reviews and our get in touch looking awesome and our gallery so that's how you create a page from scratch but also not from scratch because that would take a lot of time so of course you have complete control over it you could build all this from scratch if you wanted to but why would you want to so we created this wimey page but if we look up top at this navigation we're not gonna see a wimey link so how would you ever get to this page we're gonna save that for the next action editing your navigation to edit your navigation is super easy all you have to do is click up here to customize then click menus and click on main menu then click add items and we can see all of the different pages and we can scroll down to that wimey page and add it now that will add it to the menu and we can see it up there it says why me we can click hold and drag and rearrange it so now let's put it right after about and we can see the order changes right here we can also indent it under about and that will make it a submenu under about so when we hover over about we can see why me but I'm gonna exit out of there and not save any of the changes because I don't actually want that why me page there so that is how you edit the navigation menu pretty easy the next thing that we're gonna do is edit the footer the footer is at the bottom like your feet and this will show up on every page so on this website we have a custom footer so to edit it hover over your website and go to the dashboard then go to appearance and header footer builder and we're gonna see our footer right here then we can click Edit with Elementor and we can begin editing our footer so I'm just gonna edit this subscribe right here delete that text then below it I'm gonna edit it also and I'm just gonna pay some text in and we can see that it has all this gap on the right side and we don't want that and that's probably because of the padding so I'm gonna go to advanced and see that there is a 200 margin I'm just gonna put 100 so it looks a lot better and below it there's a space right here so I'm gonna edit the spacer and delete it next we're gonna see all these social media links and of course you can change this we've already done this so I'm gonna speed this up a little bit and we can check it right here alright that looks really great we can also add a different section let's add another section here go to the entire section go to style go to classic and change the color that looks pretty good next go to advanced and go to padding and let's add some padding to it so it's a little bit bigger 20 at the top and 20 at the bottom we can edit this it then click hold and drag it down now we can click on the pencil icon to edit and delete if you wanted to add your own you can of course drag in a title go to style make it white typography change the font size to 16 go to content and center it then we can start typing in her copyright info right here happiness compass copyright 2019 all rights reserved then we can click on the whole section and go to style and go to border and we can make it as solid for the border width we can make it one at the top and we can change that color to white so it gives a little bit of separation but make it a little more see-through so a lot of that background color shows alright that's looking really awesome if we click on this form again it's that WP forms and IRA showed you in the contact section how to edit that so we don't need to do that we can update that and we can view our website and we are all done with the footer the next thing that we're gonna do is create our logo you can of course keep your logo just like this it looks great and it's fine but I'm gonna show you how to make your own to do that let's open up a new tab and go to logo maker calm that's L OG o ma ke r dot c om there's no e in there and we can exit out of this video cuz I'm gonna show you how it works and we can search for something let's search for something that is relevant maybe nature and we can click on the different categories and we can see all of the different nature icons I think this website has over a million different icons we can click on this one cuz it looks like it's a hiking one of course you're gonna spend more time creating something even better but this is just an example so we can resize it right here we can click hold and we can drag it we can rotate it that looks pretty good we can flip it horizontally by right clicking and flipping or flip vertically we can undo by pressing ctrl Z if you're in a pc or command-c a friend of mac and we can add this type text tool so let's click on the text tool and let's type in her name happiness compass we can change the color by just dragging this around over here and we can click hold and drag it to the center if we want we can make this one smaller click hold and drag line it all up that looks pretty good and just for fun we can add a shape so let's add a square and let's make that square over here let's right click and send to the back and now let's make that square bigger so let's make it a rectangle I dunno my shapes most of them at least some of them all right so let's change the height of it that's looking cool and we can change the color over here we can make it lighter and that looks okay that looks okay no I mean for a few seconds I guess alright we're gonna right click and we're gonna delete that and we're gonna delete that we just need this icon right here I'm gonna make it bigger and we're gonna drag it to the center and we're gonna click this color right here to change the color we'll make it like this green color and we can save the logo so just click Save and the logo is now saved no thanks we'll download it right here that tiny little button exit out of there it's downloaded to our computer and we are all done creating the logo but just because we've created the logo doesn't mean the logo is in our website so how do we get that logo into our website well it's super simple all we have to do is click on customize and we can click on layout and then header then we can click site identity then we can change the logo instead of removing it and upload files and select files then we can choose our logo that we just downloaded and press open it's gonna upload the logo and we can select the logo and we can skip cropping because we don't need to crop the logo we don't need to cut it and we're gonna see that logo up here and we can click display site title or don't display site title to remove the title or show it and we can make that in line logo of the site or uncheck it and I'll go above it let's make it inline and for site icon that's this icon up here so it's called a fav icon so when people have tabs open a whole bunch of tabs they can identify your site by this little icon up here so let's select that image and let's select the logo and press select and then don't crop and we can see that little icon up here a little preview of it skip cropping and we're gonna see it up here so now we have the logo and the site icon up here it's not the best logo in my opinion but it's looking pretty good and that was just for demonstration purposes all right so we're gonna publish that and we're gonna exit out of there and that is how you insert your logo anytime someone clicks on the logo they're gonna be taken back to the homepage so congratulations we are all done with the section of creating our basic website the next entire section that we're gonna do is creating our blog so for this part right here we're gonna edit our blog page our blog page has a bunch of blog posts on it so we're gonna change the way that those blog posts are displayed but first before we do that I'm gonna get rid of this logo right here I don't really like it so I'm just gonna click on demise then I'm gonna click layout and then header and then site identity and I'm going to remove this logo all right so it's just gonna be here text up here and I like that better then I'm gonna click publish and exit out of there all right once we do that we're gonna change the way that the blog looks so let's just go ahead and click on blog and right now this is the way that the blog looks and if we click on edit page we can change it so just click on that and we're clicking on this instead of edit with Elementor because this blog page wasn't built with Elementor it was built with a new Gutenberg editor with another plug-in and that plugins called ultimate add-ons for Gutenberg and what that plug-in does is it gives you a whole bunch of more options to edit the way that your blog is displayed on the blog page so we can see this is what the blog looks like and if we click on it we can go over to the right side and we can change the background it can go from gradient just to a color or back to a gradient which will do one color to the next color we can make that second color green and the first color blue and we can see how it changes that looks pretty cool we can undo that by pressing ctrl Z or command Z if you're on a Mac we can change the blog heading to anything we want put in articles I'm just gonna keep it blogged though we can change how big the heading is by putting in h1 h1 is the biggest and h6 is the smallest so we can text align it to the left or Center is usually what most people do we can add a new block by pressing this + button and add any of these blocks right here we can put in a paragraph and type this is a blog page dot-dot-dot we can click this button and remove the block we can click on the background again and it's asking what post types is it our posts is it some pages is it media we're gonna keep it as our blog posts because we want our blog posts to show up there what categories maybe we have different categories in our blog and we have a whole bunch of blog pages with different categories and we only want the books categories or the nature category or the self-help category to show right here here's where you can choose the categories we can make it all categories just like that number of items how many blog posts do you want to show maybe want to show a hundred items how many columns are there are there three are there four remember it's gonna look a little bit different because the screen is much wider when you're on the actual blog page how should the images show up should we turn them off or turn them on the content what should be in the content should we show the author or hide the author should we show or hide the date should we show or hide the comments how many comments there are what about the description or the excerpt should we show that how long should it be there's so many different options to choose from here you can really customize it in any way that you want and make a really cool blog page for the read more link we can turn that off or we can turn that on we can open up the link in a new tab so that when someone clicks on the article it opens up in a new tab rather than opening up in the same tab I don't really recommend that but you can do it for the read more button you can put learn more instead of read more but that would be weird so I'm just gonna put read more for typography what do we want the font size to look like I want to be bigger or smaller whatever you want we can reset it by clicking on that button for the button border do you want it to be solid how wide and do you want it to be do you want the button to have rounded corners how much padding around it should it be you can make it a little bit up and then put some padding on the side so it actually looks good instead of bad that looks kind of cool but not that cool so let's reset all of that for the typography what do we want that to look like maybe we want the title tag to be in h2 so it's a little bit bigger or an h4 so it's a little smaller or we can just keep it as an h3 we can change the font size of it the meta is this area over here so like the date and who wrote it how big or small do we want that to be the excerpt or the short description we can change that we can make it bigger or smaller or anything that we want we can almost change anything for the font weight its how bold it is maybe we want it to be a little bit lighter or maybe we want to be a little bit bolder for the colors we can change all of the colors the title colors the background colors that might look cool a green we can also do a custom color for the title we can make that white or red or orange or black we can make the meta colors orange or blue or white or black for the excerpt color we can make that blue or black or any color we want for the spacing it's how much spacing is there so for the row gap that's over here and we can see we can make it more or less for the column gap we can make that more or less and now bring the articles closer from below or further content padding is the padding inside so we can make that none or we can make that a lot we can change the content padding for the mobile website that idle spacing we can change that the meta spacing I mean there's just endless options to change alright let's update that and let's view our page and we can see all of those changes right here but what if you want to make a blog from scratch this website when we imported it already came with a blog but what if you want your own blog page and you want to make it in the way that you want to make it and you want to make it not from an imported page but absolutely from a scratch well this is how you do it you would hover over your website name and go to the dashboard and we need to make a new page before we can do anything so let's make a new pages by going to pages and we can click add new and let's add a new blog page so this isn't going to be a blog post this isn't all of your posts this is the page that holds all of your blog posts so I'm just going to name this blog - if you don't already have a blog on your website you probably just name it blog but we already have a blog page on our website so blog - and we're going to publish that and we can view the page and we can see that this is just a regular page so how do we make it a blog page well we can go - back to the dashboard and go to settings then go to reading and it's gonna say under reading settings what is your post page so what is your blog page basically and we're gonna say that that is the blog - and then it's gonna give you some other options like how many blog pastes you want to show it most and is it visible to the search engines I recommend that so keep it unchecked then click Save Changes and go back to our pages and find our blog - and now we can view the page and now we can see all of our blog posts are on that page because we set it as our blog page or our post page so that's how you do it from scratch without using Gutenberg for the ultimate add-ons for Gutenberg plugin alright but how do we edit this page we can edit it in the customizer so click on customize and we can go to layout and we can go to sidebar and under our blog post archives we can make a sidebar there so let's say we wanted to have a left sidebar and a lot of people do this because they want to be selling you know their book on the side or they have some sort of affiliate product that they want on the side or an introduction that says hi this is me or maybe they want to search on the side or some categories so let's put in the left sidebar or you could put it in a right sidebar and we can preview that by clicking on that and that's looking pretty good actually I kind of like that we can show the controls again and we can go back and now we can click on blog and blog archive so now here's where we can control all of those things again but it's just another way of doing it we can show the full content of the blog so it's actually gonna show the entire post which I don't know if I recommend it I think it's better if people just can click on it and then read the entire thing but it looks kind of cool let's just keep it now on excerpt and we can see the content is summarized the first part of the content is shown then we can show or hide the featured image and we can show it again we can show and hide the title I don't know why you'd want to do that but you can and show it again for the meta content like the comments category and author you can show and hide that you can also rearrange things by clicking holding and dragging the title and blog and that looks pretty cool and we can rearrange it again and put it at the bottom and for the blog meta we can hide the comments so if anyone comments it would show up how many people commented right here we can hide the categories or show the category and of course we can hide or show the author the publish date the tags and all of that for blog content width we can make it less wide or more wide or we could just put in a custom value and keep it at a thousand then we can see what that looks like pretty cool we can go back and back again keep on going back back back then we can go to typography and go to blog and we can change what the font looks like or at least the font size we could change that to 32 or go back to 40 or keep it at 36 and all of this on the right side here let's see how we can change that we can keep on going back and back and we can go to widgets and for the main sidebar these are the main sidebar widgets we can click hold and rearrange and we can see it reflected on the side right there we can also remove anything that we want like recent comments and we can click on the edit button and we can remove that there and we can add widgets so maybe we want something here we can do all of these we can add pages or products or searches or images or a calendar maybe that would be cool all right now we've got a nice little calendar on the side of our website I don't know why don't ask me cuz it's cool people need to know the date I guess at a title or we could just delete it all right we can publish that and we can exit out of there and now we have a nice sidebar we can go back into our dashboard and we can go to pages and we're actually gonna put that blog too in the trash because we're not really gonna use it we already have a blog and select it and choose delete permanently and apply alright so that's how you create a blog page and edit all the settings to your likings now we can go back and visit our website and we can look at our blog and in the next section we're gonna edit the way the blog posts look so to do that let's click on one of the blog pages and we can see that it looks like this right now but we can go to customize click on layout click on sidebar and blog post it says no sidebar we can make it have a left sidebar or a right sidebar just like we can do on the blog page and we can preview that so this is when someone clicks into a post they're gonna see this all right or we can do no sidebar and we can go back and now we can click on blog and this is gonna be instead of the blog archive the single post so click on that and now we can take away the featured image although I wouldn't recommend it images are cool people like images so we're gonna show that again and for title we can make sure that goes away but I don't know why you'd want to do that again or we can show it I recommend keeping it for sure for comments we can get rid of that that'll show how many comments there are if there is a comment we can get rid of the category or we can get rid of the author we can show the Polish state which might be cool or we can hide it how much width do we want it to have we can make it a lot more narrow which sometimes is cool because it's easy to read or we can make it wide all right and we can go back and back again and back one more time we can go to typography and we can go to blog and we can go to the single posts and we can change the font size of the title alright we can make it bigger or smaller and we can click on publish and that's how you change your actual blog post and what it looks like pretty simple stuff tons of settings that you can mess with to make it exactly the way that you want the next thing that we're gonna do is delete our posts so right now we have a whole bunch of blog posts that were imported when we imported this website but they're just made up so let's delete them to do that let's go back into the dashboard and let's click on posts then we can mark off this button right here to check off all of them and then we can move it to trash and we can apply now all of those posts are deleted and we can go to trash we can select all of them and we can delete them permanently and apply so that's how you delete all the posts pretty simple the next thing that we're gonna do is add new posts and add new post categories so if you want to have a blog on your website this is where you would add all of the blog content and we're gonna be adding it with WordPress's new guttenberg editor instead of Elementor because I feel like the Gutenberg editor is just a lot more structured the Gutenberg editor is the editor that is actually built into WordPress Elementor is a plugin to add a new post if you're not already in the post section click on post then click add new then we can add a title just like we did with pages I'm gonna call this 2018 in view because this is one of Christina's actual blog posts all right it's gonna tell me to start writing I'm just gonna paste in some content that I already have that she wrote and we can click on this button right here and we can insert after and we can add in a heading type in a heading right here and we'll paste in some more content click this little menu button right here and insert after click on the + add another heading type out another heading go to layout elements and let's add some columns paste in some content click the add block button let's put an image in here and upload an image go to the desktop let's find that image open that up we'll wait for that image to load and we will paste in some other content click the menu button and insert after so we can insert a new block after click on the plus button and add a heading this should all be getting pretty easy for you paste in some content maybe right here click on it and click on this button to transform it and maybe we'll make this a verse it's kind of cool you can transform it back into a paragraph if we want or we can make it a quote we can click this section here and insert after to add another block click on this plus button put in a heading type some content add a new block let's make a list an ordered list for one two three type out some list questions all right now we have all of that done so that's pretty cool click on document and go to categories and if we want we can add a new category so that when someone goes to our website maybe they only want self help so they can click on the self-help category so just click add new and we can add categories their tags are similar to categories where you can add in some tags and people can click on those tags and they can see all of those posts from those tags we can set a featured image right here which is a good idea because it'll give us some interesting image to look at and we can upload files and select files and this should all start to become very familiar to you so we can click on some image and open it up and we can select image and that will be our featured image all right so for excerpt on your blog page this is the preview of what is written if you don't have something here then I'll automatically generate one from you just by taking the first couple sentences and making that the excerpt all right under discussion you can either allow comments or allow pingbacks and Trackbacks pingbacks and Trackbacks I feel like are getting a little outdated but they allow you to see when other bloggers are talking about you and we can click that on or off alright so now we can publish that and we are going to publish it and now we can view our posts or we can view it here so just click on that and now we have this featured image at the top which looks really cool and we see all of this information with that image right there and it looks pretty good I am liking the way it was laid out that looks cool and people can leave a comment and you can comment back and start talking with people we can see right here that the category is uncatted Erised so how do we add a category I went over it briefly but let's go a little bit more in depth and how to do that let's just go up into the dashboard and let's go to posts and let's click categories all right so we can see that we have a news category here and we can delete that because that was added and we can add a category I'm just gonna put in self-help here is Category slug it will generate automatically for you and it has no parent so it's not a subcategory of any other category description we don't need to fill in so we can click on add new category alright so we have the self-help category let's add another one let's add nature maybe we have a bunch of nature blog posts let's add that new category alright now we have nature now we have books a books category for all of our books that she's read and wants to review and summarize so now we have a books category alright so we have all those categories let's go back to all posts and let's click on 2018 in review and we can click on quick edit instead of just regular edit and instead of it being uncatted eyes we can click on books or nature or self-help or whatever we want or we can edit it here so we can click here to edit it and go back to categories and we should see that books nature and self-help let's just make it self-help and unmark on categorize because it's not uncharacterized anymore and let's update alright it's all done updating and let's view our posts and we can see that that is now in the self-help section but how can people get to the self-help section if that's everything that they want to read so they just want to read self-help blog posts how do we make that happen one of the ways is we can add that category to the menu so let's see how to do that hover over your website name and go to menus and we want to add it right under where this blog is and if we move our mouse down a little bit we can see categories and we can see that self-help category or we can view all and we can see all these categories so we can just select it then we can click Add to menu it'll add after everything so you have to click hold and drag it and then indent it under blog so that it's a submenu under blog now we can save our menu we can visit our website and then we see blog and we can see all the self-help post if we click on that if we had more post we would see more of them on this page so it's just gonna give us a little excerpt and then it's gonna tell us to read more if there is more blogs then we would see them under right here so that's it that's how you add categories to your website and that's how you put it in the menu so that people can actually navigate to it the next thing that we're gonna do is add MailChimp to our website MailChimp is the thing that's gonna allow people to subscribe that way you can collect everyone's emails and market to them through email marketing a lot of people say the email marketing is more powerful than social media marketing so more powerful than Facebook or YouTube or Instagram and you get a way better return on your money so let's see how to do that but before we do that I want to get rid of this self-help sub menu right here so I'm gonna hover over the name it didn't go to menus and then I'm gonna scroll down and go to right here and remove it then I can save menu alright once we're done with that we can go and visit our site and if we scroll down all the way to the bottom we're gonna see this form right here but this is really a wordpress form this isn't a MailChimp form so when someone fills out this form all its gonna do is email you and let you know that someone filled out the form it's not necessarily gonna capture their name in an email marketing tool so that you can email them over and over again and bulk email people and set autoresponders and drip campaigns and everything like that so we actually want to change this into a MailChimp form instead of this form so let's go back into our dashboard and let's go to appearance and header and footer builder so that we can control that footer and then we can edit it with Elementor alright so now we have control to edit this footer and if we see right here by clicking on the pencil on the left side says WP forms blah blah blah so this is just a wordpress WP forms form let's open up a new tab and let's go to MailChimp com and this is one of my favorite email marketing tools and one of the biggest reasons is because it's free up to 2,000 people so if you want to use another email marketing program after 2,000 people you can just export all the people out and import it somewhere else but just to start off it's super good to learn on something that's free and studying to having to pay money and sign up for it all right now we're gonna login I'm not gonna show you how to sign up because well you should know how to sign up for things so we're just gonna login and I already have Christina's username and password so I'm just gonna log in alright and now we are logged in the first thing that you want to do when you log in is to create a list so when someone signs up on that footer that will go to a certain list rather than maybe someone signs up for you know a free chapter of your book that would go on to another list and you would send them another set of emails so click on audience and under manage audience we can view audiences and we can see that we have an audience here with eleven contacts and eleven subscribers and how many of them were opened and how many of them are clicked so this is the list that she already started I'm gonna show you how to make a new list by clicking on create audience so create a an audience and then give it an audience name so I'll just call it happiness compass newsletter and i'll put the default from address at hello at Tyler comm even though it's really gonna be her email address and we'll say it's from Tyler Moore even though we're gonna change it and it's gonna be hers this is the reminder of how people signed up so it's a good idea to put this in here because you don't want any of your mails to be marked as spam so I'm just gonna put you're receiving this email because you opted in at our website happiness compass com all right for forum settings do we want to enable double opt-in which sends con text and opt-in confirmation email when they subscribe to your audience so once someone subscribes it would send them and opt-in so an additional opt-in email that says are you sure you want to subscribe we can put that on or off and we can enable gdpr fields and do we want a summary of daily notifications sent to our email maybe we do and then we would click Save all right but I'm not gonna save it because she already has an audience so we're just gonna go to under manage audience few audiences and she has an audience right here so she has a list of people and here's the list of people and we can add to this list by clicking on signup forms so just click on that and this is gonna be the place where we're able to generate the code to paste in that form so under form builder let's select that one and let's start building our form so if we scroll down we can see all the fields like first name last name email and we can click hold and rearrange it if we want and we can add anything over here like a number and that will add it we can change the field label by putting in phone number if we want so because this field was labeled number it'll only accept a phone number we can mark that field off as required or not required and then we can save the field we can delete it by clicking on the minus and then typing in delete and it will delete all the data in your list too so be careful about deleting things all right she has this checkbox under here that says I want to subscribe because then different options and that was the fuel type checkboxes so you just click on that to add it and then you would add or subtract options right here we can add an option by just clicking on add an option and then we can save the field and that option is added we can of course subtract it and then type in delete again and press Delete to delete that option alright that looks good we don't need to save that because she had it just like she wanted it we can embed the form by going to embedded forms and clicking on select and we can preview it right here this is what it will look like so we can copy and paste this HTML into our website we don't need to know exactly what it does but I guess you could learn if you want it so I'm just gonna copy it and then go back to our website and we're gonna delete this right here so just go to the pencil and click on delete under a search widget we're gonna search for HTML because we're pasting in HTML code so just the first one is great and we can paste in all of that code right there by right clicking and pasting or ctrl or command V but now we can see that we have a little problem and that is that this form is white in the background and it doesn't really match the style of our website so it looks okay and it's fine just to keep it like that if you don't want to really dive deep into this next section but I want the website for Christina to be perfect and you might want your website to be perfect also so this is gonna get a little bit advanced but I think that you can follow along I'm gonna make it in a way where the beginner can follow along and you'll learn something really cool so we're gonna learn a little bit of HTML and a little bit of CSS HTML can be thought of as the bones of your website so like your bones it's like the structure of your website the CSS is the design or if the HTML was the bones then the CSS would be the clothing how everything looks so the HTML would control things like this subscribe up here it would just say subscribe or the buttons or the forms but the way that it looks for instance this white background would be controlled with CSS or for instance the font size would be controlled by CSS or for instance the color of the button would be with CSS but the button itself would be HTML HTML stands for hypertext markup language super nerdy and CSS stands for cascading style sheet so it really is the style of the website fun fact it's called cascade style sheet because everything cascades on each other so any style that goes after the previous one if it's the same style it would overwrite it and I'll show you what that means in just a second but first let's edit the HTML so we have this H - H - and this is just heading - if you remember when we were making our blog we had in h2 or when we're making our website we had a heading - well this is the code that those visual website builders generate for you so we can see it right here in anything between the first h2 and the last h2 is what it affects so we can just delete that because I don't want a heading there so that was us deleting HTML and here it says we recommend moving this block to the head of the website so we're gonna move this to a different part in order to separate out our CSS and our HTML that's usually the way to do it you don't want to intermingle HTML and CSS even though we can we can have it all show up in the same place but ideally we want to have our HTML in one place in our CSS in another place so from this style up here to this style down here that's where all the CSS is so what we're gonna do is we're gonna copy all of the CSS in between the two styles well actually not all of it all of it except for the comments and you can see the comments are started by a forward slash star sign and they're ended by another star sign then forward slash so we're just gonna cut it out and then we're gonna delete the style to style and now you can see on the right side what all of that CSS styling did and we can see that it changed the color and it changed the background and it did a lot of things so this is all of the form without the CS it still has some CSS that's inherited from the website itself but we're not really gonna go into that if you wanted to change some of the styling without doing CSS you can click on this entire column here and you can go to style and you can go to typography and under any of these you can change the style so like that what Elementor is doing for you right here it's actually adding the CSS for you but it's doing it in a visual way probably a much better way but it's still important to know how all of it works and we can change all of this right here but I'm gonna clear it out because I want you guys to learn how to do it manually just so that you know and so that you can have finer control over your website so we can click on update and we can update all of that and then we can preview our changes and we can see that the form let's exit out of here looks absolutely terrible but if we go to customize and remember that we copied the CSS style then we go to additional CSS the Astra people have already added some CSS here we can see on the left side and we can add in our own by pasting that CSS so there we go we've pasted that CSS it looks sort of jumbled the one on top looks a lot better so we can sort of organize it a little bit better we can add the right spacing and we can see right here every CSS statement starts off with what it controls like the background and then a value on the right and it's ended by a semicolon so for this background we can change it to red which is scary so let's delete that and delete clear left and we can delete the font so we delete everything if you can see the pound sign MC underscore and bed underscore sign up and then in between the braces is where all of the statements go so now we can start typing in these statements here so we can type in font size : 14px which stands for pixels is in a semicolon so that's one statement so anything inside the MC embed signup which is this whole sign up on the right side that would control we can do color : white semicolon and that will make it all white we can't hide the controls and we can see that and we can do all of that manually and you can look up on Google CSS how to change color and I'll tell you you don't need to memorize every single thing you just need to know how it works all right but how will we change this subscribe button let's go ahead and publish that let's open up a new tab and let's go to happiness compass calm or whatever your website is scroll down and there is an even better way to control your CSS in a much easier way and for this we're using the browser Google Chrome which I recommend anyways it has some developer tools already with it in every single version of Google Chrome well maybe not the mobile version but every single desktop version that will allow you to more easily change the CSS so we can right click and go to inspect for the button and it will open up this crazy-looking thing so we can see it has a class button and that's right here so it does the MCM bed signup dot button so that means it's controlling not only what's in the form but also just the button inside the form and then we have the background color here and we can change it right here we can change it to blue or green or whatever they make it very easy it's almost a visual thing but you have control over everything so border-radius and we did this visually with Elementor so we can put in 25 px but now we can do it by hand coding it alright and we have all of these different options for color we can change the color and that looks pretty good and now what we can do is we can just highlight everything and copy it ctrl or command C so one thing to know is that we're copying it because this isn't actually on your website you can do this to any website and it doesn't affect a website it just affects how you are viewing the website so let's copy that right here and we're gonna paste that in then we can add the braces and then we can put all of the statements inside there so we only need to copy actually the statements that we changed so we don't need to copy all of them just the ones that we changed because the ones that we didn't change it's gonna be like that anyways so just copy the ones that you changed and we can paste it in there and remember I told you it's called cascade stylesheet so sometimes in the theme the CSS will override this CSS so we're not seeing any changes here because there must be something within element or or something within the theme that said this button background color is another color after our statement right here so the one way to get around that is by putting not important so if after all of this color right here this hex code if we put exclamation point important which means not important that means everything else is not important just listen to this and we can delete this right here because that was already there and for border-radius we can do the same thing we could put everything after this is not important so override any of the settings alright and that will round it right there if we click on this colon hov it's gonna change the hover State so we can click on it and that will make it the hover and we can change the color here we're gonna change it to orange and we can just copy all of that and we can paste that and if we read the CSS we can see that it's gonna be MC embed signup button hover so it's only gonna affect the hover of the button inside of the signup form so that's getting very specific and we're gonna put a not important on this to just good measure to make sure that this CSS setting overrides anything else and now we can see that that works we're gonna publish that and let's exit out of there and exit out of here and let's refresh this page and we can see that our changes are saved all right let's exit out of there and if we fill out this form right here let's put in Tyler Moore with the email hello at Tyler calm in my reason for subscribing I think it's relatable and subscribe and it says thank you for subscribing pretty cool now if we open up a new tab and go back into MailChimp and then go to our dashboard and go to our audience we can see that we have one new contact and you can view the contact and you can see me right here and we can see hello at Tyler and we can see my name and I want to subscribe because of whatever and we can see where it came from it came from the embed form and there's a whole bunch of things that you can do in MailChimp I'm not gonna get super into it but you can do automated mailings you can sort people into different groups you can get reports so many so many different things and it's free so that's good alright that's exit out of there and this is really bothering me this down here where it's like so close to the words let's use some CSS to fix that too I should have done it when I was editing but this is just gonna annoy me so let's go and highlight where we want to edit right click and inspect scroll down a little bit so with that we can see it and we can see it right here it's too close the Box is too close and we can just hover over any of the different sections and we can click on it to see what we want to change so here it is right here and so you can go to a new line by clicking on something and then pressing tab or just clicking on it and I'll add a new line and we want to change the margin remember when we change the margin and element tor well it's like the same thing here so margin press tab and I'll add that : for you and then let's do 10px so alright we have done that we can copy all of that and that looks much better now I won't have anxiety every time I look at the website and let's click on customize and go to that additional CSS because remember it's not saved on our website when we just do it with the Google Chrome so we need to actually save it to our website and we can look at it right here we can see that it didn't really save it's only saved when we actually save it to our web site so additional CSS and we can paste that in and now you're on your way to becoming a web developer all right then we can click on publish and exit out of there and we are all done adding the MailChimp form and editing the CSS and even if you didn't understand it all I think you're getting a grasp of what Elementor is doing in the background and you have a grasp of how HTML and CSS work so we are all done with the blog section now you have all of the tools that you need to know in order to create a really great blog the next thing that we're gonna do is the shopping cart section so how do we take payments on our website and how do we edit all the settings that we need to edit in order to really control the shopping cart the first thing that we're gonna do is just go over all of the general WooCommerce settings if you don't see any of these settings then you need to download the WooCommerce plugin but since we imported the website it also imported the WooCommerce plugin so in order to edit all the settings just hover over your website and go to the dashboard alright once we're into the dashboard you can click on whoo-ha murse and it'll take you to the orders page and we can see all of our orders right here we can go to the coupons page and we can add a coupon we can create our first coupon so maybe now that you have MailChimp installed you can email all of your subscribers a coupon and give them 10% off or $5 off or free shipping or whatever you want with reports you can see all of your sales in a nice graph so you can see how many sales you got that day or that week or that month or for the entire year we can click on customers and we can see all of the customers for that time period and we can see our stock see if any item is low in stock that doesn't really apply for this website but it does apply on most websites I think we can go to our settings and we can fill out all of this information for country and state I'm just gonna put United States and I live in California so I'm going to put that selling locations maybe I don't want to sell to all countries maybe I want to sell to specific countries or exclude certain countries maybe we don't sell to North Korea you could do the same thing for shipping locations this is a section where we enable coupons or disable coupons for our currency I want to change it from pounds to US dollars so we could just start typing here United States dollars all right that all makes sense press Save Changes and that's saved for products it's gonna ask us where is our shop page so we could make any of the pages the shop page and now overwrite all the settings and that will become our shopping cart page we're just gonna keep it on 4th slash shop I know that doesn't make a lot of sense because we have our shop on actually a work with me page but I'll show you how that shop works in just a second but what we can do is we can set a page to the shopping cart page or we can add in some short codes in order for the shopping cart page to show up on whatever page that we want and that's what we did with the work with me page we can redirect to the cart after a successful addition so when someone adds something to the cart we can have it just redirect so they can start checking out instead of just a message that says this was added to the cart we can enable or disable product reviews we can show verified owners on the label of the customer reviews and we can enable star ratings on reviews we have so many different options you can control almost anything so we can control everything with shipping we can add or delete payments so payment options and we're gonna do that later for the accounts and privacy we can allow customers to place an order without in an account or we can force them to make an account in order to place orders I recommend you letting guests place an order without an account because why make them go through more things in order to give you money and we can allow customers to log into an existing account during checkout we can allow account creation we can select a privacy policy page we don't have one yet but we probably should and there's so many different options for emails I'm just gonna press leave cuz we don't need to save that this is where it's gonna notify us on which email that things happen so when we get a new order it's gonna email me currently we're gonna change that over to Christina obviously when someone cancels our failed or the orders on hold you know it's gonna email either me or for the processing order it's gonna email a customer for a completed order it's gonna email a customer for refunded or it's gonna email the customer so this is where we control where all of the emails happen the email sender options it's like where is it from and what's the from address who's email does it show when it actually emails the customer for the email template this will show us what the email is gonna actually look like so we can click here to preview what the email is gonna look like in right now this is what the email looks like so we're gonna be able to change all of that the colors and everything like that in order to have her colors so for base color we can change that and let's get rid of the extra pound sign and we can save changes now we can refresh this and we can see that the base color has changed and now that goes along with her color scheme a lot better for the Advanced section we can see the cart page and where that is I don't really recommend changing this too much I mean you can but not really recommended the checkout page and the my account page and the terms and conditions we can also force secure checkout but we're gonna do that later I'm gonna show you that later and we can see up here that it's not secure and I'm gonna show you how to make it secure in just a little while alright and there are more advanced features down here that you don't really need to worry about at least not yet so that's the overview of the WooCommerce settings it's pretty organized and I feel like it gives you a really fine control over how your shopping cart can be the next thing that we're gonna do is add our products and categories or in this case we're gonna be adding her coaching packages but maybe in your case you have real products or maybe in your case you have other services or maybe in your case you have digital downloads like PDFs that you're selling so how do we add products it's super easy we can go over here and click on products and we can see we have all of these products already imported but let's add products from scratch so we're gonna click on this button to select all of them then we're gonna move to trash and click apply once that's done it's gonna delete all the products and then we can go to the trash and we can select them all and we can delete permanently apply and you can say bye-bye to all those products then under products we're gonna click add new and now we can add her coaching packages but you can of course add any of the products that you want it doesn't need to be coaching packages it can be physical products so I'm gonna call this the base camp and if we scroll down a little bit we can see that there is a price here so I'm just gonna enter in a hundred and fifty and we can enable or disable reviews right here and if we scroll down we're gonna enter in a product short description this is the description on top strangely enough the top description is the long description so the one above this is the long one and this one is the short description but this shows on the top super-weird so I'm just gonna type in some stuff here and I'm gonna set my product image and I'm gonna upload files and select files and I'm gonna select a file that I think is good an image that I think is good and click open wait until that uploads in set product image alright once our image is in there we can always add a new category so products can go into certain categories I'm just gonna put this in the coaching category and I'm gonna click publish all right now we can view our product and we can open the link in a new tab by right-clicking and pressing open link in new tab and we can see our image the title the cost and we can add it to the cart people can also review it right here and give it a star rating or we can take off that review which I showed you at the start of the section alright but let's exit out of there and let's add a new product all right I'm gonna go a little bit faster because we already did this I'm gonna add in a title then scroll down put in a price something new here we can edit inventory by clicking on inventory and we can enable stock management so we only have three of a certain product once it sells out then people won't be able to buy anymore that's pretty cool we can also go to advanced and enable reviews we already saw that scroll down add the product description and set an image then we can add it to a category and we can click publish now let's add a new product put in the product name scroll down at a price scroll down at a description set the product image and add it to the category and click publish let's do that one more time add a new product put in a title put in a price scroll down at a description set the product image let's go ahead and make that bold actually put it to the coaching category and click publish fun stuff I know all right now we can go ahead and visit our website and go back to the work with me page then we can scroll down and we can see all of those products right here if you don't remember how those products showed up let me show you but first we can see this 90-day habit-forming right here is kind of messed up so let's change that to get back to the product easily let's right click and open the link in the new tab go to the page and then we can just edit the product right here once we do that we can scroll all the way down and where it says 90 days habit-forming let's remove that space and we could just make this bold also sometimes you run into weird little glitches like that that's just the way it works then click update and we can exit out of there refresh and hopefully that will look much better great all right so we have all of these but we have 400 then we have a hundred and 50 is a 900 and 700 that kind of makes me crazy shouldn't it be a hundred and fifty four hundred seven hundred and nine I think so so how do we change that we can click on edit with Elementor and we can click on this blank space right here which is the shortcode to show the products so it says product limit equals four so it's four products column equals four then we can put order by equals ID so this will order it by how it was added to the website so we added the ones that cost the least first and then the most last so if we order it like that then it will be in the correct order hopefully and yes it is so that's awesome we can exit out of there and go to customize and then go to WooCommerce and go to product images and we can change the way the image looks so we can crop it one to one we can do a custom ratio so like four to three which looks pretty good or we can make it even wider and make it five by three then we can click on publish and we can exit at it all right so that's looking pretty awesome what we also can do is learn how to edit the categories so we can hover over our website name and go to the dashboard then go to products and then go to categories so just like our blog categories we can actually add categories to products so for example if you have a clothing company and you have different clothes you definitely want a pants category and a shirt category and maybe even a hat category they shouldn't all be jumbled together you can add these categories to the menu so that people can find what they want so we have some categories and we can add more right here and you can actually make it a parent of a category so you can have all your clothes under one category and then all your accessories under another category so your clothes would be in the clothes parent category and your accessories would be in the accessories parent category you can add a description or uploaded an image for the category and you can add a new one so that is how you add a category you can of course delete categories and you can see how many products are in each category so we're just gonna delete the self-help category and keep the coaching one all right so that's how to add new products and categories to your shop the next thing that we're gonna do is edit the shop page and for this website we don't really need to do it because we added the shop with the shortcode to the work with me page but usually you'd want to have a shopping cart section on your website so I'm gonna show you how to edit that if you did so we can just go to pages and scroll down until we find our shop page and we can go to quick edit and we can change that page name if we want maybe to store or something we can also view it or we can visit our store up here so we visit our store and then it has all of our products so we can see all the products but how do we edit how this is laid out so it's not laid out with Elementor its laid out by the theme settings itself so in order to edit this page we can click on customize and of course once we're in customize we can add it to the menu we can add the shop page to the menu but we already learned how to do that so I'm not going to do that now and we can go to layout and then WooCommerce and then go to shop and here is where you can edit all of those settings so maybe we want to shop instead of to have three columns to have two columns so just two products or we can make it three or four and we can see all of that right here how many products per page do we want do we want twelve or ten or eight I usually like to do it in threes or fours so like nine twelve or fifteen because I usually like to have three or four columns on my websites on my shops so product image hover style this can be none or swap images swap images would be used if you had multiple images like a gallery and then when you hover over each product then you would see the second image in the product gallery when you hover over the shop product structure so we can hide the title which will hide it we can show the title which will show it surprisingly we can hide the price or the short description by just clicking on any of that we can show the ratings or hide the ratings we can add to cart' if we want and when you click on it that would add it to cart or we can hide that we can also show or hide the category and they're all in the coaching category all right let's just hide that though we can make the width of the shopping page anything that we want by making it a custom width and we can change that right here so maybe we want it to be really narrow and that'll squash everything in or we can change it back to normal which is 1200 and that looks about right to me let's just make it default though and that looks really awesome we can go back and back again and back one more time we could also go to menus and go to main menu and then we can add an item and we can add this shop page to the menu so we would just click on this plus button and add it to the menu and now you'd have the shop page in the menu so that's probably how most shops would operate it's not how this website operates so I'm not gonna save it I'm just gonna exit out of there and press ok so that is awesome we are all done learning how to edit the shop page the next thing that we're gonna do is add a payment method so right now we have a store or a shop but we have no way of allowing people to pay so first we're gonna add PayPal PayPal is the easiest way to accept payment but it isn't necessarily the best way but if you need to get up and running super quick then this is the way to do it so what this is gonna do is someone's gonna go on your website and then they're gonna fill out all of their contact information but not necessarily their payment information then they're gonna press submit and then it's gonna open up another page and that's where they're gonna enter in their payment information so they're gonna enter in their payment information on PayPal instead of on your website so it's a much easier way to do it but obviously some people aren't gonna want to have their customers enter in the payment on the PayPal website but let's learn how to do it real quick so you hover over your website and go to dashboard and then go to WooCommerce and go to settings then click on payments and where it says PayPal we can enable all right now that that works let's in a Boal PayPal standard and then enter in our email address I'm just gonna put in mine we can enable the PayPal sandbox so we can do a test payment but you need a developer account so we're not gonna do that receiver email I'm just gonna put in my email also and then I'm gonna click Save Changes and that is literally it you obviously do need a PayPal account hooked up to the email that you entered so you can do that at PayPal com but let's go to our website and let's go to the work with me or to your shop or whatever let's click on something add it to the cart and we can view our cart or we can go up here and view our cart and we can proceed to checkout and now we can see that we have PayPal enabled right here so they would enter in all of their billing details let me just enter in that real quick and then click proceed to PayPal this is gonna open up PayPal and the website's gonna send all of the information over to PayPal and people can enter in their credit card number and you can accept payment that way so that's the easier way to do it I'm just gonna go back to the website and we are all done with adding paypal to your website not the best way but definitely the easiest way before we can add my favorite payment method we have to secure our website and as you can see and you've probably seen during this whole tutorial it says not secure up here and it says not secure because anything entered in here can be intercepted by a third party so the information that is entered on your website needs to travel through the internet and anyone can intercept that information like your internet service provider and see what your customer has entered so we need SSL encryption in order to encrypt that message so that anyone that intercepts the message the message will be encrypted so in order to take credit cards on your website you need to encrypt things like the credit card number in order for the credit-card company to allow you to accept credit cards on your website all right so to get SSL all we have to do is go to our dashboard scroll down and go to plugins and go to add new then we're gonna search for a plug-in called SSL what do you know the first result should be really simple SSO this is the one that I like the best click install now and then click activate alright it still says not secure so we have to go ahead and activate SSL or we can scroll down from the plugins page and go to settings so we can see right here that an SSL certificate already is detected on our website now hostgator comes with free SSL that's one of the reasons I really like them in most modern or up-to-date hosting companies should include this for you if you see that this is not included then you should question your hosting company or you should just live chat them or call them on phone support and say hey can you install an SSL and can you do it for free it used to cost money but since Google updated their Chrome browser to show this not secure up here all the hosting companies are now including it for free Google also ranks you higher if you have SSL and you'll be able to see that because your website will have HTTPS and it'll show a secure lock up here if you're on Chrome so if you don't have SSL basically you can throw a fit but you probably do have it so just continue all right so you can click go ahead and activate SSL and now we have SSL is enabled on your website now what this might do is it might log you out and we can see we have an X here because not all of our content is showing up with the HTTPS some of our content is still HTTP like our images and things like that so we need to figure out how to date that but we can just visit our site and it does indeed log us out and we can see now we have that HTTPS then our website comm instead of just the regular HTTP so we need to log back in because your browser thinks that this is a whole new website so we're just gonna go to forward slash wp-admin enter in our username and password and login now that we did that we can go and visit our site and we can see that we do have the HTTPS but it says your connection is not fully secure and why is that and that's because some of the images like I said before our HTTP Happiness compass comm Ford slash you know picture JPEG and some other pictures are HTTP happiness compass com for size JPEG so they all need to be the same and they all need to be HTTPS so how do we rewrite all of the images and everything in order to be HTTPS and if we successfully do that then we'll get a secure lock if we go to the work with me page we can see that we have that issue also words your connection is not fully secure so we need to change that so let's go to the dashboard and luckily for us Elementor has made a tool in order to rewrite all of the URLs and update them from HTTP to HTTPS so we just go to Elementor and then go to tools and go to replace URL so we're just gonna copy it from up here and then this is the new URL so we're gonna say the new URL is https and the old URL let's just paste that in there is HTTP so it's gonna find and replace everything that is HTTP with HTTPS our website comm all right so it's gonna find everything with HTTP and replace it with HTTPS then just click place URL and it's gonna say 34 rows affected or however many it affected then we'll Save Changes and we can go to general and sometimes I just like to regenerate the CSS I don't think it actually does anything but just for fun I like clicking buttons and we can resync our library just in case again I don't think it's necessary it's just fun to do then click Save Changes and now it should have changed it so that if we visit our site hopefully maybe possibly we can see that lock button and our connection is fully secure so your customers connection will be fully secure they can feel safe entering in their credit card number and knowing that a third party is not going to intercept it along its way we can go to the about page and we can see also that that is fully secure we can go to the work with me page and we can see again that is secure so you might want to check all of your pages and if you find one that isn't then what you want to do is edit that site with Elementor and make a space or a dot or change a little something and update it and then it will be secure but it looks like all of my pages are secure so we can go to contact and everything looks great and secure so that is how you install ssl now your website has a ability to do the next section so for this part we're gonna integrate my favorite payment method which is stripe and this is gonna allow you to take the payments on your actual website so to do that just hover over the website and go to the dashboard then click on plugins and we're gonna add a new plugin so click add new and we're gonna look for WooCommerce stripe alright so it should be the first one by loose and we're gonna install now once installed you can click on activate once it's activated we can go back to WooCommerce and then go to settings then we can click on payments and we can see this stripe right here and we see all of these other ones but we don't need to pay attention to them we just need to pay attention to this one we can check off PayPal so that that's not working any more an enable stripe then we can click on setup and we can scroll down a little bit and it's gonna ask us for our test publishable key and our test secret key so we need both of these keys in order to test a see if stripe is working so let's open up a new tab and go to stripe comm and for this you're gonna need to sign up for stripe so I'm not going to show you how to sign up for something it's pretty simple so just click on sign in and we can enter in our email address and our password but you would probably be signing up it's gonna send a verification code to our phone number and we can enter that in right here and sign in so we have our get your test API keys right here and they're blurred out because I don't want people knowing the keys so we're just gonna paste them right here and for the secret key that's this one right here we're just going to paste it here all right so now that's enabled and these are just the test keys so people won't be able to buy yet it's just gonna test our shopping cart if we scroll down we can see payment request button and I recommend to disable that we don't really need that sometimes it makes your website act really weird where there's a double pay button or a double Add to Cart button so we're just not going to do that then click Save Changes alright now we can go back to our website and we can go back to our cart or we can go to the work with me page and we can add this one right here if we click on it add it to the cart and we can view our cart proceed to checkout enter in all of the information and if you see over here on the right it's in test mode so what we can do is we can just copy this credit card number which obviously isn't real and paste it then we can make up an expiration date but make it up so that it is real in the sense that it's not already expired and your credit card CBC number so just make that up then press place order and now it's gonna act as if that was a real order so it's gonna send us a confirmation email and it's gonna send the customer an email and it's gonna give us this nice thank-you your order has been received and it's gonna tell us all the information about our order so now we can go back into our dashboard we can go to WooCommerce and we can see that we have an order so we have another order right here it's also gonna email us and it's also gonna email the customer saying that they got an order so that looks pretty cool we can click on this eye right here and we can see all of the order details like the billing address the email a phone number so we have all of our orders organized and we can mark that order as completed we can say okay we ship that out it's now complete so there it is completed so now we can go back to settings and we can go to payments again and we can go to where stripe is and we can click on manage what we're gonna do here is disable the test mode and enable the real payments mode so this is gonna be that you can really take payments on your website now so these are live publishable keys not your test publishable keys so we can click on get your live keys we can copy those keys and then we can paste them right here and we can do that again we can copy the secret key and we can paste it right here then we can click on Save Changes and now your website really has the ability to take pain so we can close that tab we're all done with that we can visit our website we can see that there are no products in the cart because we just bought some products so we can go back to the work with me click on the Basecamp click on Add to Cart view the cart and proceed to checkout and now you can really pay with your real credit card so this will allow anyone almost in the entire world to pay with credit card right into your bank account so that's pretty cool all right so that's how you integrate my favorite payment method which is stripe on to your website the next thing that we're gonna do is sign up for Amazon affiliates so that when we refer people to Amazon we're gonna get paid that money so we can open up a new tab and just go to amazon.com pretty popular website and if we scroll all the way down we can see become an affiliate so what this does is when you have a product on your website that Amazon sells and you link to it then you get a small commission so here we are affiliate - programmed amazon.com and this is how you make money you join you advertise and you earn great let's click join now or you can just login if you already have an account but I'm gonna press join now for free then press create your Amazon account and enter in all of the details pretty simple stuff I'm gonna speed through this a little bit and let's press create your Amazon account it's gonna email me some verification stuff go ahead and verify let's speed through this and then we enter in all this information and you should be able to figure this out so I'm just gonna speed through this - all right then we're just gonna click on next and now we're gonna enter in all of the websites or the YouTube channels or whatever it is right here that you're gonna advertise the Amazon affiliate products on so then just click on add and that's all we're gonna add you can add up to 50 websites then just click on next and it says is there anything directed at children under 13 I'm just gonna put no self-help is not for children under 13 sorry kids confirm that then it's gonna ask us what our preferred Amazon Associates store ID is I'm just gonna put in Tyler or then it's gonna ask us what our website is about I'm gonna put traveling really about his self-help but that'll do then it's gonna ask us all these different questions and you should be able to figure them out it's pretty easy so I'm just gonna speed through this a little bit and I'm gonna put books and fill out this information I'm just gonna say content or niche websites and blog so how do you drive traffic to your website I'm gonna say email social networks forms SEO lead generation who knows just fill it out as best as you can how do you monetize it just you know whatever maybe you don't even monetize it yet I'm going to say other affiliate programs and display advertising how do you usually build links blog editor blogger WordPress type ad how many unique visitors I'm gonna say 500 one to 5,000 what's your main reason for joining to monetize my site yeah how'd you hear about us from the Amazon Web site a lot of questions enter in the CAPTCHA press next verify our phone number and press call me now and then now we'll wait we'll enter that in congratulations it worked greeted the Terms of Service and finish all right now we have signed up for the Amazon Associates program with our unique ID now enter in your payment and tax information and we can do that later all right we can copy this ID that's not really needed but everyone can press later and now we have signed up for the Amazon affiliate program thrilling the next thing that we're gonna do is insert our Amazon affiliate link into our website so right here we can search for our product for example we can type in a keyword like book or we can browse for our product and we can look at all of these right here and we can also see the earnings overview for the last 30 days obviously we haven't made anything yet and we can see the summary for the month and again we didn't make anything we can see some recommended products but obviously that's not what we want right now and we can search for a book right here I'm just gonna search for the confidence code all right and press go this is the book right here and we can press get link and we have three different ways on the top to get our link text an image text only or image only and we can customize the color right here and the title right here and the price right here the second option is text only to grab this image this text in image you would scroll down and you would copy the code I'm gonna show you what that looks like on the text only so you see the text only you see the HTML down here you could just copy it and paste it into your website or we can copy the standard link which is much better and this has all of our affiliate IDs and everything right here as we can see here and that's how Amazon knows to give you credit for referring people to them we can also get the short link so this is a link that has all of the information of the standard link it's just a lot shorter the third option is image only so it's just going to show just like this just an image and you can copy the HTML right here alright so now I'm going to go back to the website to edit the books page and add the real affiliate link to the book that we've listed on the page because right now it's just an image it doesn't click to Amazon and it doesn't give us Commission for recommending them so I'm just going to click on books and let's add the affiliate link right here so let's go to edit with Elementor and let's click on this 'edit pencil icon and we're gonna add the link right here so when someone clicks on this they go to the Amazon site and we get commission or credit for it so let's go back to the Amazon Associates and we could either use text only and see this short link or we could use a standard link either way I'm gonna use the short link because it looks a lot better so just copy that if then just paste that right in here paste and for our link options we want to open this up in a new window so it'll open a new window and they'll still be on our site and then we can click it here and we can do the same so get it now we can paste that in there and go to the options and open up in a new window and we can update that so now when someone clicks on that it goes to Amazon and we get a little commission for it so now when we click on the book it should bring us to amazon.com right to the page and now you can have Amazon sell them on the book and get that commission all right and so hopefully they'll add it to cart and they'll buy the book all right if we close that and close this too we can look at some of the other link methods so we see this one right here and we have the HTML here so we can copy this go back to our website click on this button and type in HTML this is the way you would insert HTML into your website we're just gonna add it up here and we'll paste the HTML so that's a way of putting it in and that might work really well for like a sidebar or something if you have it on your website but our page looks much better than the way Amazon formats it it might take a little bit more time but it's much better so we're just gonna delete that we can also go to image only and we can see it right there and just copy the HTML go back to our website and paste it so there we have it but again our image looks better and it has those cool effects and everything so just wanted to show you how to put that in there if you did come across a situation where it made sense so I'm just gonna update that and if we go over to product linking and go to product links we can search for any products right here and there's a whole bunch of things like promotion tools reports and help and up here is our account settings and payment history and manage your tracking ID and a sign out but after you sign up you don't really need to go to the affiliate site every time you can just go to amazon.com and we can see our Amazon Associates site stripe right here and let me show you what that does so because we're logged into our Amazon Associates account we can just search for a book and once we click on it you can get the link from any of the three different options text image or text and image and you can just copy it right here and it's the same thing as going into the backend of Amazon and doing it the other way so you can mess with all of the settings in the same way that's exit data there and if we want to see our earnings we can click on earnings up here and that'll bring us to the back end where it shows us all of our earnings and the reports and everything like that so that is how you sign up for the Amazon affiliate program other affiliate programs work in the same way where they give you a link to put on your website and if people click the link then they give you credit or money or whatever it is they offer usually money and you are able to monetize your website that way so we're just gonna close all of those tabs so we can go back to our website and obviously we would do that on every single book and we are all done with that step the next thing that I'm going to show you how to do is one of my favorite things to do because it's super easy but offers a lot of really cool features so what we're gonna do is install Google Analytics Google Analytics allows you to see how many people go to your website from where they're located which pages they visit and a whole lot more so how do we install it it's super easy let's just open up a new tab and go to analytics.google.com or you could just search for Google Analytics in Google and we can start using Google Analytics by clicking on sign up you want to make sure that you're logged in to your gmail account before you sign up because it will make it a lot easier so click on sign up and then we can fill out this information like account name website name because we added the HTTPS to our website because we added the SSL we're gonna choose HTTPS if you don't know what I'm talking about just go to your website and see if it says HTTP or HTTPS before your URL so we have HTTPS and we're gonna put in the website right here great we can select an industry whatever industry you are a part of just select it right there United States I'm in Los Angeles so that's good I'm just gonna make sure that they're all checked and do what's recommended then click get tracking ID and accept their policies are you really going to read all of that probably not and except this one - feels like you're signing your life away I accept and we're gonna put no thanks and we're gonna exit out of here because I'm gonna show you all this and it says your tracking ID so we can go ahead and copy this we can go back to our website and go to our dashboard and what we're gonna do is install a Google Analytics plug-in on our website to make it super easy so just go to plugins and we're gonna add new and guess what we're gonna search for you'll probably be very surprised that we're gonna search for Google Analytics I know shocking all right then there's all of these different plugins and they have millions of installs and you probably be good with installing any of them but we're just gonna go with the first one here and click install now wait for it to install it didn't click on activate alright now we have our Google Analytics plug-in activated we can click on Google Analytics right here and we can click on authorize plugin now it's gonna ask us for an access code so just click on get access code that's gonna launch the Google Analytics but first we have to choose our account then click allow and now it's gonna give us this crazy thing right here I'm gonna blur this out because I don't know if I'm supposed to share this with the internet or not paste it in there and save access code all righty if you want to clear the authorization you can do that you can clear cache you can report and reset errors but we have it all installed all right so we have all of our information right here we can click on save changes to save all of that and now we can close this tab and we're on our Google Analytics so we can just click on home and we can see the active users right now if we had someone on our website which we don't because the maintenance mode is still on then it would show right here how many people are on your website we can get a real-time overview and we can see that number right here and you can see where the pages that they're visiting are and where they were referred from and you can also see where they live if someone was on the website right now it would have like a blue dot of where that was so if like a hundred people are on your website you can see all these dots across the world really cool we can also go to not real-time by clicking on audience and going to overview and we could see by you know country or city or everything like that so it's a whole lot of things that you can do with Google Analytics those things will give you a lot of information that is super helpful because then you can start creating content that people are really liking because now you know what top content people visit your site for so we can close that tab and we can go to the dashboard and we can see our Google Analytics dashboard right in here now so that plugins really cool it pulls all of the data from Google Analytics and you can put it right into your website so you might need to learn what all of this means but basically users is how many users go to your website pageviews is how many pages those users viewed bounce rate you want this number to be low it's the amount of people who go on your website and then just leave how many people came from organic search how many pages per session how much time on average page and then page load time so how fast is your website and session duration so during the whole user session how long did they stay on your website for so all of that is super interesting Google does favor websites that have a lower bounce rate so people aren't just coming on your website and leaving and they also favor a website that has higher session duration so people that go on a website and just stay on there for longer all right so that was one of my favorite things to do which was installing Google Analytics and I would definitely use Google Analytics to track your visitors the next thing that we're gonna do also has a lot of great benefits and is super easy to do and that is compressing our images so sometimes we upload images that are just too big for our website and it makes our website really slow so I'm gonna download a plugin that allows us to optimize and compress our images it's not gonna make the image look any different but it's gonna make our website load a lot faster it's super easy we just need a plugin so click on plugins and let's add new so just search for you image optimizer aawww I don't know how you're supposed to pronounce that all right then we can see that you image optimizer and click install now we can see that it has seven hundred thousand active installations and wait for it to install and it's installed now we can go ahead and click on activate and it's all activated so that was super easy now we can go to settings and go to the image optimizer and we have all these different options you can get the API key if you purchase something but the regular thing is just fine and we can choose our different compression types pixel-perfect is great because it's gonna look exactly the same and we have all these different options up here I'm not going to go for all of them once we do that we can click on media and go to bulk optimize alright it's going to ask us if we want to force re optimize so if we've previous we already optimized it then we can skip the ones that were already optimized so we can check that off or not check that off I haven't optimized anything yet so I don't need to click on that and then how long do we want to pause between images sometimes if you have a really bad web server or host then this can overload your hosting company so you want to add some delay in seconds but we have a good host so we're just gonna keep it at zero and do them one after another without any time delay all right now we're gonna scan for um optimized images and it's gonna scan and it found 426 images so we're gonna start optimizing those and now through the magic of editing I'm gonna speed this up also [Music] and we've optimized 426 out of 426 we can go back to our website and it should load just a little bit faster alright so that's how you optimize your images so that your website will load faster and your users will be happy and they'll stay on your website longer plus Google also ranks websites that run faster higher in the search engines the second to last thing that we're gonna do is turn off maintenance mode so right now when a regular visitor goes to our site they're gonna see that our site is under construction so we need to turn that off to do that just hover over the under construction and choose off once we do that we're gonna see a red little dot and that means that our website is live so the entire internet can now see our website which is awesome and the last thing that we're gonna do is logout and it's super easy all we have to do is hover over this part right here and click logout and now we can go back to our website by pressing on this button and now we can see our website exactly how the user would see it so that's how you create a website step-by-step with no steps skipped you learn how to make a regular website you learn how to make a blog you learn how to add affiliates and a shopping cart so really congratulations please remember to comment rate and subscribe I'm Tyler Moore thank you so much

Channel: Tyler Moore

Views: 151,139

Keywords: Make a Website, Create a Website, Build a Website, How To Make a Website, How to Build a Website, How To Create a Website, Make a WordPress Website, Build a WordPress Website, Create a WordPress website, WordPress Tutorial, How To

Id: JLCRnG_FZB0

Length: 197min 49sec (11869 seconds)

Published: Wed Jul 24 2019