How To Make a WordPress Website

hi my name is Tyler and in this video I'm gonna show you how to make a website step by step with no step skipped this new way to make a website is so easy it's just 27 simple steps some of the steps are 30 seconds long and some are 8 minutes long but they're all really easy and it's all step by step so the steps are the intro which we're doing right now getting your domain name in host which is getting your website name like your website com then after that we're gonna set up your website we're gonna install WordPress which is the most popular way to make a website in the entire world WordPress has a fifty nine and a half percent market share other companies like Squarespace Shopify and Wix aren't even close it's used by companies and people like CNN Forbes ups eBay jay-z and Katy Perry and that's because WordPress unlike these other companies is open sourced and what that means is that anyone can build anything for WordPress and release it to the public so if you need something specific like a contact form or a certain design chances are you don't need to pay for the WordPress community probably has already built it for you absolutely free and that's why WordPress is the best then after that we're gonna do things like log in and change your password and we're gonna set up your website so the search engines can find you really easily then we're gonna start building your website we're gonna choose the design that you like of course you can customize it any way that you want but it's just the basic design then I'm going to show you how to add pages so any custom pages that you want I'm gonna show you how to change your navigation menu at the top and put in your logo then we're gonna design your pages so first I'm gonna do a quick overview of how everything works and we're gonna be using a visual designer that's the best rated most popular and super easy to use then we're gonna go to Apple's website and disney's website and i'm gonna show you how to recreate those designs in your own website and this is just to prove that you can literally make any design that you see and put it on your own website but then i'm going to show you that you don't actually need to design anything at all people have already created these designs for you and you can mix and match into literally trillions of different designs it's a much faster way of making a website and it's super easy after that we're gonna go over the contact page so people can fill out a form and contact you then I'm gonna show you how to make your website mobile-friendly it's super important because half of your website traffic is gonna be coming from desktop but the other half is gonna be coming from people's phones so it's super important that your website is mobile-friendly then after that I'm going to show you how to get security so your website will be secure and that's basically it it's twenty seven really simple steps all step by step in the description below all of the steps are time-stamped so that you're never lost and you can also download this Google sheet so you can mark off your progress you can also go to Tyler comm I've written out all of the steps right here for your convenience and finally I want to say thank you to all of you who are watching nine years ago no one made a video showing people step-by-step how to make a website I'm reading a book on how to make a website but really so I decided to put one out and the response on the internet and on YouTube have been amazing and I still have the most subscribers and the most views on a channel showing people how to make a website and I just want to say it really is a dream come true so really thank you so much and with that you're already done with the first step of creating your website so let's mark that off and let's begin so the next thing that we're gonna learn is what is your domain name and what is your host a domain name is your website name for example Google's domain name is google.com so that's pretty easy to understand your domain name is your website name or your URL but what is hosting so let's check out and see what that is so if we go to this really great drawing and illustration here and we imagine someone typed in on their computer so this is your computer right here if someone typed in disney.com that request when you typed in disney.com and you press Enter would go to a disney.com computer basically and that computer holds all of the disney.com files and information so all of the text all of the images and everything like that and it sends all of the files and information and text and logo and images back to your computer and that's when you would see the disney.com website so that's why sometimes websites take a little while to load because there is a time that it takes to have the request and for that computer to send that request back with all of the files and information so again your domain name is your website name and hosting is where you store all of that information 24 hours a day and this computer right here has superfast internet and again connected 24/7 and it's called hosting or it's called your server because it serves up the information so how much does all of this cost your domain name or website name cost about fifteen dollars per year so that's like your website comm and your hosting cost about ten dollars per month but it can be as low as three dollars per month it can get really low if you apply the right discounts so it can be as low as thirty dollars a year which is about three dollars per month or it can be about ten dollars per month if you go month to month all right so let's go get our domain name and hosting and we can do that at the same place hostgator.com so if we go up here we can type h 0 st 0.000 of hosting companies and obviously I haven't tried all of them but I have tried some bad ones and my website kept on crashing so I recommend Hostgator you can see in my first youtube videos nine years ago that I recommend Hostgator and I've been using them for a total of fifteen years and they're really great in my first videos I recommended Hostgator because that's just who I was using they wanted to offer my users a huge discount the biggest discount on the Internet and they also wanted to give me a commission to thank me for recommending so it's really a win-win I get paid to do what I love and you get the biggest discount so thank you so much I really do appreciate it I really like Hostgator because they have 24/7 365 email live chat and phone support they're a super stable company so they're not just gonna be gone tomorrow and they have a money-back guarantee so you have a whole bunch of options here web hosting website builder WordPress hosting VPS dedicated and domains and you would think that you'd use WordPress hosting but actually it just comes with way too much stuff that you don't really need and it costs more money and if you really do need all of those bells and whistles you can always upgrade later so what I recommend to do is just start with web hosting so just click on web hosting all right if we scroll down we're gonna see these three different plans the hatchling plan the baby plan and the business plan but in order to get the discount you actually have to go to hostgator.com forward slash unlock UN L Ock and press enter and then you can scroll down and those three plans are here again the hatchling plan the baby plan and the business plan but that discount is unlocked so the business plan again is just way too much stuff and you can always upgrade later I don't think that you need it right now so it really is between the hatchling plan and the baby plan the difference between the hatchling plan and the baby plan is the baby plan offers unlimited domain names so you can have like your website com your friends website net your mom's website com you can have unlimited domains on your single hosting package with the hatchling plan you can only have one domain on your hosting package so like your website com but again later you can always upgrade if you want to so unless you're starting out with multiple domain names like your website com and your other business org then I would just get the hatchling plan and again you can always upgrade later if you need it so that's what we're gonna do we're just gonna click on buy now once we do that it's going to ask us two things do we want to register a new domain or do you already own a domain if you click I already own this domain maybe you already purchased a domain from somewhere like godaddy.com you can enter it in right here so you'd enter in I already own it calm something like that but since we're registering a new domain today I'm just gonna click on register a new domain and I'm gonna enter it in right here so mine is learn how to create a website calm and here we can choose the extension so do we want the dot-com or the dot online site store website tech space host and of course if your main domain name what you want or your business name isn't available then you can go with the online or org or net but I'm just gonna choose the dot-com if we scroll down we can see that they're gonna offer us all these other websites with different extensions and I don't really think that you need them it's not like someone's gonna go out there and copy your exact idea and get the dotnet that doesn't really happen so we're just gonna stick with the dot-com if we scroll down it's gonna ask us do we want domain privacy protection now what this does is when you register a domain name like your business com your name and email and phone number are available for someone to look up on the internet and sometimes people will call you and sometimes you'll get emails which is basically just spam and they'll say hey we can do this this and this for your website do you want to buy my services so it's a little annoying to get those emails and spam calls eventually they go away but it is a little bit annoying what this domain privacy protection does is hide all of that information so that they can't just look up your info and send you an email or call you so some people get really annoyed with the spam calls and the emails but it doesn't bother me that much and I want to save as much money as possible so I'm just gonna uncheck this now if we scroll down it's gonna ask us the package type which should be hatchling or baby if you have more domain names but we're just gonna stay with hatchling it's gonna ask us for your username and security pin and then it's gonna ask us about the billing cycle so if we click on this you should see that it's 76% off for 12 months and 60% off for the 1 3 6 24 and thirty-six months there are two ways to save the most money if you go with the month-to-month then now cost you about ten dollars up front and then ten dollars per month after that but if you go for the entire year because it's 76 percent off then the total cost for the entire year is gonna be about thirty dollars now obviously if you sign up for the entire year thirty dollars is much less expensive than ten dollars per month but if you want to pay the least upfront then go with the month plan and it's ten dollars up front and then ten dollars a month so I think it's a lot smarter to go with the entire year at a time because it costs a little bit more but you get the entire year but it really just depends on your situation and it's up to you if you don't see these big discounts up here make sure to scroll down and make sure this unlock is here so un loc K and validate it then if you scroll back up you should see those discounts all right after that put in your security pin your email address your first name last name your phone number your address I'm gonna say that I live in California cuz that's where I am right now put in your zip code and then it asked you how you want to pay with a credit card or PayPal so I'm just gonna put credit card don't worry this isn't my real credit card number then we're gonna scroll down and it's gonna ask us do we want to add additional services I think you probably know by now what I'm gonna say but let's go through them the first one do we want SSL this is security for your website it actually already comes free with your website so I don't know what this is or why you would choose it so we're gonna make sure that that is not checked then it says site lock essentials this basically just protects your website from hackers but you can do that yourself for free so I'm gonna uncheck that then do you want professional email help from Microsoft you can already get email for free and I would recommend getting it through Google if you were gonna pay for a service then it says do we want to backup our hard work again you can do that for free yourself so I'm just gonna uncheck that then do we want hostgator SEO tools I don't even what they would do and I'm gonna show you how to get your website seen in the search engines so we're gonna unmarked that all right once we do that we can see that the total is 31 dollars if we went month to month the total would be ten dollars but we're paying for an entire year at a time so it's thirty one dollars and we get 24/7 365 Phone live chat and email instant account activation money back guarantee our domain name and the hatchling plan at 12 months once we've confirmed all that you can check off that you have read and agreed to host Gators Terms of Service and click checkout now all right so congratulations you've probably done the hardest part which is getting your domain name and hosting so the next thing that we're gonna do is the fun part we're gonna install WordPress it used to be super hard to install WordPress and now it's really easy all you have to do is go and click on marketplace and we can scroll down until we see 1-click installs and then click one click installs once we do that we're gonna see WordPress and that's what we're installing so we're gonna click on WordPress and then it's gonna ask us to search for our domain name so I have all of these different domain names here but you probably only have one so just choose the domain name that you want to install WordPress on and make sure this directory here is blank because if something is in it then it's gonna install WordPress on your website com forward slash something instead of just your website com we can take a look down here and we can see that their pros will do it for you for 399 or 199 or $99 and I'm gonna show you how to do all of this and more so you're definitely saving a lot of money so once you're ready just click on next then let's put in your blog title we can always change us later but this is usually your business name so I'm gonna put create a website and your user admin that can be your name so I'm just gonna put my name Tyler and your first name and last name Tyler Moore and I'm gonna put my email address Tyler Moore at gmail.com and then I'm gonna agree to the Terms of Service and click install then WordPress is gonna install all the files on the software and everything on to your domain name right now once that's done you would think you'd be able to go your website right now but if you go to your website right now it's actually going to be blank so we can see that there's no real website right here so I'm just gonna exit out of here and your website's blank because it takes anywhere from 2 to 24 hours in order for your website to spread across the entire world sometimes it can take as little as a half an hour so just keep on going back to your website and see if it works but right now we're gonna do something very important we're gonna copy all of this information right here our username and password so that we have it so that we can login to our website so we can just copy it and print it out and put it somewhere just to make sure that we have it you will also get an email right now to your email address saying that you've just installed WordPress and if you forget your password you can always go to your email and say I forgot my password all right so I'm going to take a little break right now I'm actually gonna close this tab here because we don't need it anymore I'm gonna take a little break right now and when I come back I'm gonna check my website and see if it works all right so now we have the website right here so I'm just gonna open up a new tab and type and learn how to create a website comm and it says website coming soon and that's the exact thing that we want to see because we know that WordPress is now installed now all we have to do is log in in order to log in we can go back to this page right here and see our username which is Tyler or your name and our password so I'm just gonna copy my password right now then I'm gonna go back to my website and type in your website comm forward slash WP dash admin that's WP dash a dmin or you can just click on this button right here and press ENTER I wanted to show you the WP admin because then you'll always know how to get to the backend of your website alright so once you're here again you would copy that username which is Tyler it's already in there for me and but you know you can type in too right here and the password which is this crazy password so we copied that and we go here and we paste it in here so we paste it in and press login alright once we do that it's going to ask us is this email address correct and I'm gonna say yes this email is correct and finally we're logged in into what's called the dashboard of our website so we can go to this tab and we can close it as long as we've copied down this password and the first thing that I like to do is actually create a new password so in order to do that we are gonna go to users over here on the left side and we're gonna scroll down and we can see my name right here it'll probably say your name click on edit then we can scroll down all the way to the bottom and press generate password and I'm just gonna put in a new password I'm gonna hide it so the internet doesn't hack me and I'm gonna put in a new password and then press update profile now we have a new password on our website and everything is looking good the next thing that I want to do is delete plugins so that everyone is on the same page but what are plugins plugins help you extend the functionality of WordPress it's like having an app on your phone for example by default WordPress doesn't have a contact form so you install a free contact form plug-in and now you have the ability to have a contact form right on your website even though by default WordPress doesn't have a contact form you can also get SEO plugins by default WordPress as SEO isn't that great but you can install a plug-in that makes it really really good you can also install a security plug-in or a backup plugin basically it's like programs on your computer or an app on your phone pretty easy to understand so then why do we want to delete all of these plugins if we look right here we can see all of this crap basically right here and what is all of this stuff it's just like your computer sometimes you get a computer and it has all this extra software on it called bloatware for example maybe you didn't download Norton AntiVirus but for some reason when you get a new laptop Norton AntiVirus is on the computer whoever made that computer got paid in order to put Norton AntiVirus on it because Norton knows that a certain percent of people will actually buy it if its installed on ten thousand people's computer and the same thing happens with hosts they get paid in order to put all of this stuff right here on it but we don't want to be a part of that we're not mad at them for doing it they need to make money but we just want to start off fresh and clean so how do we get rid of all the stuff that we don't want well it's super simple all we have to do is go to plugins scroll down a little bit click this box which will select all of the plugins and in order to delete the plugins you need to deactivate them first so we're gonna click up here and click deactivate then apply we're gonna wait for all the plugins to deactivate and then we're gonna click this button again to select all of them and go up here and press Delete then apply then press ok and this will delete all the necessary plugins so that everyone is starting off clean and now if we go back to our dashboard we can see that we have a nice fresh clean installation of WordPress today is day 23 of quarantine and it's also my birthday and I've received some new things for my birthday like some nice clothes a basketball some cards this thing some shoes and a mask for security and just like I got new things for my birthday today we're gonna be updating WordPress so that you get all the latest features but also like this mask so that you get the latest security security is very important so hackers don't hack your website and that's why I wanna update WordPress so that we get the latest features and the best security it's super easy let's do it so all you have to do is go over here and click on updates and if we didn't have the latest version of WordPress it'll say update now there'll be a button right here and you just click on update but since we already have the latest version we don't need to do anything we can check again if we want but we are all up-to-date so that's all we have to do for updating WordPress and now we can just check it off so now that we've changed our password and updated WordPress we can take a look at our website so we can rollover right here and click visit site so now we can see this is what our website looks like and obviously this looks really crappy but some web developers would have charged you $99 or a hundred and fifty dollars or $500 just to get here we're gonna obviously make this website look so much better but basically your website is up it looks terrible but it's up and it actually made us a sample page so if we click here on hello world it's gonna show us a hello world page but we can see on this page that it's our website com forward slash index dot PHP fort slash 2019 ford slash twenty nine hello world comment number one and what is all of that junk for example if we go to apple.com will see apple.com ford slash mac or if we go to air B&B its airbnb.com ford slash invite to invite a friend so why on our website do we see all of this stuff and it looks like a jumbled mess and that's because our permalinks aren't set up correctly to set up your permalinks it's super easy all you have to do is hover over your website name up here and click on dashboard and once we're on our dashboard just go down to settings and go to permalinks now we can see that it's set to custom structure but we want it to be set to post name so just click on post name scroll down and click Save Changes once we do that we can again visit our website by hovering over your website name and clicking on visit website and we can go back down to that hello world post and click on it and now we can see our URL is your website com /hello - world which is much better if you have a about page or a contact page it'll just be forward slash about or forward slash contact instead of for slash index dot PHP forward slash about so in my opinion this looks much better and this is what big businesses do they make their website URLs super clean instead of making them look all jumbled and messed up so right now this is what your website looks like it's not that fancy or impressive but we're gonna make it look much better to get to the back end of your website hover over your website name and click on dashboard the next thing that we're going to do is change your websites title and tagline so what is a title and tagline the title is the title of your website usually your business name and the tagline describes your business so let's look at an example if we go back to our website here and click visit site we can see that our title is create a website and our tagline is just another WordPress website so the title is usually the name of your business and the tagline describes what your business does or what you can offer the customer that can be a little bit confusing so let's look at some examples if we go to Neal Patel's website he's one of the best digital marketers out there we can look at his title and tagline if we hover over here and it says Neil Patel helping you succeed through online marketing so the Neil Patel is his title it in helping you succeed through online marketing is his tagline but what does that look like in the search engines so if we google his name we can see what that looks like in the search engine so it says Neil Patel helping you succeed through online marketing there's the title right there and the tagline is right here let's look at a few more examples we have Tyler this is my website so Tyler is my title and learn how to create a website is my tagline with slack the title is slack it's over here on the right side in the tagline is where work happens for zoom the title is at the end again zoom and their tagline is video conferencing web conferencing webinars screen sharing for Airbnb their title is Airbnb again it's at the end and their tagline is vacation rentals homes experiences and places so it basically just describes everything that they do we can go back to our website and we can change our title and tagline and to do that all you have to do is click on customize then go to site identity and there's our title right there create a website and our tagline is just another WordPress site which isn't that great I'm just gonna describe what we do which is learn how to create a website once we do that we can click on publish and exit out of there and now when we hover over our website we can see that the title is create a website which would usually be your business name and the tagline is describing what your business does and we show people how to learn how to create a website so that's it that's how you change your title and tagline all right so we're done changing our title in tagline so we can mark that off the next thing that we're gonna do is install a new theme so what is a theme a theme is the design of your website its how everything is arranged on your website so here we have the default WordPress theme and it doesn't look very great it's very clean and simple but it's not exactly the best thing for your website before themes used to be really specific so if you're making a real estate website you'd have a real estate theme if you're making a personal training website you'll have a personal training theme if you're making a contractor website you'd have a contractor theme but now because the page builder is so flexible and you can place any element anywhere we now have a single theme that can literally be anything and that theme is called Astra and in my opinion it's the best theme that there is to get Astra all you have to do is hover over your website name and go to dashboard then just go to appearance and go to themes once we do that we can click on add new and over here where it says search themes we can type in Astra ast RA and press ENTER then we can view the theme make sure its Astra and not astral and click details in preview and we can see it has 3596 ratings 5 out of 5 stars and it's just really good so go ahead and click on install and then we can click on activate once we do that we can now hover over our website name and click on visit website and we can see that the design is different now I know this doesn't look that much better but it is so much better you're just gonna have to trust me on this that this is one of the best themes out there and it's gonna allow you to make anything so now that we're done installing the Astra the next thing that we're gonna do is install the starter templates plugin but what is the starter templates plugin instead of looking at a website that's blank like we see right here it gives you a really good starting point on your website so it'll put in a logo right here it'll put in a menu right here it'll put in all of this content right here and it'll set up a whole bunch of different pages on your website now of course you can do this yourself you can do it all from scratch and get the same result but it's so much easier to start somewhere rather than starting from a blank page so how do we get the starter templates it's super easy all we have to do is hover over to our dashboard and then we can hover over plugins and click add new then after that we can go to this right side and we can search starter templates sta RT er TEM PLA tes then we can see the starter templates by brainstorm force and all we have to do is click install now once we do that then we can click on activate and once we do that we can go ahead and roll over appearance and then click on starter templates now we have all of these different page builders to choose from element or beaver builder Guttenberg and breezy and you would think that they're all sort of the same but one is clearly so much better than the rest and that is Elementor so we're gonna go ahead and choose element or and now we can see all of these different starter templates that we can use as a starting point and we can see that there are tons and tons of templates some of them cost money but most of them are absolutely free if we go up right here to this drop down and we click on free we can see all of the free templates so this is awesome they give you all these templates absolutely free and you can use them as a really great starting point some of these templates are blogs some of these templates are online stores and some of these templates are regular websites but just because you choose a regular website or you choose a blog or you choose an online store that doesn't mean that that template can't be converted to anything else so you can convert a blog template to an online store or online store template to a regular website or regular website to an online store website or regular website to a blog website so anything that you choose can be converted to anything else pretty easily so for this website we're just gonna choose a regular website and what I mean by a regular website is one without a blog or an online store but just know that you can add a blog or online store or anything else later so this mountain template right here is my favorite I think it's a perfect starting place so all we have to do is go ahead and click on it and we can see all of the different pages it has right here and after we check out this template and make sure that we like it we can import complete site so now it's gonna ask us some questions if we want to delete our previously imported site which we would check off if we had previously imported a site but we want to delete it and start all over and import this web site all of the default check marks are correct so we're just gonna press import and it's gonna import that entire web site so now it's gonna import your entire web site it's gonna take between 2 and 10 minutes so it's importing all of the images all of the text it's installing any plugins you need like the contact form plug-in it's installing the header at the top of your website and the footer at the bottom of your website and it's putting in all of your pages all right so it's done importing your website now all we have to do is click on View site and we can exit out of here and now our website is looking really good let's take a look we have a logo that obviously we're gonna change we have this menu up here we have all this text we have these buttons we have these images that look really cool our service 1 2 & 3 don't worry if you don't have services you just have products that's fine we can always change this to anything we want later which we will we have this paragraph here and this button and this call-to-action down here these images like an image gallery and this footer down here that has more information about our company and this copyright down here also alright so we can scroll up and we can see our about page and this looks really clean and awesome also and we can see our services page with service one two and three which looks great and an FAQ which looks really cool and we can see our contact page and we have this awesome contact form right here where you can fill this out and you press submit and it goes right into your email so you get the message right in your email inbox then you can have all your info over here like email address and phone numbers and business hours and then we have the map down here and of course you could change this to your address or any address that you want or you can delete it if we scroll back up we can go ahead and click on this logo up here I just want to mention again that everything here is customizable you can make this template look like any other template that you want or any other design that you see on the internet it's totally and completely customizable I just think it's much better to start off with a website already built then you can change things rather than starting off blank it just takes so much time and it's really not worth it and it just makes building a website really enjoyable instead of super scary alright so we're all done installing the starter template plug-in and now you have a website that you can almost be proud of the next thing that we're gonna do is change your website theme style the theme style is the overall style of your website so it's like the type of font that you use the colors that you use in what your buttons look like so let's look at an example if we check out the Disney Plus website we're gonna see that this title and this paragraph are the same font and colors as this title in this paragraph and as this title and this paragraph so all of the titles and all the paragraphs throughout the entire website are the same they have the same style you probably don't want your website to have all different fonts and all different sizes and all different colors because it would be really hard to read you know look super disorganized which brings us back to our website how do we change the theme style for our website so we can control how all the fonts buttons and colors look so the way we do that is we go up here and we click edit with Elementor then we go over here to this menu and we click on deem style and we could change the background for our entire website right here but let's first do typography which is just a fancy way of saying our font so how would we change this area right here this is a heading and this is a heading how would we change that so it's changed on all of our website right here is our main heading it's our heading one and here is our secondary heading it's our heading two if we go over here and we scroll down we can see h1 which stands for heading 1 and we can go ahead and click on the typography pencil and we can scroll down and we can change the size of that heading and now that will change across your entire website so anywhere that there's a heading 1 it's going to change on all of the different pages we can also do the same thing with a heading 2 all we have to do is go to h2 and go to typography and we can change the size of that also we can also change the font family it's super easy we just go up here and we can choose between 600 different fonts so they have all of these different fonts I'll show you a crazy one we'll look at rock salt and we can see that that's changed up here and if we scroll down to our website we can see that it's changed here also and here also so it changes throughout all of your website wherever there is an h2 or a heading 2 so again we can go here and we can change that back to lat oh if we want and that looks pretty cool or we can do another crazy one which is permanent marker and we see that it changed in all of the different places that it's supposed to change we can also change the body text which is the same thing as the paragraph text so if we scroll up a little bit we can see body right here and if we click on typography we can again change the font family let's look at another one let's look at roof so one and that's gonna change all of the body text that looks a little Spacey so it's kind of cool and it changed it down here also and it changed it right here too or you can go with the more normal one and click on here and let's with something like Roboto which I think Google uses and we can see this is the Roboto text it looks a lot more normal we can also change the typography of any links so if there's any links like these services right here we can go ahead and go under link and click on the typography here and we can change the font family here let's change it to permanent marker and we can see that those links have changed if we don't like any of our changes we can obviously just exit the page without saving without pressing this Update button right here or what we can do is press ctrl Z on a PC or command Z on a mac to undo all of our changes so let's do that right here just keep on pressing it until we get back to where we started and I want to show you one more change if we scroll down right here we can see this button and we can scroll down to buttons and open this up and we can change the text color let's change it to pink and we can change the Box shadow so let's change that there's a little shadow on it we can make it bigger a different position or more blurry or less blurry that looks pretty wild and we can also change the color of the border so we go here and we can change the border color also to a pink if we want and now that we have that and that looks pretty wild we can also change how we can hover over it and that's easy by clicking on this hover so we can make the background color again a pink again if we want and now when we hover over it it will be pink so we have complete control over all of that but what happens if we scroll up and we look at these buttons right here we can see that not all of the settings were applied to these buttons and that's because the theme style affects the overall website but on any webpage individually you have more control over all the settings and obviously a little bit later we're gonna go over how to change everything on every page specifically all of your content and make it so that we have even more control over all the settings like these buttons right here that weren't affected and all the content on each page so if you wanted to save all of those changes all you have to do is click on update I don't want to save those changes so I'm just gonna exit out of here and I'm gonna press discard then I can go back to my website my main website and press leave and none of those changes would have applied but obviously you can apply those changes and your entire website will take on the theme styles and changes that you have chosen so now we're gonna keep on molding and shaping our website exactly how we want it the next thing that I'm going to show you how to do is how to add and delete pages so we can see all of our pages here our home about services and contact but maybe we don't need this services page so how do we delete that or maybe you want to add an FAQ or a pricing page so how do we add that we can see on Tony Robbins website he doesn't have home about services in contact everything is tailored to what he's doing like doing coaching or having a store and in the same way we can make our website like that we can tailor it to exactly how we need it to be for our business so right now I'm not only going to show you how to delete the pages that you don't want but the absolute best way on how to add pages that you do want the new way is a much better way to add pages and really have a professional design as the starting point then you can customize it however you want so first up let me show you how to delete the pages that you don't want to do that all you have to do is hover over your website name and go to dashboard and once we're in the dashboard we can go ahead and click on pages and if we scroll down we can see all of our different pages so we have our home about contact services but we also have this extra sample page and if we click view page we can see that it's just a sample page and it doesn't look that great and it doesn't add anything to our website so if we go back we can actually delete this page so if we go right here we can hover over the sample page and click trash that'll put it in the trash and we can go ahead and click on trash we can scroll down and we can press delete permanently and this will delete it completely from your website so now that you've learned how to delete pages and of course you can delete any of your pages like your about your services or your contact if you wanted now let's learn how to add pages and it's super easy so we're just gonna go up here and press add new once that happens it's gonna ask you for a title and this is the title of your page so this is gonna be like why us or about or services or pricing whatever your page is called we're just gonna add it right here so I'm just gonna type why us once we do that there is one more step to do and that's because our header on the top where our navigation menu is is transparent we need to tell this page that we have a transparent header so that the content of our page will go behind the header and this will make more sense when I show you so to do that we need to scroll down here and we can scroll down to transparent header and we need to enable it once that's done we're gonna edit with element or up here and click on that and now we have a blank page that we can add things to but we don't just want to start off blank that's just mainly a waste of time they've made so many different designs that we can choose from that we can mix and match and make trillions of different possible combinations as a starting point and that's really what I recommend to do it's much better so to do that all we're gonna do is press on this a right here this little symbol and now it's gonna give us all of the websites to choose from and we can add any of those individual pages to our page so we can go over here and press free so we can see all the free ones and let's just click on this first one so we can click on it and maybe we like this about page for our Y Us page so we can just click on that and we can check it out then we can import this template now that probably saved you hours and hours of time which is really awesome and one of the really cool things about this is that it also took on the style of our website so if we look at this who we are right here that text has the same style as our website it took on the same exact font and so did all the sections down here took on the same font in the same size so all of your website now looks consistent and that's why we change the style first because then all of the pages on your website will now look consistent throughout and have the same fonts so we can easily change this by just clicking on it and typing in why us you can also mix and match different sections by scrolling down and clicking on this a again and maybe we want to change this page to a pricing page so let's scroll down and look for something that would have a pricing page maybe this car right here and we can see a wash menu right here so we can click on it and all we want from this is this pricing box right here so we don't have to make it I'll save us hours of time and we can import the template so now that that's imported we can scroll down and we can see that it took on the style of the button that we may be for which is really cool because now our website is super consistent with the style but it also added this up here which we don't want but we can easily hover over it and exit out of it and again we can go down here hover over exit out and now we just have this pricing box maybe we want to move this pricing box up under here so that's super easy all we have to do is click hold and drag right here and we see that blue and we let it go and now we have our pricing box right here so this is what our website looks like maybe we would change us to pricing and we can have that if we didn't want any of those changes again command Z on a Mac or ctrl Z on a PC we'll just undo that and I'll keep on undoing it and we can also exit out of here for these if we don't want this change that back to why us and again our why us is back to normal if we want to save all those changes all we have to do is press publish and if we want to preview those changes all we have to do is click on this eye right here and we can see we have a why us page and it looks pretty awesome we can see that the URL looks a little bit funky because it has all this question mark preview but we can just get rid of that and we can see that the ys page is our website comm /y - us which looks great and we've now created a new page on our website you might notice a problem now though the why Us page isn't up here so we don't have any access to it so if a visitor comes to our website there is no way of accessing it and I'm gonna show you how to do that in the next section this section wasn't intended to show you how to actually change everything on the individual pages it was just there to show you how to get a general design and again continue molding and shaping your website we're gonna get more and more specific and eventually I'm going to show you how to do all the little details and change everything on the individual page but next up is how to get this Y us page into the navigation so let's do that so we're gonna add the page that we made right here into our navigation and we're also gonna learn about the different styles of navigation but first let's look at the navigation of some of the best companies in the world to see what they have in common if we see slack right here we can see the logo up top to the left and the navigation up here to the right if we look at Apple logo up top to the left navigation up here to the right Microsoft logo up here to the left navigation on the right and Disney logo up here on the top left and navigation on the right but why why are all the logos on the left side and the navigation on the right side why don't we have some logos in the middle in the navigation below or some logos on the right and the navigation on the left well the first reason is that it's just convention when everyone starts to do it in a particular way people get used to it and then it makes using a website really easy the second reason is because it saves a lot of space if we have the Disney logo up here on the top as in the navigation below it it would push all of this content down and people aren't on the Disney website to look at the Disney logo they're on the Disney website to look and find the content that they're four so in this way it's a space-saving as possible to have the logo and a navigation on the same line alright so now that we can see that our website is the same with the logo up here in the top and the navigation to the right of it let's learn how to put this Y us page up here in the navigation and let's learn how to change some settings to do that is super easy all we have to do is click on customize up here and we can scroll down until we see menus click on that then go to navigation then we can see our home about services and contact and that reflects this home about services and contact to add this y Us page is super easy all we have to do is click on add items then you'll see this y us under pages and just click the plus button to change it to all capital like the other links up here we can just click on it and we could rename it to capital y capital US and now we can see on the right side we have the home about services contact and why US but what happens if we want the y us after the about instead of the last item it's super easy to do that - we can just minimize this click hold and drag and drag it right under about and that will rearrange it right here we can also make the Y us a submenu by clicking and holding it and dragging it to the right to indent it a little bit and now when we hover over about there's a y Us page here but it looks really funny and it's all white because we haven't changed the link color and I'll show you how to do that next all right but I don't actually want this y Us page so I'm just gonna delete it so I'll go here and scroll down and press remove and now let's learn how to change the colors of the actual links so that we can change the links and also change the submenu link color to do that we can go back and back again I then go to header and transparent header because we have a transparent header up here click on that and we can scroll down to colors and background and if we click on it we can make the background a different color by clicking on them and we can see that that's now a color we can clear it again to make that color transparent and we can change the site title the menu and the submenu color this is what we would need to change in order for that submenu not to be blank and for you to be able to see the text so you click on this and you change the link text color to black instead of white so it wasn't see-through so that's how you change the color of the menu the next thing that we're gonna do is change the style of the menu so just go back and we can click on primary header and this is how you change the style of it so we can't have that logo in the center again I don't recommend it or we can have that logo to the right and again I don't recommend that unless of course it is standard in your country to have the logo on the right side and the menu on the left side then you can do it but for me and most people I think the logo should be on the left side and the menu on the right side but that's how to change it anyways there's just one more thing to change now and that is the button at the top right here and in order to do that all we have to do is click on back and click primary menu and we can see that the last menu item is a button but we can change that to search so now people can search our website or we can change that to none so that there's nothing up there or we could change it back to button now maybe I want this call-to-action button up here to be the contact for our website so how would we do that well the link for our contact page is our website comm forward slash contact so we would need to put the link in right here so we just put forward slash contact and for the button text maybe we would type in contact then we can scroll down and we can customize the button style and we can change the color of it so maybe we want to change the color a little bit and then we can press publish and we can exit out of here and we can see now we have changed that contact button color and that looks pretty good except for now there are two contacts that we home about services contact and contact and you should know already how to get rid of this contact but just in case you don't we can go to customize then go to menus then click the navigation and just go to contact and we can remove this right here then after we do that we can click on publish and exit out of there and now we have our home about services and contact button right here if we click on contact it will go to our contact page so sometimes having that button up there is a much cooler way to have your main call to action and it really just will encourage people to contact you or go to your store page or do whatever you want them to do so now we can go back to the home page by clicking on this logo up here and that's how you change your navigation the next thing that we're gonna do is we're gonna work on this logo so I'm going to show you how to create a logo and insert the logo into your website so we can take a look at Microsoft's logo and we see that they have their logo right here and then the text microsoft here if we look at air B&B x' we can see that the logo is right here and the text is to the right slack logo up here text to the right apple just has their logo and no text and Nike also just has their logo in no text and PayPal has their logo up here and text to the right the most amount of colors in these logos is for and overall the logos are super simple and that's how I recommend that you make your own logo make it super simple and not too many colors and also just have an icon or the icon on the left side and your text on the right side or can say just your business name and have no icon at all so now I'm going to show you how to insert your logo or insert and create your logo if you don't already have a logo so all we have to do is click on customize then go to header and click site identity now we can see our logo right here and it's hard to see because it's white and our logo is transparent to change the logo all we have to do is click on change logo and then we can upload our logo right here if we don't have a logo yet I'm gonna show you how to make one really quick all we have to do is open up a new tab and go to photo P comm that's pH OTO PE a dot C om this is a free online Photoshop clone but if you already have Photoshop obviously use Photoshop but for people who don't have Photoshop or just want to make something really quickly you can use photo P com all right so we're just gonna click on file and go to new and we could rename it we could rename it to logo and for the background we want to choose transparent and then press create we're choosing a transparent background because if we go back and look at our website we can see that this logo is transparent in the background so basically it's white right here and the text is white but we can see through the logo so that's why we're choosing transparent here and this is what transparent looks like they give you this checkered background right here alright so let's make some new text all we have to do is click on this tee right here and then click on the canvas and we can start typing I'm just gonna capitalize everything and type in mountain all right but that looks a little bit too small so I'm gonna highlight all the text and go up here and change the size another and maybe easier way to change the size is just to click on this pointer icon up here adjust the size on these adjustments on the corners so we just click and hold but as you can see this gets distorted so it doesn't keep the same ratio in order to keep the same ratio all we have to do is click shift and it will scale proportionately so once we do that we can get it to a size that we want like right there and click on the pointer again and we can move it around so now that we have the mountain that looks pretty good but we want to change the color to white because that would look best on our website so again we can click on the T for text and highlight everything and then up here we can go to the color and we can change that to white and press ok so it's a little hard to see but it has our mountain text right there the next thing that I want to do is get a mountain icon to do that let's open up a new tab and let's search on icon finder calm I see o n fi nd er c om so now that we're here all we have to do is search for mountain or something else and we can make it free so click on the free and I want to search for mountain tin because maybe we're not doing two of them and we have all of these free icons that we can use in our website so I'm just gonna click on the first one and I'm gonna download the icon in SVG so we click and it downloads then I'm gonna open up photo P and I'm gonna drag that icon to the canvas and it'll show up right here and all we have to do is click and hold and resize but again it'll get distorted so we can hold shift and it will resize proportionately and then use this to move it to the correct area and again hold shift while you're resizing and maybe we'll do it right there alright and that looks pretty good except for our icon is black and maybe we want our icon to be white so all we have to do is go over here and double click our icon to go into it and double click on to that layer then change the color right here and we'll change that to white and press ok so now we can see that that icon is white we can go to a file and and we can save the smart object or press ctrl s on a PC or command S on a Mac and that will save it then when we go back to our logo we can see that that icon has updated to the white color the next thing that we have to do for this is crop it because it's too big right here and it'll make our icon look really small if we don't crop it so to crop it it's super easy all we have to do is click on this crop button here and then just crop it where we want to crop it just click hold and drag and once we do that we can adjust it and make it a little bit tighter I like to keep a little bit of empty space on the sides but not too much and that looks pretty good and we can press ENTER and I'll crop it perfectly there's one last thing to do before we can save our logo and that's to change the font of the text so we can click on this T for text highlight it and we can search for a font now there are hundreds and hundreds of fonts but let's just go with Montserrat and we can click on it and that will change the font and we could just keep it as regular but we can make it bold or semi bold or anything like that and we can see that our crop is not good anymore so we want to recrawl it so let's click this and recrop it and let's make it a little bit bigger press Enter and click crop again and we'll just adjust it until it's perfect all right so that looks pretty good now let's save this to save it we want to save it as a PNG because a PNG has a transparent background if you saved it as the file JPEG or gif it may not have a transparent background so we go to file and we can save or export as a PNG not jpg not PDF but PNG and that will make sure it has a transparent background all right so we'll just save it we can see the Downloads we can now exit out of this and we can go to our website we can change our logo so we're gonna click Change logo we're gonna click hold and drag that to our website and we're gonna select it then it's gonna ask us do we want to crop it or not no we don't want to crop it because we already cropped it and then it's gonna ask us do we want to use a different logo for Retina devices what this does is it has a higher resolution logo you can upload if you want on retina devices on devices with really high screen resolution I don't think we need to do this because our logo is already a pretty high resolution so we can uncheck that and we can see that our Mountain logo is right there and it looks pretty cool we can make it a little bit bigger if we want by adjusting this and to me that looks pretty awesome for the amount of time we put into it the next thing that we're gonna do is make your fav icon your fav icon is that little icon up in the tab of your website we can see photo keys right here this little icon Apple right here airbnb x' right here Microsoft's right here slack and PayPal what this does is that it helps your users find your website easily when they have multiple tabs open so if we imagine that we have 10 more tabs opened all right here you wouldn't be able to see Apple written out or vacation rentals written out or Microsoft written out you would only be able to see this icon and that will help the user switch between and know what they're clicking this is called a site icon or a fav icon and it's super easy to make it has to be an exact dimension it has to be 512 by 512 so let's see how to do that so we can go back to photo P so we can see our icon right here and that's all we want we just want this icon because it puts in this text automatically so let's again click into our icon by double clicking and we have this icon right here it's not gonna show up blue this is just the outline to show that it's selected but we need this to be cropped exactly 512 by 512 and we actually need it not to be white because if it's white it won't show up because this is white also so we won't be able to see it so let's change the color to gray by double clicking on this and clicking on it and then making it a dark gray press ok and now we need to crop it exactly 512 by 512 so we'll go to image and we'll go to canvas size and we can see that it's 800 by 800 so I'm just gonna type in 512 by 512 and press ok once we do that we're gonna see that it's cut off so again just click on this right here and click hold and drag and hold shift so it drags proportionately and just adjust it until it's perfect so that looks pretty good let's press ENTER and let's go to file and we're gonna export as again a PNG then press save and now we have that PNG we can go back to our website and we can select the icon for our website and we can just either select files or click hold and drag right here and we have that in there and we press select and it will give us a message that needs to be 512 by 512 which it is and we can see it right here and we can also see our icon right here and that looks super cool once we're done with that we can click on publish exit out of there and now we have a logo in our site icon which looks awesome and that's how you create your logo and site icon or fav icon so now the fun part editing your actual website so you can go to any page like your about page and click Edit with Elementor and we can edit anything on this website then we can go back and click on services and edit anything on this webpage also by again clicking on edit with Elementor and editing anything here then we could go back again and so on so you get the point you can edit any page by simply clicking on it and then clicking on edit with Elementor so today I'm going to show you how to edit the homepage but obviously like we just did you can apply this to any page that you want you can apply to the about page a services page a contact page or a new page that you make I'm just gonna show you how to edit the home page so that we're not jumping around from page to page to page while you're learning new things so again all we have to do is click Edit with Elementor and first i want to show you in general how everything works so we're first going to do a general overview and then I'm going to show you specifically how to change things so the basic principle is whatever you click on the right side you can edit on the left side so we can click on this and edit it here we can click on this text up here and edit it here we can click on this paragraph and edit it over here we can click on these buttons and edit here we can even click on this entire section if we click on this or you can right-click it and we can edit it over here so again we can scroll down and if we click on this we can see it not only on the left side but it actually tells you up here what you're editing so you're editing the heading same thing like this it says you're editing the text editor you click on this and it says you're editing the button and again we can click on the entire section right here and it says we're editing the section or if we scroll up we can click on this column and we're editing this column so there are basically three main things that you can edit widgets or elements which is just like your text your headings your paragraphs your buttons you can also edit entire sections and you can edit columns you can also click hold and drag columns and sections around to rearrange them and you can do that with entire sections also so click hold and drag and drag it up here you can always press control Z on a PC or command Z on a mac to undo and of course if you don't like an entire section you can always exit out and again you can undo ctrl Z or command Z if you mess up if we scroll up then click on any of the elements on the page on the left side we're gonna have three different options content style and advanced the content is like the text that you want to write the style is like the design the color and the font size in advanced is Advanced Options like spacing or cool motion effects so again we can click on any of these different elements and we have the content style and Advanced Options and that gives us all the options that we need in order to control all the settings to make it look exactly how we want it to look but you probably don't only want to edit sections you probably want to add new sections and elements to it also to do that we want to scroll down all the way to the bottom and click on this plus button once you do that you're gonna get these different options do you want one column two columns three four five six if we scroll up we can see that this is just one column there's just one column here we scroll down a little bit we can see that this is three one two three scroll down more we can see that this is two one on the left side one on the right side this is one again and this is three one two three and if we go to the Apple website we can see that this is one column here this is three columns one two three this is two columns one and two this is one column right here and you get the point so again we're just going to click on this and we're gonna add in one column so we added our column but nothing is actually in it so in order to add different elements inside this section all we have to do is click on this button right here and we can add all of these different elements right here and that will allow us to make practically any website that we want to add it all we have to do is click hold and drag and drag it in to this section and if we want something else we can click on this button and we can keep on adding things we can add a text editor a video buttons a divider a spacer Google Maps icons a gallery a counter social media icons a progress bar you can add testimonials tabs icon lists accordion boxes and so much more and once we've added all of these things we can click on them and we can edit the content style and advanced to look like anything that we want so we can make it look like anything up here or practically anything from any website ever so now that we understand the general philosophy of how everything works let's actually practice and see what we can do so whatever type of website you're making you can probably find another website that has inspiration or ideas that you can grab from so if you're a carpenter or personal trainer or you want to be a web developer there's web sites out there that you can take ideas from so let's start with something easy if we see this Apple website we can see this headline right here and we can see this sub headline up here so now all we have to do is scroll down click on this plus button to make a new section and click on one column right here so we can see on the Apple website that this is a heading right here and all we have to do is go back to our website click on this right here the elements button and then we can click hold and drag this heading to this right side the heading right now defaults to an h2 which is a heading 2 but we can make it default to h1 which is the main heading and usually the h1 is much bigger than h2 is a little bit smaller or three smaller four five and six is the smallest and then of course we can type up here maybe we can type you are going to do something amazing and we can see by default that it capitalizes each of the first letters of every word and that is there by default and if we wanted to change that we can change that again in the theme style section or what we can do if we want to control this individually is we can go to style then go to typography and under transform we can go to normal so that will just capitalize everything how you typed it alright so if we look back at Apple's website we can see that this is centered and this is even more bold so let's try to do that to bold it we need to go over to weight and we can click on 600 and that will bold it even more if we clicked on 900 that would bold it the most but some fonts can only be bold a certain amount but other fonts you get all the way down to 100 which is very thin to 900 which is very bold this is what 100 would look like on that font but we're just gonna keep it at 600 which is pretty bold alright then what we can do is go back to content and we can go under alignment and we can Center it and we can go back to the Apple website and we can see the text is a little bit smaller so let's make it a little bit smaller all we have to do is click on style and go to typography and we can change the size a little bit to maybe something like that if we see the Apple website once again we can see that there's space on the left side and space on the right side it doesn't just go all the way across and that's really good for your eyes so your eyes aren't going all the way from left to all the way to the right that makes your eyes super tired you want the content to sort of be in the middle a little bit more so to do that we go back to the website and we actually click on the entire section up here and then under layout up here it says content with is boxed and we can just make that into like a 700 maybe or maybe make it 600 and that looks pretty good and we can go back to the Apple website and we can see that there's more space at the top and more space at the bottom so we can easily do that also by editing this section then going over to height and make it a minimum height so now we can control the spacing so let's make it just like that not too big maybe we can put in 300 so basically there'll be a hundred and fifty pixels at the top and 150 pixels at the bottom what we can do now is go back to Apple's website and we can see it there's this sub headline up here that says support and service so we can easily do that by going back to our website and clicking on this elements and just dragging in another heading on top of it and then we could put something like for real then we can Center it and if we look at Apple's website we can see that the support and service is not as big of a gap as ours so if we look at ours we see it's a bigger gap and the really cool thing about all this is that we can actually control the spacing of each individual element so we can click on this edit right here then go to advanced we can unlink the value of margin because if we keep it linked all the values are gonna be the same and for the bottom right here we can add in a negative value so if we put in ten or a hundred we can see that I'll add a hundred pixels of space to the bottom but we can actually reverse that and we can put in negative ten or more so I'm using my arrow keys right here just to make it a negative 20 or 15 right here and now we can see that there's not as much space between the for real and you are gonna do something amazing just like the Apple website it's very close all right so let's go back to our website and that is looking pretty good so if we see Apple's website we can see that we have this big image right here so how do we do that all we have to do is go back to our website then let's scroll all the way down and add another section that section is just one column so we'll just click on that and then with this section selected we're gonna make a minimum height because if we didn't then we wouldn't see anything it would just be really narrow so we just go over to height and we do minimum height and let's do 500 pixels all right now we're gonna add our image so we just go to style and for background type we're gonna click on classic and then we're gonna click this plus button to add an image now we have three different options we can upload a file we can choose from the media library or we can search images from pixabay this searching images from pixabay is brand new it's super cool these are 100% copyright free images that you can add to your website and it has a database of millions of images so super cool just click on that and we have all of these different images to choose from but of course you can also search for images alright so I'm just gonna search for nature man and we have all these different choices right here and I'll just select this one and click Save and insert and now it's downloading and now the image is inserted but as you can see it's all cut off and it's looking weird in order to change that we want to go to size and we want to choose cover that will make it so that the maximum amount of image is shown without repeating and without cutting off we can also position it so it's a different position maybe we want to position it so it's in the bottom center or we can position it so that it is in the center center basically that's the position or that's the focus of where the image is all right so that's looking pretty good we can see this and this and if we go back to the Apple website we can see this paragraph underneath it so how will we make this it's super easy all we have to do is go back to our website and again that is just one column so we click on this plus button we add a column then let's add in paragraph text so we click on this elements and we drag in the text editor let's go ahead and copy this paragraph text twice so I'm just going to press command C on a Mac or ctrl C on a PC and command V and do it again all right so now that we have some text in there I want to make the text darker so we go to style and we go to text color and I'm just gonna make that text a little bit darker I'm also going to change the font size so I'm gonna go to typography and click on this and change the font size maybe I'll make it 24 then I'm gonna change the font weight which is how bold it is so I'm gonna make it a little bit bolder at 500 we can also change the line height which is the spacing of the lines so we can do that and I'm gonna change it to maybe I don't know one point six so that there's a little bit more of a gap right here if we look at the Apple website it's looking pretty close but as you can see there's space on this side space on this side and space up here and here so again we can go back to our website and we can click on the whole section and under content width we can change that maybe to 700 and we can also make it a minimum height so it would add space up here or here but I also want to show you that you can add space to the text itself too so we can click on this and we can go to advanced and we can unlink the values for margin if we keep them linked they'll all be the same so unlink them then we could put 100 pixels of space at the top and 100 pixels of space at the bottom we can go back to our content and we can click on this button right here which will give us more options and we can Center everything so now if we go back to the Apple website we can see we have a space on top bottom left right it's centered and we have our paragraph text right here and it's dark and we can see on our website we have the same so that's looking pretty cool if we go back to the Apple website we can see this picture right here it's just a duplicate of this so how do we do that without doing all of the work again and that's again super simple we go back to our website and we go up here and you can right-click and you can press duplicate once we do that we can scroll down click hold and drag until the blue line shows up and then let it go and now we have another image but we don't just want this image we want to change this image so let's select this section go to style click on the image go back to free images from pixabay maybe search nature girl find the image click it and press save and insert now all of those settings from up here will be applied down here then we can update our website so we save all those changes and we can view our website and now when we scroll down we can see our new section and the image the paragraph and the other image it's looking super awesome alright but let's exit out of there and let's go back to our website and let's edit even more things so let's say that we really like this section right here it has the text over the image and a button that goes to another page where you can watch a video how do we make something like this so what we can do is we can go back to our website right here and we can just duplicate this section right here so we can just right click and press duplicate but it looks super weird if you have a picture than another picture so let's break it up with a text box so let's go up here and duplicate this section and just click hold and drag and drag it to the middle and now that separates it nicely so again we can swap out the image by using pixabay we can either go here to style and go here and select the image and choose another image or from pixabay or what we can do is go to the pixabay website like we can go to pixabay.com right here P IX a BA y dot c om and just download it directly from the website there is another website that I like it's called pixels comm so PE x e LS dot c om and press enter and this has a whole bunch more images that are a hundred percent copyright free so you can use them on your website without getting into any legal troubles so if we see on this Apple website she kind of looks like she's concentrating so maybe I'll just type in concentration go ahead and press ENTER and let's look for something that might work all right so I found an image that I like and now it's gonna say that we can download it for free and which size we don't want to download the original size because it's way too big for a website and I'll actually make our website slow so the perfect size is the large size and then we can do free download all right now that that's downloaded we can go back to our website and we can swap out this image right here by just clicking on this going to style and then we can go to the image and click on it and we can click hold and drag this image here and it will upload once it uploads we can press insert media and then we can exit out of this then just like the Apple website we can add some text over this by clicking on the elements right here that's dragging a heading let's make it centered let's put in djenne is going places all right after we do that we need to make it white and bolder so we can go to style we can choose our text color and make it white then we can go to typography and we can change the weight to something bolder or maybe something like 600 we can also position the image differently so it's not over her face by clicking on this and then positioning it to the bottom Center but as you can see the text is a little bit hard to read so we can actually add a background overlay that will make this image a little bit darker so that text will pop out a little bit more so let's do that to do that all we have to do is scroll down under background overlay and we can click on it then we can choose a color and let's make it dark and we can adjust the slider so it's either darker or lighter right here alright that's looking pretty good so we have that let's go back to the Apple website and see what else we need all right so we can see that they have this button in order to watch the film so let's go ahead and add that I'm gonna exit out of here first and we can go back to our website and let's add an element and let's click hold and drag in a button and we could go ahead and center the button by clicking on this button right here and I'll Center we can't really see it so we need to change what the button looks like to change it let's go to style and for text color let's make it white for border type we could either make it solid line or a double line or a dotted line and that's this line right here in order for it to go away let's just do solid and let's make the width zero so now that goes away and now let's change the content of the button let's click here and for the text let's put watch the video and for the link is where the button goes to when you click on it so for the link let's have it go to the contact page so we can just start typing in contact and then we can choose our contact page and now it'll go to the contact page we can also get an icon just like they have on this Apple website this little play icon right here so we can go back to our website and we can add an icon and we can just look for a play icon that one looks pretty similar to it and we can insert it now it does give us a choice of do we want to put the icon before or after let's put it after and then we can go to style again and we can make that whole button text bigger by clicking on typography and just making it a little bit bigger like that maybe 14 and that looks pretty good alright it doesn't really make sense going to the contact page but obviously you could just copy in a YouTube URL and paste it in there and then I'll go to the YouTube page but let's say instead of all of this you actually want to play the YouTube video inside of the page and not just a link to the YouTube page you can easily do that too so what I'm gonna do is just delete both of these right here I'm just gonna click on this right click and press Delete and right click on this and delete and now I'm just gonna go to youtube.com and I'm gonna search for my favorite video called mountain all right and once I found the video I like all I have to do is click on it alright so we have the YouTube video right here and all we have to do is copy this URL so just right click press copy and go back to our website and now we need a video element so all we have to do is click on this and then go to video click hold and drag it in and now we can paste that youtube link right here so just highlight it all and go to paste that video will show up but it's a little bit too wide it takes over the entire screen and I don't really like that so I'm just gonna click on the entire section and I'm gonna go to layout and I'm gonna make the content with 800 so 800 I'll just type that in right here 800 and maybe I'll make the height a little bit more maybe I'll make that 600 to give it a little bit more space the minimum height and now we have this really cool video in our website but it doesn't really with our background so let's change our background really quickly to do that again we can open up a new tab and go to pixabay.com P IX a ba Y dot c om and we can just search for something like night sky press ENTER and we can scroll in search for something that we really like maybe we like this one right here and just click on free download let's again download it not the largest size but the next size down 1920 by 10 79 and pressed download confirm that you're not a robot unless you are of course it impressed download alright now that that's downloaded let's go back to our website let's click on this entire section let's go to style and let's click on that image and let's upload this new image alright and now we'll upload then we can insert media it is gonna be a little bit darker because of that background overlay so all we have to do is go here and scroll down to background overlay and we can actually just remove that background overlay by pressing clear alright now we have a really good video in there and it has a really cool background and it goes with it and it looks super awesome of course if you ever mess up you can press ctrl or command Z or we can go to the revisions right here the history and we can just move back in time so we can just keep on moving back in time and it saves everything that we did and we can go forward and back and maybe we just like this maybe it's pretty good so we got rid of all of that and again we can exit out of here and maybe what we want to do instead of playing the video actually in there we do want them to click on the link but we want the video to be playing without any sound in the background it's a super cool effect so let's see how to do it we can go to YouTube and let's type in Greenland 4k let's search for that and let's click on this one right here and we can see this really cool video right here let's try to add this to our background so what we can do is we could just copy this up here press copy you go back to our home page we can click on this entire section and then under background let's click on that and instead of it being a classic background it's a video background so we can click on that and then we can paste it in here so we paste in this video and now it's gonna show us that video what we can also do is make it start and stop at a certain number of seconds so maybe we want to start at a hundred and twelve seconds and we wanted to end it a hundred and thirty four seconds so the best part of the video were showing so again that background overlay is there so we want to get rid of it so let's scroll down and go to background overlay and let's make it like that and maybe this video is called the great glacier all right and so that is looking super good maybe we want this at the top of our website so we can click hold and drag and drag it all the way to the top and let's click on this and let's make the section actually a little bit bigger by going to layout and making the minimum height maybe I don't know 650 something like that and pressing update then we can view and preview our changes by clicking on preview and now we can see our film with the navigation in the background we probably could make it a little bit darker but to me this is looking super awesome and then we can watch the video we can scroll and look at our website we probably should have put text here but that is looking super cool and I think that's just beautiful so sometimes you need a huge block of text on your website I usually don't recommend just having a wall of text because let's be honest no one really reads it but sometimes you do need it for like the Terms of Service or just to really explain your project well so we can see on Apple's website they have it here they have just this huge block of text here so how do we make something like that let's go back to our website and let's add in a new section so we can do that by pressing this plus up here hey then we can click on plus again and then we can add this new section it's just one column so we'll just click it there alright I do recommend breaking up your big wall of text as much as you can with bullet points with headings with just different paragraphs so that's what we're gonna do first we're just gonna add in a heading so we're gonna go up here and click on this elements and just drag in a heading then we're gonna go ahead and click on the elements again and add in a text editor paragraph we can just copy and paste this so it's a little bit more text we can go back to the heading and change the style a little bit let's go to style let's go to typography and let's transform it to normal alright let's change the text up here to something like you're gonna do great things you're going to do things and if we go back to the Apple website we can see that their text doesn't go all the way across because that again is really hard to read it's centered in the middle so let's do that let's go back to our website and let's click on the entire section and let's go to content with and let's just put in 700 right here and now we can see on the Apple website again they have a little bit more text but it's basically this and then this again and then this again so it's just that section duplicated a bunch of time so we can go here and we can just duplicate this section and duplicate it again and now we have a whole bunch of different sections that we can add different text to we probably want to add some spacing to the top right here so that's super easy just click on this section go to advanced unlink the values so they're not all the same and let's add maybe 50 or even a hundred to the top and then we can go here and then go to advanced then unclick it so it isn't all the same and then go to bottom and add 100 pixels of space to the bottom that will give it a little bit more breathing room and now that pretty much looks something like this of course you can edit all the settings in the style to make it look exactly how you want it so that's how you make a wall of text not that interesting but sometimes very necessary the next thing that we're going to do is add two columns one on the left side and one on the right side if we look at the Disney website here we can see a picture is on the left and text is on the right then a picture is on the right and the text is on the left and if we scroll down to keep on doing that left right right left and that's super common so how do we make something like this well it's super easy if we see the Disney website we can see that this is just an image and this is a headline and this is some text so let's add that and let's add two columns so we go to our website let's scroll all the way down for this one click on this to add a new section and instead of adding one column we're gonna add two columns just click on that and then click on the elements button and we're gonna be adding a text to this go back up here and let's add in a paragraph click on the elements button again and add in an image on the right side click on the entire section and then under vertical align we're gonna do middle because everything is aligning in the middle right here not at the top and not at the bottom just like on Disney's website its aligned in the middle Disney's website also has a lot of spacing and a little bit spacing under here so let's make it a minimum height so to do that we just go minimum height and we're gonna make the minimum height actually 500 so it has a little bit more spacing on the top and on the bottom if we go back to Disney's website we're gonna see it there's a little bit more space between these columns in order to do that all we have to do is go under here where it says column gap and make it wide and now we can start adding texts maybe we'll call this the great desert and now let's find a desert image we can click on this we can go to choose image then let's get our free image from pixabay and let's type in desert alright we see this image right here we can click on it we can press save and insert and it will insert it right there let's make the edges of our image a little bit more round so it gives it a softer appearance and it looks cooler so to do that let's go to style and under border-radius let's put in 30 we're gonna keep the values linked so that they're all the same and that looks really cool alright but if we see on Disney's website we can see that it goes on the left side of the image then there's a right image and then there is a left image up here so how do we do that super easy all we have to do is go to this section and duplicate it it then click hold and drag this column to the left side and we can do that again click here duplicate and click hold and drag it to the right side now let's add in some other images let's call this one amazing ocean and click on it click here free images from pixabay let's type in ocean let's find a really cool ocean picture alright and I like this picture of this whale right here so just click on it and save and insert maybe for the last one we'll put fall and love and we can click on the image and let's search for something on pixabay let's search for fall and we see this image right here so we can just click on it and save and insert alright so I got a little bit carried away but that is looking super awesome we have the image on the right then on the and on the right and that's a great way to break up your content if you have services or different products or your business has different features or benefits it's super good so now that you can make practically any design from any website that you've seen I want to tell you that you don't actually need to it's super important to know how to do it so that you can modify anything but most of these solutions have already been made for you so you already know that you can scroll down and click on this a right here and we can see all of the pages or any of the free pages and we can click on any of these and import any of the pages on them and then just delete what we don't need but let's say you wanted to start with something a little bit cleaner you didn't want it to be designed so much so that you can add in your own design you can easily do that by clicking on blocks so let's say you needed something for your services page you can go here and you can click on services and I'll show you a whole bunch of different ways that you can display your services you can show them in a column of four with one two three four you can show them with the left and right image like we did before you can show them with two columns stacking up on top of each other or with three columns design like this so you can go ahead and click on whatever you want and we can just import the block so just click on this that will import it and it'll take on all of your settings all of your theme styles so everything will be consistent with your website and then you can just start editing it right here just like you would normally if you don't like something that you did of course you could press ctrl Z on a PC or command Z on a Mac and just undo all of that or of course we can just exit out of here to delete that section all right so let's recap you've learned so much so you've learned whatever we press on the right side up here you can edit on the left side over here we've also learned how to change the text how to change images how to add sections how to duplicate sections you learn how to add buttons and how to change buttons we learn how to undo and redo we've learned how to publish we learned about spacing we learn how to delete things we learned what columns are and how to control them we've learned about adding videos and importing blocks we've learned how to change the background and really customize it so you can make anything that you want with these tools you can make practically anything it takes a little bit of practice but with a little bit of time you're gonna become an expert and now we can update that right here and we can view our page by just going up here and taking off all of this pressing enter and now we can see that our website is looking really great and of course you can go to the about page and we can edit with Elementor and make all those changes just like we did on the home page or we can go to the services page and again edit with Elementor and make all those changes just like on a home page however if we click on the contact page it's a little bit different we can go ahead and press edit with Elementor and we can see that we can edit everything like normal like this contact this section this get in touch the sent a message all of these different numbers and emails I could put in my email right here by just clicking on it and clicking on this then putting in my email we can change the business hours by clicking on it and changing it there or change this map by clicking on this little edit pencil right here and we can change this maybe we want it to be Malibu California and that will change the location of the map we can zoom in a little bit if we want to we can change the height of the map we can change the style maybe we don't want it to be black and white so we go here we go here and we can up the saturation a little bit maybe to a hundred or make it make it really colorful and vibrant I'll just keep it at a hundred you could change the brightness and contrast and everything like that of course we can also exit out of any of these different sections any of these different columns we can delete if we want but how do we change this form right here we can see that if we click on this form we don't have any ability to edit it it just shows us this shortcode right here so basically this form isn't made by Elementor it's made by a company called WP forms and they allow you to embed their form into your element or page and to do that what you do is you would copy this form ID which I'm going to show you how to get to in a second you'd go up here and you would search for something called shortcode so we could just scroll down and search for something called a shortcode and we can see it right here so what we would do is we would click hold and drag it somewhere let's say we dragged it there and then we would paste in that form code so we just click here and press paste then that form would be embedded wherever we pasted that code so I don't actually want to do that so I'm just gonna delete this section but that's how you'd get the form in there but you probably want to know how do you edit this form itself how do we change the name the phone number email message maybe we want it to be a little bit different if we look at Fiji waters contact us form we could see its first name last name email I'm a consumer I have a questions so the fields are different and if we look at stripes contact form we could see its first name last name work email country payment volumes or anything else so we can see that on every website each form is tailored to that actual website so how do we modify our form in the same way it's super easy all we have to do is go back to the dashboard of our website so your website comm forward slash wp-admin and press Enter then I'm going to say I'm just gonna leave and not save my changes if I wanted to save my changes I could have press update right here so I'm just gonna press leave so I don't want any of those changes saved and then we can click on WP forms and it's right over here and we can see our contact form right here and we can see that shortcode right here so that's the thing that you copied in order to embed this form right here if we want to add a new form we would click add new because maybe you want two forms on your website one for returns and one to contact you so you just click on add new right here and it would give you a new short code that you can copy and paste right into your web sigh alright so we're just gonna edit this contact form right here so we're just gonna click on contact form and now we can see that that contact form is the same it has our name phone number email and message and to me this makes it much easier for your user to contact you rather than copying your email address and pasting it in all they have to do is just fill out a form but how do we change these fields if we want to it's super easy all we have to do is just click hold and drag this field over here wherever we want it and then let it go now this is a drop down so it's gonna give us our first choice second choice third choice we can click on it to edit it and then change the choices or add ones or delete ones I don't really want this so I'm just gonna delete it and press ok and then maybe I want to add a multiple choice asking them which department do they want to contact so we can see who we need to show the email to so we'll just do a multiple choice right here we can go ahead and click on it to edit it then I'm gonna put which department so which D part mint alright so maybe you can contact sales maybe you can contact technical support or maybe you can contact service so that looks pretty good but maybe we want it to look a little bit different let's go to Advanced Options and let's make it three columns so it's all on one line and doesn't take up so much space once we do that we can press save and then we can go ahead and click on settings once we do that let's click notifications so now it's gonna ask us where do you want to send this email so I'm just gonna type in my email address because I want them all to go to my email address and what do I want it to say is a subject new entry contact form that's fine who do I want to be from I want it to be from the name of the person so I click on the smart tags and click name so actually delete everything first show smart tags click on name now that's gonna input their name because when they fill out the form they add their name so it's gonna say from name and then from email let's that and let's click on email so this is going to insert their email and then who do we reply to we reply to their email so I'm just gonna exit out of this right here delete it and go to show smart tags and do email then the message it's gonna send us is all the field so all of the fields on your form it's just gonna send to us in our email so that all looks pretty good the last thing is the confirmation so we can click on that and once someone fills out your form then it's gonna say thanks for contacting us we'll be in touch with you shortly you can of course change this message right here but I think that's fine so I'm just gonna press save then I'm gonna go back to our website by deleting all of this and going to our website all right then I'm gonna click on contact and I'm gonna fill out our form so I'm just gonna put Tyler phone number email wanna contact you for sales and the message how can i buy your product all right then I'm gonna click Submit then it's gonna show us the message confirming that we sent it correctly and now we can go to our email and we can see what our customer wrote to us so I'm just gonna go to my gmail up here so now we can see that contact form right here with all of the fields and everything like that and if I go to reply it should reply to Tyler at Tyler comm or basically the email that they put in there so that's super cool and it makes contacting you so much easier every once in a while this contact form might go into spam so sometimes you just have to mark it as not spam so let's exit out of there and you are all done learning how to control your contact page and your contact form the next thing that we're gonna do is make your website perfectly mobile and tablet friendly right now it works perfectly on the desktop but it's not perfect on the phone making your website mobile-friendly is super important as you can see the Internet traffic from mobile Isis keeps on growing and growing and easy but not perfect way of thinking about it is 50% of your traffic will probably come from desktop and the other 50% will probably come from phones and tablets so making your website perfect for the phone in tablet is an absolute must so let's see what this looks like on the phone so as we can see here it's blank because it's not showing that video right here if we scroll down a little bit this could probably be centered and so could this if we scroll down a little bit more that looks good your website in general tries to make it as mobile-friendly as possible but we do need to tweak some additional settings so let's scroll down more that all looks good everything looks good pretty much over there and we can see that this image is good it's centered nicely we scroll down more we can see that this image isn't perfect because there's a person to the right side here so maybe we want them to be positioned in the center right here so we'll change that that looks pretty good but this image needs to be switched the text needs to be up here and the image needs to be below we go down here and there and everything else looks pretty good so let's make those changes all right so let's go back to the home page and let's click on edit with Elementor and let's see our website in the mobile view so to do that we just go down here and we click on mobile and I wanted to show you what it looked like on the actual phone because this video doesn't actually really play on the phone so in order to get it to play on the phone all we have to do is click up here and then go to style and once we do that we can play on mobile right here so press yes and now that video will play in the background on our phone but actually there's one more thing that we need to do because what if that video gets deleted or it doesn't play on all devices so just in case that video doesn't load we need a fallback image so I'm just gonna click Choose image and go to my media library and I'll choose this image as the fallback image and I'll press insert media that's just so if this video doesn't load its gonna fall back to this image all right so let's scroll down a little bit more we can see that this is not centered so we can click on it and we can just go to alignment and center this is not going to affect the desktop version because we see this little icon right here that says mobile so we can go ahead and do that for this one also we can make this centered by clicking on it and then going the style and under alignment we see this and we could just click Center so that will be centered and we can just keep on doing that make this centered click on here go to style and make it centered and do it again so all the text right here will be centered you know look really great on mobile all right so all that centered that's looking pretty good we can see this is looking fine maybe we want to change the text just for this right here so if we want to change the text size just for mobile we can click on this and we can go to style and under typography we can see that this little mobile icon right here and we can change the size maybe we want it to be like that you can also change it for tablet or change it just for the desktop but we're just doing mobile right now and now we can scroll down this is all looking really great it did all this for you scroll down and we can see that this image is looking good and we can see the person in there but if we scroll down we can see that this image we don't see a person so how do we change that we go up here we go to style then for the position instead of default we want to be Center right I believe that's where she is and now that I'll focus in on her just on the mobile phone all right so let's scroll down so we can see here that we have text on top and an image on bottom but on this one we have the image on top and the text on bottom and so we need to change that this one's fine so we need to swap this so how do we do that we click on this entire section right here and then we go to advanced and then you go to responsive and you say reverse columns on mobile so now everything is looking consistent text on top image on bottom text on top image on bottom text on top image on bottom and everything else looks fine once we update we can actually go back to our desktop view and we can see that nothing was affected on the desktop so this is still aligned to the left and everything else remained the same for the desktop only the mobile settings were changed so that's super awesome that you can control the mobile tablet and desktop settings all independently of each other so you can have the perfect settings for each device and now if we refresh our website and we look here we can see that the website is looking perfect all right so that's how you make your website perfectly mobile and tablet friendly except for we do actually have one more problem if we click on update here and then we go to this preview changes right here and let's just go to our real website by getting rid of all of that and now let's simulate what a mobile phone would look like so let's make it really small and if we click on this right here we can see that that home button is not visible so we can see the about services and contact but we can't see the home button and actually when we hover over each of these buttons during the mobile view it turns white and it makes it invisible also so we need to change both of those problems the home button is actually invisible because whatever active page you're on the color for the menu should be a little bit different so that you know that you're on that specific page but for some reason the settings are white right now so you can't see it at all so let's go back to the normal view and then all we have to do is click on customize we can close this right here and then we go to header and then we go to transparent header then all we have to do is scroll down and go to menu and click on that and scroll down a little bit more then it has the desktop menu right here if we click on this or it has the mobile menu so we click on the tablet or mobile and there is our mobile menu right there and what we want to do is we want to change the hover color so we click on hover if we click on this right here we can see it it's everything is black and when we hover over it we want to be also maybe a dark-gray like that not exactly black so that we need hover over it it will slightly turn gray and that will also change the settings for the active page so whatever page you're on currently that link will become a little bit brighter alright once we're done with that we can click on publish and of course you can change the background of all this and anything like that but I think it looks good now and then we can exit out of there and now when we make it the mobile version of the website and when click on this we can see all of those pages and home is a little bit lighter a little bit lighter gray I don't know if you can see it when I roll over all these it turns a little bit lighter gray so that is looking pretty awesome so the next thing that we're gonna learn to do is how to control this footer all the way down here the footer is like your feet it's at the bottom so to do that it's the same as any element or page all we have to do is go up here instead of just clicking on edit with Elementor just click site footer and there we have it just the footer and I personally don't like the way it looks to me this is way too complex I'm a simple man I just want a simple footer alright so what I think I want to do is just make this three columns instead of four I want this menu to be laid out horizontally instead of vertically I want to have this logo on the left side the menu in the middle and the social icons maybe on the right side so how do we do all this let's first delete this column so we get three columns instead of four and let's delete this up here this about us and let's delete this here and delete this connect right here we'll move those social media icons over to the right side we'll get rid of this address right here and keep the logo alright then we'll go up here and we want to change the width of these columns so I want to make it different up here so we go up here and then we go to layout and under structure I think I want it to be 16 on the left side 66 in the middle and 16% on the rights so I just click on that then let's go over to this menu right here and press edit and we'll do it in line instead of default so in line I want it to be in the center and more spacing between all of the different menu options so go to style and let's increase the space a little bit maybe like that maybe two thirty or thirty five and alignment let's make it Center alright but now this logo looks lower and this looks higher and this looks a little bit lower so let's align everything vertically super easy just click on this right here this whole section it then go to layout a then under vertical align will put it middle and that will make everything aligned in the middle super cool then let's go down here and click on it and that's align this in the middle too and of course we can click on this and we can change any of those links by clicking on content and changing any of those links maybe I'll go to our home page about page maybe we want to add a privacy policy or a Terms of Use so all you do is you'd create a page and then you would link to this page by just clicking on it and just start linking to it right here so if it's your service page you just type forward slash service and then that will link to the service page or you can just start typing like if you want to be your contact page if you start typing contact you can see I'll give us that option and we can click on it and I'll go to the contact page so that's super easy then you can change the text up here to contact and you can change all of your links like that you can also change your social media icons the same way by clicking on it and then changing them right here so you can search for another icon by clicking on this icon library and then just putting in your social media links right here again you can change your logo in the same way clicking on it and then changing the logo right here alright but that looks really great to me so I'm just gonna update that and then I'm gonna preview changes and I'm just gonna take off all of this right here so we can see it on our actual website exit up here and scroll down all the way to the bottom and now we can see that super simple great footer but we do have one more step and that's again to make it mobile and tablet friendly so let's see what it would look like on a mobile device let's just simulate a small screen here and it actually looks pretty good this could be maybe a little bit smaller or the links can actually go vertically let's see the options that we have for that so let's open this back up let's go to edit with Elementor and go to site footer again let's click on this mobile view right here we'll go to mobile and everything looks good except for this so let's click on edit and we can see that this isn't actually giving us a way to make it different on mobile than it does for desktop so we need to do a simple little trick that is really cool so what we're going to do is we're actually gonna duplicate this right here right click press duplicate and then let's click on the first one and let's go to advanced scroll down and go to responsive and for this one I'm gonna say we're gonna hide this on mobile so we're not going to show this one on mobile we're only gonna show this one on desktop and then for this one it's going to be the opposite so I'm gonna click on it then I'm gonna go to advanced is then I'm gonna go to responsive and I'm actually gonna hide on desktop and hide on tablet and show on mobile so now this one is only going to be seen on devices so I'm gonna click on it and I'm gonna go back to content and I'm gonna change it to the list layout and then I'm gonna go to style and I'm gonna mess with the spacing in between so that looks pretty good to me so it's gonna be about fourteen and then I'm gonna update that and I'm gonna preview our changes so we can see right here for some reason adding that mobile vertical menu actually made the desktop menu move up and it's now not aligned with this anymore so that's pretty easy to change all we have to do is go back to edit the footer and then click on it right here the desktop version a then go to advanced and four top margin we want to make it 30 but we actually want to unlink all the values so they're not all the same and make these all zeros that would give space to the top right here which will actually push this down and should make it all aligned so let's update that let's view our footer everything seems aligned right now to me let's go to our main website so we can see what it looks like on there scroll all the way to the bottom we can exit out of this now we can see that this is the desktop view so it shows the desktop version and if we go to our mobile view it's gonna just show us that mobile version so that's a super cool way to also make your website mobile-friendly you can show just things on the mobile version of your website and just things on the desktop version of your website and now your footer is perfect the next thing that we're gonna do is put SSL on your website but what is SSL if we go on the Disney website we can see this lock right here which means this connection is secure if we click on it it shows up green and it says connection is secure on the other hand if we go to our website right now it says not secure and that can probably really freak out your customer but what does it mean when a website is secure or not secure when you fill out something like a contact form on the Disney website it goes from your computer at home to the Disney computer wherever that computer is located but while that information on the contact form that you just filled out from your computer is travelling through the internet to the Disney computer it has to go through multiple computers in order to get to its destination anywhere in that destination from your computer to that Disney computer the information can be intercepted along the way so if we didn't have this lock right here that information would be intercepted and it can be read just like plain text but because Disney has this lock right here if someone intercepts it like your internet service provider or a different computer then that message will be encrypted and impossible to read it will look like just a whole bunch of code it's the same thing with credit card information if we scroll down here and click buy now without having SSL then that credit card information can get intercepted and someone can use your credit card but because it has this ssl security lock right here even if that information was intercepted no one would be able to read it so it's fine in fact the only way to accept credit card payments on your website is if you do have SSL so if that's something that you plan for in the future then you definitely need SSL but really you need it regardless for two additional reasons and the first is that Google ranks you higher in the search engines and the second is if you have a not secure symbol on your website people will probably freak out and just take off and not even continue browsing on your website so how do we get this SSL security it's super easy let's exit out of here and leave the site then all we have to do is go up here and go to the dashboard and once you're in the dashboard again you can see this not secured and that would probably freak anyone out so what you need to do is add a new plugin so just go to plugins and click add new all right then we can scroll down and we can search for a plug-in and let's just type in SSL press enter then we're gonna find this plug-in called really simple SSL if you don't see it just type in really simple SSL then click install now and as you can see it's installed four million times and it has five out of five stars so just click install now once it's installed then just click on activate alright then we can go to settings and SSL then we can scroll down and we can see that the SSL is not enabled yet but we do have an SSL certificate detected on our website so if you don't see this right here you need to contact your hosting company and you need to ask them for a free SSL most good hosting companies will already have this included some really bad hosting companies make you pay for it but most of the time you're gonna be fine it will be included on your website if it's not just contact your hosting company all right once we do that we can go ahead and activate SSL right here and we're gonna scroll down and make sure that everything is okay after that we're gonna go to our website by going up here and clicking on visit site and we can see that the connection is still not secure but if we click on our website we can see that it is HTTPS that s is the security before it was just HTTP but the website is still not secure and that's because we were building our website and editing our content and uploading images and some of those images still have that HTTP link instead of the HTTP link so we need all of the images to have the HTTP link and it's pretty easy to do so what we have to do is we have to go back into the back end to the dashboard and then go to Elementor and then go to tools then we can scroll down and let's click regenerate CSS and let's click resync library I don't know if these do anything but I like clicking buttons the real thing that you need to do is go to replace URL right here this is where the magic happens as they say and what we need to do is copy in our new URL right here so we'll just click on it and copy it with the HTTP so copy it we're gonna put that on the right side so we're gonna paste that on the right side so it says HTTPS our website comm and then we're going to paste it also into the old one so we're going to paste it except we're gonna remove this s right here so we're gonna remove this s so the old one was HTTP and the new one is HTTPS what this is doing it's search everywhere on your website for the HTTP your website comm and they're replacing it with the HTTPS the s again is for your security so now we can click replace URLs and it says 13 rows affected so 13 things were changed from HTTP to HTTPS press ok now we can go ahead and visit our site and now we can see we have that lock symbol so there it is connection is secure we can look at our website here by clicking on it and it says HTTPS now no one will be freaked out that your website says not secure we can also go to the about page make sure that's okay it is it has that lock symbol service page make sure that's okay has that lock symbol and the contact page make sure that's ok and it has that lock symbol sometimes every once in a while if you don't see that lock symbol on one of your pages then it means that all you have to do is click on edit with element or change a little something and press update then that page will be updated in that lock symbol will show up but right now it's showing up perfectly alright so that's how you install SSL again it makes sure when you send a message right here that it's encrypted and people can't intercept it and it allows you to accept credit card information on your website and it ranks you higher in the search engine and it gives people a peace of mind that your website is secure alright so that's it congratulations you've learned so much you've learned how to get hosting you've learned how to install WordPress you've learned how to change your title and tagline so the search engines can find you you've learned how to change your navigation at the top and make a logo you've learned how to make this little icon right here you've learned how to design your website so it could look like practically any design in the entire world you've learned how to make your website mobile-friendly so that anyone in the entire world can access it and it'll look amazing you've also learned how to make a footer on your website and add security so that your website is secure for your users so congratulations you should be proud please remember to comment rate and subscribe I'm Tyler Moore thank you so much

Channel: Tyler Moore

Views: 1,031,950

Keywords:

Id: 6gosrWrGF9Q

Length: 131min 32sec (7892 seconds)

Published: Tue Jun 23 2020