Astra Theme Tutorial 2020 ~ Learn How To Use The Astra Theme To Make A WordPress Website
If you're looking for the best astro 2.0, tutorial to build an astro website with easy to follow steps and 90 minutes or less at no cost to you then you've come to the right. Place. Hi i'm bethany, and today we're at the showroom, for one of our clients, jim gray designs. This company specializes. In high-end, audio video, solutions. They needed a new website, that would show the quality of their work and be visually, impressive, mobile friendly, and easy to navigate. The website turned out so well that my husband and i decided to make a tutorial, to show others how to make jim gray's new website. Have fun and if you like this video be sure to like and subscribe. Thanks bethany, hello i'm yoda and welcome to my youtube channel. In this website tutorial, you'll learn how to build a website that has an amazing intro video professional, logo eye catching graphics and all the bells and whistles the pros use at absolutely no cost to you this video uses all the current web design and web development, techniques to build a fully responsive, website that automatically, adjusts to meet the screen needs of any computer, laptop, tablet phone or any other handheld, device. To get started the only hard cost we have is web hosting and that's where your website lives that's going to run us three to ten dollars a month, with your web hosting you'll get a free domain, a value of fifteen dollars as well as an ssl, key which makes your web pages secure and that has a value of about ninety nine dollars. As for software requirements, there are none everything we're going to need we're going to do online. As for system requirements, this website tutorial, is compatible, with both windows and ios systems, all you need is your favorite browser and access to the internet and you're ready to go. I recommend chrome and firefox, as browsers of choice as i've had some students in the past that had complaints, about compatibility. Issues with safari, opera and internet explorer, now during this course if you run in any troubles just leave a comment below the video and i'd be more than happy to assist you and don't be shy about asking for help i've been a webmaster, instructor, aka the web yoda for over 20 years and i love to hear from my students. But if you could please pay it forward if you could like the video, subscribe to the video share the video tell your friends about the video. Those are the kind of things that help get the word out though so other students like you can find this video.
There Was something else, oh at the end of this video i'm going to discuss the four biggest mistakes people make that drastically, hurt your search engine placement, turns out the solutions, for these four things are really easy and they're free. So i think we're ready to get started so without further delay let's go ahead and look at the website we're going to build today. Let's go ahead and visit the jim gray designs, 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 his website starts with this video intro we're going to learn how to build one of those. Now notice how this text flies into place at just the right moment once the homepage, 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 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. As we scroll down the home page watch for the special effects notice how the images fly in. Notice how these things come in gradually, notice how the images pop in how the text pops in all these type special effects you're going to learn how to do, we're going to be able to build this carousel. Notice how this little white area is sitting on top of a background, and that sits still. We're going to be able to build this footer down here and then we'll be able to reproduce, that for every single page so it looks the same. Now our overall, strategy, for building this website, is that we're going to learn how to do everything you see here on the home page step by step. And then for the additional, pages we'll load something that's almost complete, and just learn how to do the new things that are added to those pages so you don't have to build everything, from scratch.
Pretty Much everything you see on the about us page we did something similar to it on the home page however where the gem gray signature, is we're going to learn how to insert that and then resize, it to be the size we want it to be. On the services, page the service gallery is very similar to the services, on the homepage, so we won't need to reproduce, that, but at the very bottom there's a guarantee, section that we need to make a mobile friendly version of and we're going to see how to do that. The race page introduces, some really fancy, rate tables, we're going to learn how to do those. And everything else about this page is something that we've pretty much done before. In the showroom we're going to learn how to build this super fancy, gallery. Now this is also a light box gallery so if you click on any one of these, it brings it up in a light box, and then you can scroll through them and it doesn't matter where you start if you come down you pick a different one it'll start with that one. And then as you scroll around it'll go from there. The menu item news is actually a pull down and not a page itself, and it reveals, the pages you can choose from we'll learn how to do this menu trick right here. The wire nuts page is jim gray design's, newsletter, page and we're going to learn how to add the most recent newsletter, to the top of this section. The articles page is a collection of magazine, articles about gem grade designs, we're going to learn how to add an image and then learn how to make that image clickable to a pdf, file. We'll learn how to make a contact, us page including inserting, a form, and inserting, a map. And with this website we're also going to make a get a quote page where we have a separate form in this case it asks a little bit more about the project that somebody wants a quote for, and it doesn't have a map at the bottom because there's no reason to have a map for that. Now if everything goes as planned you'll be able to build this entire website, in 90 minutes time. 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 settle on some results from pc magazine. You have to understand that pc magazine, has been around for nearly 40 years providing essential technology, information to the end user. For our purposes, every year pc magazine does an editor's choice award to determine the best web hosting companies. And shown here the top six web hosting companies for this year with hostgator, being number one.
It Turns out the hostgator, has been rated the number one web hosting provider by pc magazine for many years running. Basically hostgator, collectively, has the features you need. Their server reliability, is amazing, their 24 7 support is amazing their prices are good or better than anybody out there, i personally 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 webbie had a partnered with hostgator, and as part of that partnership, webview to students receive up to 75. Off plus a free domain name, now for you to take advantage of this offer, you simply need to go to your browser and type in hostgator.com. Front slash. Web yoda, now this takes you to the partner page for hostgator, and web yoda and it reveals, our three choices for hosting plans. Currently as part of this partnership, hostgator, is going to offer us a free domain name provided we sign up for one of their annual plans and it turns out this is actually the most affordable, choice for us. If we scroll down we can reveal the pricing for each of the plans, all three of the plans come with one click install, so that means when we go to install the software it's 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 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 you purchase one month it's 5.48. But it's only for that first month and then the price goes up if you go all the way up to 36, months it's going to be 2.71. And it's going to be 61. Off now to get the free domain you're going to pick 12 months 24, months or 36, months so let's go ahead and pick the 12 months it says, 76.40. But let's see if we can do a little bit better than that now we're going to pick a username. In my case i'm going to pick admin yoda. And a security, pin. Then we want to put in our billing information. 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 coming for the whole year. It also includes our free domain name at no cost to us. And that comes with 24, 7 365. Support. Instant activation, of our account, money back guarantee, which is awesome 45, days. Collectively, all these features leave me feeling very confident that i'm making the right decision today so we're going to scroll down, we need to agree to their terms. And now we're ready to check out but in my case i own the domain i'm going to use so i'm going to do one last thing at the top so scroll to the top. And i'm going to choose i already own this domain. And i'm going to change this to say. Choose 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 my godaddy, account, and point that domain to the hostgator, name servers 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, is going 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. 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 softascules. 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 softaskulis. 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 webview. 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 is 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. One of the first skills you need to learn when you want to build your own website, is how to find the login, screen. Easy enough, you go up to your url. Type in your domain, name front slash. Wp. Dash, admin. Log in. So in my case. Yota user. Password. Paste that in, hit log in. They just wanted to verify this is the correct email address in case notifications. Need to be sent to you about your website, we'll click email is correct. And now we're into our hosting environment. Let's get organized, a little bit so we can get started on our website. First of all we no longer need this tab over here so we can close that one. Now i want to open up a tab to the right to view our website, if i click right here i can choose view site, but if i right click i can open it in a new tab. And now we're looking at our new website, not very impressive, right now but we're about to fix that let's also open another tab to the right, and open the completed, jim gray designs website. As a reference site so we can see what we're going to build. So we're going to be going from this. To this, that's our goal, we're going to make it happen. Let's go back to our dashboard. Now before we get too deep into this let me add some highlighting, to the mouse to make it a little easier for you to follow what i'm doing there that's a little bit better. A frequently asked question that comes up is how do i get back to a particular spot in the video, to see what i was doing or how do i get back to where i was at to start a particular, place. The answer that is you go to the video you're watching. When you scroll to the bottom of the video you're watching this is obviously, a different video that i made, you'll see a section that says show more. You choose on show more and you scroll down and it's going to have time stamps. You click on any of these and it takes you to that exact spot so any of the features that we use in here and you want to get directly, to that you can come to these time stamps, click on it and go forward from there.
There's A couple more things we need to add to our wordpress, environment, before we're actually ready to start building our web page, the first of those is a theme. So let's go to a new tab on our browser. Then we want to go to. Wpastra.com. Front slash, web yoda. This is the astro, web yoda partner link which automatically, downloads a free version of the latest astra theme to your computer. With over a million installs, astra has proven itself to be a game changer in the wordpress, world. Asterisk, is also a webview a foundation, partner offering both free products for students as well as foundation, funding which helps us create more courses like this one. We can close that tab. And now we want to go to, appearance. Themes. And we're ready to add that new theme. So at the top, we're going to choose upload. Upload, theme. And then scroll down to where it says choose a file. And if you're not at your downloads, folder go ahead and choose your downloads, folder, select the astra, theme. Click open. And choose install. Once the install is complete. Theme installed successfully. We'll choose activate, which activates, that theme, now our theme is activated. So if we go back to the site we're going to build. And we hit reload. You'll see that it's changed a little bit because now it's a different theme, but there's still a whole lot of nothing going on. Next we need to add the needed plugins, to make our wordpress, website. So we're going to choose plugins, from the dashboard. Choose installed, plugins. And our first step is to get rid of all the plugins, that are there because we're not going to need any so let's scroll down. And there's a whole bunch of stuff that we're just not going to need any of it so we're going to choose this little check box at the top next to plugin and that selects, all of them, under bulk actions we're going to choose deactivate. You have to deactivate, them first, you hit apply. Now we can choose the plug-in, checkbox, again to select them all. From bulk actions this time choose delete. Apply. And, okay yes we really want to do that and it will delete, all of the plugins, that are in our website, environment. Now we're ready to add our own plugins, and to do that we're going to open another tab again, we're going to go to webyo, dot com front slash plugins. Again that's also available. Through the resources, tab if we want to go to plugins, right there, and then we want to scroll down to the project we're doing in this case jim gray designs. And we're going to download, each of these, one of the questions i get is why don't you just download, them inside the wordpress, environment, it will allow you to get them directly from the library. And the answer is is not everybody's, using the same wordpress, and not every environment, may have all the plugins we're using, i want to guarantee you have all those, so want to click on each one of these and it's going to download, them to our computer. And just a brief understanding, the astro starter sites is a bunch of website, starter kits so we don't have to build everything from scratch. The contact, form 7 and the cf7. Elementor. Are what we're going to use to make our contact, forms, and the duplicate, page is going to allow us to make duplicates, inside of our website environment so we don't have to do everything from scratch every time.
So We can close that tab. And back to our dashboard, now we can click on add new for our plugins. We're going to choose upload plugin. Choose file, doesn't matter what order you do these in we'll just start at the top, we'll choose that one first. Open. Install now. Be sure to activate, the plugins. Add new. Upload, plugin. Choose file. We'll choose a second one. Open. Install now. Activate, plugin. Two more to go. Add new. Upload, plugin. Choose file. Third one. Open. Install. Now. Activate, plugin. And the final one add new. Upload plugin. Choose file. Pick the last one. Open. Install, now. Activate, plugin. And so now all of our plugins, are installed. But notice there's this little update stuff next to each one of these. We can choose, all the plugins again like we did before, under bulk actions. We can say update. Apply, now. And that updates. All of our plugins, now often is the case there could be updates to your plugins, into your theme, we already saw how to update your plugins. Now to update your theme you go to appearance. You go to themes. Yours should be the one right here if it's the active one in this case there is an update for that we'll choose update now. And now our theme is up to date, so now we're going to go back to plugins. And we're ready to get started. We're going to use the astra starter sites, we're going to choose c library. And this is going to reveal. The choices, of the types, of themes, the types of templates they have available. We're going to be using elementor. We'll choose next. And what you're looking at is all the starter websites, they have available, to choose from basically, you can install. Any of these websites, and you start with the website, already, built and then you just make the updates and changes to that website, as you see needed, now you'll notice there's a difference in some of them notice the word agency, is next to them if you see an agency, that means that that's one if you needed that one you're going to pay for it and they're typically, a lot nicer. For this course we're going to use one of the free astro starter sites but i found for the 20 or so websites i built a year that about half of my use a free starter site and half of them i use a paid starter site, the reason is for some of my clients i find that there's a paid version of a starter site that's almost exactly what i need and for the price i really can't beat it but this is something you'll have to make your own decision, on and i really encourage you to go to webyota.com. Astra, and then you can just look at the free versions and the paid versions and make up your mind yourself. We're going to be using one of the free templates so if we click on free it'll reveal only the free templates. And we're going to choose from one of these to build our website, now when you move your mouse over you can get a general idea of the types of information, that are in there. Now for us we're going to choose one called car wash. And then we're just going to click on preview. And then we'll hit import, site. Now it says this could take two to ten minutes but i found this doesn't take very long at all. Imports, complete it took a total of 40 seconds. It says view site here but we have a tab we go over here and hit our reload. Button. And now we have a fully functional, car wash website, and notice it looks a lot like the one that we built. It's just that we've changed out a lot of the content, in it. But it's really a fully functional, website, everything about it's already ready to go all you need to do is make the changes to the text that changes to the images, the content. And you're ready to off and running. Let's go back to our dashboard. So to do that we're going to just click the x right here, and the first thing i want to do is to create a bunch of empty pages. To do that i'm going to choose the pages, option from the dashboard. And notice there's a whole bunch of pages that are here already.
I'm Going to select, sample, page. Wp, forms. And i'm going to say bulk. Action. Remove. Apply. I don't need those. Same thing with this you can also get rid of ones by just choosing trash when you highlight it shows you extra features. I can choose trash. And that's another way of getting rid of pages, now in our case we're going to go ahead and use the rest of these pages, and we'll either make duplicates, where we need extra pages, or we'll rename, some. So just see where we're at if we go to jim gray's website. We need about, services. Rates, showroom. Two pages, under here wire nuts articles, contact. Us. And get quote. So we come back over here the first thing we'll do is we're gonna change this one just call it rates. So we can if you highlight it it shows the quick options. Going to change this to rates. And then we're going to give it a slug name of rates, all lowercase. The slug name is the actual, name of the page itself. It's already says publish, we'll set update. And if you come back over here and hit reload. You'll see that that's changed. So back to our dashboard. And as of now we have five pages, all these are named similar to what we need, but we need four additional, pages. So for the about page i'm going to choose i select it i'm just highlighting, it and i'm going to choose, duplicate, this. And that's where that little duplicate, plugin, came in handy. Duplicate, this page. That's two. Duplicate, this page. That's three. Duplicate, this page, that's four. And now we have our four new pages. And now we just need to rename those pages to the names of the pages we're going to use in our website. So we'll rename the first one so i'll highlight, it quick edit. This will be showroom. And i'll put showroom, as our slug name, or our page name. I'm going to choose publish. And hit update, now we'll rename the second one. And it'll be called, wire nuts. We'll also make the slug name and page name wire nuts. We'll choose publish. Update. Our third page. Is going to be. Articles. Our slug name and page name will also be articles. We'll change the status to publish. And our final new page. Will be, get quote. We'll just set the slug name of that, to quote. We'll publish. Scroll down. Hit update. And now we have all the pages we need to build our website. If we go back over, we can hit reload. And you'll see that the names don't show up in the list. And this doesn't say quote. That's because even though we've added the pages we haven't told the menu what to have in there and we're going to do that next. So let's go back to our dashboard. And under appearance. Choose menus. And now all the new pages that we've added are all going to be listed here so we can just check the check boxes, next to all the ones that we just added, and choose add to menu. And now they're all in our menu. Now we want to make a special. Custom, link, and this custom link is going to be called news that's going to be the pull down that we're going to have wire nuts and articles in that we talked about. And for the url, just put a pound sign because you have to put something there for it to add it to the menu, we'll hit add menu. And if we scroll to the bottom here's the news. Now if we open that one up, we can take the url, away because we don't really want to be clickable. So that'll make it so it's not clickable. Now if we go back to our website, we can see the order about services. Rates, showroom, news contact, get quote. So we're going to do just that. Now notice at the top there's a home. Well on websites, these days they don't normally put a home button you can it's your choice.
But Normally the logo, will take you to the home page and people are getting accustomed, to that as opposed to having a home button so it's up to you whether or not you have a home button. In our case we're going to get rid of that one so we can do the pull down and choose remove, we're going to drag up and put our about at the top. Services, in the right place, rates is in the right place. Showroom. News. And then under news goes wire nuts now watch this we can drag it to the right and it makes it a subset, of it just like that. Articles, the same way. You know. Just click out here that gets rid of that funny highlighting. Now accidentally, added an additional contact. So we can remove that one. And remove the extra rates. Now it's in the order we want it to be in. And i'm just going to call this menu main, you could just leave the default, if you want. Save our menu. Once the menu is saved if we come back over to our website. And we hit reload. You'll see that these names have been added. Now stuff is all, jacked up looking but we can fix all that later notice in our url, it says. Index.php. And then it has our page name or our slug name, we want to remove, that. So let's go back to our dashboard. And then we're going to go down to a section called settings. And inside of settings there's an option called permalinks. Inside of permalinks, we're just going to choose post name, and that gives us the format, that we're going to want to use. Scroll down. Save changes. Now if we come back over here. And we click on services, again. Now you notice that it just says the word services, instead i have an index.php. So now let's go ahead and change this phone number out and put our quote button there. So we go back to our dashboard. We're going to go to appearance. Customize. And from here we're going to go to header. Primary, menu. And now. Where it says, a phone number there we're going to put get quote. And for the link i'm going to put quote. And i always put a slash at beginning and end just for compatibility. Make sure it works in all environments. Now i can hit publish. And notice it already shows it right here. When the publish is complete. We come over here we hit reload. And we'll see that it's been updated on our. Page. So let's go back to our dashboard. And we'll close that. That gets us back to our dashboard. Now you notice in our website, all the default, stuff is there for the original website. We're building the website for jim gray to sign so what i want to do is download, the content for the gem grade designs website so we have access to that. So to do that i'm going to open a new tab. I'm going to go to webyota.com. Front slash, content. Scroll down to the project we're working on. And choose. Content-gemgreydesigns.zip. Now that's been downloaded, if i click this up arrow in my case i can show the folder. And i'm probably going to use this folder a lot so i'm going to kind of keep that there. And this is the file that we just downloaded. If i right click on that. I can choose, extract, all. And it asks me do i want to put it here i'll go sure. And it opened it up automatically, but let me close that one. And you see that we've got a new folder here, and this folder contains the content for the website we're going to build, basically, i've collected, everything in advance, this is a good way for you to get organized, as well to collect the content in advance for your website. Now suppose you don't have good access to images, and videos, for your website, what are your options. 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 the last piece of information we're going to need is a script.
Every Time i build one of these videos i build a script with it and i refer to the script to get content i need for building the site and a previous student of mine wondered why i didn't provide that script for everybody, because it might be helpful for you as well. I'd agreed, and so now for each of the courses we have a script so if you go to web yoder.com. Front slash. Jim gray. It'll bring up the script for this course, and it basically, shows all the stuff we're going to go through here's where we did our install this is the information, about the wordpress, the astra theme, the plugins, we needed, when you go to create a logo that's all the information, for that when you go to do a video intro if you want to do that there's information, for that here's a bunch of free places to get video clips free places for images free places for elementor, templates. And then we get into the names of the pages, and the colors, and after that it's a whole bunch of content, about what i did to make the site work so this is super helpful for you, and you can copy and paste at any time and the reason why i'm bringing this up now, is because we're going to need these colors because we want to change the color. Of this button, to match what jim gray's button is, so that's where we're at, now just to review. This is going to be the tab that we use for our dashboard, and building our page, this is the page that we're creating, this is the completed, site, and this is our content, so it gives us quick access to all this information. Now i happen to know that the button we're going to do is going to be this red. So i want to copy that red. And i'm going to come back over here. And then we're going to go to appearance. Customize. And then from here we're going to go to global. Buttons. Color. And for the background, color, we're going to set it to, the red, and watch it immediately changes over here. And, right now when you hover over it it's blue but we want it to be a yellow so we're going to go back to our document. Find the yellow, we'll copy that yellow. Come back over here and we're going to choose hover, and now we'll change that blue. To the yellow. Now we move over it we get the colors we want. I can say publish, get back to our site, hit reload. And now our button's red. A typical, question i get from students are. Where do i get these color numbers from. And the answer that is you go to google, you do a search for the words, color picker, here's the link to it as well. And when that comes up you can choose any color you want. All over the board, and when you find a color you're interested, in, it shows you the color here. You copy that to the clipboard, and then you go paste it wherever you need it. So let's go back to our dashboard, we'll close that. And now if we look at our website. And we do the pull down, notice it's white and you can't do anything with it turns out that the theme company the astra, theme, requires, you to buy a plugin, if you want to have that level of control, well most of the sites that you build, may have this feature, and so to make this change we need to buy their plugin but i don't want to do that so we're going to do a piece of code, to fix that and you don't need to understand, the code you just need to know how to copy and paste so just follow me on this this is how we're going to set the color, for the pull down menus, for a computer a laptop, and your mobile devices.
To Do that we're going to go to appearance. Customize. And at the very bottom. There's a section called. Additional, css. We're going to choose that, and you can close this big box so it's not in the way. And we want to put the code in here that's going to fix this. Now that's the easy part we're going to go back to our content. Just under what we're looking at is the additional, css. Copy this to the clipboard. You don't worry about what any of this does you just know it's going to work. I'll come back over here. And i'll paste it in, now if we walk over we'll see now this shows up as the red we want it to be. We can hit publish. Go back to our website. It's white. We hit reload. And now that's been fixed. Now we're ready to put the real logo, here. Since jim gray design's already had a logo we're not going to build his logo as part of this course however if you're in need of a logo, just click on the link at the top right it'll take you to a video that i made on how to create your own professional, logo free of charge online in about five minutes time. Now we're ready to put the real logo, here and get rid of the text that's next to the logo. So we'll come back over here. We'll close this. So we're gonna go to appearance. Customize. Then from here we'll go to header. Site identity. And now we can add our logo, now it's got one in there already so we're going to choose change logo. Now at this point you can select, files. From here. You can go to where your files are at for example they're inside of this content, folder. And you can choose wherever the file is so what we're looking for is the logo. So there's our logo. We'll hit open, now it adds it to our media folder. I hit select. It asks me do i want to crop it i'm going to skip the cropping. And now it's been added to the page. For the logo, width let's choose, 175. And then we'll scroll down. And we're going to turn off. The title. Appears that we're going to see our logo, here. So let's go ahead and hit publish. Go back. Now let's hit reload. And notice how the text went away with the logo still there, well we didn't expect that i did because that's happened to me before, but the reason is is because there's actually two different places you can change the logo, this is what's called a transparent. Menu. As opposed to where we changed it was not the transparent, menu area, i wanted you to see how this could happen so depending, on which template you install to use you might need to change this in a different spot, so to fix this we're going to go back. Scroll to the top, and we can hit the back arrow. And now we're going to choose transparent. Header. And here's a logo as well. So we can click change image. Choose our logo again. Choose image. And now it shows here. And now we can do publish. Go here. Hit reload. And now the correct logo shows. So you want to do it in both places, just in case, now let's go ahead and clean things up a little bit we can get rid of this bar to give us some extra space. Another thing i want to do if you scroll down to the bottom you'll notice that there's a menu bar down here. This is called the footer bar. As opposed this is called the footer area, i prefer to work on these two things in the same place so on every page i can work on them together, but astra likes to make this a separate item, so what we're going to do is if we go back to our dashboard. So let's close that. We can choose appearance. Customize. Footer. Footer bar. And we can just turn that off. We'll hit publish. Come back here. Hit reload. And you'll see that this little bar will go away, and we're going to manually add that back later so we have more control over it. And the last thing i want to do. Before we actually start building our home page. Is to set the link colors. For our website. So we're gonna go back to our dashboard. Appearance. Customize. Global. Colors. Base colors. And from here we can set our theme color, our link color and our hover color for the link color, if you come over under news you'll see this blue line that's the theme color it's a lot of places on the website that's just an example. We click on that. And let's say we decide to make that kind of gray. If you click on the little colored thing again it closes it back down. We look under here now that's gray just like we want it. Now we're going to make this color the red, i chose the color swab. Come in here change that to red. Close that down now we want to go to the hover color, we're going to make that the yellow. Come over here. Yellow, close that down. And that's ready to go. So now we can publish that to make it official. At this point we can close that down. And we've got all our preliminary, settings ready to go so we're ready to edit our home page. So to edit our home page we're going to go to pages.
And At home we can click on home. Or we could click on edit with elementor. Elementor. Is the page builder software, we're going to use to edit our pages. But let's see both ways if i click on home. Now there's a choice to edit with elementor, which is the way we're going to want to do it so we can click this button here. And now we're in a position where we can start editing, our page. But having a general understanding, about how the elementor, environment, works certainly, improves, how quickly you're able to make changes to your website. The first thing we want to look at is the difference between what's called a section. And this is a marker for a section. If you scroll down you'll see here's another section. And basically, sections are rows. Okay we got it, so here's a row. And we scroll down and here's a row so basically the sections are rows. Now inside a row you can put different things so for example, here's a row. And inside of there it has three columns. So that's the section, tab. That's the column tab, that's the column tab and that's the column tab. Now inside, of each of these columns. You have content. And that content, is. Accessible. Through the little icon on the right hand side. So in some areas for example. You have a section which is this section. You have a column. And then inside the column you have a piece of content, and then you have another piece of content these little things are called widgets. And the widgets can do different things like add pictures, add text, all kind of various, things. So when we scroll down you notice that here. We've got two columns. You got one piece of content in there and nothing in this one so it's gonna be empty on that side. Here we've got three columns and each one of them just has a picture in it but when you scroll down, it has some other stuff what turns out if you choose that item. It tells you that it's an edit image box so basically it's an image box. That has text and a picture with it, or if you click on something else if you click on this one it'll tell you that it's just a text editor that's the type of a widget it is. So what we want to do is change this website, to be the jim gray design website. And so the first thing we'll do is change out some of this text, now this is completely. Fully, at your ability to change it to be whatever, you want we're just going to make changes to make the jim gray website. To start let's change out this text right here, so for example where it says welcome to whitewash, i'm going to click on that now you can edit it here but i found that you get better results, if you do it over here.
And Now i want to change out this text, so i can click there. Or i can click, there. And i can edit it over here. And paste in what i want to be there now one of the things of interest is that it's not always going to have what you're expecting, over on the left, and the reason is there's three different, methods of editing. You can edit the content. You can edit the style. And then there's advanced settings. In the content, one it typically is where you're going to enter the information, interlinks, and stuff like that. Whereas the style, allows you to control specific, things about it so in this case i want this text to be a little bit smaller. So i'm going to click on the style, tab. And it has a word called typography. That's basically, a fancy way in of how you change the font sizes and things like that. So for this particular, piece of information. The text color is white we'll leave that the same, for typography. If we click on that. Now we could change, all the different aspects, about that and we'll be doing a lot of this so you'll see how a lot of this works. Now in this particular, situation, i just wanted to make a little smaller, so i'm going to use 36. And that made that text just a little bit smaller like that. Now for our purposes, i'm not going to use these bottom two. So i can choose the icon, for that particular. Widget. I can right click on it, and i can choose delete. Same thing with this button it's just a button widget i can right click on it and hit delete. Now i want to change this background, image to be the one that we want to use well this background, image is the background. Not for a particular, widget, not for a column, but for the entire, section, so i'm going to choose that section. And then under style. I can choose. The image that's going to be part of the background, and right now it's that car. So i can click on that. And i could come over here and do the same thing where we did it before. But i want to stay in the media library, and say a little bit quicker way, to move pictures, and stuff in. So in my case i'm going to bring up my folder. That has my content in it that we already had. And what i'm looking for is the background, image that we're going to use at the very top. And that one's going to be called. Background, fallback. Let's drag it into the media window. Now notice it automatically. Added it to it. And it automatically, had it selected, so all i got to do is insert media. And now it's in there. Now the problem is it has this blue, hue to it well i don't want that in my case i just want the picture itself. Well if you scroll down, there's a thing called background, overlay. We choose inside, of that. It has, the type of color that's associated, with this it's an overlay it's sitting on top of our picture. If i click on that, i can basically, tell it to clear it, and that goes away. But notice that this text is a little bit hard to read, on top of this background. So right here particularly it's a little tough to read so what i'm going to do is i'm going to select that widget.
I'm Going to go to style. And where it says text shadow. We'll choose that icon. And i'll click on the color itself. And let's just move this over to about eighty percent. If you do it two hundred percent i don't know if you can tell you can see. You can see on this letters right here watch when you move it how it adds a little bit of shadow. See the difference. So we're going to set it to about 80 percent. And i can click out of that. And then i want to do the same thing. With this little widget up here. We're going to go to style. Shadow. Choose the color. And we're going to drag that up to around 80 percent like that. And that'll make it look a lot easier to read with that little bit of a shadow in fact you don't even know the shadows there unless somebody points it out to you but it certainly makes a difference. Now i can hit update. Go back to our site. Scroll to the top, let's click the logo, so we can see our home page. And look at that we already have the jim gray design website. Now one little attention to detail, thing and i'd like to point out is that, if you look at this line of text i'd really like to have a break right here where those two words came over here. So let's go ahead and go back to elementor. We'll choose that widget. And up here in between that we're going to put it i know i said no coding, but we're going to put a little bitty code it's a less than. Br, that stands for break and a greater than. And notice that it makes it go to the next line, well that's just the smallest, bit of code to learn how to work and look how much difference it made. So now we can do update. Go back to our page. Hit, reload. And that'll reorganize, itself nicely. And now we're ready to add our video intro. You can either insert a youtube, link into the website. Or you can upload a video and then make a direct link to that. So let's first see what the youtube, version would be like so if we go to youtube.
And Let's say we do a search for bethany's, your ultimate vacation. This is the little background, logo the background, video that runs in her website. So we click on that if i copy. That url. And now i no longer need this. And when we go back to elementor. At this point. I'm going to choose the section i'm already in it probably but just in case. And now i'm going to go to style. And then for the background, type i'm going to choose. Video. And then right here i can put a link i'll paste that link in. And notice how it makes, her video, the background. So i've hit update. Reload. And so now the jim gray designs, website has her video in the background. Clearly it's a nice video but it has nothing to do with audio video so we've got to do something else. So let's go back to elementor. And so we can take this out because we no longer need that, now notice that when we got rid of the video. We no longer have the background, there and that was because, the background was chosen, here. And really what we want to do. Is we want to choose video. But we want to have a background, fallback. And that's going to be the background, for the website. So that when the video. Intro is complete, this is what we'll see, or in the case of a mobile device where the videos don't run, it'll just automatically. Come to this. So now we can hit update. And at this point, we're ready to build a video. Intro. The video intro for this website, was already, created, we're not going to create that as part of this video. However, if you use the link at the top right, it'll take you to a video, on how to build your own video intro. No cost to you in about five minutes time. What you're looking at here is a bunch of sample intro videos that i made just to give you a general idea of what you're able to do. Each one of these took roughly five minutes to make and all of them were free. Since everything is done online there's no software to download, no system requirements, as long as you have a browser, and access to the internet you can make these all day long for free. All the intro videos, have matching audio in the background. And the length of the intro videos is as little as 5 to 7 seconds, all the way up to 30 seconds just depending on what your personal needs are. Since our video intro is already complete, let's go ahead and add it to our website, now we need to exit, out so that we can add the video. So we're going to click on this icon, right here, and we're learning how to exit out of elementor. We click that, and then at the bottom we exit to dashboard. Now from here. We're going to want to add our video to the media. So we're going to choose media, library. And we want to add a new one. Now to do that again if we just bring up our folder. You can bring up your folder that has the content, in it. And then scroll down to the item you want to use in this case we want to use the video, intro. And i can just drag it over here. And drop it in and it'll automatically, load it, now the reason why we had to load it here. Is because we need to get the link that it points to so that we can make sure that we can enter that into our web page. So i'm going to choose that. I selected, it, and now on the right hand side there's link is there. So i can copy that link to the clipboard. Now i can close that and now we're ready to go back to our page so we're going back to pages. And instead of clicking on home i'm just going to click on edit with elementor. Over here on the right that takes me in there quicker so that's the other method. Now that our page is up i'm ready to put the video intro, on top of this. So i'm going to select that section. And then i'm going to go to style. And then we're going to choose our. Video, option which it was already chosen, possibly. And then we're going to put the link that we just copy the clipboard and paste it in there. Now for our case i only want to run it one time so i'm going to turn this on to run once.
And It's already in there it's ready to go. But notice how this text is still sitting here it's already, there and that's just a little bit annoying, it's really not the way we want to do things, what we really want to do is to make that text show up, like right now. See how now if it slid in there that would be nice. So let's go ahead and make that change. And to do that let's start with the first one which is welcome to jim gray designs, and i'm going to choose. The widget itself with the little blue box i've selected, it, and now we're going to go to advanced. And now i want to look for motion, effects. And what i want to do, is i want this to be. A motion effect. Of fade in. From the right. Just like that. Now the problem is i want this to fade in from the right just as the video intro finishes. To do that on the left hand side there's a thing called animation, delay. Ms, well ms stands for milliseconds. Well the video intro is 15 seconds, long. So if i've set a delay, of seventeen. Thousand, that's seventeen, thousand milliseconds, which is the same as seventeen, seconds. That means two seconds after the video intro is complete, that text will slide in there. Now we're gonna choose the other widget just below it. We're going to go to advanced. Motion. And then we're going to fade this one in from the left. We're going to set it to 17. 000.. We'll do update. Now we'll go back to our website, and when we hit reload. You'll notice that the intro, starts to play. But the text is no longer in the bottom corner over here like it was before. And at the end of the 15, seconds. After the intro is complete. Then our text slides in from the left and the right. It's a nice touch right. So when i got to this point i was so excited, about the way this looked i said hey bethany, give this a look what do you think and she goes. Oh wow would be really nice if you didn't have two get quotes at the top right, well and i said oh okay. So what happened is we added a menu item for get quote but the get quote button was also going to be there so we need to go back and edit the menu and so we'll do that now. Go back to elementor. And then we'll exit out of elementor. We're going to click on, appearance. Menus. And we'll scroll down and this one we do not need. Remove, that. Save menu. And now we go back and reload. Now we only have one get quote. So now we can go back to, our dashboard. And we want to continue, editing our home page, so to do that we're going to go to pages. Choose the home page edit with elementor. And now we'll scroll down to the next section that we're going to work on. And this is basically in a little about us section, so now we want to change out all the information, here. So let's go back down here and look at what we're going to be building. Let's go ahead and make this tan background, and put the new image over here. So we'll come in here. And the first thing we'll do. Is we'll select this. Section. And now we'll go to style. We'll choose the color option. And we'll paste in that tan color. We can click that to close it back down. And now. We want to change this image, so we'll click on that. And we need to upload the image we're going to use, so we bring up our list. We'll look for that background. And it's background, right. Drag it over. Click insert. And now it has that new image and when you scroll up and down you'll see that that one sits in there and
2020-09-30 12:19
