How to Make a Website in 90 mins ~ 2022 ~ A Simple, Fast, & Easy WordPress Tutorial For Beginners

be looking at a 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 use 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 3 to 10 dollars a month with your web hosting you get a free domain a value of $15 as well as an ssl key which makes your webpages secure and that has a value of about 99 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 have choices I've had some students in the past that had complaints about compatibility issues with Safari Opera and Internet Explorer now they're in this course if you run into any trouble just leave a comment below the video and I'll be more than happy to assist you and don't be shy about asking for help I've been a web master instructor aka the web yet Oh forever 20 years and I'd love to hear from my students but if you could please pay it forward if you could like the videos subscribe to the video share the video tell your friends about the video those are the kind of things that help get the word out there so other students like you can find this video there was something else Oh at the end of this video I'm going to discuss the four biggest mistakes people make that drastically hurt your search engine placement turns out the solutions for these four things are really easy in there 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 gonna look really fancy it's gonna look very professional but you're gonna be able to do all this trust me it's not gonna be a problem at all now this website starts with this video intro we're going to learn how to build one of those now notice that 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 on to behind the scenes how to do all this it's very simple it's very easy and you're gonna be surprised how quickly you can build this entire website as we scroll down the homepage watch for the special effects notice how the images fly in notice how these things come in gradually notice how the images pop in on how the text pops in all these types special effects you're gonna learn how to do we're going to be able to build this carousel notice how this little white area sitting on top of a background and that's it 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 Jim 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 home page 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 rights 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 show room we're going to learn how to build this super fancy gallery now this is also a lightbox gallery so if you click on any one of these it brings it up in a lightbox 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 pulldown 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 notes page is Jim Gray designs 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 Jim Gray 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 in inserting a map and with this website we're also going to make a get a quote page where you 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 ninety minutes time so we're ready to start on our website but before we can build a website we have to have a place for our website to live and that's what web hosting does for you otherwise you'd build a website on your local computer but only you'd be able to see it you want to be able to have the world see it so you have to get hosting so everybody else can see your results the next question is who are you gonna get hosting from because obviously there's a lot of choices out there web yet I did some research where they came across some very non biased results for PC Magazine conducted an Editors Choice Award for web hosting and shown here are the top six results from that Editors Choice Award and of the six Hostgator was the number one pick for PC Magazine Editors Choice Award their features were amazing there 24/7 support was amazing the reliability and security was amazing and their pricing was as good or better than any other options out there so web you had who decided to go with Hostgator and they use that for all their students and any websites that build and we'll also be using Hostgator for this course as well so at this point we're going to go to hostgator.com front slash web yoda and the reason for that link is that now web yoda has a partnership with Hostgator thereby every time a hosting package is sold through that partnership a small portion of that goes to the web yatta foundation and the web you had a foundation in turn uses that money to build more free courses like this one as well as provide free training for students and training centers and online all over the world who are unable to afford it themselves now this takes you to the partner page for Hostgator and web Yoda and it reveals our three choices for hosting plans currently as part of this partnership Hostgator is going to offer us a free domain name provided we sign up for one of their annual plans and it turns out this is actually the most affordable choice for us if we scroll down we can reveal the pricing for each of the plans all three of the plans come with one-click install so that means when we go to install the software it's going to allow us to build our website we can just click a link and it'll install everything for us they also come with unmetered bandwidth which means we don't pay for the traffic that comes to our website no matter how small or large that might be and finally they also come with a free ssl certificate which typically runs around 99 dollars 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 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 recommend the hatchling plan if you have one domain or the baby plan if you plan on building multiple web sites and then if later you find you need additional features you can just upgrade to the business plan and pay the difference so in your case you probably need the hatchling plan which is just a single domain so we'll choose that the first step for signing up for hosting is to choose a domain name in our cases Jim Gray designs com but you will pick a domain that's appropriate for your website project now once you enter the domain name you can click to the right and it will tell you whether or not it's available now Jim Gray designs already exists because the site already exists if we add a one on the end of that just for this example we'll see that it shows up as available now scroll down to the bottom of this section and there's an option of whether or not to have domain privacy protection when you purchase a domain by default somebody can look up who owns the domain it'll show you as the owner it has your contact information your email and your phone now if you don't want that information to display for the world if that matters to you then you're going to want to choose domain privacy protection to hide your personal information now for us since that same information is found on the contact page for Jim Gray designs com there's really no reason for us to have this privacy protection in my opinion so we're going to turn that off and save the 1495 a year step two we need to choose our hosting plan billing cycle will give a username of admin Yoda for me and pick a security pin now we already chose our hatchling plan since we only have one domain and now we need to choose our billing cycle now a billing cycle starts at one month where we can get the first month at 50% off all the way to 36 months they'll notice at 36 months it's two dollars and seventy one cent amonth whereas twelve months is two dollars and fifty eight sentiment whereas one month is at five dollars and 48 now the problem is is that at one month we don't get the free domain in three months and six months we don't get the free domain so let's choose the twelve months so we can get the free domain and just see what that's going to cost us next you need to enter your billing information on how you're going to pay for your hosting in step four they want to sell you on some additional services the first is an ssl certificate we already get one of those free through the partnership so there's no reason to pay for an additional one the second is protect yourself from hackers but I already know that Hostgator does this for you this is not really going to buy you anything they're going to protect themselves from you as well as hackers so I'm not going to pay for that feature the third is for setting up email I'm going to show you how to set up a free email forward so there's no reason to purchase that in the next is a feature to backup your website regularly Hostgator is gonna back your website up monthly and if you go to the link here above I'll show you how you can backup your website yourself and avoid this fee they also offer search engine optimization tools but I'm going to show you how to get all these for free as well so we didn't need this and the next section is the coupon code which it by default inserted web Yoda and notice what that's going to get you it's literally 75% off and a free domain name and remember you have 45 days money-back guarantee if you decide not to do this you can get your money back now we're ready to agree to their terms of service and choose the checkout Now button to complete your purchase now that your payment is complete Hostgator is getting your account ready for you now your hosting account is complete and you're ready to access your hosting account next just proceed your email account and look for an email from Hostgator comm that has your account information 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 you were to put your username and password in there and that takes you to the home page for your Hostgator control panel also referred to as cPanel by some people as promised instead of having to pay for emails for your new domain name I'm going to show you how to set up an email forward and avoid that fee you're looking for the email forwards option which is right here but for some reason it's not under your popular links you can go to email on the left and it'll bring up all the email options and then you can choose email forwards to create an email forward just choose on add forwarder and this is the email address you want to forward so in this case it's just going to be the name Jim and then we're going to choose the domain now you're just going to have one domain most likely in here instead of a pot load of them like I do now I'm going to choose Jim Gray designs so it's going to forward from Jim @ Jim Gray designs com in the destination I'm going to put his gmail account which is Jim Gray designs at gmail.com now we simply choose the add forwarder button and now at any time an email is sent to Jim at Jim Gray designs com it'll automatically be forwarded to Jim Gray designs at gmail.com let's go ahead and go back to our Hostgator control panel we'll click on that art there and now we're ready to install the software that's gonna allow us to build our website in our case it's WordPress so we're gonna choose the WordPress link inside the popular links and you know and choose your domain name in your case you probably just have one domain to choose from and you'll just select that domain typically I'd just be clicking on the Jim Gray designs com but since that website already exists I needed to make another one in this case its new at Jim Gray designs com for this example so I'm going to select my domain name we're not going to choose a directory name so we can hit on next your blog title is basically the name of your website so in this case we're going to put Jim Gray designs the admin user I'm gonna put Yoda user user name I'm gonna put Yoda Yoda or email address I'm gonna put Yoda at web Unicom it'll automatically create a database for us we have to agree to their terms of service and we'll click install install process doesn't take very long notice it goes to 60% but it says installation is complete well why does it only say 60% you scroll down you'll see they want to sell you stuff they want to set this up for you or they want to sell you a theme so looking at 50 to 200 dollars we don't want to pay that instead we're going to do it all ourselves it's easy to do 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 domains ready the first step is to open a new tab so you don't lose access to user name and password what we just set up now go to your domain name in our case it's Jim Gray designs com which we originally set up and if your domains 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 so we fit in our time we're ready to move forward so let's go ahead and close that test tab now we're looking at our control panel again first thing we need to do is copy this crazy password because nobody's gonna remember that and then we click on login and that takes us to the login screen for our new 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 hit enter and there you go so here you type in your user name in my case it's yo - user you paste in that crazy password and you choose login and you don't want to save this password right now because we're about to change it so we'll choose close on that and I just wanted to verify this is the correct email address in case notifications need to be sent to you about your website well click email is correct and now we're into our hosting environment now often is the case they'll have little promotions all this stuff here is probably not anything we're going to use they're just trying to sell stuff and a little pop-up so we can close that because we're not going to need that the first thing we want to do is to change that password to something that's manageable so we want to click on users that's going to bring up the only user we have go ahead and click on the username scroll down and you'll see a box for generate new password in the generate new password let's hide so you don't see what's going on you choose a new password and if your new passwords weak you just need to confirm it's a weak password hit update profile and now your passwords been changed now at this point I typically would log back out and log back in with our new password now that WordPress is installed and we successfully changed our password 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 there were going to be going from this to this that's our goal we're going to make it happen so 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 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 timestamps 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 timestamps 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 webpage the first of those is a theme so let's go ahead and go to a new tab in our browser and you're going to want to go to web utakome front slash themes which you can also get to that under resources and go to themes and then you want to scroll down to the particular project you're doing so in this case we're doing Jim Gray designs and then we're going to click on the Astra theme that downloaded the theme to our downloads folder 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 Astro 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 there'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 checkbox at the top next to plug-in 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 ok 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 get a webby edicom 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 I 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 size is a bunch of website starter kit so we don't have to build everything from scratch the contact form 7 in the CF 7 element or 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 plug-in 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 plug-in choose file will choose the second one open install now activate plug-in two more to go add new upload plug-in choose file third one open install now activate plugin and the final one add new a plug plugin choose file pick the last one open install now activate plug-in and so now all of our plugins are installed but notice there's a 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 your 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 gonna pay for it and they're typically a lot nicer for this course we're going to use one of the free Astra starter sites but I've found for the 20 or so websites I build a year that about half I might use a free starter site and half I might use a paid starter site and 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 web Yoda com front slash 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 carwash 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 carwash 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 it's already ready to go all you need to do is make the changes to the text it changes to the images the content and you're ready to often run it 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 the WP forms and then I'm going to say bulk action remove apply I don't need this same thing with this you can also get rid of ones by just choosing trash when you highlight it 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 will either make duplicates where you need extra pages or will rename some so just see where we're at if we go to Jim grades website we need about services rates show room 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 going to change this one just call it rates so we can if you highlight it it shows the quick options we're just 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 go back to our dashboard and as of now we have five pages all these are names similar to what we need but we need for additional pages so for the about page I'm going to choose select it I'm just highlighting it and I'm gonna choose duplicate this and that's where that little duplicate plug-in came in handy duplicate this page that's to 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 on our website so we'll rename the first one so I'll highlight it quick edit this will be show room and I'll put show room 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 will also make the slug name and page name wire nuts I'll choose publish update our third page is going to be articles our slug name page name will also be articles well 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 well 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 checkboxes 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 pulldown that we're gonna have wire nuts and articles in that we talked about and for the URL just put a pound sign it because you have to put something there for it to add it to the menu well 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 pulldown 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 gonna call this menu main you could just leave the default if you want save our menu once the menu saved if we come back over to the 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 dot PHP and then it has our page name 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 when you go back to our dashboard we're gonna 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 always put a slash at the beginning and end just for compatibility make sure it works in all environments now I'm 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 - 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 gym ready to sign so what I want to do is download the content for the gym great designs website so we have access to that so to do that I'm going to open a new tab I'm gonna go to web comm front slash content scroll down to the project we're working on and choose content - Jim great design 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 I'll right-click on that I can choose extract all and it asked 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 a 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 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 in 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 you calm 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 Astro 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 the information for that here's a bunch of free places to get video clips free places for images free places for element or 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 it any time and the reason why I'm bringing this up now is because we're gonna 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 that 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 then I'm going to come back over here and then we're going to go to appearance customize and then from here we're gonna go to global buttons color and for the background color we're gonna 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 gonna get back to our document finally yellow we'll copy that yellow come back over here and we're going to choose hover and now we'll change that blue 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 buttons red a typical question that 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 then when you find a color you're interested in it shows you the color here you copy that to the clipboard and then you get paste it wherever you need it so let's go back to our dashboard well 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 plug-in 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 did to buy their plug-in 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 gonna set the color for the pulldown menus for a computer or laptop and your mobile devices to do that we're gonna go to appearance customize and it's a ferry at bottom there's a section called additional CSS we're gonna 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 gonna go back to our content just under what we were looking at is the additional CSS copy this to the clipboard you don't worry about what anything 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 being hit publish go back to our website it's white we hit reload and now that's been fixed number ready to put the real logo here since Jim great designs 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 at 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 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 asked me to 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 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 Astro 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 homepage 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 place that down now we want to go to the hover color we're going to make that the yellow I'll come over here you know close that down and that's ready to go 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 homepage so to edit our homepage we're going to go to pages and at home we can click on home or we could click on edit with element or element or 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 element or 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've 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 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 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 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 gonna 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 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 that's interest is that it's not always going to have what you're expecting over on the left and the reason is 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 and 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 or we did it before but I want to stay in the media library and say you 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 I just 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 that 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 but 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 80% if you do it to 100% I don't know if you can need to tell it you can see just 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% 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 get a style Shadow choose the color and we're going to drag that up to around 80% like that and that'll make it look a lot easier to read with that a little bit of a shadow in fact you don't even know the shadows there unless my point set out to you but it certainly makes a difference now I can update go back to our site scroll to the top let's click the logo so we can see our homepage and look at that we already have the Jim Gray design website now one little of 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 element or we'll choose that widget and up here in between that we're gonna put it I know I said no coding but we're gonna put a little bitty code it's a less than B R that stands for break and a greater than and notice that it makes it go to the next line well that's just a smallest bit of code to learn how to work and look how much difference it made so now we can do update get back to our page it 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 up direct link to that so let's first see what the YouTube version would be like so if we go to YouTube unless 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 we'll 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 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 videos so we've got to do something else so let's go back to Elementor and so we can take this out because we don't 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 now 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 does 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 five to seven 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 webpage 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 to back to pages and instead of clicking on home I'm just gonna 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 just 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 a little blue box so 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 M S stands for milliseconds well the video intro is 15 seconds long so if I've set a delay of 17,000 that's 17,000 milliseconds which is the same as 17 seconds that means two seconds after the video intros complete that text will slide in there now we're going to 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 well 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 he didn't have to get quotes at the top right well I said okay so what happened is we added a menu item for get quote but to 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 when we get 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 homepage so to do that we're going to go to pages choose the homepage 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 to them here and look at what we're going to be doing 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 then 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 its 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 now let's change this text right here to look like it does over here then we're going to select that widget I'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 it'll come down here put it in there and close that out and then we're also going to change the height of that so we'll give into typography and right here where it says size will fit 16 and now we want to change this text then 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's that can fit you notice this is a column at it's empty and then 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 and we're going to advanced in the white area around the outside of this is called padding whereas the outside of the area is called margin and that'll 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 now 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 I'm just gonna drag it over here sometimes it's hard to get that little blue line to show it where you want but that's worth drag two we're gonna 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 then 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 I 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 changed this picture now I've got to upload the services picture 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 let's use the second one click on that let's use the second one insert media I'll go to the third one click on the image use 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 how it everything ready will definitely save you a lot of time so now when 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 that 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 pay 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 then we'll paste that in and pick the final one go over here and and paste it here and hit update now look at their 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 well 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 gonna 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 nineteen and said that wasn't small enough but here's this little arrow here let's do it down arrow and then it that fits and we'll just make it one more smaller so there's an 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 in there 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're sections or rows that go on your website and you can basically choose any of these and add them into your website these are all element or blocks and some of them have the word pro next to them means that if you have element or pro you have access to the fancier versions so as you scroll down you'll see that more and more I'm a pro versions but there's a lot of the free versions as well so if you end up with element or pro all sudden you have access to all these extra fun tools now pages these are entire pages like a home page or in 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 there it is now we'll choose insert and I'll choose no on this just choose now every time and now we have this new section that's been added and it basically has three john doe's 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 sighs use 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 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 look at their 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 and 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 happen to have lock 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 element or 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 at 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 and empty cell and then one in the middle but let's go ahead and do that so we're going to add a section where have three blocks it looks like the middle ones wider again we can change the with of these because choose that as a default now in this middle block it has the little header in 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 we come back down here you can right-click in that area and we can paste it now 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 having a layout which is the first section we can choose stretch the section content with 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 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 to 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 it's 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 gonna 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 one will 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 will choose waves color will 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 the 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 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 what 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 care of so we hit reload and there's our carousel just like that we look back over and looks the same good job 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 this 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 okay up over here will come up here those 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 I'll 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 I can do copy then we come 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 I'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 makes a tiny bit around this now we can right click that button copy right click this button pay 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 do I get 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 a hundred on the left its 0 on the right it's 60 at the top and it's 60 at the bottom 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 could be used to your advantage so now this piece at the top it needs to be brown so we'll choose that text go to style change the color to brown and now we'll go to content to change the content so we'll highlight that and paste in the right to win 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 it's 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 and it'll be 29.99 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 pay style now I just need to change the text for both of these so we can select that widget come over here our exclusive newsletter now I'm going 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 I'm down here right click paste if some reason things aren't in 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 they 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 I'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 what 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 but do that under style or text well 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 if I close that color out inside of the text inside of typography there's a thing called transform and transform allows me to make different changes like that in this case I want it capitalized capitalized only 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 it will change that one just say that and click on it again to close it click on the second one to open it means that close it open the next one with the right text well is that one open the last one put in the right text close that one now if you needed extra 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'll update itself come over here we hit reload and looks like we're complete hover over a button is pointing to about and it's supposed to be pointing to wire nuts so I'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 open to our nuts get update I'll come back over hit reload and now this points to the right place now we're now ready to do the next section and on this site it looks like this and on this site 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 all together 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 let's 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 whatever here it doesn't wrap but we need to change our column size so let's go back into here and let's check the middle in 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 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 well 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 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 then I can choose duplicate now I've got all of them now we just need to go put our brand logos in there so let's use the first one click on the image and then 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 it insert and then we'll go to the next one choose the image insert the next one we'll do that for all eight of them now let me 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 that'll make them lighter but we'll choose the first one then go to style and this opacity if we change it see how it makes a difference in 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 update we go back over this is what it looked like before hit reload there's our new section if we compare it we'll see they have a little bit of extra space up here easy enough to fix we go back to the section itself advanced will 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 get back reload and that's complete so the last section is this footer and I'm gonna take 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 gonna 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 um 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 foot or 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 element or inserted site and since I don't know if you're gonna be using this carwash site or any other one where there's gonna 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 homepage 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 element so what 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 drag it 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 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 and 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 element or pro feature it's a widget from their process so if you had elements or pro that would show up the other advantage of element or 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 element or pro and if for some reason you want it to do element or pro as well just go to web Yoda calm front slash element or and it gives you a brief information about this the element of pro button is there you can click through there and get partnership pricing through that link also they give a piece to the web a foundation that helps make more of these free classes so in my case I did purchase the pro and then once I purchase the pro I went through the install process which is really quick and easy it's just you import the plug-in and you in your license and you're ready to go for those interested in the element or 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 element or pro plugin once your plugin is activated scroll down your plugins and make sure elegant or pro is up-to-date now to do our new version of our footer now we're 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 into my template will 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 will 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 homepage edit with Elementor roll down and we'll just get rid of this footer in this footer bar 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 element or pro but for this particular thing I like being able to make one change a one place for my footer and it changes on all pages and I like having a little menu at the bottom it's your choice there is a free way of doing it we showed you that as well but kind of a side note once you have the footer thing in place use an element or 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 veto 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 that shifting over in that page but shift it over on all the other pages so that's really another indicator while like doing it that way so much the good news is now we finish with our homepage so we can go to our top then 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 and go back to our Elementor we're going to exit to the dashboard already 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 it's this bottom section we have this little bitty graphic and what we want to do is we're going 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 then 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 we don't need both of those so I'll just delete the one that I have and this here for example it's 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 grey side and we'll click on services so this is Jim great services page if we scroll down here's some regular text the same things we did here's something similar what we did on the main page instead of having three services across its 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 Garrity section I'll show you what we're gonna do when we get to that so let's go ahead and go back to element or 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 gonna 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 gonna 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 it what's gonna 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 in a mobile and we're like oh wow that's really not gonna work so what we really need is we need this to be smaller in the mobile version 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 gonna 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 gonna 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 it to show on a mobile and notice how it gives these little slashy lines in it that means that one's not gonna show in mobile mode now when I scroll down here's our other one we just duplicate it I'm gonna choose that one and then I'm going to come over here to advanced scroll down again get a 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 well 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 let's in on the desktop version it'll look like this and that one will be ignored that makes sense but we'll click on update well 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 when we go down you can see how it looks different though 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 will 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 when you 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 but 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 will find the rates page there's the template for rates we'll drag it over now we can insert the rates always it no did I say always it no pretty sure you knew that and 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 gonna 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 gonna come over here we're gonna right-click on this column I'm gonna copy and then we're going to right-click on this column and we're going to paste aisle now they kind of look the same except this has a 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 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 move this up and now we're going to change this see this extra space here we're going to change this to zero 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 is 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 now 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 your gray site now the showroom page has this really cool gallery watch how it fills in now neat that is well that actually is an element or pro gallery and if you decided to purchase element or 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 element or 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 end it with Elementor and we don't want any of these sections so we're going to elite 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 I'll type in gallery and here's the different types of galleries we're gonna 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 I'm going to click here I need to import my gallery so we're gonna go 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 depending 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 hour a minute 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 I'm 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 wanted to be in so 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 lightbox 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 B 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 come over here where you load that page and now you can see what it looks like and any of these you click on the lightbox feature comes up and you can just roll through them just like that now since this has element or pro in it I'm going to remove this one hit delete and I'm going to type in gallery and then 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'm 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 you'll want to use the one I chose you go to layout and you choose masonary 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 you 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 site and what it's going to have it's 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 gonna add that one so we come over here we can see that nothing's there yet so let's go back to element or 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 see out as the teal color and if you go back over here it's got a red one here well this was volume 5 issue 1 and this is volume 6 issue 1 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 mange it to six and now we're going to click on that well 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 use 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 then we'll get 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 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 it's 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 they'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 I'll insert it like 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 and then we can right click on this and delete now we're back to the three columns now one of the problems is 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're 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 blows that out and now we're ready to go back to the pages go to articles and it 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 I 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 to our page however 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 gonna have to insert the map so we look at Jim Gray's go to its 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 element or let's go back to the dashboard forums 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 into 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 gonna work on the form that sends the email out first so to do that from our dashboard we're gonna click on contact scroll down and we're gonna click on contact form 1 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 gonna 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 I come in here 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 gonna click on TL 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 going to pace 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 asterisks tells the format'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 now 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 out now by default this is going to be whatever your website name is since I'm doing this special one it says new Jim Gray designs comm 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 in 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're going to go ahead and build a server-side form for that as well so we're gonna go back to contact forms and if we highlight that there's our little duplicate plug-in working for us again so now we have a second one and let's call this one contact us for a quote we're going to scroll down and the phone number is already in there because we made a duplicate now in this case our 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 knows what's a button up here or one down there they're both the same we'll 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 hit save and both of our server-side forms have been made so now we're ready to do it on our pages so we're gonna click on wait a minute something else we want to do notice this little one here he wants us to check to see if everything's happy validate your forms now so we're gonna 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 yet pages now the first page we're going to change is the contact page edit with Elementor again this is their version ours is gonna look almost identical except where it's gonna have our formatting in there but we're going to delete all of 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 yet 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 it's going to be at the bottom called void contact form seven and this is basically what allows contact four and seven to talk to element or it's basically there's 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 single column stretch pull with and now we'll go to our widgets and we're going to pick a map here's Google Maps right there and then 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 it in a little closer and let's set the height of the map to say 700 that makes it a little bigger you can hit update get back to our page reload and now we have a form a map and you can add stuff to the form now I'll tell you a little secret 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 gonna allow you to send email to yourself so you have a problem getting your form to work probably 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 element or page comes in will delete all these sections and then we'll go back end to our folder my templates let's upload the quotes page and drag it over scroll to the bottom insert it node and now our quotes are here different picture at the top text is different this is different we need a form here then 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 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 we got a 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 or 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 get 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 we'll take out the 17000 which I'll 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 will 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 17000 on that as well and that will 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 change the size of that based on the needs and now if we scroll down maybe you 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 let's scroll down that works ok 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 ok looks ok now I think that that may be all we need oh here we go there's a 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't 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 aisle won't 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 let me come back over here then 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 have to show up at the India 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 is now - 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 in your instructor but as promised I had four really key things that I wanted to add at the end of this video that'll help your website show up in the search engines better the first tip is that inside a wordpress there's a place that specifically discourages search engines from indexing your site once your websites 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 element or exit to the dashboard and then we're gonna 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 in yours probably has used also free so we're going to go to plugins going to add a new plugin and over here pipe in Yost five million active installations tells you something so let's go ahead and install it let's activate it now you have the most powerful plugin for doing SEO available tip number three secure pages Google likes websites that have a lock Google likes websites that are mobile friendly so if we can do both of those things we're going to ensure that our websites 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 Jose 1.com these guys will teach you everything you need to know about backlinks that's basically all they do and if you look at it Jose one SEO literally is their middle name so they know what they're doing now under SEO solutions it shows you the basics the terminology and the details they'll teach you everything you need to know as far as making your own backlinks how it works how to make the system work for you and if you decide you don't want to put the time in to build them yourself you can also contact them so if you decide to use Jose one services be sure to mention the promo code web Yoda and that'll save you 50% off your first month with a hundred percent 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 to Allah be more than happy to answer them for you but if I don't know the answer I'll go hey I don't know but if I do know the answer I can find the answer I'll give it to you and maybe we can work on it together so I really enjoy doing this I hope you had a great time as well the only real payment I'm looking for if I could possibly get a subscribe out of this possibly a like out of this I'd be super helpful but outside of that I just hope you have a great day peace out

Channel: WebYoda

Views: 1,373,950

Keywords: create a website, make a website, build a website, how to create a website, how to make a website, how to build a website, create a website free, make a website free, build a website free, how to make a free website, how to create a free website, how to build a free website, create a website 2022, make a website 2022, how to make a website 2022, how to create website, how to build website, how to make website, website tutorial, create website, make website, build website

Id: 1fjWgYz9egs

Length: 132min 26sec (7946 seconds)

Published: Fri Jan 24 2020