if you're looking for a complete how to make an astral website for beginners tutorial to build a fully functional astra theme website at absolutely no cost to you then you've come to the right place [Music] [Music] oh [Music] then [Music] hi i'm bethany and i love to write right now i'm at cabo san susi in ojo rios jamaica one of my favorite travel spots i recently got the idea to make an astra website so i could share my writings with others and offer my readers practical advice i wanted my website to be mobile friendly easy to navigate and simple to update i also needed a shopping cart and a blog it turned out so well that my husband and i decided to make a tutorial to show others how to use astra i hope you enjoy making your website as much as i have fun making mine thanks bethany hello i'm yoda and welcome to my youtube channel in this astra tutorial you learn how to build a website that has an amazing intro video professional logo eye catching graphics and all the bells and whistles the pros use at absolutely no cost to you this video uses all the current web design and web development techniques to build a fully responsive website that automatically adjusts to meet the screen needs of any computer laptop tablet phone or any other handheld device to get started the only hard cost we have is web hosting and that's where your website lives that's going to run us three to ten dollars a month with your web hosting you'll get a free domain a value of 15 as well as an ssl key which makes your web pages secure and that has a value of about 99 as for software requirements there are none everything we're going to need we're going to do online as for system requirements this website tutorial is compatible with both windows and ios systems all you need is your favorite browser and access to the internet and you're ready to go i recommend chrome and firefox as browsers of choice as i've had some students in the past that had complaints about compatibility issues with safari opera and internet explorer now during this course if you run in any troubles just leave a comment below the video and i'd be more than happy to assist you and don't be shy about asking for help i've been a webmaster instructor aka the web yoda for over 20 years and i love to hear from my students but if you could please pay it forward if you could like the video subscribe to the video share the video tell your friends about the video those are the kind of things that help get the word out there so other students like you can find this video there was something else oh at the end of this video i'm going to discuss the four biggest mistakes people make that drastically hurt your search engine placement turns out the solutions for these four things are really easy and they're free so i think we're ready to get started so without further delay let's go ahead and look at the website we're going to build today today we're going to build bethany's new website which is selfdashtastic.com we'll learn how to do an intro like you see right here and we'll learn how to add it to our website now notice that this text flies into place at just the right moment once the home page is revealed you're going to be able to learn how to do that effect as well as all the other effects that are shown in this website now definitely don't get intimidated i know this is going to look really fancy it's going to look very professional but you're going to be able to do all this trust me it's not going to be a problem at all now you're not just a passive participant sitting in the audience watching a magic show as i put the show on you're actually going around behind the scenes how to do all this it's very simple it's very easy and you're going to be surprised how quickly you can build this entire website if you don't have a logo we'll learn how to make a logo scroll down notice how these items animated out we'll learn how to do that we'll learn how to make these category sections in many cases those are services for example scroll down we'll learn how to do that animation but we'll also learn how to remove the background from that animation so that it just has the girl coming in we'll learn how to do these call to action areas and notice how they also animate it in from the right and the left and then we'll learn how to make the buttons grow when we hover over them scroll down we'll learn how to make an image carousel in this case it's just images of words of wisdom but they could be any images you want and then we'll learn how to do another animation similar to the one we did above and then if you need an email newsletter we'll integrate that into your website and then we'll learn how to make this footer at the bottom it looks exactly the same on all pages [Music] under about we'll know how to make this fancy header and then we'll learn how to integrate text so that it can wrap around a picture like it does here and then we'll learn how to import the words of wisdom section so we don't have to create that again we will not be adding a shopping cart as part of this course but once we have completed our website i will provide a link to the video shown here in case you want to add the shopping cart later we'll learn how to make this super fancy gallery notice as we scroll down how neat those are when they slide in together and this is also a light box so any of these we pick on it'll bring it up and we can scroll to the left or the right and close that out and then we'll learn how to make a fully functional blog with a unique header and then the individual blog items like this and when you click on one of those we'll learn how to format the blog post to have all these extra features nicely formatted like that and then we'll learn how to make this contact us page where we have a really nice clean form like this and then near the bottom we'll have a map and the map can zoom in and out and change it to whatever you need it to be now you should be able to learn everything you need to know in about two hours time i know on the surface it could look intimidating super complicated but trust me you can do all this i've got step by step all the way through showing you exactly what to do and if you're running any troubles just leave below the video i'd be more than happy to help you out so we're ready to start on our website but before we can build a website we have to have a place for our website to live and that's what web hosting does for you otherwise you'd build a website on your local computer but only you'd be able to see it you want to be able to have the world see it so you have to get hosting so everybody else can see your results finding great web hosting solutions in the matrix of hundreds of choices can be frustrating at best you have to understand that nearly all web hosting review sites make sure that the web hosting company they are affiliated with always get the best review so basically that web hosting company is number one to them because they get paid if you decide to use that company i have been hosting websites for over 30 years with the first five years being me supplying my own hosting i have used at least 10 of the hosting companies shown here either personally for my clients obviously not all web hosting companies are created equal and there are only a few that stand out from the rest but how do you reveal the best web hosting provider with all the fake reviews out there as puzzling as this might sound i was able to find my answer while not allowing my own bias to interfere for me i like to turn problems inside out in this case i was looking for the web hosting review that reveals a web hosting company that sucks the least so first the quick answer to the question of who is the best web hosting company for me is simple hands down it's hostgator hostgator is definitely the best web hosting solution for me my clients and for web yoda but the obvious next question is why is hostgator the best choice well web yoda did some research to try to find some authentic web hosting reviews and they settled on some results from pc magazine you have to understand that pc magazine has been around for nearly 40 years providing essential technology information to the end user for our purposes every year pc magazine does an editor's choice award to determine the best web hosting companies and shown here the top six web hosting companies for this year with hostgator being number one it turns out the hostgator has been rated the number one web hosting provider by pc magazine for many years running basically hostgator collectively has the features you need their server reliability is amazing their 24 7 support is amazing their prices are good or better than anybody out there i personally been using hostgator for more than three years now i host over 200 domains and websites with them webiota also decided to go with hostgator for all their needs in fact webiota partnered with hostgator and as part of that partnership webview to students receive up to 75 percent off plus a free domain name now for you to take advantage of this offer you simply need to go to your browser and type in hostgator.com front slash web yoda now this takes you to the partner page for hostgator in web yoda and it reveals our three choices for hosting plans currently as part of this partnership hostgator is going to offer us a free domain name provided we sign up for one of their annual plans and it turns out this is actually the most affordable choice for us if we scroll down we can reveal the pricing for each of the plans all three of the plans come with one click install so that means when we go to install the software it's gonna allow us to build our website we can just click a link and it'll install everything for us they also come with unmetered bandwidth which means we don't pay for the traffic that comes to our website no matter how small or large that might be and finally they also come with a free ssl certificate which typically runs around 99 a year and you say okay what is that what do i need that for well that's a little lock up here in the top left it allows your page to be secure so the information going to and from your website is secure at this point you need to decide which one of the plans is best for you for our purposes i'd recommend the hatching plan if you have one domain or the baby plan if you plan on building multiple websites and then if later you find you need additional features you can just upgrade to the business plan and pay the difference so in your case you probably need the hatchling plan which is just a single domain so we'll choose that the first step is to pick a domain name that works best for your purposes in my case for this example i'm going to use choose my domain name and if we click to the right it'll tell us if it is available and in our case it is available so we're going to scroll down the next item is domain privacy protection and basically what they'll do is for 14.95 a year they'll hide your name your address your information like your email and stuff like that from people being able to see it now for me it's going to be on the website anyway so i don't feel like i'm giving anything away so i'm not going to choose to pay for that next we already picked our package type we chose the hatchling plan because we only have one domain so we want to look at our billing cycle within the billing cycle if you purchase one month it's 5.48 but it's only for that first month and then the price goes up if you go all the way up to 36 months it's going to be 2.71 and it's going to be 61 percent off now to get the free domain you're going to pick 12 months 24 months or 36 months so let's go ahead and pick the 12 months it says 76.40 but let's see if we can do a little bit better than that now we're going to pick a username in my case i'm going to pick admin yoda and a security pin then we want to put in our billing information and we'll scroll down to additional services now we don't need any of these services but i'll explain them real quickly the first is an ssl certificate we already get that for free so we don't need to add that the second is for them to protect us from hackers i know firsthand they're going to give you protection whether you ask for it or not so there's no reason to pay for this additional thing they're going to want to protect their servers from both the internet and from you so they're going to definitely stay on top of this next we don't need to pay for an email for our domain name i'm going to show you how to make an email forward for your domain at no cost at all next they offer a backup service where it'll do daily backups but i know firsthand they do monthly backups for you i'll go ahead and give you a video that'll show you how to make your own backups without having to pay them a regular fee like that if you're looking to make scheduled automated backups of your wordpress website where you're in full control as well as make manual backups at any time that you can store locally on your own computer then you'll want to check out my wordpress backup and restore video at some point we'll turn that off and finally hostgator offers some seo tools for nearly three dollars a month but there's plenty of free tools out there so we're not going to worry about that if we scroll down you want to make sure the web yoda coupon code automatically spawned in here so you get the best possible price and we look down and we see that now we're at 33 dollars which is really a great deal that's money for the whole year it also includes our free domain name at no cost to us and that comes with 24 7 365 support instant activation of our account money back guarantee which is awesome 45 days collectively all these features leave me feeling very confident that i'm making the right decision today we're going to scroll down we need to agree to their terms and now we're ready to check out but in my case i own the domain i'm going to use so i'm going to do one last thing at the top so scroll to the top and i'm going to choose i already own this domain then i'm going to change this to say choose your domain name.com that's the one i own so now we go back down to the bottom and we're ready to check out now and my purchase is complete it is now setting up my account once our hostgator hosting account is complete and ready to go you're likely to get a survey that looks like this one but at this point we're going to go ahead and go off script and save ourselves a lot of time and a lot of questions if you didn't have this video to follow obviously following these steps would probably get you to the goal that you wanted to do but we're going to be able to get there faster and easier we're ready to set up our email forward and install wordpress so to proceed you're going to go ahead and head to your email and you want to look for an email from hostgator.com that says your account info at the top if you purchase a domain name while setting up your hostgator account then the next piece of information will not apply to you if you already owned your domain name and didn't purchase one with this process you're going to need to get your domain name to point to your hosting area to do that you need to point your domain name to the name servers for hostgator all of my domain names live at godaddy.com so i needed to go into the dns at mygodaddy account and point that domain to the hostgator name service as shown here now if you're not using godaddy.com it should be a similar process and if you have any trouble just contact your domain company and they can give you further assistance to log into our hosting account we're going to need our username and we're going to need a password we're going to take that password and we're going to copy it to the clipboard and now you want to go to the control panel which is how you access your hosting space so we'll click on this link and that takes us to the control panel login page now my username and password are already there so i can just choose login and that takes you to your hostgator control panel also known as your cpanel as promised i want to quickly show you how to make an email forward under popular links you can find email forwards here if for some reason it doesn't show up under popular links you can click on email on the left and that'll bring up all the email options and then you can choose email forwards now we're ready to set up our email forward we're going to choose add forwarder and we're going to put in this case i'm going to put yoda there's my domain name and where do i want it forward to i want it to forward to in my case yoda at www.com scroll down add forwarder and now any email sent to yoda at chooseyourdomainname.com will be sent to my email address yoda at www.com obviously this would be your domain name and whatever email you wanted to send to now we're ready to install wordpress if we click on hostgator at the top left it takes us back to the control panel at the time of making this video there was a wordpress installer inside the popular links but this particular method of installing wordpress has gone away for a much easier method so on the left hand side under our website section we're going to choose softasculus apps installer and that takes us to the softasculis options at this point simply choose wordpress as the option and this will display the wordpress installer so to be completely thorough i wanted to throw in one additional tip when you come down and you click on softasculus apps installer there's a chance that wordpress doesn't show up in your list a very very small chance but let's assume it doesn't in that case you simply click on any of the other ones and in the box just type wordpress you click on wordpress and you're back to the same installer now before we proceed with our wordpress installation i wanted to address how to deal with wordpress installation errors in very rare occasions when you're trying to install wordpress you may get an error i've already installed wordpress so that i can demonstrate that error then i can show you how to correct the error then we'll install wordpress correctly so let's go ahead and click on install now like we think this is going to work and don't worry about the settings right now we'll worry about that next time through and i'm going to click on install at the bottom it starts the install and then it gives you an error now in this case it's just telling me it already exists but this error could be any area where something went wrong our goal is to get rid of the install error so we can reinstall correctly to get started click on softasculis at the top left and right here is a list of our installations if i click on that it shows the one installation we had we know that we don't want it because it didn't work so we can simply click this x we can scroll to the bottom remove installation are you sure yes we're sure that installation has now been removed and now we're ready to install wordpress so at this point we can go back to softaskulus choose wordpress and now we're back to the installer and we'll click on install now and we'll go ahead and proceed to install our wordpress the first option is which version do you want to use the default will be the latest version we'll use that next you'll choose your domain if you have multiple domains they'll be in that drop down now over here it says what protocol do we want to use the problem is it can take a little while for the secure key to be activated so we're going to go ahead and turn this off for now we can activate it later so we'll just choose the regular one like that and it shows that currently our ssl certificate was not found and that's because it takes hostgator about 24 hours to get that up and running under site settings the site name is the company name so let's say this was for web yoda i'd put webiota and then the description is whatever the description for the company is so let's say i put free online courses you can leave this unchecked we want to pick a username and a password i'm going to pick yoda user then you want to pick a secure password so let's hide that so i can put a secure password in there now the admin email is where any email associated with your website will be sent so for example if you needed to reset your password that's where it would go now since we didn't set up this email forward that's not going to be good enough for us so in my case i'm going to pick one that does work so for me it's going to be yod.webuta.com for you it'll be whatever your regular email address is you can choose a different language if you like we don't need to select any plugins we're going to do all that ourselves no reason to make any adjustments to the advanced options and no reason to select a theme now we're going to do that ourselves as well when the installation is complete where do we want to send details to i'll use the same email address and now i can click install this says that it could take three to four minutes i've found it doesn't take really that long at all now that wordpress has been successfully installed we're ready to open up a new tab and look at our website at this point we're probably going to have to take a small break and that's because we just set up a hosting account that has a new domain the hosting is immediately available but the domain takes a while to propagate across the internet so that it's able to be accessed to test to see if your domain name's ready simply open up a new tab in your browser and go to your domain name and if your domain's not ready you'll get a message that says this site cannot be reached so you're likely need to take a break for about two hours and then come back again and go back to your domain and refresh and see if it works when it's ready you'll get a page that looks like this one that says website coming soon or you might get your new website home page so let's go ahead and close that test tab now we're looking at our completed wordpress installation page again now that wordpress has been successfully installed we're ready to open up a new tab and look at our website to access our website we simply go to our domain name and go to our website before you can start editing your website you need to be able to access your website admin to do that you simply go to your domain name front slash wp admin hit enter a login box will come up now simply enter the username and password you created during your wordpress installation so in my case yota user password paste that in hit login and now we're logged into our wordpress so if you've been following along with the video you probably already know by now that selfdashtastic.com already exists so for us to build a new website we're going to have to have a sample area so in this case i'm going to build sample.selfdashtastic.com and i'm going to go to wp-admin to bring up the admin for her website in my case my username was already there so i can paste in my password and log in and now i'm at the fresh install for bethany's new website now one of the first things i want to do is get something set up for us and so if we go over here and we highlight over where it says self-tastic if i right-click on that i can open the link in a new tab and what that did was it opened our new website in our second tab and now i want to go to bethany's live website in a third tab so we can follow along in real time exactly what it is we plan to accomplish in most cases when i build a new how-to video i make a script for that video so that it's easier for me to create the video and at some point when i was using the script in a previous video a student pointed out that i should make that script available to everybody since it was very useful well it was a great idea and so that's what we're going to do next so let's go ahead and open another tab and to get to the script we're going to go to webyota.comtastic and the last thing we want to do is download all the content i use within this website so when you're following along you can build the exact same website so i'm going to open up another tab and this time i'm going to go to webyota.com front slash content and now i'm going to scroll down to the project we're working on selftastic.com and that was another way to get to the script but we're going to click on this link here and it's going to download selftastic for us and when it's done on mine i can click on that and show in a folder and you see it's in my downloads folder and then i can right click on the file i can choose extract all click on extract and now it makes a folder containing all the content i need opens it up in a new window so i can close that one bring that over here and when i click on that this is all the content we're going to use to create this website so i can go ahead and close this tab and this tab is a script for building the website and this tab is bethany's real website and this tab is the site we're going to build and then this tab is our admin for our wordpress so we can build the website now that we're ready to get started i wanted to cover a couple of tips that'll really help you out first some subscribers have pointed out that i tend to talk too fast this is unavoidable as my processor runs a little faster like a child's processor probably because i refuse to grow up fortunately youtube offers a feature to slow videos down to meet your needs so for example i'm going to go to this video in a new browser window now within the video i'm going to choose the settings gear i'm going to choose playback speed 0.75 now this is what 75 percent sounds like which should probably meet your needs now choose playback speed again i'll choose normal and we're back to normal speed next i want to scroll down and within the content under the video that i've provided there's going to be an entire set of timestamps that allows you to pick any particular spot in the video to proceed let's go ahead and close that tab and the last tip i want to give you is the script itself when you go to the script it's got a lot of information here tells you the plugins we're going to cover that anyway in the video it tells us about the astra theme then it has a whole bunch of royalty-free video clips you may be able to use royalty-free images you can use and then it has all the notes i'm going to need for the class for example all the colors i'm going to use are found here now two things that are nice within this is if you need to find a hex color and we'll talk about that a little later if you click on this link i'll right click and open link it comes up with the ability to pick a color so let's say i wanted to pick a red and now this number right here is your hex color all you have to do is click this icon and it copies it and now you have that color alternatively the other one we'll right click on this choose open link this gives you the ability to pick this type of color and this digit right here is to say how much transparent it is so watch when we go like this see how that gets transparent right here so that gives you some idea here's your color settings and then here's how transparent it is and then again you can click there it makes a copy of it and you can use it in your website let's go back to the script and now you're into the getting started section these are all the notes i made for myself so i can make the video but you can also use these to your benefit when you scroll down you'll probably notice to the left of yoda you talk too fast is a bunch of w's and you're going to say to yourself hey yoda why are all the extra w's i will tell you bethany decided she was going to get a new kitten the kitten decided he wanted to play on my keyboard it hit the w and i decided to leave it in the course okay random facts we've already covered the hosting we've already covered wordpress and now we're going to jump into themes and plugins now for the most part i won't be showing the script i'm just going to be using the script but you know that it's there for you as well now admittedly i'm no bob ross but i definitely do my best to keep things fun and easy i hope that the tips i just provided you will ensure your experience building your website will be met with confidence and enjoyment so i'm gonna go ahead and go back to our wordpress admin at this point if you already have a website then there's really no reason to watch the steps on how to build a website instead you can go ahead and proceed to the section called enable ssl which is the first step in the process of adding a shopping cart to your website so the first step in building bethany's website is to remove all the stuff that's not going to be part of her website so let's go ahead and click on pages first and we don't need any of the pages they have here we're going to make our own so we select that checkbox there and it selects all of them under bulk actions we're going to choose move to trash and then we'll choose apply and as an additional step i like to click on trash choose them all again bulk actions delete permanently apply and now we want to get rid of all the plugins that were pre-installed because we're not going to need any of those we're going to use all of our own so i'm going to go down to plugins and this brings up a list of all the plugins that were pre-installed again i can select next to plugins that check box and it chooses all of them bulk actions and before we can delete them we have to deactivate them so we'll choose deactivate apply now i can choose plug-in again so it selects them all bulk actions delete apply okay because yes we want to delete them and this will remove all the pre-installed plug-ins now we want to add the theme that we're going to use for bethany's website so we're going to go to appearance themes choose add new and we're ready to upload a theme so first we're going to download the theme we need but you might say to yourself that here are all the themes when i just pick the one i need well the answer is you could do that but i can't guarantee that the theme we're going to use or the plugins we're going to use are always available in all environments so if you don't have your hosting with hostgator the theme and plugins may not be available in your environment to make sure the theme and plugins we need are going to be available i've stored them permanently on the webiota server so let's go ahead and get our theme now so open up a new tab and we're going to go to webyota.com front slash themes scroll down to the project we're working on there's self dashtastic.com and we're gonna click on astra theme that takes us to the astra website but it also downloaded the astros theme right there we go and close that now we want to go to webyoder.com front slash plugins we want to download the plugins we need for this project so again we'll scroll down to this project selfdashtastic.com and we're going to need to download all of these plugins and as we download them i'll give you a little bit of information about what each one of them is the astra starter sites we'll click on that that's going to allow us to install a fully functioning complete website including a shopping cart in case we want one then we're going to download header footer for elementor that's going to allow us to build a free header and footer for our websites instead of having to pay a premium for it then we're going to download profile press and profile press allows you to set the icon for your blog instead of being whatever the default one is and then we're going to download social sharing and this plugin makes it real easy for someone else to share your blog posts and then we're going to download the classic editor a lot of updates and changes have made to the wordpress environment and by having the classic editor as well as the classic widget it ensures that we all see the exact same environment so that what you're following along on your admin matches what's in the video then we're going to download duplicate page and duplicate page allows you to take a page you've already created and make a copy of it and then edit that to be your new page which is significantly faster than building a page from scratch now we're going to download really simple ssl what this plugin does is ensure that the secure pages are the default for your website and next we're going to download the woocommerce stripe gateway and the woocommerce stripe gateway is what allows you to accept credit cards on your shopping cart in case you're doing the shopping cart and now we're going to download woocommerce taxes and shipping and this gives you an automated way to do taxes and shipping in case you add a shopping cart to your website and finally we're going to download the woocommerce plugin itself and that's the plugin that allows us to add a free shopping cart to our website so now all of those have been downloaded i'll go ahead and close that and now we want to go to our downloads folder so i'll bring mine up and it shows everything that we've downloaded so far i'm going to go ahead and click on date and that's going to allow me to see these in the order that they were downloaded so now let's go back to our wordpress admin now we can choose upload theme and now we're going to choose a file and you want to go to your downloads folder then we're going to select astra.zip that's our theme we'll choose open install now and once it's installed we need to activate it and it's that little link right there and that activates our theme in almost all cases you'll immediately be able to update it to the most recent version so we'll choose update now now our theme is updated now if we come back to our website and hit reload you notice that it's changed a little bit still nothing like the site we're going to build but we're getting closer so let's go back to our wordpress admin and we're ready to install the plugins we're going to need for our website so we're going to choose plugins add new now we want to do upload plugin choose file we want to be in a downloads folder and the first one we're going to do is astra starter sites so we'll select that choose open install now activate plugin ready for the second one add new upload plugin choose file the second one is header footer elementor open install now activate plugin ready for the third one add new upload plugin choose file wp user avatar that has a new name profile press but the original file name is still the same so we'll choose that one open install now activate plugin we're ready for the next one add new upload plugin choose file the next one is social sharing by danny open install now activate plugin add new upload plugin choose file and the next one we're going to do is the classic editor open install now activate plugin and choose add new upload plugin choose file the next one is classic widgets choose open install now activate plugin again add new upload plugin choose file duplicate page open install now activate plugin now at this point if you're following along in the script you'll see that we're not going to install the other four at this time we'll take care of that later so we've installed all the plugins we need for now also at some point profile press may ask you to create pages we're just going to do no thanks when it asks us that because we don't need that so we'll go back to our wordpress admin and another thing you're going to find is always a lot of little advertisements you can close each of those and try to clean things up a little bit this says to install elementor that's going to be taken care of a different way for us next thing we want to do is update our plugins so we're going to choose to select them all bulk actions update apply and we can scroll down and watch it do its thing now all of our plugins are updated and now we're ready to install our starter site now watch what happens when i click right here i want to see the library it's going to give me this sorry you're not allowed to access this page don't know why sometimes it doesn't do that usually it does so i'll click the back arrow and then we'll go back to the starter sites when we click on c library again it's going to work what we want to do is scroll down choose build your website now and we're going to choose elementor which is the world's most popular website page builder so we'll click on that now for some reason you didn't have that option for some reason maybe you had already tried this before your option to choose would be up here as well now what we're looking at right now are all the different website templates they have to offer it's totally amazing what they have already pre-built and basically a lot of times you can find a website that's just about everything you need it to be now there's two types of templates in here if we go over to all we can choose premium and it shows only their premium versions and if you decide on a premium template for your website go ahead and visit wp astra dot com front slash web yoda and this will guarantee you the best price in most cases you can find a free site that'll work and for this example we're going to use a free site so let's go ahead and change that back to all now notice there's lots of different categories that you can look through to find the particular one you're looking for in our case we're going to do one that's called cosmetics as our default so if you type cosmetics in the box you'll see that the ones that are available under that heading show up and the one that we're going to want looks like this in my case it's the first one it may be farther down the list if you want to go ahead and click on that and this brings up the starter site we're going to use to build our website there's a number of options you can fill in here but we're going to do all that ourselves later so all we need to do is click on skip and continue we're going to scroll to the bottom we're going to choose continue it's going to ask us a couple of questions so let's go ahead and fill in the boxes we'll put yoda yoda at web yoda.com i am we'll tell them we're intermediate and we're building our website and i don't really want their newsletter right now scroll down submit and build my website now it's installing our starter site and remember earlier we didn't install elementor ourselves that's because it's going to install it here so there's really no reason i add that extra step this process doesn't take very long i speed it up just a little bit right here so that we didn't have to wait as long congratulations installation complete took 33 seconds they give you an option to view your website here but we already have a tab to do that and if we go to our second tab and hit reload look at there we've got a fully functioning website with a shopping cart already built into it how nice is that so that's for free from astra themes and you could basically build any website they have in that collection either the free version of the premium versions and start with a website that's already completed i love it but in our case we're going to take this website which is pretty cool as it is and build bethany's website which is i think even cooler so let's go back to our wordpress admin i'm going to close this little window it takes up space and i don't like it now since we're going to be building bethany's website first before we do any of the shopping cart related things and some people may not even choose to use the shopping cart we're going to go ahead and disable the woocommerce shopping cart for now and then we can reactivate it later when we're ready so the first step to do that is we're going to go to plugins scroll down and we'll just deactivate woocommerce next we want to remove the shop button in this case on our website it's right there to do that we're going to go to appearance menus and now we need to choose the menu we're going to look at so we're going to pull down that menu there and choose primary menu hit select and now we're looking at the primary menu inside of the one that says shop i can remove that for now and now at the bottom may have to scroll down to get to it save menu and now when we go back and reload our site there's no longer a shopping cart in there for now so we'll go back to our wordpress admin and at this point i wanted to discuss the things that can go wrong murphy's law states that when things can go wrong they will go wrong and you will experience this yourself it's in my experience plenty of times while building websites that random unexplained things can go wrong for example once i wanted to update my theme and the theme button would not work another time i clicked on my widgets page and instead of seeing these widgets the page came up empty like this another time on my shopping cart where there should be stars under the review there were just a bunch of esses instead another time inside of my customized options only a portion of the options were showing up instead of all the options i expected to see so i know right now you're saying yourself hey yoda what am i going to do about these things what happens when they go wrong i will tell you in most cases the problems can resolve with a simple keystroke if you're inside the page that you want to fix for example let's say it was this page i can hold down the ctrl key and the shift key and then i can hit the reload button at the top left and in most cases that'll solve the problem and you'll see the corrected version alternatively you might also try clearing the cache inside of your browser you may try restarting your browser or you might also try viewing your website in incognito mode to see what the rest of the world sees and at this point if you're still having problems just leave a message under the video and we can work on your problem together now as a last resort you can always restore your website from a backup when things really go wrong unfortunately if you don't have a reliable backup solution in place when something goes wrong with your website you stand to lose everything i personally use backupbuddy which has saved me many times over the years either way you want to consider a backup solution that meets your needs if you're looking to make scheduled automated backups of your wordpress website where you're in full control as well as make manual backups at any time that you can store locally on your own computer then you'll want to check out my wordpress backup and restore video at some point now in my case i also installed the backup buddy plugin in bethany's new website and periodically as we go along i'll save where i'm at in case something goes wrong i can always restore to where i'm at so at this point i'm going to scroll down i'm going to choose backup buddy i'm going to choose complete backup watch it do its thing which really doesn't take that long and when the backup's complete i scroll up and i choose download the backup file and this downloads a complete copy of the entire website and the database in case something goes wrong and now we're ready to make some adjustments to the header section of bethany's new website if you look at the real-time one there's a logo to the left and menu to the right on r as the logo logos above let's go ahead and get started in making some of these changes so go back to our wordpress admin we'll go to appearance customize header builder and notice down here it shows us the orientation of the stuff that's up here so for example i can move this one over here and it shows that logo over there i can move this one over here and it shows the menu over there now we're going to choose the site identity and logo button and we're going to change our logos so we'll click on change logo i wanted to point out an interesting quirk about the media library sometimes when you load the media library it'll be in this mode which is upload file mode however sometimes when you load your media library it'll come up in media library mode where you see the pictures and you see how it could be confusing if i bring up a screen that looks like this but yet you go into yours and it looks like this it could be confusing so just keep in mind that if you see this but you expect to see all the pictures all you have to do is click on media library to bring up the picture version so let's go back to the upload files now i can select files here but the much easier way to do that is to bring up that folder we have that has all of our content in it but we can drag stuff from the content folder directly into here so i'm going to scroll down and look for my logo and there's my menu logo i can drag that over i can choose select we're going to skip cropping and we'll scroll down we'll change the next image now it's in our library so i'll choose it again choose image scroll down and what width do i want it in this little icon here says on a regular computer screen and i want the width on a regular computer screen to be 230 see how that made it the correct size there now if i click that icon now it's in tablet mode and in tablet mode i want it to be that size and also i can move this to the left this to the right we click that icon again it shows us phone mode i want to go ahead and make that 180.
we want to make sure both of these settings are turned off which they are by default and now we want to upload what's called the favicon icon and that's a little icon like right here where you see the web yoda one on bethany's you see the self-tastic one and on these two tabs it shows the wordpress default so we'll choose select site icon you want these images to be a minimum of 512×512 we'll go back to our library and here's our logo for the favicon i use the ping format for most files it's a very versatile format so i'll drag that over i'll hit select choose crop image and now you see it showed up down here and when we refresh this page it'll also show up so we'll hit publish now we're not seeing it here just yet but if we come over here and we hit reload i held down shift and control when i did that to make sure i got a better reload and now it shows the new icon the logo is to the left the menus to the right we're making progress now notice this doesn't have our logo yet and that's because this is a transparent menu bar so we're going to go ahead and go back and change the logo in a couple of other places the logos we've done so far will make sure the logo shows up correctly in your shopping cart in case you're putting a shopping cart on your website so if we scroll to the top we can hit customize transparent header and now we scroll down and we're going to change these two images so that logo is right there choose image again or change image use that one hit the choose image button we scroll down now we're looking at the phone version still if i click that it displays the computer format again i want to make that 230 for the computer as before and then for the tablet i'll make it 200 and for the mobile again 180.
let's choose publish go back to our new website hit reload and now we have a nice logo here but you're saying to yourself but you don't have a logo what do i do i will tell you if you're looking to make a professional logo for your website online at no cost to you in about five minutes time then you'll want to check out my make a free logo video at some point the next thing we want to do is to be able to change this font this font may be fine for you and you don't need to change it but i want a different font for our menu so we'll go back into our wordpress admin i'll choose x and just for consistency i'm going to show you how to get to these things each time from the top menu so we're going to go back to appearance customize header builder choose the primary menu button choose the design button scroll down and here's the menu font option they really hide this stuff don't they so i'll click on the pencil and i want the family to be open sans condensed i'm going to choose 24.
i'll choose publish come back over here reload and i like that a lot better now i want to look at how to set base colors for your entire website so we're going to close that out again for consistency we'll start at the dashboard we'll go to appearance customize global colors and now here's your colors for your website the only one i'm going to set right now just so you see how it works so i'm going to choose this and i want to scroll and i'm going to put my background color in there and you're like well where did i get that color from i came over to our script i'll scroll to the top and these are all the colors that we had pre-defined me and bethany sat down and figured out the colors we wanted you'll want to go in and decide the colors you want and then when you save them in a file you can always get back to the ones you need for the different things you need to use them for so in my case the background color was this light blue and that's where that number came from right there we came back over here i can hit publish and you could set all your default colors for your website within here the what's there is going to work fine for what we're trying to do for right now and one of the last steps that we want to do that have to do with kind of the setup of things is when you come to the website and let's say we clicked on testimonials notice how it says the word testimonials here now the page name you assigned to a web page is called the slug name so in this case the slug name for the testimonials page is testimonials to make wordpress use the slug name as the page name requires a specific setting in wordpress and let me show you what i mean if i come back in here and you go to settings and then you go to permalinks this defines the different ways that your urls for the pages can show up by choosing post name as the permalink setting you are telling wordpress to use the slug name as the page name at the end of your url and so if you're following along and you built your website with a different theme or something like that yours may not have the permalink set the same way we want to set them typically post name is liked better by search engine so we like to use that now scroll down hit save changes and now if we go back to the website we're working on and we click the home button we're going to start making this page look like this page so let's go back to our wordpress admin and we're going to choose pages and that brings up the pages that are in our website and then down where the home page is out to the right when you're hovering over it you can choose edit with elementor and that loads our home page up into the elementor editor now the elementor page builder is the most popular page builder on the planet and you're going to find out real quickly why that is it's just really easy to use super user friendly it's fast reliable all those fun things now before we get started making changes to our page i wanted to give you a little bit of background on how this works at the very top you see these icons and this is the section edit icon this allows you to control the section which in this case is this whole area here whereas this section is that section there and that's a different type of a section we'll talk about that notice how it's got a little border on here if you click on that that's called an intersection see right there and keep going down and we click on here that's a section in itself so each one of these it's basically a row is what a section is now inside of a row can be columns and this little icon here defines the column so as we scroll down this particular one here has more than one column in it notice there and there and this one here has a column here a column here and a column here so you see that's the section we click on that it shows a section in this case it's called an intersection i'll tell you how that's different we'll use that later but it's still a section and inside a section there's columns so a section is a row and then the columns inside of it there's a column marker so you edit the column by clicking on those and then inside of a column this is a cell you can put different widgets so that's a widget and see the little icon that's how you edit the widgets so when you scroll down to any area here's the section that edits the section and then here's the column if i click on that now i'm editing the column and then inside of that look there's one two three different widgets if i click on that it's editing that widget if i click on that it's editing that widget if i click on that it edits that widget furthermore within each section within each column and within each widget are three different ways that you can edit so for example where it says are happy clients if i select that on the left i can change the content so here's the content i can change the style of that content and then i have advanced settings for that content and that's true for anything so when we come to the top and we click on this content up here that is the section at the top here is the layout in this case the style for that section and the advanced settings for that section and if i go to the column here is the layout for that column here's the style for that column and here's the advanced for that column and then inside of this if i click on a widget there's the content for the widget the style for the widget and the advanced for the widget so that's enough to get us started and the first thing i want to do is change the background from being this cute girl to being the one that's going to be on our website so we'll choose the section at the top and then we're going to choose between layout style and advanced we're going to choose style and here's the image that we're going to change so if we click on that i need to put the new image i'm going to use here so we'll bring up our content folder and now i'm looking for the cover image and it's that one right there cover home i'll drag that over and then i'll choose insert media and now it has that image we can hit update at the bottom go back to our website hit reload and it's that easy pretty neat huh so let's go back to elementor and one of the things you might ask yourself is well where did i get this image i will tell you if you're looking to access the best royalty free photos and images online at no cost to you then you'll want to check out my best free stock photos and images video at some point or you can simply click on the link at the top right and visit it now now as that promo mentioned you can basically get almost everything you need for free online and that's how almost all the art within this website was collected was to get free images online so if you're wondering why didn't we just use a free bethany picture well she decided she didn't want to be the click bait on everything so as a compromise i picked a different picture as the main picture for the website so now let's make some changes to our website this text right here we're going to use some of this stuff i'll click on that widget like that and on the left hand side it's already defaulted to content and in this box i want to put welcome to and then we're going to set some style for that typography is basically the font and stuff like that so we'll click on that we're going to set the font to open sans condensed we're going to choose a size of 23 and the weight which is how bold it is will set to 100.
That's what 900 looks like that's what 600 looks like and we're just going to use 100 and now let's change this heading right here so we'll choose that widget and then on the left we'll choose content and we'll type in that now i really didn't want this all the way across i kind of wanted it to be two separate words so you're going to learn a really neat little piece of code if you do a less than the letter b the letter r and a greater than that's literally the only html tag you ever need to know and that tells it to make a line break and what it did was is it put self on one line and tastic on the other now we'll go into style typography and for the font i want to use landrina shadow so we'll choose that and we'll set the size of that to 122.
look how cool that is now i don't like the line spacing in between that being so big so if you scroll down here's the line height let's set that to 100 that way they're nice and close and i want to set the margin to zero and let's look at what margin is if we scroll to the top inside of our advanced we've got margin and we've got padding well i want to set this margin from being 20 i'm going to set it to 0 and notice that it took this space out here as we go along we'll see some differences i'll show you how margin and padding are different right now it would be difficult to tell but both of those things give you a certain amount of space around whatever the item is but for now let's just set that to zero and we'll discuss margin and padding in depth later now for the next line now we want to change the text in this widget i'll choose that one be the best you will go to style typography for this one i want it to be open sands condensed we'll make this 30.
we'll change the weight to 100 and we'll choose a line height of 19 and that just kind of told us how much space we want between this text and this button right here now i want to change this view more button to a learn more button i'll choose that widget under content where it says view more i'll put learn more and over here for the link i'll put about and now we can hit update go back to the page we're working on hit reload and wow look at that we're making progress so let's go back to our elementor and now i want to add the intro video but to add the intro video i first have to add it to the media library and to add a video i have to do it outside of elementor so i'm going to choose this icon here and then i'm going to choose exit to dashboard now i'm going to choose media and that takes us to our media library and this is the same one we're using inside elementor it's just that some things you can load here that you can't load directly into elementor and now i'm going to go to our content folder and i'm looking for our intro video and there it is i'm going to take this drag it to the left now that that's loaded i'm going to select it so that i can get this link over here and i will copy the url to the clipboard and now i can close that we'll go back to pages we can go back to home edit with elementor and now we're going to select the section at the top again we're going to choose style but instead of choosing it to be a background which is just the classic one we're going to choose this little video choice and here we can put in a link so we'll paste our link in there and look at there our animation automatically worked right out of the box now it's playing over and over again here's an option play once we'll turn that on so that way it'll only play once and when it's done what we see is that there's no background then we're like what it was there what happened well the reason is is now we need to scroll down and there's a section called background fallback we want to click on that and we'll choose the image we already uploaded like so hit insert media and now it's there we can hit update and that allows it to have the image that's going to be there after it loads we'll go back to our page and hit reload and watch the animation but also notice this text is already on the page right there but on bethany's site when you reload it loads the intro and then right after the intro finishes that little menu slides in boom pretty neat huh that's what we want to do so we'll go back to elementor and this is the column we want to set to delay until after the intro video has completed and so what we're going to do is we're going to choose that column and now we'll go to advanced and under advanced one of the options is motion effects and for the motion effect we want to choose fade in from the left and then we're going to set the animation to eight thousand eight thousand milliseconds is eight seconds which is a little bit longer than our animation is so we go and click update go back to our version of the website hit reload now the intro shows and at the end of the intro slides in the text really neat huh but you're saying yourself yeah that's pretty neat intro but i have no idea how to make one i will tell you if you're looking to make a free video entry for your website online at no cost to you then you'll want to check out my make a free video intro video at some point now we'll go ahead and go back to our elementor and we're going to scroll down and we're ready to work on this next section now in this section i want to build a category section typically use it if you had services that you wanted to highlight or feature in your website this particular piece of code right here i don't need it so i can right click on that little icon and choose delete and now let's start working on our category section first we'll delete this widget right here and also i can right click on that little icon and choose delete now for this header right here i'll select that icon and over here i'm going to change that title to beat that text and the color we're going to use if we go to set style we can choose a color and i want it to be that color kind of a brownish color now to get out of color mode you just click the tab again so it kind of toggles it open and close like that now for typography the family i'm going to use the site pretty much we're going to use open sand condense on a whole bunch of stuff and the padding around this so if we go to advanced do padding again we'll talk more about this a little bit later right now see this icon that's linked together that's linked apart if they're linked together and you add one they all add together and if they're linked apart if they're not linked then you change them individually i want them linked together that's the default and i want to put 20 in there and that puts space around that particular item again don't worry too much about the difference between margin and padding right now i'll discuss it a little bit later when i have a good example for it now i'm also going to delete this widget i don't need it and now we're ready to add a widget we haven't done that yet to your elementor environment to add widgets we have to get to the collection of the widgets to get to the collection of the widgets we choose this icon right here and these are the different widgets we have at our disposal notice some of these have locks on them because we don't have access to those the one we want is the one at the top is called intersection basically it allows you to make a section inside of a section so if you hold down on that with your mouse you can drag it over and see that little blue line that's where it's going to land at it's kind of tricky sometimes to get it to land where you want it i want it to land under the text and now i have this new section now in this first box i want to put an image so we'll go back to our collection of widgets and here's the image widget i can drag that over and again notice i can choose where it's going to land by moving it around and i want it in that box right there just like that and now i want to set that image to be one of my categories so on this side over here i can click on that image and they're not in here yet so let's go to our content and we're looking for categories and we've got six categories i'm going to select all six of those and i'm going to drag them over all at once to save me some time later now they're all loaded if you click on it that tells you which one you're going to select and over here it tells you the particular name of whichever one it is so in my case that's my first category i want so i select that and insert the media and now we've added an image to our website pretty easy huh now what i want to do is show you a trick for reusing widgets so here this widget here is a title widget if i click on that it says it's a heading i'm going to right click on that and tell it to duplicate now i have a second copy now if i move my mouse over the little widget icon edit i can hold down on it and drag it wherever i want it and i want to drag it under this picture like that and then i want to change this text i have that one selected already over here and change the title to say personal development i'll go to style typography in this case i'm going to change the font we're going to choose work sands and i'm going to choose a size of 22 and now i want to make a copy of this because i want to be able to reuse the layout that i already have so just follow me on this if i wanted to duplicate this picture i could right click here and duplicate but what i want to do is duplicate the whole column so i'm going to say right click and duplicate now i want another copy so i'm going to say right click and duplicate now i've got three copies and now on this fourth column i want to get rid of it so i can right click on that and choose delete and now i have the three that i want now at this point i can right click on that intersection and choose duplicate and now i have six of those so you can see quickly instead of having to build everything from scratch we have a lot of the stuff that we're going to want to use already and now we can customize these one of the things that i don't like is how much space is around here so let's choose this one i'll come over to advanced and we're going to set this to zero even though that worked for the top title it didn't work down here i'll set it to zero and i'll disconnect these and then i'm going to set the bottom one to 20 by itself now i need to fix all the other ones the same way i did this on purpose because i wanted you to see how to copy the style so here we made a style change on this one so i can right click on this one copy it and when i right click instead of pasting it to make a new copy i'm going to paste the style and it just fixes the style and i can do that for each one of these so you can see that's a neat way to be able to make changes quickly to the style without having to do all the work over and over again now i just need to change out the pictures and the text to match so to change this one i choose that image i come over here and i pick my second image hit insert media and then i'm going to choose that text change the heading over here and now that one's changed and then i'm going to do a little magic to get all these to change real quick since you know how to do that and now they're all changed a little fun fact that's a picture of me and bethany at one of our favorite resorts at our wedding now if we click on update and go back to our website and hit reload and you don't have to wait for the intro to load before you start scrolling down just so you know and there's our new section now in bethany's when you hit reload on it notice that these things come out to the sides like that and so we want to do that next so we'll go back to elementor and now we're going to choose this column icon we'll go to advanced motion effects and we want to slide in from the right to the left so for the animation we're going to slide in from the right then we're going to put the delay hit 1000 milliseconds which is one second now we'll right click on that column copy right click on this column paste style and now that one's set it didn't move but it did set it so now we'll come over to this one select it advanced motion effects we're going to slide this one in from the left 1000 milliseconds which is equal to one second right click copy right click paste style now for this one we'll select it advanced motion effects and then this one we'll choose zoom in again one second right click copy right click paste style now we can update go back to our website hit reload and notice how those slide in but let me do it again notice how this one is on top so they're stacked in a different order than i want them basically we want this one and this one to be on the top and there's an easy way to do that so go back to elementor we already have this one selected under advanced for z axis we put a number one the default zero that'll make this one sit a little bit higher and we'll do the same thing here advanced z index of one hit update we'll come up here hit reload and they're coming in exactly the way we want them now we're ready to work on our next section so let's look at bethany's site and we scroll down we're going to make this animation right here and we'll also learn how to make the background transparent for the umbrella girl so now let's go to our script and we're in the inspiration section and we're going to learn how to make the girl transparent so first we're going to go to unsplash and we're going to do a search for girl umbrella yellow and there she is and we can download that if we want it gets added to our collection in our download folder and you go to your download folder you see the picture that's there now it's going to be the whole thing the question is how do you get just the girl part cropped out that's a really good question right i will tell you if you're looking to edit photos and images online at no cost to you then you'll want to check out my how to edit photos online video at some point so now let's go to our script now we want to go to the photo scissors this is a website that allows you to crop a picture and it says upload an image show you how easy it is here's my images there's the one we're interested in click open uploads the picture notice that it cropped the girl out no problem you can take this and go like that obviously i made a mirror image of this but it gives you generally the idea of what you're trying to do and then you can choose download download load resolution the low resolution is fine for what you want to do and you can go back to your elementor we scroll down so now that we've successfully made our umbrella girl have a transparent background we're ready to start on our inspirational section and then add her to it the first thing i'm going to do is going to change this background so we're going to click on this and it's called an intersection this one right here see how there's an intersection is there and the main section is there we want to be on the intersection we want to be on that section there specifically and then we'll go to style and then we'll click on the picture and now we need to upload a picture and we want to go to our inspirational pictures so here's our content and scroll until we get there where they are inspirational pictures and there's the background i want drag that over hit insert now we want this to be center center for the position it already is but check that to make sure instead of size cover let's change it to contained and now in this intersection there's two columns a left and a right if you grab the edge in between you can slide it left and right and make it change its size and get it roughly to 40 on the left and 50 or 60 on the right you can also choose the column and then specifically put it to 40 that's a little easier and the other one by default will be the difference now let's add the girl we'll go up here to where we can pick from our widgets we'll drag over an image and then we'll add our image so we'll go back to our content folder and there's our transparent girl that we created drag that over we hit insert now her image has been added so from here we're going to choose advanced i want to put some padding at the top so let's say 200 that moves her down a little bit and then we're going to go into the motion effects default let's fader in from the left and let's give it a thousand milliseconds or a one second delay for bringing her in like that and let's let it come in a little more slowly just because we can ta-da there we go now we can just hit update just out of curiosity it's nice to see our work sometimes come over here we'll hit reload and there she is we're making progress back to elementor we're going to choose our section tab right here to edit the section itself and then we're going to go to style and see that background's white we're going to change it to one of the darker cyan looking colors and now we're going to go to advanced and change this from 0 to 35 and change that 100 to zero and bethany's you see this little wave brush thing going on right here we want to add that so let's go ahead it turns out being at the bottom of the section above so we got to scroll up choose that section then go to style and then we're looking for shape divider we're going to add the shape divider at the bottom and the type of shape divider we're going to use is waves brush so we scroll down and you see that's what it looks like and there's lots of different ones you can choose from it's worth checking them all out to try different stuff in this case we're going to use the waves brush and then we're going to set the color to that same blue that's in the section down here see how it matches now and then we're going to set the height to 60.
There's a lot of extra space right here i want to come back up here we still have that selected we'll go to advanced and we're going to change that from 200 to 100 so that brings it in some and this itself will adjust itself out a little bit to bring that down in a second to make it look more correct now over here this particular header this widget we're going to drag it below the other one like that and then this one we're not going to need so let's delete that one and then this button obviously we can make a button but i want to show you how you can recycle stuff so i'm going to take this button i'm going to bring it down here and put it right there because we can just use it there and make it work for us and it saves us the trouble of making one come back up now let's work on this first header here the bigger one and let's make that say be inspired and we'll go to style we'll set the color to be white and we'll close the color out we'll go in typography i'm going to choose a font of mozzarette we'll make it 80 and make the thickness be 700 now the margin for our header we go up here we'll click on margin and we disconnected those right there is going to be 29 and basically that just allows that to sit a little bit lower and so for this text if we choose that widget i'll change the text to live your best life good advice click on style color is white close that go into typography font we'll make this one 40 and we'll make the weight 500.
and now below this we want to do an image carousel and so we need to go up here and choose this icon that displays all of our widgets now the one we want is called an image carousel but instead of scrolling down looking for it we type the word image it'll bring up all the ones that have that in common there's the image carousel we can drag that over that puts it above the words that puts it below the words where we want it i can choose that now we need our inspirational pictures so we'll bring up our content these are our six inspirational images drag those over now they're loaded we can just click create a new gallery and insert gallery now it's got three of them there for now we're going to tell this to be large and we're going to sell it to put one per slide and we're going to say image stretch equals yes and that looks about right now notice that it has these dots here and it has these left right arrows so you can have navigation built into the carousel i don't want that for this particular carousel so under navigation i'm going to tell it none and that gets rid of the arrows on the dots and then down here under additional options pause on hover that means if i put the mouse over it it stops showing new pictures well that might be nice in some situations but i want it to continue to show new pictures whether the mouse is on it or not so we're going to turn that off our animation speed let's set that to 4000 and we'll change this from being a slider to fading and that'll fade in between the different pictures like that and now you see when we added this stuff in there this wave sits exactly where we needed it to sit which is really nice so let's go ahead and hit update okay back to our page hit reload and look at that our inspired section is really working well so now we want to work on our call to action section these little sections that have like an icon some text and a button they're called call to action let's go back over here the first thing i want to do this is an inner widget so we gotta drag it i want to bring it down to this next section into the light blue section and then this logo bar right here this logo carousel i can right click and delete that i no longer need that and now we want to build out our call to action section and the first thing we'll do is put our little brush divider here but will it put at the top of this section so you can see how you can do it either way so i have that section selected i go to style shape divider it's going to be on the top this time click there waves brush pick the same color as this color right here like that close that out set the height of it to 60 and we've got that part done and so let's start to format this i'm going to click on that column and we're going to choose advanced and where this says 025 025 i'm going to just change it to 020 020 just a little less space on that don't waste so much space then we're going to choose this icon widget and we're going to go to style and i'm going to set the color a little bit darker and then for the header we'll also go in set the color to the same color close that out and then typography we will pick montserret we'll make it 32 tall and a weight of 300 and then for the text section we'll choose that widget and i want to go into style and i'm going to use a special kind of alignment normally if you've got left center or right i'm going to use justified and i'll square things off it looks a little weird with this sample text when we put real text in there it'll look a little bit better and then we'll go into typography and a different font railway i'll make this 21 and a weight of 200 and then a color for this will be the same color we used for the icon in the header so everything kind of matches and i'm going to choose right click on that icon and choose copy right paste style right okay style and on this header right copy right click pay style right click pay style and for the text box right click copy right click pay style right click pay style now for our button i'm going to choose the button then go into style and i'm going to change the button color to that not much different and then when you move over the mouse we want it to grow a little bit so what we're going to do is we're going to choose the hover option and then on hover the animation we just want it to grow look at that pow now right click copy right click paste right click paste bring it over bring it over many ways you could have done that just showing you a different way now we see that there's content in these but it needs to be changed obviously so let's go ahead and change the icons first so i'll click on that icon go to content choose here and i can search i want to do a heart icon so we'll choose that one and now for this one we'll choose that icon you don't always have to click the little box i try to have it because i know that works better come back over here come up over here we'll look at comments we'll pick that one insert and then we'll choose the last one come back over here question i'll choose the first one insert and now since you know how to change the text on these i'll just use a little magic to make those happen okay that updated the text but i wanted to do the buttons together because we hadn't had as much practice with that so we'll choose the first button come over here on the left and this one will be learn more and we'll point that to our about page the second one will say contact me and we'll send them to our contact page and the last one we'll say tips here and we'll send it to our paypal page let's hit update go back over let's reload the page scroll down and it's looking a lot better but let's add some animation to this so we'll come back in here choose column one go to advanced motion effects fade from the left take this one advanced motion fx fade from the right choose this one advanced motion and we'll zoom that one in just like that we'll hit update and we'll reload looks pretty good right so on bethany's site the next one we're going to do is this words of wisdom section and ours does not look anything like that right now we'll come back over here and to do the words of wisdom section we're going to do a carousel and we're going to go ahead and insert a new section above this just so you can see how to insert sections in between i'll click right there now i have a new section and i'll click on the plus sign i just need this to be one column and i will choose that section i'll go to style and we're going to set the section color to white now i'm going to scroll to the top and i'm going to right click on that header and copy it just another way of showing you how to recycle stuff come back down here right click and paste it and now for the text we'll change it to say words of wisdom and now we're going to go to our collection of widgets and we'll type the word image again to find the carousel we're using the carousel differently this time we'll click on here to add pictures to our carousel we'll bring up our content and we're looking for words of wisdom and there they are so we'll select all those drag them over all at once we'll click on create a new gallery we'll click insert gallery for the image size we'll choose full so we can see the whole word slides to show let's say five we want to scroll one at a time i don't want any navigation now we'll look in the advanced section again i don't want to stop the animation if i hover over it i only want about 500 milliseconds in between that's half a second and i want to slow that down so it's going to do it slower that's nice just like that we'll hit update go back to our page hit reload and we're making progress so we're going to go back over to elementor and i don't really like the spacing here let's come back into advanced for that widget i'll put zeros in there disconnect them i want 70 from the top because we're going to put a brush wave thing here but i want these closer now what's interesting is is that if i do a margin i can do a negative margin on that and look how it brings it up so we'll take that negative margin of 25.
for all practical purposes that's the main difference between padding and margin in most cases we will see some other examples as well but with margin you can bring things closer together by using a negative number instead of a positive number so we want to put our brush divider right here we got to choose the section first and then we'll click on the shape divider and it's going to go at the top and it's going to be our waves and our color is going to be that same color close the color we didn't pick the right waves did we waves brush we'll change it to 60 and that's looking pretty good we can hit update now since i know we're going to want to reuse the words of wisdom section i want to go ahead and save it as a template now so we can use it later so we'll go ahead and go up here we can right-click choose save as template we'll give it a name choose save now that we've saved our words of wisdom section as a template we'll be able to reuse that in any other page in our website so let's go ahead and close this window come back over here reload and that's looking pretty good now we'll look at bethany's website again the next section we're going to do is this practical advice section again we'll utilize a transparent image slider so let's go ahead and go back to our page now the next section of the website is a testimonial section bethany's website does not need a testimonial section but you might need one for your website so one of the things you might consider is to leave this the way it is or you potentially could come up here copy this button come down here paste the button and then change this to say more testimonials and you could have a page of testimonials and in fact the default site also has a testimonials page so you could point to that and repurpose it and have a testimonials page for yourself so since bethany's website doesn't need testimonials i'm going to delete this section we're also not going to use a latest product section here so i'm going to delete that section and then i'm going to click the plus sign so i can make a new section in between and then we'll click the plus we want this to have two columns under layout instead of content with boxed we're going to say full width and then the left column we're going to make it 55 which makes the one over there 45 i'm going to choose that section it's already chosen but choose style and we're going to add a background so we'll click on the background classic click there now we need to get our correct image for this so we'll go back to our content and there's the practical advice beach we'll drag that in insert media and now we have our beach scene in there the positioning we're going to use is going to be top center and the size is going to be cover i know you can't see anything yet but it will reveal itself now in the left box we're going to put an image let's drag an image in there like that and then we're going to put the image into the image widget go to our content and we want the q a image this time drag that over insert media and now for this left column i'm going to go in advance and we're going to set some padding and we'll turn that to 90 on the top and 40 on the bottom and then we're going to copy the words of wisdom heading and then we'll come back down here and right click and paste it that'll save us from some of the setup for that and we'll go into style we'll set the color to black and we're going to change the height of that to 50 and then below that we're going to add a widget if we type the word test brings up testimonial put that under it it's kind of like an all-in-one widget it has some text and a picture and stuff like that in it and for the image we're going to put a profile picture for bethany and there is the practical advice profile picture we'll drag that over insert and for the content we're just going to put questions and answers from quora we'll put her pin name of pepper low and positioning we'll choose top and then we'll go back to the top and look in style under image we'll set a size of 115 for the image size for the content style we're going to go into typography and we'll choose droid arabic 24 and we'll set the color to that and for the name we'll go into typography and we'll pick open sands condensed and we'll make it 30 and we'll set the color to that make it a little easier to see on the sand and we'll go back where it has title designer we're not going to put that at all we'll just take that out now on the right hand side we're going to choose that column and we're going to tell the vertical alignment to be at the bottom that way when the picture slides in it'll be sliding in at the bottom and then we're going into advanced and even though these look like they have no value at all i'm going to open those up and make sure they all say zero and now we're going to add our image to the right column so we come up here choose our image widget choose our image go to our content folder there's the transparent bethany she's very transparent very genuine great person got that size pull a line left and if we go into style we can set the width to 400 that does not look right the default was percentage we wanted pixels 400 see it happens to me too murphy's law i hate that guy we'll go into advanced motion we're going to fade in from the right we're going to fade in slowly from the right and we're going to wait a thousand milliseconds one second to do that we can hit update we'll come back to our page we'll hit reload look at that we got it working i don't really like all this extra space here so let's go back and fix that and that's because the words of wisdom had extra space when we made a copy from the other header so we'll go into advanced and we'll change this to zero and that looks pretty good we can update and then where it has the name here for bethany inside of this widget let's go ahead and make a link to contact we'll hit update reload and that looks much better now we want to do the sign up and that's pretty straightforward we look at the one over here we just basically change the text out because everything else was okay for our needs so i'll come back over here and we're going to change this text out so we'll click on that come over here paste that in notice i had br tag to allow this to break in the middle and now i'm going to choose alignment right i can make it look exactly like i want it to look now over here if you click on this widget it shows this shortcode form this is not the way to do this there's a better way to do this so we're going to delete that widget and you're like but it was fine it worked well maybe but we want to do it more correctly if we type in this box wp forms we come up with two choices this is the one from the company itself wp forms we'll drag that in the box now over here or over here we can select the form so we'll go in here we want to choose sign up form and now it looks the same but it's more correct now when we build our contact page it'll also have a form like this and we'll be able to set both of those to point to your email address at the same time so we won't worry about making that update just yet so we hit update come up here hit reload and that's ready to go and i forgot one last thing this wasn't supposed to continue to say words of wisdom it was supposed to say practical advice so i'll say update and that'll be fixed so now we're ready to build a footer for our website and our footer will be the same on every page so let's go ahead and go back to elementor and now we're going to have to exit to the dashboard so we'll click there exit to dashboard the first thing we want to do is remove the footer that came with the website then we're going to replace it with one that's much better so the first thing we're going to do is click on appearance customize footer builder and then we're going to delete all the fields that are here now we'll hit publish and we can exit out of that now we're back at our dashboard now under appearance we're going to go to elementor header and footer builder we're going to choose add new intermediate for myself or just choose skip the title is going to be website footer the type is going to be footer choose it makes sense to display on all pages but really what we want is the entire website so don't make that mistake all pages doesn't include posts so anytime you posted something to your blog it wouldn't show up there so you want to choose entire website and that'll mean it'll show up on all pages all post everywhere scroll down user rules all we'll check that box to enable for elementor choose publish now we'll edit with elementor and now we're ready to build our footer you're saying to yourself but you know i just saw what the footer looked like why should i have to do it all the way you're correct i will show you we're going to build it using a template so we're going to click on our folder we're going to choose this little icon here which imports a template and now we're going to go to our content folder and at the bottom are a whole bunch of templates and one of those is the website footer we'll drag that over now we have a website footer we can insert the footer and it automatically loads it in exactly what you need it to say obviously you change this to be whatever content you need whatever image you need but it's already set up easy to use just like that now if you're going to have a shopping cart you might want to change this one over here it says about you could change it to shop you could also have more but i didn't really want more and we put shop there and now it'll go to the shop when we get ready to do that hit update come back over here hit reload scroll to the bottom we already have a footer it's just that easy so now our home page is totally complete okay okay so it's not totally complete what it's totally complete on is your desktop what we need to do is to optimize it for a mobile as well and then you can apply that to tablet too now to make other device adjustments first of all we click down here on the responsive mode and then at that point you can choose between the different views that you're seeing and we're just going to focus on the mobile version and you can apply what you learn here to all your other pages in your tablet so we'll choose the mobile device and notice this wraps funny so we'll choose that we'll go into style and for the size let's just set that to 100.
now that works also the website intro videos aren't typically compatible with mobile devices so if you find that your video intro is not working on a mobile device rest assured it's not your fault so let's scroll down now i want to change the padding on this a little bit and if you go to the bottom of that section i can change it here as well so we'll choose the section and we'll go into advanced and we'll set that to 40 20 40 20. and then for this text i want to make that just a tiny bit bigger so i can select that text go to style typography and we'll choose 26 now when you scroll to the bottom of this section you notice how the wave is really tall we don't want the waves to be that tall on the mobile device so we're going to change that this particular wave is at the bottom of this section so we'll choose that section we'll go to style shape divider we know it's at the bottom and we'll go ahead and set that to 30.
now we scroll down see that looks good now while we're already in that mode let's scroll down and do the other ones so we'll choose that one style shape divider 30. see if i missed any yeah i missed that one select that section style shape divider height 30. okay now all this looks pretty good so we'll leave that alone however this isn't working out it's got too much space up here and she kind of takes the whole screen so we'll choose the umbrella girl and we'll go into advanced we'll do 60 at the top we'll unconnect that we'll do 30 on the left and we'll do 30 on the right at the bottom we'll do zero now we want to work on this piece to bring it up a little bit and make it smaller so the first thing we'll do is work on the padding for that column so we'll choose the column choose advanced now notice these have the little phone next to it this means we're only editing the phone version i'll type 10. we'll select the be inspired go to style typography we'll set the font to 40.
it's still wrapping so let's move it down now it doesn't wrap so now it's at 38. now that's a little bit close at the top so let's go ahead and go back into our padding on that we'll disconnect these and let's set the padding at the top to say 30. now we want to adjust this font so we'll select that we'll go to style typography and we'll set the size to 28 and now there's too much space below b inspired so we'll choose that we'll go to advanced change this to zero brings that up and that looks real good now so we'll scroll down there's not enough spacing at the bottom of that wave so we can choose that column and at the bottom let's try 50.
There that looks better now for the about me the spacing looks okay but look how close that one is so we're going to choose the icon and we'll go to advanced and then for the margin at the top we'll put 60 and that looks good same thing with this one we'll select the icon go to advanced and set the top one to 60.
now for the words of wisdom that's a little small so i'll click on that choose style typography let's try a size of 40. that worked out good now this section here really doesn't work really well look at the text how it fits in there funny and it's a wrong color and i wasn't able to find a way to make this work well that made any sense but it's a good chance to see another feature and that is we're going to select that section we'll go to advanced and under responsive we're going to hide that section on mobile now you can hide a section you can hide a column and you can hide a widget so you have that flexibility in this case we're just hiding the whole section now we'll scroll down this particular piece of text here let's go ahead and choose that and let's center it there's no way to center this any easy way unfortunately and that should do it now what you can do is you can click this little tab right here and this gives you an idea of what it's going to look like on a mobile device so you scroll up and you see is there anything else i want to change about this but it looks pretty good so we can bring that back out choose update and the mobile updates to our home page are now complete so now our home page is totally complete and we've accomplished a lot in a small amount of time so i'm going to go back to my elementor i'm going to exit elementor and now that i've personally completed a substantial amount of work i'm going to use my backup buddy again if you have another method of backing up it's a good time to do it i'm going to choose create backup i'm going to choose complete backup let it do its thing now the backup is complete come back up download the backup to my computer that is complete and now i have the most recent backup of everything that i've done so far so if anything goes wrong i can at least get back to where i am right now so now we're ready to start on our next page so we'll go back to our dashboard and we're ready to start on our about us page and let's go ahead and close this down here we're going to go to pages we'll hover over about and choose edit with elementor now that our about page is loaded in elementor let's go ahead and go back to bethany's site and see what her about page looks like so i'll scroll to the top click on about and we're going to build this nice header we're going to put some text in that's going to wrap around a picture and we're going to put that background that has self-tastic in it let's go ahead and go back to elementor the first thing we'll do is update the background picture for the about section so we'll choose that section go to style choose the image now we need to bring up our content folder scroll to the top and now we're looking for our header images so we'll scroll down and there they are and the one we want at this point is going to be the about header so i'll drag that over now that's loaded we can insert media notice there's some shading on this image we're going to do some shading ourselves but it's only going to be enough to shade the top so that the menu shows through a little bit better and i'll show you how that works we're going to go to the background overlay section and these are the two colors that are associated in here we'll choose the first color we'll set it to that and i'll close that and i'm going to start with a location of zero which is the top edge up here and then i'll go to the second color paste that in now if you're interested where am i getting these particular colors from i'm getting them from the about us content in case you want to do the same thing then i can close that and notice how it's light at the top and it goes dark to the bottom if i change this angle to 180 it turns it upside down now it's a little bit dark at the top and light at the bottom and then for the bottom location i'm just going to change it to 24 because i only wanted to come down a certain amount of space now if i click on update and we go back to our site and view it scroll to the top click on about notice there's a little bit of shading here it made our menu show up just a tiny bit better and that's what we were looking for so let's go back to elementor and now let's work on the header so we'll select that we'll make the align left we'll go into style let's set the color to white it already is white but just in case we'll go into typography we'll set the font to lundrina shadow size 90 and then we'll go into advanced we'll open up our padding and let's set this to to 150 that pushes that down just nicely like that we can hit update and now if we look at bethany's you'll see there's a little bit of a shape divider here we're going to add that same effect using that same cyan color we'll go back to our elementor let's go ahead and choose that section and now we're going to scroll down choose shape divider and we're going to apply it to the bottom and we're going to select tilt opacity and then we'll set the color update reload our page and there it is we're going up using this header on a lot of pages so what i want to do next is save this as a template so let's go back to elementor we'll right click choose save as template give the template a name hit save our template has been saved so now we can close that window and now we want to work on the next section so the first thing we'll do is choose that section go to style we'll set the background color and then we're going to set a background overlay notice that there's something in the background already we'll choose background overlay there's the current one we'll choose that bring up our content folder now we need to find our logo background overlay so we'll scroll down to our logo section and there it is we'll drag it over now it's loaded insert media we're going to choose ours to be top left and we'll leave it at fixed we'll leave it at no repeat our size will be covered and we'll set our opacity to .05 so we can see it a little bit better so now you can see that shows in the background but it doesn't get in the way of the text now i want to adjust the padding for this section so we'll scroll back to the top go to advanced let's just make this 100 at the top 100 at the bottom we're not going to use any of their content but we do need one cell i'm just going to take this one and delete that column and then i'm going to scroll down and i'll delete this section and i'll delete this section and now we're left with the one section we need and then i will delete that widget and i'll delete that widget and i'll delete that widget and i'll delete that intersection so now basically we have a header a heading and we have a text editor now alternatively you could come over here and you could drag the heading over and you could drag the text editor over it as well so we'll select the heading and we want that to say about me and we want to go to style we're going to set the typography the font will be montserrat 32 a weight of 300.
now we actually have two of these we only need one i'll delete that one we're going to edit the other text editor so i select that we'll come back in here to style we'll choose a color of that typography we'll set the font to railway size to 21 weight to 400. now we'll go back to content and i'll paste in the correct content and now we want an image over here to the right and to do that we're going to click on add media and now we need to get the item that we're going to be adding so let's go to our content folder scroll to the top and there is the about picture we'll drag that over it's loaded insert into post and it's at the bottom but we don't want that there so let me click on that and delete it and i'll show you what i really wanted to do i wanted to scroll to the top select right there so i can set it in there choose add media select the image insert now it's inserted at the top we need a few more adjustments here so we'll select the image this icon here will align it to the right so now all of a sudden the text wraps around it nicely we'll click the pencil for the size i'm going to choose full size if you wanted to add a link you could add it there we'll do update and it wraps nicely let's hit update go back to our page hit reload and we're making progress now on bethany's page she's got the words of wisdom section so let's go back to our elementor we'll scroll down we'll choose the folder icon we'll choose the words of wisdom section click on insert i always choose no on this question now it's been inserted into our page we can hit update go back to our page hit reload and now we just need to add the black waves brush above the footer we can go back to elementor so words of wisdom is already selected we'll go to style scroll down shape divider we're going to put it at the bottom we're going to choose waves brush we'll set the color we'll set the height to 60.
notice this is overlaying funny right here it's okay advanced we'll unconnect those and let's see what 50 does looks just right so we can hit on update go back to our page hit reload and this page is complete now inadvertently even though i told this font to be railway somehow it got saved as default so we need to choose this widget go to style typography and where it says default we'll choose railway and notice how it changed there we'll do update we'll go back to our page and now see it's the old font here we hit reload now that's the correct font then we go back to elementor and we can exit elementor and go back to our dashboard so let's go ahead and go back to pages and now that we've made the about page i want to make some duplicates of that page so that i can use them later so i'm going to go over and hover over about choose duplicate now here's our duplicate i'm going to choose quick edit the title for this page will be gallery the slug name will also be gallery status published hit update now we'll make another duplicate for our blog page again we'll hover over the duplicate choose quick edit this one will be called blog slug name blog published hit update and we're going to make one more copy and we're going to make a services page even though bethany's site doesn't need a services page yours might so we're going to make a services page for you in case you need one so we'll go to duplicate this and again hover over that so we can choose quick edit title equals services slug name equals services status is published hit update and that should be all the duplicate pages we'll need for a while and now if we go back to bethany's site scroll to the top you can see these are the different items she has we want to go ahead and make our menu match hers so let's go back to our dashboard we're going to choose appearance we're going to choose menus make sure we're pointing at the primary menu still and this is what our menu looks like right now we're not going to need a testimonial for her site but if you need one you'll leave it so i'm going to take that one out also you can decide whether or not to leave a home button on many websites these days the logo itself is clickable so you don't really need a home button so it's kind of up to you whether you want one or not i'm going to leave ours there for now now for bethany's website it needs a blog it needs a gallery you might add services if you're going to add the services page that we're going to create we'll choose add to menu and now you can drag these around to organize them so i want the gallery to be here and i want the blog to be here scroll down save changes change is saved and now we're going to quickly build a services page in case you need one for your website so we're going to go to pages i'm going to scroll down hover over services edit with elementor and there's our copy of our about page and what we're going to do is delete every single widget here and then we're going to choose the folder and then we're going to import a template we'll go back to our content folder scroll down to the templates here's our services page drag that over and here's our complete services page we'll choose insert i'll always choose no and look at there you have a complete services page you can make updates and changes to that yourself we'll hit update your services page is complete we'll exit to the dashboard and now we're ready to work on our gallery page so let's go back to pages we'll hover over gallery choose edit with elementor see how nice it is to start with a page that already has a lot done for us so we'll go ahead and change that text to gallery let's change our background have a different background for the gallery select that section so we can change the background image we'll go to style click on that now we need to load the correct header so let's go to our content folder scroll down to headers and there's the gallery header drag that over choose insert media our header is complete now we want to work on the next section and we're going to go ahead and delete this header and delete that text editor and the first thing i'm going to do is show you the free gallery so we'll come up here choose type in gallery and there's the basic gallery drag that in now we want to add pictures to the gallery we need to go back to our content folder and here's our gallery pictures we'll choose that one hold down shift and choose that one so they're all selected we'll drag them all over at once and let them all load at same time they're all loaded and by default they're all selected so we can create new gallery you could reorganize these if you wanted to and then we'll choose insert gallery and there's our gallery we'll scroll down we'll set our image size to medium columns four let's hit update let's go back to our page scroll to the top let's see what that looks like we need to hit reload because our menu is not there yet our new menu there's our new menu choose gallery and there's our gallery so we can see this is a nice looking gallery and not bad it's also a light box gallery so we click on that but it's just not as fancy as the one that bethany has if we go to her gallery see how nicely those load in like that now at our gallery if we made all these pictures the same size it would make it look a lot better than it does and that's basically as good as you're going to be able to do for a free plugin at this point but in my case i'm going to want to go ahead and go back to elementor and i'm going to upgrade to elementor pro so you can see how to use the pro version of the gallery now that upgrade is complete i'm going to delete the current gallery i'm going to come over here type in gallery and we want this one it's just called gallery but it ought to be called super fancy gallery choose that we want to pick our pictures they're already loaded from before so we'll just select them all create gallery again you can switch these around however you want to organize them insert gallery and now see it automatically made things fit nice together like a puzzle but we're going to scroll down and the layout type we're going to do is masonry look at that and we'll use four columns that's the default we can choose update now let's go review our page again we'll hit reload and i just like that a lot better obviously it's up to you but for me between that and the other things i can do with elementor pro it was worth it for me if you decide you want to get the pro version of elementor at the best possible price just go to webveder.com front slash elementor and choose the elementor pro button so our gallery page is complete so we can go and exit to the dashboard to blog or not to blog that is the question at this point there's many reason to have a really good blog on your website and there's people who just don't need a blog if your website doesn't need a blog you can remove the blog button from your menu bar and go ahead and proceed to the contact us section for the rest of us we're going to go ahead and create a blog so the first step in adding a blog to your website is to create a header for all of your blog posts as well as a header for your blog page that contains all your posts so let's go ahead and go to appearance and then we'll go to elementor header footer first we'll create a header for your blog page the page that contains a list of all your posts so the title will be blog page header template type will be a header and where do we want it to display we want to display on our blog post page user roles all we'll enable this for elementor we'll publish choose edit with elementor i'm providing a template for both the blog page header and the blog post header so let's go ahead and click on the folder we're going to choose the upload arrow bring up our content folder scroll down to the templates and there's our blog page header we'll drag that over and there's our blog page header we'll go ahead and insert i'll always choose no and there's our blog page header obviously you'd change this out to be whatever you needed it to be we'll choose update exit elementor now we want to create our blog post header so we'll choose add new we'll set the title to blog post header template type header display on all posts user rules all enable for elementor choose publish edit with elementor now we're in elementor we'll choose the folder we're going to choose the upload arrow again go back to our content folder now we're going to choose the blog post header which is this one drag that over and there's our blog post header go ahead and insert that always choose no again make whatever changes you want here we'll choose update exit elementor and now your header for your blog page and your blog post is complete the next step to adding a blog to our website is to remove any old posts so let's go ahead and choose posts on the left so now we can select all the posts in this case one bulk actions move to trash apply and that's all gone now we're ready to add our first post so we're going to choose add new let's visit the script for a second i want to point out how helpful it is to have all the information you're going to need to do your post obviously you're not likely to just make these up as you go along so i collected all the information for the different posts we're going to do to make this easier so for example the title of the first post will be this so we'll set the title to that and now for the content paste that in and notice at the top this is already bold because in the google doc i did it was already bold so it allowed me to import some of the formatting as well blog posts are organized into categories so over here we want to add a category in this case this particular post is a life lessons so i'll add life lessons hit enter and it automatically checked it now if you don't give it a category it'll automatically use uncategorized next we'll add tags for this particular post i'll hit add and these are basically like keywords that are associated with the post i also want to point out if you need to make changes or adjustments to your categories or tags under posts categories and tags allow you to make those updates and changes scroll down now we want to add a featured image i'm going to choose set featured image we want to bring up our content folder again and the images for blog will be near the top so there's our first blog and there's our six we're gonna have six in this example drag those over and our first blog is the puppy set featured image now i normally make my blog images about 800 pixels across just as a reference now we can scroll up and choose publish now if i want to see this post just as an example i can right click on this link and open in a new tab and we can look at that tab and there's that header we made and this is the post just like that not bad huh let's go ahead and close that now we're going to add one more post together so i'll click add new and then the other four will use some magic to make those since it's all the same process so the second blog post the title is that the content for the post is that this one's going to have multiple categories so we'll choose the life lessons we'll add a new one hit enter this will also have mental health personal development and we'll scroll down we'll put some tags in that are terms associated with the document scroll to the bottom set our featured image and there's our blog 2 image that one is now set scroll to the top now if you didn't want to publish immediately you could go inside and choose a date that you'd publish something i'm going to publish this immediately now we can right click on that open a new tab check it out and there's our second post notice it automatically added the share post plugin so other people can share your blog posts we'll close that i'm going to go ahead and add the additional post at magic speed okay and so now all six posts have been added and let's go ahead and look at this particular post right click open in new tab i'll bring that up this particular one bethany wrote about people that wanted to make money using blogs and so if you have an interest in doing that this might give you some more information as well we want to make a couple of changes to this to make this more user friendly first of all notice it says buy yoda user instead of buy pepper low and if we click on that has picture of me we don't want that well she doesn't want that so we'll back up how do we fix this we'll go back to our wordpress admin so the two things we'll change are the profile picture and the pin name the first thing we'll change is the profile picture and we're going to do that inside of profile press and i go to plugins and then i scroll down to profile press and i choose settings i'm going to choose profile and cover photo now i'm going to scroll down where it says disable gravatar we're going to choose to disable that now we want to choose an image at this point we want to upload a profile picture for bethany for her blog bring up our content folder there's our profile picture for the blog drag that over select save changes next to change the pin name we're going to go to users i'll click on the username we'll scroll down and for a nickname we'll change it to pepperlow and for the display name we'll choose pepperlow and there's also a section to do bio info let's put a little bio in there choose update profile profiles updated now if we go back to our post and scroll down where it says yo to user if we reload it'll now have bethany's pen name pepper low if we click on pepper low it now says pepperlow has her picture and it has her bio pretty nice right now if we back up we're looking at a post now one of the problems with this post is that there's no way to really get anywhere else other than the post itself so a really convenient thing to have is a sidebar over here that has a lot of controls that you can use within your blog so let's go ahead and add the sidebar so we're gonna go back to our wordpress we're going to go to appearance customize we'll choose sidebar under blog post we'll choose right sidebar we'll hit publish and then we can close out of that now we want to customize our sidebar to do that we're going to go to appearance widgets now the sidebar that's going to be the one that's on your blog post is called the main sidebar and for whatever reason there's a lot of stuff in here i may or may not want the defaults for these are never exactly the same so what we want to do is we want to clean this up now if we go to the script file this is basically what i want to get i want to have a search box i want to see recent post i want to see recent comments archives categories meta and a tag cloud and we'll talk about those but basically we're trying to get to that and we're currently seeing this so the first thing that we can do is delete all of these that just say block on them i think as much as anything they're just duplicates and now we have the list that looks like this one except that there's one extra one that i want to add to this now on the left hand side are all the widgets you could add to your sidebar and you could probably find other plugins to add additional stuff if i scroll down the one i'm interested in is called tag cloud if i click on that i can choose where i want it to be it's got by default it's chosen the main sidebar i'll choose add widget and when i scroll up now tag cloud has been added to the collectional widgets on the main sidebar we're not going to give it a title it'll automatically say tag cloud also you can organize these however you want that order right there matches what we have on our list again you could pick other ones if you want to put stuff in there but these are basically the general tool set you're going to see on most blogs and there is no save on this page so basically it's already saved so now if we come back over to our post and we hit reload and now you can see the sidebar has been added we have a search box we have recent post comments archives categories meta options and a tag cloud the next thing you might wonder is say okay here's the default but what kind of control do i have over this and the answer is really not much the free version astro the free version of elementor neither of those give you any real tools for doing any updates and changes to the formatting for the posts themselves so unfortunately kind of stuck with the excessive padding in the default font and things like that i know you're saying yourself hey there must be a way to fix the spacing in the fonts for free right absolutely i will show you so what you want to do is go to your script and you're going to look for a section under the blogs that's called the just blog post font and spacing and this is cascading style sheets css don't worry about what it does just worry that it doesn't what you want to do is select the yellow text copy to the clipboard and now we're going to go back to our wordpress admin we're going to go to appearance customize and at the very bottom is additional css we'll click on that we don't need this little window so we can do close and right here there's nothing in there yet so we're just going to paste that in at the top and now we'll do publish and then we'll come back over and this is what our page looks like right now this is what the fonts look like this is what the spacing looks like we hit reload look at that we have better spacing now we have a different font that doesn't take up so much room it's a lot cleaner than it was before and it was free so at this point we want to be able to access our blogs from a blog page if we click on our blog page actually let me clean this up real quick we've got extra tab here if we click on our blog link it takes us to our default about page remember we made a duplicate of that we'd like that to come up with our blog so let's go do that so we're going to go back to our wordpress admin we'll close that to get to our dashboard we're going to go to pages we'll hover over blog choose edit with elementor and from within here we're going to delete the top section and the delete that about me section and leave words of wisdom we'll choose update and now we'll exit elementor we'll choose appearance customize scroll down home page settings for post we'll choose blog we'll hit publish and now we'll visit our website again and hit reload and look at there there's our header and there are all of our blog posts now unfortunately no matter how much you talk to yourself about hey yoda this really doesn't have a lot of formatting what can we do about it i don't have an answer for that because unfortunately there wasn't really an easy freeway that i was able to do that there must be free plugins out there that will allow you to have more control over your blog layout than this but i haven't been able to locate them however just for comparison if you have access to elementor pro it's possible to make this page look really professional with very little work at all and that's what we're going to do next so we'll go back to our wordpress and where we had post page and we set to blog let's go ahead and set that back to select and we'll hit publish now we're going to exit out of that to our dashboard so let's edit this page again with elementor now at the very top we're going to insert a section we'll choose our folder we'll choose my templates now we want to insert our blog page header so we'll choose insert always choose no so at the very top we will not need this intersection that has the logo in the menu in it so we're going to close that one not the one at the top but that one right there so we close that now there's not a lot of space there let's choose the widget that has the word blog in it we'll go to advanced and where it says 200 let's put 300 now we want to add another section just below our header and in this box we'll hit the plus we'll choose a single column now we want to go up to our widgets again we'll type in the word post that's the one we want right there make sure your icon matches that drag that over and there it is that's looking nice now let's go ahead and change a couple things on it first of all we'll set the skin to cards that's really nice now let's go ahead and do some formatting on this so we're going to go to style we'll go into content under title for typography we'll set the font open sans condensed we'll set the size to 24.
we'll close that next we'll do the excerpt typography but open sans condensed we'll set the size of this to 21. we'll close that finally the read more typography font open sans condensed and we'll set this one to 16. close that now hit update now go back to our blog and hit reload and look at that we have a really nice looking blog now now i understand it took elementor pro to make it look that good but that decision is going to need to be up to you whether or not you feel it's worth paying for elementor pro to be able to get a nice fancy blog that looks like this now we're ready to work on our final page of the website before we start on the shopping cart and that's the contact us page so let's go ahead and go back to elementor and now we'll exit out of elementor back to our dashboard to start on our contact us page we need to go back to pages now we want to go down and hover over contact choose edit with elementor the first thing we'll do is delete their header and add our own so let's delete that now we'll choose the plus sign to add a section we'll go to our folder and remember we saved in our my templates are about us header so go ahead and insert that always choose no now we'll choose the about and let's change that to contact now we want to change the background image we have a special one for this page so we'll go to style click on the image now this is one of the situations i talked about earlier it didn't come up with the pictures this time like it had before i don't understand why i want to bring up our content folder now we're going back to our header images they'll be near the top and there's our header image for the contact page drag that over choose insert now we're ready to work on the next section let's go ahead and change the message us we'll choose that go into style typography we'll set the font to open sans condensed size 30.
close that we also have a background that we're going to use so we'll choose that section we'll go to style click on the image now we want to go back to our content folder scroll to the top there's our background for the contact now notice it's not going to matter that the pictures aren't here i can still drag that over and it works fine choose insert now we're going to scroll down we'll set the settings for this soon that'll allow this to point to your email under contact us let's put some content there like that i'm going to make that a little darker so i'll go into the style for that change the color to that close that out we'll go into typography font you guessed it open sans condensed size 21 we'll put a weight of 400 that looks nice we'll close that now we want to put a profile image under this so we'll go back to our widgets let's drag an image right there we'll select the image go to our library we'll scroll down the image we want's already in here that one right there insert media scroll down let's go ahead and style we'll set the max width to 75 that's percent by the way we learned that already and now for follow us let's edit that first we'll go into advanced instead of 100 for the margin top we'll put 70.
go into style typography font open sans condensed size 30. that looks good let's close that at the bottom is our social media we'll choose that i'm going to go into style and set the size to 32 make it bigger go back into content these can be added subtracted organized so for example i can take instagram and drag it to the bottom like that now you're going to set each one of these so we'll go ahead and set hers now to close these be sure you click on the name because if you click on the x over to the right you're going to actually delete the item and that would be bad now in bethany's case she doesn't have a youtube so we're going to use that one differently so we'll recycle that one we click on it we'll go to here in the box we'll type medium and there's medium we'll insert that now for the link we'll put her medium link you can close that back down i think we'll put that one at the bottom now let's do the facebook one set the link to that close that now we're ready for twitter our twitter link is that close that let's put twitter at the top open instagram set the link close it and we're okay with that now let's come back on this side and work on it a little bit we'll go ahead and choose this widget we're going to come over to the left hand side we'll go ahead and set the address like that close that out now i'll put the phone number like that change the hours like that obviously you could pick different ones you can also move these around you can add one right there so let's go ahead and go to style under text we'll set the color to that close that typography change the font open sans condensed let's make that 21 and weight of 400.
now we want to work on our map so we can select that widget we can put our location zoom at 15 is fine but i think we want this a little bit taller maybe come down to here somewhere let's try 500. that looks good we'll hit update come back over to our page we'll click on contact and look there we already have a contact us page it was that fast isn't that nice but now we need to get the forms to point to you in this case they're going to point to bethany but you get the idea so let's go back to elementor now we're going to exit elementor to the dashboard now we want to edit our forms as well as set the forms to point to the email we want to go to to do that we're going to go into wp forms and then i'm going to choose the contact form that's the one we're going to edit so i click on that now this works very similar to elementor that's why it's such a great product and everything we're going to do with this basically is free so suppose you wanted to add a subject line on the left hand side grab the single line text widget drop it in just like that now if we choose field options and we select that field now we can edit that field and we can make it say subject now suppose you want to go all the way across under advanced set field size to large and now it's all the way across so now let's say you wanted to have a phone field come back over to add fields and you look and you're like uh oh there's no phone field oh wait here it is and you click on the phone field upgrade to pro that's quite convenient everybody's going to want a phone number yet we're gonna have to pay for it but you're saying to yourself hey yoda there's gotta be a way around this don't you have a trick for this absolutely i will show you so we'll close out that window now instead of picking the phone field let's go back up pick the single line field we'll drag it in let's say we want to set it there and then we'll go back to field options we choose that field set the label to phone now we have a phone field now let's say you want that field to be required you notice the ones with an asterisk next to them those are the ones that are required so for the phone field if we turn this on right here now it's required it has the asterisk next to it now we'll go into the advanced and we'll set the width to large now we have a phone field but what's the difference well the main difference is when somebody enters a phone number in ours it's not validated to make sure it really is a phone number now we want to set where the email is going to go to so on the left hand side if you go to settings and then you go to notifications right here send email address that is the email that it's going to send to by default it's going to be the one that's in your admin and that might be fine but in our case the admin was mine but we want these to go to bethany so we'll put that in there and we can set the subject line for the emails so let's change that i'll change it to say self-tastic comments and then who do we want the from name to be we'll say from there we can leave the rest alone let's go ahead and click save now i'll close that and we'll go ahead and make the change we need for the sign up page as well so we'll click on sign up we just want to go into settings notifications this will also go to bethany or the subject line join club self-tastic set our from name everything else can stay the same hit save obviously we didn't do a lot in wp forms only the stuff we really needed but if you're interested in learning more make sure you watch my video if you're looking to learn more about what wp forms can do for your website then you'll want to check out my wp forms for a beginner's video at some point so hit close and now we want to test this out to see that we get email so back to our website hit refresh just to make sure we're looking at a fresh copy and notice now it has the subject line now this is going to go to bethany so let's send it from me subject line test hello world hit send and our message was sent successfully good job now one of the things you might be interested in is you might have said to yourself hey what about some formatting here what can we do well again without getting the pro version they really don't give us a lot of tools but you're like but yoda you always have a piece of code for us so we can do it without having to pay for it i know you're right and okay i will show you so what you want to do is you want to go to your script and look under the form section for a section called format your forms so once again you'll highlight the yellow code like that copy it to your clipboard now let's go back to our wordpress and now from here we're going to go to appearance customize scroll down additional css let's click on contact over here so we can actually see this working and that's what it looks like right now down below this let's hit a couple extra lines paste that in and look at that it changed everything up just a little bit again i'm not going to try to teach you css but you can look in here and see that some of these things can be changed and get a little bit more flexibility if you like we'll choose publish go back to our page that's what it looked like before hit reload that's what it looks like now now officially our website's complete but there's one more step that we don't want to forget and that is to turn on secure pages for our website to do that we're going to go back to wordpress we'll exit to the dashboard now we want to install the plugin that's going to allow us to make our pages secure so we're going to go down to plugins add new plugin upload plugin choose file make sure we're looking at our downloads folder and now the one we're looking for is really simple ssl hit open install now activate plug-in now for some reason you didn't have this plug-in already you just need to go to web yoder dot com front slash plugins scroll down to this project and then download the plugin you need now once that's installed it immediately says hey go ahead and activate but i don't want to do that just yet i want to do is we want to scroll down find the plugin and we're going to go to settings tells us we're not connected yet we know that but what we're really looking for is this check mark it found an ssl certificate detected for our website if you don't see that message you need to contact your hosting company to ask them how to get your certificate activated because without a certificate we can't secure your web pages since we have a certificate all i need to do is click on go ahead to activate now it's been activated once you've activated your ssl and you weren't in secure mode it's likely to want you to log back in so for example our next step is going to click on elementor and when i did that it asked me to log back in so i'll choose login so our next step was we clicked on elementor it brought up this page and it has these options we're looking for the option called tools so we click on tools and then we're going to click on replace url so in this box we're going to put our original url when we didn't have secure pages so i'll paste that in and notice it just has http then in the second box i'm going to paste the same thing but at the beginning i'll put an s right there basically going from non-secure pages to secure pages and it's going to look throughout the entire website and see any places that finds this and replace it with this we'll hit replace 261 rows affected that was a good thing now if we go back to our page notice it's not secure we hit reload now it has a little lock there and now we're secure so our website is officially complete and if you don't plan on adding the shopping cart to your website there's one more thing you'll want to check out at the end of this video i have a search engine optimization section that will teach you how to make your website liked better by the search engines if you will be adding the shopping cart to your website simply choose the link above to proceed to the woocommerce video then jump ahead to the section for adding the shopping cart so we've reached the end of creating the website i hope you've enjoyed taking the course i know i've enjoyed being your guide and your instructor but as promised i had four really key things that i wanted to add at the end of this video that will help your website show up in the search engines better the first tip is that inside of wordpress there's a place that specifically discourages search engines from indexing your site once your website's live you don't want it to be discouraged from being indexed so let's fix that exit to the dashboard and then we're going to look for settings and under settings we're going to reading and this may or may not be set depending on when and how yours was done and look at that search engine visibility discourage search engines from indexing this site i definitely want to turn that off and hit save changes tip number two there is an amazing plugin out there called yoast every website that ranks higher than yours probably has yoast also free so we're going to go to plugins we're going to add a new plugin and over here type in yoast 5 million active installations tells you something so let's go ahead and install it let's activate it now you have the most powerful plugin for doing seo available tip number three secure pages google likes websites that have a lock google likes websites that are mobile friendly so if we can do both of those things we're going to ensure that our website's liked better tip number four you want to make sure the search engines think the value of your website's stronger than any of your competitions obviously having a lot of great graphics and great content your website makes a difference having a really good look and feel like this website makes a difference however one of the number one things that improve your search engine results is by having other websites point to you if somebody else's website has a link to you that's called a backlink the more backlinks you have the more important your website seems to google the more backlinks the people who point to you have the more important they seem which also means the more important you are now it seems like a lot of work but if you go to jose1.com these guys will teach you everything you need to know about backlinks that's basically all they do and if you look at it jose one seo literally is their middle name so they know what they're doing now under seo solutions it shows you the basics the terminology and the details they'll teach you everything you need to know as far as making your own backlinks how it works how to make the system work for you and if you decide you don't want to put the time in to build them yourself you can also contact them so if you decide to use jose one services be sure to mention the promo code web yoda and that'll save you 50 off your first month with 100 guarantee on that first month if you don't like it you get your money back now i truly hope i covered everything you needed in this tutorial now if there's something i didn't mention or you had additional questions please leave them below be more than happy to answer them for you but if i don't know the answer i'll go hey i don't know but if i do know the answer i can find the answer i'll give it to you and maybe we can work on it together so i really enjoy doing this i hope you had a great time as well the only real payment i'm looking for if i could possibly get a subscribe out of this possibly a like out of this that'd be super helpful but outside of that i just hope you have a great day peace out you
