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 gon na look really fancy it's gon na look very professional, but you're gon na be able to do all this trust me. It'S not gon na 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 gon na 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 gon na - 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 gon na 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 gon na 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 gon na allow us to build our website. In our case, it's WordPress so we're gon na 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 gon na put Yoda user user name, I'm gon na put Yoda Yoda or email address. I'M gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na. Go to global buttons color and for the background color we're gon na 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 gon na 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 gon na set the color for the pulldown menus for a computer or laptop and your mobile devices to do that. We'Re gon na go to appearance, customize and it's a ferry at bottom. There'S a section called additional CSS we're gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na put it. I know I said no coding, but we're gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na. 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 gon na be using this carwash site or any other one. Where there's gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na show in mobile mode. Now, when I scroll down here's our other one, we just duplicate it. I'M gon na 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 gon na 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 gon na come over here we're gon na right-click on this column, I'm gon na 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 gon na 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 gon na go, find our showroom. Pictures for this gallery right There, I'm gon na slide that over and we're gon na 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 gon na 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 gon na 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 gon na work on the form that sends the email out first. So to do that from our dashboard, we're gon na click on contact, scroll down and we're gon na 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 gon na, 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 gon na 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 gon na 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 gon na 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 gon na 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 gon na. Look almost identical, except where it's gon na 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 gon na, 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 gon na 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,