Astra Theme Tutorial 2021 ~ 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 [Music] 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 does that really nice effect so let's change this text right here to look like it does over here so we're going to select that widget we'll change out the text and then we go to style we're going to change the color and we're going to use that color of brown so i'll come down here and put it in there and close that out and then we're also going to change the height of that so we'll go into typography and right where it says size we'll put 16. and now we want to change this text so we're going to choose that widget come over here put in the right text on that and then i want this to be on one line so if i click this column i can actually put a value in here let's say we put 35 in here and that makes it wide enough so that can fit and notice this is a column that is empty and this is a third column right here now at this point i don't want this text all the way up to the edge i actually want to be centered in this entire box and so i'm going to choose the column i'm going to go to advanced and the white area around the outside of this is called padding whereas the outside of the area is called margin and that will become more obvious as we do more of this so in this case we want the padding to be the same all the way around so we'll come over here and also notice how these have different values if i choose this it connects them all together so if i change one they all change and let's put a value of 40 and that makes all of them 40 all the way around and i really kind of want this over a little bit so instead if i click on this column instead of 15 let's try 9. see how that made it a little bit bigger that allows us a little bit more space so i like that better so let's go back and look and see how much progress we made okay so now we need to change the text to this so let's go ahead and make that change and change the text to this so we'll choose that widget put the text in there and then we'll choose this widget and put the text in there and now there's a little extra space here so i can just get rid of that to make it look more like it now over here we don't need this one let's right click on that widget and say delete but we do need a button here so what we can do up here this icon here reveals our widgets it's our widget button and inside of there is a list of all the different ones we have here's our button we're just going to drag it over here sometimes it's hard to get that little blue line to show up where you want but that's where it's going to drag to we're going to drag it right there and let it go our button is the default colors that we had but in our case i want this to be brown so we're going to select that button we'll go to the style for that button and then for the color of the button which will be the background color we're going to set this to be the brown i can click that to close it out and now we can go back to the content i want this button to say learn more and then we want to set the link to about now we can hit update go back over here let's hit reload and one of the neat things is you don't have to wait for this animation to finish you can scroll down and go ahead and start using it so now we can see that's what it looks like on our version and that's what it looks like on the other so we did a good job now we're ready to go to the next section the services section so let's go back to our version and there is a services section now notice over here this is basically the same setup we had before so if we come up here i'll show you a neat trick i can go to this widget and if i right click on that widget icon i can choose copy now come down here and i can choose actually just do it on the text i can right click on that and i can just choose paste style and it doesn't change the text that's there but it changes the style to match and that saves us the trouble it already says services we'll check back over here and this is the text it needs to say so we're going to make that change as well so we'll come into the box for that one so we choose that paste that in and now notice there's not a lot of space up here this is really tucked right up next to it so let's choose that entire section i'll go to advanced and now right now there's padding at the bottom right here that's 120. let's add some padding to the top let's say we put in i don't know say 30 looks pretty good and now we're ready to change out these three pictures so we want to have our services in there so let's pick the first one here i selected it i can get change this picture now i've gotta upload the services picture so i'll come over to our folder we're looking for services and here's the first three and since we know we're going to need these later let's just get all 10 of the services and we'll drag them over this will save us a step later so they won't be separated from each other in the media library so now we want to pick the first of those which is this one right here insert media we'll choose the second one click on that i'll choose the second one insert media we'll go to the third one click on the image choose the third one insert media so you see it makes a big difference if you already have your own images ready to go just like i did for this one so preparing and having everything ready will definitely save you a lot of time so now we scroll down turns out that we're not going to need the little extra text that's under each one of these so we can remove that text turns out this is not a separate widget so it's actually built into the same one so when we come over here if we just delete that text it goes away and we can go do that for each one of them and now we only have the text itself so now in this situation we want to make these the brown but it's going to be a little bit bigger text so notice we want it to look just like that and we want this text on each one of them let's go ahead and set the formatting to the brown first and to do that i'm going to come up here and copy that format i'm going to paste a format here paste style and i can right click on each one of these in paste style and do those quickly now all i need to do is change the text on each one of these so the first one notice it's under title and description this is the title change that now we want to change the second one so we'll choose that come over here and change it here so we'll paste that in and pick the final one come over here and paste it here and hit update now look they're wrapping a little bit right now let's go ahead and look at what our result looks like that's what it did look like we'll reload and that's what it looks like now so what we can do is make this a little bit smaller so we'll come back in here and for the style for this one we're going to go into style and that's the title so when we go down here's content and then under title we want to change the typography and let's try a size here of say 19. and so that wasn't small enough but here's this little arrow here let's do a down arrow and then that fits and we'll just make it one more smaller so there's some extra room there so that seems to work so over here i can right click copy right click paste style right click paste style and now all of them fit and they're under there nicely so we can hit update go back to our version hit reload and we've got that done now for the next section it's the testimonials if we come back and look at our testimonials this is just not what we want to do i want to do something different we want to do the one that's here and what i have is a template that we're going to be able to install that's going to give us a head start on this so let's come back over here and the first thing we'll do is we'll delete this testimonial section all together so i click that x and now it's gone and now i'm going to hit this plus sign it's at the top of the section here and that's going to insert a section and then i'm going to use this folder and it gives me access to three things blocks pages and templates what are blocks pages and templates well blocks are individual pieces of code they are sections or rows that go in your website and you can basically choose any of these and add them into your website these are all elementor blocks and some of them have the word pro next to them means that if you have elementor pro you have access to the fancier versions so as you scroll down you'll see that more and more of them are pro versions but there's a lot of the free versions as well so if you end up with elementor pro all of a sudden you have access to all these extra fun tools now pages these are entire pages like a home page or an about us page or here's a contact us page and a bunch of these are free and there's also ones that are pro so if you're trying to use something that's free you find the ones that don't say pro and if you have pro you can have access to all these now in our case we're going to use one of my templates and it literally is my template because i'm giving it to you now there's none in our collection yet so what we want to do is we're going to click this little up arrow and that says import template from here we can go back to our folder and we'll scroll until we find our templates and there's our templates and the one we're looking for is testimonials right there we'll drag it over and there it is now we'll choose insert and i'll choose no on this just choose no every time and now we have this new section that's been added and it basically has three john does and all we need to do is change the background change the images and change the content of all three of these let's start with the background choose that tab we'll come over to style and then we're going to click on the image now we need to upload an image this will be the background for testimonials there's background testimonials drag it over insert now we have the background we want but it doesn't fill the whole thing over here where it says size choose cover now it covers the whole thing now we need to change the picture for each one of these so we need our profile pictures this is actually a background for this column so we're going to choose the column style and then we'll choose the image and now we need to get our profile picture so we'll scroll down and choose our profile pictures and we'll go ahead and load all three of these at once and we'll pick bethany as the first one because um who wouldn't wouldn't pick me or joel first we'll go to the next one style and we'll pick me and joel i'm sorry you get to be last so we got there style image there he is insert now we need to change the names for each one of these and the subjects and the comments so let's do a little magic right here and the contents change just like that now we can click on update we go back this is what it used to look like we'll hit reload and this is what it looks like now notice it already has some of that animated stuff built into it for us now what's interesting about this is this is an example of where we inserted one of those blocks just happened to be a block i provided but any of the blocks you can find through elementor or through astra the theme company they have a lot of those or any place else if you can find an elementor compatible block you can insert that into your page using the same method now we're ready to go to the next section so let's scroll down and let's look at the jim gray version and let's scroll down and the next section we're going to do is going to build this nice gallery so look it has a header right here it has a gallery right here it has these little brush looking waves right here so let's go ahead and go back to elementor and we don't have anything that looks like that here so what we're going to do is we're going to insert and make a place from scratch now the first part of that is this section right here and it looks like there's an empty cell an empty cell and then one in the middle so let's go ahead and do that so we're going to add a section we have three blocks it looks like the middle one's wider again we can change the width of these but let's choose that as a default now in this middle block it has the little header and the big header so let's come back over here let's scroll up and find one of those here's a little header we right click we can copy it if we come back down here we can right click in that area and we can paste it come back up here we can right click on services we can copy it come back down here we can right click and paste it and now we have those and all we have to do is change the content to match so right here we'll choose that change it to making your dreams a reality and then over where it says services we'll choose that and change it to dream maker gallery and everything seems to be fitting in there just fine and now we need to be able to put our actual carousel so we're going to need another row so i'm going to click right here to make another section and it's going to be a row that's all the way across so we'll click the plus circle and we'll choose this one to make it all the way across if we have that section selected over layout which is the first section we can choose stretch the section content width we're going to say full width we want it to be the entire width of that now we can use our widget button and we want to find carousel we could scroll and look for it but you can also start typing a word and anything that matches that will show up in the box so here it is i can add that like that now we have our carousel now we're ready to put our images into it so we'll click over here and now we need to insert our carousel images so we're going to go to our content and look for our carousel pictures there's the first one and we have 11 of them i selected them drag them over load all those at the exact same time now we click on create a new gallery at this point you can change the order of these if you want let's say you wanted this one first you just drag it over there insert gallery and there's our gallery currently it has three pictures we want to change this to be medium large and then we're going to make it two pictures again these are just choices and we're also going to scroll two pictures now at this point i'm going to choose under navigation i can either have these arrows and these dots or i can just have the arrows or the dots or none at all we're going to choose just to have the arrows and now we need to have the little dividers at the top and the bottom over here it has a white one over here it has a tan one and this tan because the next section is going to be tan so we'll come back over here i still have this selection but i want to choose the section itself and under style for the section there's a thing called shape divider and the top one is the one up here we're going to choose a shape of waves brush and let's set the height to say 60. and let's set the color to say white and then you're like well we'll see it well if we walk down a little bit let's close the color you'll see there's a thing called bring to the front we'll click on that and now it shows up and now we need to do the one at the bottom we'll choose here we'll choose waves color we'll pick the tan that we used before we'll close the color and then we'll change the height to 60 then we'll scroll down bring to front and it was the wrong one we need the waves brush and notice that there's a little bit of white showing right here so if we go in at the very top of that to advanced where the margin is let's disconnect those and at the bottom let's give it a negative number and one two three four and that should have made a difference but it wasn't where we wanted to make the change so we'll get rid of that what we're going to do is choose the carousel itself and now we'll go to advanced and we'll disconnect these and we'll do the same thing one two three four so you see how if you have the section sometimes it's what you want to adjust if you have the item it's what you want to adjust or if you have the column it just depends on what you're trying to do so that last comment couldn't have been more on target it turns out that there's actually another thing that we really wanted to do if you notice this edge right here there's some padding right here all the way around you can't see it because it's hidden there and it comes around here so really the change that we wanted to do here is we could take this and go back to zero because i couldn't figure out why was that showing up anyway and now let's pick the section we'll go over to layout and here where it says column gap default let's set that to no gap that fixed everything about it and brought that to the edge but unfortunately this late in the game you're only going to see the change here but through the rest of the video you'll see that hadn't been fixed however you now know how to fix it we can hit update we come back over here we scroll down we don't have a carousel we hit reload and there's our carousel just like that we look back over and looks the same good job so earlier we talked about how to find free stock photos and images for your website but we didn't really discuss how to size them correctly by default most stock photos and certainly the ones that you're going to take yourself are huge however the smaller your photos and images are the faster your web pages will load so for example if you could reduce the width and height of your images by two you effectively reduce the file size by four and that means those files will load four times as fast 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 once you've changed the width and height of your images to be the best size for your website you can then take it a step further and optimize your images and reduce the file size even further without affecting the visual quality of your photos and images if you're interested in optimizing your photos and images in your website as well as making your website load three times as fast then you'll want to check out my wordpress need for speed video at some point so now we're ready for the next section which is going to be this join email and wire nuts and it's very similar to what we did up here it just has the stuff switched around a little bit so we'll be able to recycle some of that possibly oh and also when we made the services thing we didn't put a button over here so let's go ahead and add our services button first so gap over here we'll come up here no services button there but let's go ahead and right click on this and copy and right click on this and paste and now inside of this button we want it to say content view all services and then we want it to point to services now also notice when you put the mouse over it the text turns black so some reason our formatting of that is not exactly what we want it to be necessarily so if we have this button selected we can go into style for the button go to hover and let's change this to the yellow so we'll put that number in there like that click that to close that out and let's change the color to white close that out now it does what we want it to do now we can do copy then we go over here and we can paste style and now that one's fixed but there was also one other detail if you look over here and we look at the button you'll see that it's just a tiny bit round on the edges so we'll go back over here we'll choose our button and under the button choices under style there's a thing called border radius and if we increase that it'll make the edges really really round or we could just give it a small value like three and it just makes a tiny bit around this now we can right click that button copy right click this button paste style and now they both have that little bitty round edge on them so it's just that easy so now we have the button for services and now we're ready to start our next section so we'll come down here and the first thing we'll do is we'll set this tan background like we did before so to do that we're going to click on the section go to style color and we'll put in our tan color and choose tan and close that out now we want to change this background image so we click on the image and now we need to add the image so we go to our content folder we'll find the background for wire nuts drag it over insert media and now that image is there and we're ready to change this now notice that this again doesn't have that same border all the way around it we're going to choose that column good advanced and this is where it gets these numbers from it's 100 on the left it's 0 on the right it's 60 at the top and it's 60 at the bottom if i connect those it makes them all the way around 60. i can change it to 40. also notice here's where the column ends but it sticks up 50. well they put a negative 50 here and that allowed us to shift that up gives you a general idea how margin can be used to your advantage so now this piece at the top needs to be brown so we'll choose that text go to style change the color to brown and now we'll go over to content to change the content so we'll highlight that and paste in the right join our email and now i want this column to be a little bit wider so i'm going to choose the column and on the layout page let's choose 55 instead and notice how it makes it overlay over here it gives that nice neat effect so this column here now is too wide because this is all scrunched up so let's change this to 15 and the last one ought to be 30 but when you click on it it'll be 29.999 almost 30. this particular piece here needs to be the same as the way we've done other ones so we can come up i can right click on that copy and come back down and we can right click on that paste style now we just need to change the text for both of these so we can select that widget come over here our exclusive newsletter now i want to change this one so we click on that widget come over here put in wire nuts and now we want a button below that so we're going to scroll up find a learn more button right click on it copy come down here right click paste if some reason things aren't the order you want you can take the item and let's say drag it up like that you can drag that down like that you see you can have complete control over how these are after the fact now this particular one i want it to be a little bit lower so we'll select that widget we'll go to advanced and under padding let's disconnect the padding and then we can make some padding at the top and let's move that down let's say 20. now on this side we need the text for here so let's change that out so we'll come over and paste in the right text there and then these need to be changed the first thing i'm going to do is make these red so to do that under style or text we'll go ahead and change the color to our red and then we'll go into the icon and change the color again to our red and then i also want this text to be capitalized so if i close that color out inside of the text inside a typography there's a thing called transform and transform allows me to make different changes like that in this case i want it capitalized capitalize on the first letter i really want uppercase so now i just need to change out the text for each one of these and so if i scroll to the top of this box and go to content here's each one and basically you click on one of them you change the text so we'll change that one to say that and click on it again to close it click on the second one to open it change that close it open the next one with the right text close that one open the last one put in the right text close that one now if you needed dexter ones you can just click this little button here and it'll make a duplicate so now there'll be five of them like that or you can just get rid of it because we didn't need one we can hit update at some point that will update itself we come over here we hit reload and looks like we're complete hover over a button it's pointing to about and it's supposed to be pointing to wire nuts so we'll come back over here we'll choose our button and then under content we can change this to wire nuts just like that and now that button will put into wire nuts hit update i'll come back over hit reload and now this points to the right place now we're ready to do the next section and on this site it looks like this and on this side it looks like this and this kind of has the feel of what this does but if we scroll up this is really the same so let's take this one and make a copy of it instead of trying to use the one that's instead of trying to use this one so we're going to delete that section altogether so we'll come back over here we'll scroll down and inside of this tab here we can hit the x and we'll delete that all together now let's scroll up and find the one that we did like and that's this one and for the whole section if we right click on the tab we can do copy and we can come down here and we can right click inside of here and we can do paste and now we've made one of those and now all we have to do is change the text out to match this one we'll come back over here choose the first line of text come over here put in the correct text and then we'll check over here and now we can change out this text and notice that this wraps but over here it doesn't wrap so we need to change our column size so let's go back into here and let's check the middle one here and see what size it is it doesn't say one so let's try 50. that's not enough let's try 60 that's enough and then for either side we want the difference on that so that means we need to put 20 over here we need to put 20 over here so now it looks basically like this one does and now we need to add our logos for our brands down here and to do that we need a new section and that section is going to be four columns across we'll click the circle plus and we need four equal columns so we'll choose that one and now inside of each one of these we're going to insert an image so we'll come here choose this image and put it in there go back to our widgets image put it there and do the same for all of those now at this point we know we're going to need two sets of these so i can right click on that section and i can choose duplicate now i've got all of them now we just need to go put our brand logos in there so we'll choose the first one click on the image and now we need to load our brands and here our brands are there's eight of them drag these over so we'll select the first one that we want to use hit insert now we'll go to the next one choose the image insert the next one we'll do that for all eight of them now that we have all eight of them inserted if we notice in our original they're kind of grayed out if we change the opacity of these it'll make them lighter so we'll choose the first one then go to style and this opacity if we change it see how it makes a difference and how bright it is we're going to set that to 0.25 and now we can right click on that copy and we should be able to paste the style to each one of these and now they all look correct we can hit update we go back over this is what it looked like before hit reload there's our new section and if we compare it we'll see that have a little bit of extra space up here easy enough to fix we go back to the section itself advanced we'll put a little padding at the top so let's disconnect them just so we can do just the top now let's try 20. update go back reload and that's complete so the last section is this footer and i'm going to tell you a couple things about this first of all when we look at the footer down here you can tell it's basically identical the only difference is is that these were spread out a little bit which meant that these three columns were a little wider i added a link down here and i changed out the content for each one of these buttons and so we'll look at that but instead of having to build this from scratch i'm just going to have you import it so you don't have to do all that extra work in your case whatever your website is it'll have your information anyway also at the bottom notice that there is the footer bar this footer bar is the one that we're going to be adding individually for each of our pages as well and since i like these two to be together i would like to be able to change and edit these in the same spot but here's the problem two things first of all we go back to our site here's a footer and here's this bar that we had turned off but if we go to our services page and you scroll to the bottom not only is that footer not there but the menu bar at the bottom is not there however on our home page both of them are there and this is just a tiny incompatibility with trying to do the astra theme with an elementor inserted site and since i don't know if you're going to be using this car wash site or any other one whether it's going to be the pro version of an elementor or the pro version of astra i want to make sure that this works for every site you're going to want to do so what we're going to do is we're going to remove this section completely from our home page and when you scroll down you'll see that it's actually inaccessible i can't even make changes to it so to fix this we're going to go out of elementor so we'll exit to our dashboard and then under appearance we can go to header footer builder and where this template is we're just going to trash it we're done with it we don't need it now we can go back to our pages go back to our home page now when we scroll to the bottom you'll see it's no longer there and when we come over here and we reload it's also no longer there so that matches what we have on the different pages now we want to put a footer at the bottom in our case we're going to insert the footer so we're going to choose our folder and now we need to upload it so we're going to import template and we'll go to our templates and the one that we want is our footer template and so that's this one right here and so now we can insert our footer and there it is just like that and now below it let's hit the folder again and we're going to import again and we're going to select a file by going to content dragging over the footer bar and we'll insert the footer bar and now you have the footer on this page and we can hit update and you can come back over here you can hit reload and when you scroll down now we have this nice footer at the bottom now creating the footer in the footer bar this way is the free method of doing it and you certainly can settle for that the only limitations are that when you go to additional pages for example if i go up here and i click on services i scroll down there's no footer just means when i build that page i need to insert the footer in the footer bar on every single page that's really not a problem we can do that the other thing that's missing is that this little widget down here that shows this menu at the bottom is an elementor pro feature it's a widget from their pro set so if you had elementor pro that would show up the other advantage of elementor pro is that it'll allow you to make a change to the footer in one place and all the pages have the same footer at the bottom so you're making that change across all the pages in my case i'm going to choose the elementor pro and if for some reason you wanted to do elementor pro as well just go to webyota.com front slash elementor and it gives you a brief information about this the elementor pro button is there you can click through there and get partnership pricing through that link also they give a piece to the web yoda foundation that helps make more of these free classes so in my case i did purchase the pro and then once i purchased the pro i went through the install process which is really quick and easy it's just you import the plugin and you enter your license and you're ready to go for those interested in the elementor pro footer here's a quick walkthrough of what you're going to need to do first let's close that tab now we'll go back to elementor we'll hit update and now we'll exit elementor at this point you would install and activate your elementor pro plugin once your plugin is activated scroll down your plugins and make sure elementor pro is up to date now to do our new version of our footer now we just go to templates and theme builder you'll choose the footer tab we're going to add a new footer and we'll just call this one new footer create template and it takes us directly into our location for our templates we'll go under my template we'll pick the footer and insert that scroll down we'll choose the folder again we'll choose the footer bar we'll insert that and now if we come over to the widgets icon you'll see the new nav menu there and drag that over and now we have the same navigation we just need to change the font text to be this same color so let's figure out what that color is we're going to select that we'll go into style we can click on it we can copy that to the clipboard and now we can go over to this one we go into style set the text color put that number in there and now they match we can hit publish and now it's going to ask us for a condition let's add a condition include the entire site save and close that's the default now we come back over here two things have happened one when we reload now there'll be a footer and a footer bar on every single page of our site and anytime we make a change to that footer in the theme builder or the footer bar it automatically changes on every single page at once that's really nice we also got this little menu option down here that was really nice and the only other drawback is there's a little quick change on our part if we go back to our home page because we originally added a footer there we scroll to the bottom we're going to have two footers so we're going to come back over we need to exit back to our dashboard and we're going to edit our home page edit with elementor scroll down and we'll just get rid of this footer in this footer bar and we'll hit update and now when we come back over here and hit reload we'll just have one of them so again you don't have to use elementor pro but for this particular thing i like being able to make one change at one place for my footer and it changes all pages and i like having this little menu at the bottom it's your choice there is a free way of doing it we showed you that as well so kind of a side note once you have the footer thing in place using elementor pro let's say you wanted this move to the right a little bit because i really didn't want it that close up i can come here and i can right click on that and open a new tab now i'm editing that footer i can scroll down choose that widget i can tell it be to the right i can tell it to update i can close that tab come back and reload what we had it shifted that over not only did it shifted over in that page but it shifted over on all the other pages so that's really another indicator why i like doing it that way so much the good news is now we finish with our home page so we can go to our top and click on about now we're going to build this page but basically what we're going to do is we want to be able to build the entire site quicker and so all i want to do is let you import the pages and just show you some of the changes things that we may not have covered yet that way we can get the rest of the site done fairly quickly for you so let's go ahead and go back to our elementor we're going to exit to the dashboard we're going to go back to pages and now we're going to choose the about page and edit that with elementor and we're going to be importing a page that has just about everything we need in it so we can just start clicking on and removing all of the different sections that are in there and now we're going to choose on the folder and we're going to import our about section so let's go back to our content and from here we're going to drag over our template for the about and there's the about and we'll insert it we always choose no on that and now we have an about page all we did was put the extra picture in there and we changed the text we've done a lot of things that are very similar to what we had done before one of the things that's a little bit different is that at this bottom section we have this little bitty graphic what we're going to do is we want to recreate that section quickly just so you can see how that would work now this is what's called an intersection it's a section inside of a section so if we go back to our widgets we see a thing called intersection and we can drag that in and it basically is a section inside of a section it's nested and what we want to do is we want to put the jim gray signature right here so we need a widget and then we're going to drag an image inside of that and then we'll click on that and his signature should be already in here because it was loaded when this page was loaded and we can say insert and now notice how much bigger is than we really need so if i come to this edge right here i can drag between it till i get it the size that i want let's say something that's like that and now we've reproduced the same effect so we don't need both of those so i'll just delete the one that i have and this here for example is just like our brands it just has a bunch of columns and it has pictures inside of each of the columns so that's really not any different and the rest of this is just text and pictures this here is a little bit unique if i click on that we'll see this is an image carousel the difference in this image carousel than the one we did before is if we go to the added options inside of here instead of being effect where it was sliding if you look at that it'll slide the pictures it does an effect that fades each of the pictures in and out well the slide here is the animation in but as you watch it change from picture to picture instead of the picture sliding they fade in and out the other thing that i like to do is this over here it says pause on hover i usually turn that off that way when you put your mouse over it it won't it'll keep rotating so i can continue to have extra pictures just in case my mouse is sitting there it won't interfere with that we can sit update come over here and we will reload and now we have our fully functional about page we automatically have the footer on there remember that if it didn't we would have to actually insert the footer at the bottom of this not a big deal so now we're ready to go to the next page so let's go over here we'll click on services and the services again a lot of this stuff is the same we're going to reproduce something just to get a feel for it now this particular stuff obviously is the default stuff let's look at the one that's on the jim gray side and we'll click on services so this is jim gray's services page if we scroll down here's some regular text same times we did here's something similar to what we did on the main page instead of having three services across it's five across we could reproduce that now one of the things we haven't done before is making something that looks different when it's on a mobile device so we're going to make a change to this satisfaction guarantee section i'll show you what we're going to do when we get to that so let's go ahead and go back to elementor we're going to exit to our dashboard we're going to go pages we're going to edit services with elementor now we're going to delete all the default stuff because we're going to add our own page in and now we're going to choose on the folder my templates we're going to import and we'll choose our content this time it's going to be services drag that over now we'll insert it always click no now our services page is loaded now you'll notice here we have a link what i want to do is show you how to make a link and then also how to remove a link but since we already have one here we're going to learn how to remove it first and then we'll add it back so if we click on the widget to the left we have the text when you find the link in the text if you highlight that you can click right here to remove the link now to add a link you just highlight whatever text you want to have a link to you choose this button type in what the link will be in our case contact hit enter and now we have a link now we're ready to look at our new responsive code we're going to add and what we're going to do is come down here and i want you to see the difference on this this is what kind of what it looks like on the computer version notice this is to the right like we might want it now if you come down here you can choose what it'll look like on different devices so for example i can look at what's going to look like on a desktop that's there on a tablet that's there we scroll down see how it sits to the right over there that's not too bad and we look at it a mobile and we're like oh wow um that's really not going to work so what we really need is we need this to be smaller in the mobile version so what we're going to do is we're going to right click on this and we're going to duplicate it so now we have two of these now the first one of these i have it selected i'm going to go to advanced and what i want to do is i want to set this to only display the original one on desktops and on tablets so i'm going to go down to responsive under advanced and i'm going to tell it to it's showing on desktop it's showing on tablet but i do not want to show on a mobile and notice how it gets these little slashy lines in it that means that one's not going to show in mobile mode now when i scroll down here's our other one we just duplicated i'm going to choose that one and then i'm going to come over here to advanced scroll down again go to responsive and this time i want to hide it on tablet and on desktop so now this one will show up in the mobile version only now i have this particular widget selected if i click on content i can come over here and click this image and at this point i can drag it up to the size i want it so let's say we'll make it let's say somewhere around 120 by 120. well now on the mobile device that's what it's going to look like so that makes a lot of sense so on the mobile device it'll look like that yes and on the desktop version it'll look like this and that one will be ignored that makes sense so we'll click on update we'll click on refresh this is our services page we scroll to the bottom and it pretty much looks the same however if i hit f12 puts me in a special edit mode i'm only doing that so that i can bring this across and see how i can make it show that particular version and we go down you can see how it looks different so both of those are working just fine we are done with the services page so we'll go to the bottom we can click on rates that'll show us the version that's there now and we'll come over to the jim gray page we'll click on rates and this is what we're wanting to create again we're going to import everything that stuff that we already know how to do we'll scroll down we want to learn how this stuff works how do we get this stuff to look so fancy so let's go ahead and head back to elementor and now we need to exit to the dashboard we need to go to pages rates edit with elementor and now we'll delete all the ones we don't need now notice see they had something very similar because that's where i got the idea from we're just making changes to theirs so we'll delete all of this and now we're going to choose on the folder so we'll hit import we'll go to our content we'll find the rates page there's the template for rates we'll drag it over now we can insert the rates always hit no did i say always hit no pretty sure you knew that and now we have a rates page now obviously this is already done but i want to give you an idea how this works first of all these are just if you look over here this is a heading this is a heading this is a button but it's not clickable we just made it a button we didn't put a link so it gives it the look we want without having to be a real button this is a heading and then this is one of the icon lists that we've used before so all these pieces are kind of the same but how do we get this one middle box to be fancy and tall like that that's what we're going to work on now but one way to learn this is to make this column look the same as the others and then make the changes so you can see how that happened so we're going to come over here we're going to right click on this column we're going to copy and then we're going to right click on this column and we're going to paste style now they kind of look the same except this has different extra content in it but we learned how to add ones over here with this little button there outside of that they look identical so what do we need to do to make this one look fancy so we've chose the column now i'm going to go to advanced so from here let's set this to negative 60. so put your cursor to the left of that zero it makes it easier to enter the negative and what that did is it moved this up and now we're going to change this see this extra space here we're going to change this to 0. that got rid of the extra space and now down here we're going to put the 60 there and that extends the space down here which adds it to there and then these get extended as well and that's basically how you got that effect to make it taller at the top we just did a negative number to shift it up there and to make it tall at the bottom we just added the space to the bottom of this one we can hit update go to our page let's update on our rates page and then we scroll down that's what we did right there we made that change because we made it back to what it was and then we added that effect now we've completed that page and let's go to the showroom page and we'll go to the showroom page on jim gray's site now the showroom page has this really cool gallery watch how it fills in see how neat that is well that actually is an element or pro gallery and if you decided to purchase elementor pro you'll be able to do that gallery but we're also going to first create a gallery that doesn't have that fanciness to it either one of them can work fine but i particularly enjoyed the fact that i already had elementor pro so i was able to use this particular gallery so let's go ahead and go back to elementor and we're going to exit back to our dashboard so we can choose our next page we'll go to pages we're going to go to showroom edit with elementor and we don't want any of these sections so we're going to delete all the sections and now we're going to choose on the folder and we're going to import a page and we're going to choose the page for the showroom so there's the template for the showroom drag that in and insert no and now here is the completed page except it doesn't have a gallery in there so let's add a gallery to this and we can add it inside of here so i'm going to go to my widgets and type in gallery and here's the different types of galleries we're going to do the basic gallery because that's the one you have access to for free it actually works fine there's really no reason to complain about this i just like having access to the other one if i'm going to get it anyway and so now i can enter my gallery pictures so i'm going to click here i need to import my gallery so we're going to find our showroom pictures for this gallery right there i'm gonna slide that over and we're gonna insert all 28 of those at once obviously how long this take is dependent on your connection to the internet so yours may be faster than mine and this would work faster for you now for some reason you had trouble getting these to upload you may try to do a few rm at a time i've never really had a problem but some people have mentioned depending on who their hosting company is that they needed to upload let's say three or four of them at a time instead of all of them now they're all loaded i can click on create new gallery and then at this point if you wanted to change these around let's say you wanted to have this picture at the top you can move these around in any order that you want to be in that's completely at your disposal and then you hit insert gallery and now the gallery shows up down here and if you click on any one of these it comes up in a light box so that's pretty nice and you can close that now if we choose that we can come down and it gives you the ability to edit things so we could change this to say be 300 by 300 and here's one of the problems when you get to a certain size it doesn't really look as good as you might expect you want it to look so you could just make all your pictures the same dimensions and this would all fit together nicely we can hit on update go over here reload that page and now you can see what it looks like and any of these you click on the light box feature comes up and you can just scroll through them just like that now since this has elementor pro in it i'm going to remove this one hit delete and i'm going to type in gallery and the one we want is just called gallery it's this one right here it ought to be called fancy gallery if you ask me i like it i'll put that in there and we do the same thing we're going to add the pictures in here and then from here we can pick the ones we want now you can start clicking across you can scroll down and hold down shift when you get to the one that you want to be at the end let's say there i can hit on create new gallery and now my gallery is here and if i want to change the order of these you can just move them around drag them however you want and i can also reverse the order if i wanted to do that and then when i'm satisfied where everything is i can just hit insert gallery and then it fills in and see how it has these nice square areas so you by default you have that that works for you but if we want to use the one i chose you go to layout and you choose masonry and you get this really pretty view about it and then you can hit update and we'll go back to our page and now we hit reload now we get this new one and i just really like the way this looks like that we're done with the showroom page so let's go ahead and go to the news tab and under here we have two different things so we'll look at wire nuts first and we'll look at wire nuts on jim gray's site and what it's going to have is going to have a bunch of newsletters when we import it it's going to be missing the top one the most recent one we're going to add that one so we come over here we can see that nothing's there yet so let's go back to elementor exit to the dashboard we're going to choose pages and this is the wire nuts edit with elementor and now we can delete all of those and now we'll click on the folder we're going to import and then we're going to find that particular template wire nuts drag that over insert click no you see that as the teal colored and if you go back over here it's got a red one here well this was volume five issue one and this is volume six issue one so we'll come back over to our editor and each one of the wire nuts newsletters is in its own section so if you get down to the bottom of this here's a new section so what we can do is we can right click on that and choose duplicate now we have two of these now i can click on that header i can come in here and where it says five change it to six and now we're going to click on that we'll click on the image and now we need to import the latest newsletter so we go back to our content the two red ones down here are the ones we want so we'll drag those two over and we want that one insert media scroll down click on that one choose image use the second page insert media so see if you had a newsletter page that was done similar to this you could just insert those update and we'll go back to our tab we'll hit reload now we have the entire wire nuts page complete there's the newest one we added at the top and there's the other ones when we do the article page it's just another example of a different way you may want to do this so that's what it looks like before we've done anything and on jim gray's site if we go to articles we have two articles here this one has not been added yet and basically this is a picture that when you click on it it will download the pdf file and so there you see it downloading and then you can open it up and view the article well this is just an example of how you could have pdfs built into your site when we import this only one of these is going to be there we're going to learn how to add the second one so let's go back to elementor we'll go back to the dashboard we'll go to pages we're going to edit articles edit with elementor here's all our default stuff we don't need that so we'll remove those we'll click on our folder we're going to import a template in this case it's going to be the articles template drag that over now we'll insert it click no and notice that we just have one of these right now but notice that there are three columns well the easiest way to make the next one is to right click on this and duplicate now we have two of them but we have four columns so now we can right click on this and delete now we're back to three columns now one of the problems is we need to have the link to the pdf and we can't insert it here and get that link at the same time so we're going to go ahead and update this we'll go back to the dashboard we'll go into media and now we want to drag our other pdf file into here to go to our content and here is the other article cover and the article itself so we can drag those in once the pdf is loaded we can click on that and then we can copy the link to the clipboard close that out and now we're ready to go back to the pages go to articles edit with elementor and now right here we can click on this and right here is the link so we can paste in the new link so now see it's article 2 and then we can click on the graphic and we already added our graphic so we can choose that hit insert and now the new graphic is there and the only thing left is to change the header so we'll choose that widget put in the correct text hit update go back to our page come over here reload and now our article page is complete so now we're at contact if we look at our contact page you'll see that it has some default stuff i've went ahead and made all this in our color combinations but it basically looks the same but we're going to have to insert the form and we're going to have to insert the map so we look at jim grace go to his contact page very similar i just changed the colors and stuff to match it's got the form and it has the map with the right address let's go back to elementor let's go back to the dashboard forms actually have two parts when you're on the internet you go to a website you type in a form you're entering the information to a form when you submit that form there's also a form on the server that collects that information and sends the email out we're going to work on the form that sends the email out first so to do that from our dashboard we're going to click on contact scroll down and we're going to click on contact form one that's a default form that's already started we'll scroll up a little bit and from here let's go ahead and just change the name of our form and this is going to be our contact us page form and now i want to be able to make a change to this i'm going to show you how to make a change to this if i come in here if i take this and i copy this email one and i paste it it basically gives me the format of the way this is going to look now i'm sitting out here in empty land and i'm going to click on tel that's for telephone and i'll click on insert and it made that tag for me i'm going to take this tag i'll copy it and i'm going to paste it where the email tag was on this one and now up here where it says email let's change that to phone now notice it says that this is required meaning it's a required field you have to enter it but to tell the form itself it's required you put a little asterisk there so the asterisk tells the form it's required and the text is going to tell the user that it's required so now we can get rid of that extra space there so everything looks formatted correctly and any of these other things you can add these different features to it and just reorganize them how you want at this point i can hit save and the form itself to collect the information is there now we want to have the mail tab send the mail to where it's supposed to go to so right here you'll want to put your own email address this has mine in there but you can put your own email address in there and now here i want to change this instead of saying wordpress at it's going to say no reply at now by default this is going to be whatever your website name is since i'm doing this special one it says new.jamgraydesigns.com and now down in the form i want to add the phone number so that shows up i can do that and notice up here i can copy that and i can paste it down here and that will make the phone number show up in that email now i can scroll down and hit save and that form is complete since we're going to have a get quote page it's also going to have a contact form so we want to go ahead and build the server side form for that as well so we're going to go back to contact forms and if we highlight that there's our little duplicate plugin working for us again so now we have a second one and let's call this one contact us for a quote i'm going to scroll down and the phone number's already in there because we made a duplicate now in this case they're contacting us for a quote so we don't need to collect the subject because that is going to be the subject we already know that's what it's going to be we'll make that change ourself but where it says your message how about we make this a little more descriptive and say tell us a little more about your project now we can hit save and those are say button up here or one down there they're both the same save that now we go to the mail tab and again all this is set from the time before however in the subject instead of having the tag for a subject we're just going to put quote request because that's what it's going to be and inside the message body the same thing where it says your subject it would put the variable in there we're just going to put quote request and then where it says message body if we wanted to we can change that to say tell us a little bit more about your project we're the one receiving the email so we can make this say whatever we want it to so now that's been changed we can hit save and both our server side forms have been made so now we're ready to do it on our pages so we're going to click on oh wait a minute something else we want to do notice this little one here it wants us to check to see if everything's happy validate your forms now so we're going to click on validate and then there's a button here we're validating two forms and it didn't give us any errors configuration validation complete no invalid contact forms were found all right hit pages now the first page we're going to change is the contact page edit with elementor again this is their version ours is going to look almost identical except where it's going to have our formatting in there but we're going to delete all those and now we're going to choose on the folder and we're going to import a page we'll go back down to our templates and there's the contact us template now we're going to insert it notice i have to scroll down to get to it now we got so many of them hit no now at this point we have a nearly completed page we need to put our contact form over here so we're going to go to our widgets and if you scroll to the bottom the one we want is going to be at the bottom called void contact form 7 and this is basically what allows contact 4 and 7 to talk to elementor it basically is a tiny little widget that says drag me in here and then pick whichever one you want we'll pick that one and there it goes it shows up and now we have our form if you enter stuff in has a submit button and now we want to add another widget for our map so we're going to click on the circle plus we'll choose that for single column stretch full width and now we'll go to our widgets and we're going to pick a map here's google maps right there and now we have a map but notice how it has this little border around this edge we click on that section we can come over here under columns gap and set the default to no gap that takes it all the way to the edge and now we can click on the map we can put the correct address in there let's set the zoom level to 14 that'll bring in a little closer and let's set the height of the map to say 700 that makes it a little bigger we can hit update go back to our page reload and now we have a form and we have a map and you can add stuff to the form now i'll tell you a little secret um if you go to send this test message and you send it to yourself for example this would go to the same place it didn't always going to work so you want to put something other than yourself as the one that's sending it otherwise if you're using google or something it might it might refuse it because it's not going to allow you to send email to yourself so you have a problem getting your form to work try using another email address or send it to a different email address to make sure that it's working correctly one go down hit send message sent successfully and message received we're good to go so now we have one last page to do go to get quote in both of these now get quote is exactly the same except there's a little bit of a change in the text right here and that'll be changed in our template and then this form is the different form tell us a little bit more about your project and there's also no map outside of that it's identical to our contact us page so go back to elementor go to pages choose quote edit with elementor page comes in we'll delete all these sections and then we'll go back in to our folder my templates let's upload the quotes page and drag it over scroll to the bottom insert hit no and now our quotes are here different picture at the top text is different this is different we need a form here so we'll go to our widgets icon scroll to the bottom again choose that widget come to the left and this time we're going to choose the get a quote and now notice it has the good a quote form and we don't need a map so we can hit update go back hit reload and our quote page is complete and that means that our website is complete what we want to do next is to make it mobile compatible with all devices what we're going to do is make it mobile compatible on the main home page and then you can use that information to make all the other pages compatible so let's go back to elementor and let's exit to the dashboard and we go to pages go to home edit with elementor and when you make this compatible with all devices you're going to do it through here now the changes i'm going to show you how to do are for mobile if you click on tablet you can see that there might be some changes that need to happen looks pretty good actually but if you needed to make changes what we're going to show you now is going to be able to make those changes there as well when you go to mobile the first thing you'll notice there's some great outlines here and basically that's saying the intro video is not going to play so on the mobile device we don't need this text to wait 17 seconds before it flies in since it's not going to have an intro video so what we're going to do is we're going to right click on that and duplicate we're going to right click on that and duplicate now with the first one we're going to go to advanced and we're going to choose responsive and we do not want that one to show on a mobile device and then we'll go to the second one and we'll go to advanced we'll go to responsive and we do want to show on a mobile device but not on the other two and so then we get a motion effects for that one will take out the 17 000 which will make it show up immediately now we'll come to the second i mean the third one down and this one will go to advanced we'll choose responsive we do not want that one show up on mobile and then we'll go to the fourth one advanced scroll down responsive we do not want that to show up on tablet or desktop and so then when we go to motion effects we'll take out the 17 000 on that as well and that'll ensure that that text scrolls in immediately on the mobile devices the other thing that we can do is maybe this seems a bit big so this is on the mobile device i've got that selected i can go to style typography and maybe we just set the font ourselves until we like what it says and we can just keep going out and that looks pretty good about there so you see we changed the size of that based on the needs now if we scroll down maybe we want this text to be a little bit higher so i can choose that column for example go to advanced and then at the top i can give it a big negative number and see i'll notice that slides that up and it's only sliding it up on this particular mobile device and we can choose jim gray designs advanced unhook those change that a little bit and now on this box let's pick this one and we want to go into here for the mobile let's connect all those and now that looks like it fits in there nicely scroll down that works okay keep scrolling down now notice there's not enough space here so i can choose that column advanced disconnect those add a little margin up at the top and then maybe i want this a little bit closer advanced margin take a little bit of that out with a negative number scroll down looks okay looks okay now i think that that may be all we need oh here we go those are really big waves so let's choose that one let's go into style shape divider now in the shade divider see it tells you that it's in mobile mode how about we just say no divider on that and then on the bottom one we'll set the height to zero we'll just take that feature out we'll scroll down now on this i really want that on one line if i can have it so i'll choose that i'll go to style typography and let's add some size until it fits just right and that should be good right there that looks okay that looks okay now these seem a little bit big so let's see what happens can we change something about these let's go to the column for example and let's put a little bit of padding in there and that makes it a little bit smaller so i got that 30. i'll right click on that copy right click paste style we'll do that all the way down and now they're a little easier to see they're a little spread out and at the bottom that looks pretty good and so now this one when we update it it'll be mobile compatible we come back over here and we hit reload nothing should have changed as long as we did everything right meaning there shouldn't be two of these titles those titles should show up at the end of video still just like they did before and as we scroll down everything else should be exactly the same as it was before if we didn't screw anything up and so that stuff's popping in exactly the way we expect it to and you really do need to go back and review in case you made a mistake on it to see that the desktop version still works out okay and if you visit this on a mobile you'll see that it works out well as now too 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 so we're going to go back to elementor 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 plug-in 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 so if you click on the link at the top right it'll take you to a youtube video that explains exactly how to activate your secure key inside your wordpress website 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 fifty percent off your first month with a 100 guarantee on that first month if you don't like it you get your money back now i truly hope i covered everything you needed in this tutorial now if there was something i didn't mention or you had additional questions please leave them below be more than happy to answer them for you but if i don't know the answer i'll go hey i don't know but if i do know the answer i can find the answer i'll give it to you and maybe we could work on it together so i really enjoyed 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 would be super helpful but outside of that i just hope you have a great day peace out

Channel: WebYoda

Views: 200,739

Rating: 4.9838681 out of 5

Keywords: astrawp, astra pro review, astra starter sites, astra starter sites plugin, astra starter sites tutorial, astra theme pro, astra theme wordpress, astra theme, astra agency, astra pro theme, astra pro tutorial, astra starter templates, astra theme wordpress tutorial, astra free, astra free theme tutorial, astra theme demo, astra theme review, astra theme templates, astra theme tutorial, astra wordpress theme, astra wordpress theme tutorial, free astra theme, astra tutorial

Id: zFfqK4-tynU

Length: 136min 37sec (8197 seconds)

Published: Fri Sep 25 2020