How To Make A Wordpress Website For FREE 2020 | Elementor Tutorial✅[1,800 FREE TEMPLATES]🔥

what is going on everybody my name is Darrell and today I'll be showing you how to make a WordPress website step by step in just a few simple steps now I'll be completely honest with you all making a website a few years ago used to be a little complicated but today it has gotten so easy it's simple you pick your domain you install WordPress install your free theme and then choose from more than one thousand seven hundred and twenty five professionally made templates for your new website and then simply make any changes you want your website like changing the text switching the fonts or color you can adjust the position of these columns you can also change the images and also move them to anywhere that you want you can create a beautiful menu or you can add these really cool shape dividers at a beautiful gradient backgrounds a video background or both and then add a contact form so people can fill it out and it'll go directly to your email inbox and let's not forget your website will be fully optimized for Mac PC any tablet and all mobile devices and this is the website that we are gonna make today and as you can see it looks simply incredible we have our menu right here our logo this beautiful grading overlay scrolling down right here you can see that it just looks like a really professionally well-designed website so in this video I'm not just gonna show you how to make any website we're gonna make professional and beautiful looking websites and don't forget you can add as many pages as you want so I'll show you how you can add that your about Us page and also if you want your contact us page as well and you can easily charge someone five thousand dollars to make this same website and in this video today I'll show you how to do it today for free and don't worry I'm not gonna drive a Lamborghini I'm not gonna sell you of course I'm just gonna show you today on how to make a website step by step now in case you want to know who I am my name is Daryl Wilson and I used to be a full time web designer a few years ago I switched over and now I'm a full-time a wordpress instructor here on YouTube and many of my viewers have watched these tutorials and made a website for their business in fact other ones have actually even started their own webs of my business watching these same videos so if you're ready to learn how to make websites that are professional that look greats that are mobile responsive and just really look nice today in this video I'm going to show you how to do it today step-by-step so let's go to the first step which is getting your domain so we're going to do this in four simple steps step one is we are going to get your domain and hosting so for example your website comm step two is we're going to install WordPress step three is we're going to install our theme and our free page builder so we can import our three templates and step four is I'm going to show you how to make your website look amazing now there is a link in the description of this video it'll take you to a page that looks just like this right here and this is psych rom-com now I've been through many web hosting companies Hostgator Bluehost and hands-down psych round is the best it's the fastest it also has the best uptime as well and I even tested them against fifteen other way posting companies for three months and sycron came up as number one as the fastest and the most reliable with 24-hour customer support and even a 30-day money-back guarantee so you can be certain that this is the ultimate and the best web hosting company to choose from now there's three plans right here so we have the grow big the start up and the grow geek now in all my videos I recommend the grow big option because with the grow big option you can host unlimited websites rather than just a single website right and personally if you're just getting started out I don't think you need to go geek just yet and remember you can always upgrade later so right here under the grow big click on get plan now we're going to register your domain name so get a coffee do what you got to do to think about your new website so right here I'll just do something like elements or guide element or guide comm and I'll click on proceeds so remember this is your website address so this is going to be the name of your website so give it some thought all right and right here we're gonna go ahead and put in our account information so you put your email your password yada yada I'm sure you've all seen these these screens before you give them your social security number and your bank account I'm just kidding you don't do that so here you put in your client information your payment information with credit card etc now scroll down right here and I want to talk about the hosting services so in all my videos I recommend the 12 months because 12 months will give you the biggest discount and remember you also get a 30 day money back guarantee so you're really not risking anything at all in this and right here for the extra services I'm just gonna say click this right here the domain privacy because if you don't click on this people can actually see your personal information they're gonna send you spam they're gonna send you viagra they're gonna send you sex pills all this really weird and bizarre stuff that you're gonna get in your email so please make sure you protect it and have the domain privacy checked and once you're done with that so you'll scroll down you'll click on I have confirm I have read and agreed to the sycron terms I'm sure you're all gonna read this right here and also this right here right so I'll just look the other way what you guys do that's and if you want to receive emails from psych round you can check this box right here and once you're done filling in all your information you'll click on Pay Now and I will meet you on the very next page alright cool so I sign up for my hosting package now right here you click on percy to customer area right now they're basically getting our web hosting account set up for us right here you can see we have set up sites so click on set up site now right here we have the option to start a new website and migrated websites and right here under start a new website we'll click on select right here and choose the application so right now we're gonna use WordPress so click on select now right here make sure you enter in your email and a password now this is actually to log in and make changes to your website so later on when we build our website and you want to log back in and kind of change stuff and modify stuff make sure you write this down so you don't forget it so once you put in your email and your password you'll click on continue right here now they're offering another service but for right now I'm just gonna decline it you can always get it I have this on my website psych home site scanner it will basically scan your website every single day to see if anyone's like put anything like malicious code or anything but for people getting started you probably don't need that right now so right here click on finish now right now psych round is actually setting up your website and it's installing WordPress onto your domain so we can build our websites also while you're waiting go ahead let me know what kind of website you're building if you're building a website for your friend or for your business I'm always interested to hear what people are building with these tutorials alright cool so our website has been created so go ahead and scroll down right here and go to manage websites alrighty and this is basically your new dashboard so this is the dashboard to always do something and if you want information about your website this is where you're going to get it so here you can make email accounts you can see your name servers you can see your IP address pageviews and also visitors for people who are visiting your websites now on the left side right here you'll click on WordPress and click on install and manage now scroll down right here and you should see your domain right here now we already have WordPress installed so to log into your new website right here just click on login to admin panel all right now right here it's gonna ask us for like a setup wizard personally you don't need to do this and you can just click on exit right here and congratulations this is your two WordPress websites your website is now live on the Internet if you want to see your websites you can go over here and click on visit sites and this is now your new WordPress websites let's go back over here click on dashboard and let's go ahead make some changes now to your websites now right here under plugins click on plugins and click on install plugins we don't need this plug-in installed this WordPress starter it's just basically something to like help us get started but we don't really need this and we'll talk about what plugins are a little bit more just a bit but right here click on deactivate now also over here under users if you don't want to change your your password or your email go to your profile right here under users and also right here you can kind of change the scheme of your how it looks I like midnight's I just think it looks a little bit better but if you want to change the email and password for your accounts right here under nickname you can change this and then right here and your email you can also change this as well so this right here is the email where you're going to if you do like forgot password this is where it's going to go also to change your password right here click on generate password and you can put in any password you want and then right here you'll click on update profile alright and there's one more thing we need to do before we start getting a little bit more to the bill the building process right here in their settings will go to permalinks now I want you to change your permalinks right here to post name and the reason why we do this is because usually when you go to a website right you see your website com slash about us right or you know your website com - contact us not to 0 9 - 10 - 13 there's no reason to have all that so put it on our post name and click on Save Changes alright cool so once you've done with that let's go ahead make some pages now so over here under pages you'll click on all pages now these are the pages that are basically created by default when you make WordPress so we don't need these pages so to delete a page right here just click on trash and also right here click on trash now right here and their pages click on add new and let's go to make a home page so I'm gonna close this right here and under title you home right there and click on publish and publish now also to make another page we can do a shortcut right here click on + new click on page and then let's go ahead and do a new one we'll do about us publish that page and then over here under + new let's do one more and this is do the contact us page contact us and click on publish and there you go now if you go our website right here and click on visit site you'll notice that the pages aren't there there's nowhere for the pages to click on so let's go ahead and create a menu so over here under dashboard we'll go to appearance and we'll go to menus now give your menu a name right here so this is the primary menu so primary menu and click on create a menu and those pages that we just created right here so home about us and contact us I'll click on add to menu and you can always rearrange this so I want the homepage first I want the about us in the middle and the contact us at the end and I want to make this a primary menu and click on save menu so now let's go back and check our website right here so visit sites and now you see we have the home page the about Us page and the Contact Us page now don't worry about all this right here we're gonna change all this I know this looks this is the default theme that used so we can make our site look way better so now that we've actually created a menu go ahead and download the page builder now there is a link in the description of this video and it'll take you to a page who purchased I'm sorry do get element or for free for free so you can also get there by going to Darrell Wilson comm slash Elementor and right here you'll click on free download just go ahead and put in your email address subscribe and download and now you'll see on the bottom left right there it is now downloading on our websites there we go alright sounding on to your computer alright and go back over here go to a dashboard now we're going to install the page builder so this is what we use to actually build the page so right here click on add new now in short if you're completely new to plugins and you have no idea what they are plugins are basically applications for your website so right here just click on popular and you kind of browse around you kind of get an understanding so a contact form this will allow you to put a contact form on your websites Yoast this will actually help improve the SEO for your websites this right here prevents spam you know it's so you don't get a bunch of weird people asking you for stuff or trying to sell you anything WooCommerce this allows you to sell online in fact I will have a follow up video on how you can turn this website into an e-commerce website so make sure to check that out that will be in the description of this video in just a few days when I make this video but right now just click on upload plugin choose the file and go ahead and select what we downloaded so right here Elementor open and click on install now so now it's installing the page builder on to our websites alright and right here click on activate plugin and I'll go ahead and close this now there's one more plugin I want you to install really quickly so let's go back over here to plugins and click on add new and right here let's type in Envato and Botto just like that e and V 8000 and this is the plugin we're going to install right here it's called envato elements photos and elements or templates we'll click on install now now what this is what we're installing is these are the templates these are what 17 Plus templates that you can use and we can modify with the pay's Buller so it's basically a big template packed with tons of just amazing free web templates that we can use for our website so now that we've installed the page builder let's install a theme for our website so right here in their appearance go to themes and click on add new now in short how WordPress kind of works is you can kind of see here how there's different kind of schemes and styles for your website so every theme has a different function but we're gonna be using only the best theme so right here under popular go ahead and scroll down and you're gonna find Astro right here you can also get there right here by going to search themes and typing in astra and right here click on install now astra has the most active installs it's also a free theme and also has just tons of amazing reviews tons of features for a website that won't restrict us so I mean it has like transparent menu hit as a bunch of features that we can add to our website now once you've installed it right here click on activate all right and right here it says new theme activated visit site so I'll click on visit sites and you can see now how the site's kind of changed you know it looks very different and what we want to do here is you want to go ahead and build our website right here so click on your homepage right now go to home and we're now going to create our websites with this first home page so right here click on edit page now on the right side right here you notice we have these different options so for the sidebar I don't want a sidebar right and I want the content full width right I want it to extend all the way and I want to disable the title meaning I don't want the home to show when we build our website so I just kind of want a blank sheet so we can build our website so right here I'll click on update and also you click on View the page if you want to see your size and you're gonna see if everything's completely gone right so go back to edit page and now we can build the website with Elementor so right up here where it says edit with Elementor click right there alright cool so now we can start building the website so for example right how this works in a nutshell is let's say for instance you want to drag something over here let's just say I want to take my heading I'll drag it right there click back here we'll take some text I'll just put it right there and you see where that bar is now that's where we can kind of put stuff I'll click back here I'll just drag in a button etc like that but so go ahead and close this really quickly so a better way to do that is to click on the plus icon and click on this row which will create a row here I'll go ahead and say alright I want some heading text and right here we can Center it and let's just say you wants to change like the size of it or the style right here and there style go click on that and under typography you can change the font and everything so right here you want this font or this fonts etc I like monster rats I think monster rats are really good really good a font for the weight so I'll change that to bold and for the text color I want it to be black and we can also change the size of this as well so over here in a typography under the size we can just drag this to be as big as we want it like that or as small now also what we can do here is add spacing but before we talk about margin and spacing let's go ahead and add in some more elements right here so under this text editor I want to take this and drag that right here under the style I want to Center this and now I want to add a button so right here take a button and just go ahead and put this there and right here I'll click on this and I want to set our line this and I want a black button you know I want it to be black right really quick now right now I'm just giving you all a crash-course you know right now I'm just kind of showing you the option showing you how to build stuff where I'll be using templates and everything in just the bits but I want to make sure you kind of understand how to use the Builder before we just jump into the templates right so right here under this section right here this right here actually controls this section right here so if you want to add a background or something you want to change something this is where you're going to design it so for example let's say I want to add in a background so style right here for background we have classic gradients video and a slideshow so let's say for instance I just want to do classic and just put a simple color right here you can see now how this changes if you want to add in a gradient you click on gradient and now you can add two different colors like this and like this and then you can also kind of control the location of its you can control the location of it etc I'll go back over here I don't like gradient too much a gradient works but you have to be really careful you know it's it looks nice in the beginning but it's actually really hard to carry it out throughout your website also right here you can go to image and click on choose an image and upload an image now a great place to go get images is pixabay and also unsplash.com so pixabay pixabay.com and also unsplash.com these are great websites to choose from and you can basically get any sort of you know image that you want for your websites now once you've downloaded one of these images let's say you wants to download something like this right here you can click on download free and download it you can go to this website right here called reduce images calm and this will actually reduce the size of it so make sure your site loads really fast and everything by kind of minimizing these images so right here just click on upload image you'll go ahead and just put it in the image that you downloaded and then you'll go ahead and make sure that the image is smaller it'll reduce the size of the image to make sure your site's running much faster so let's go back to our website really quickly and right here under me the library I'll click on select file and I'll just select the image that I'll use right here and click on insert media now I want this to extend all the way across the screen so right here under layout we have height right here I want this to fit to the screen and now you can see right here how it now fits to the screen and maybe I kind of want to change the text to something like whites right so it'll change this to whites double click on this style text color whites etc so next let's go ahead and scroll down right here and right here I'll click on these icons and let's say for example you want to add another section you can simply just click on this plus let's say I want a three column row and let's go ahead and drag in some elements right here so I'll just simply take this icon box put it right there click on these again and then maybe we want something like an image box and then click on this again and then maybe right here we can add in something like a video or an icon list or even a progress bar and just drag it in right there and let's say I want to duplicate this so I want more of these on the right-click I can click on duplicate duplicate and we can even do this for the entire row so for example right here I'll click on this blue section right here click on duplicate and it's gonna duplicate the entire row for us so we don't have to make you know everything from scratch again so once you actually design something right here you can just duplicate it and then change it now whenever you use a module whenever you want to design it you can see here we have different options so I have a star icon right there but under icon library I can change this to anything that we want so I'll change this to something like a taxi you know we'll use a taxi and then under the style section we can change the color of this to anything that we want right there so black we can change the spacing we can change the size and we can also even rotate it like that over here we can choose an image so if you have an image that you want to use you can go ahead and just put in the image right there you can change the title you can add some description and also if you want to add a link right here you can put a link which will talk more about links in just a little bit so for example we'll probably link this to something else on our website once we actually have something it for it to link to you right now that we've done this right here we have this section right here now you have a basic understanding of kind of how to use the page builder or how to change stuff let's go a step further now and let's go ahead and use some templates so let's go ahead and delete all this I'm just gonna close all this right here and I'll click on update let's go back over here to exit to dashboard and now right here under elements I'm gonna click right here on elements now right here it's saying to use our plugin you will need to accept our Terms saying okay sure I will agree and I will go to continue now what this plug-in will allows us to do is to basically get these starter websites and sections that we can apply for our website I'm gonna head and close all these tabs right here I don't like a lot of these tabs open I don't know why I have them all open right here so I'll just close all these tabs and let's go ahead and now find a template for your website so congratulations on getting your new domain and hosting with site ground now in this next section I'm gonna show you now how you can actually select the templates and import it to your WordPress web site let's go back to the tutorial so first I'm gonna close this right here and you have these different templates now these are your premium you have to pay for these ones but below this right here you have all these other free templates so right here you have free template kits for Elementor you have more than 17-hundred to choose from now what I want you to do first before we go into that is go over here under search click right there click on corporate and business and what we're gonna do right now is I'm gonna show you how you can kind of add a gradient background how you can change stuff how you can rearrange icons and everything to make sure that you can kind of use this how you want it to look for your website so right here in a corporate of business I'll scroll down right here and we have these free templates fellow mentor so scroll down right here and then when I want to grab is this one right here professional services now this is the one we're gonna use right here home number two click on this and click on import templates what it's doing right now it's actually taking this template it is putting it inside of our elementary library which I'll show you how you can access that library so now that I've done that let's go ahead and go to our page so over here and there pages under all pages we'll click on the home page so right here we click on View or we can click on edit Elementor either way gets us to the same place so I'll just click on edit Elementor now right here you notice we have this little sign right here so this is right here we can actually send the block so I'm sorry import the blocks so right here for example we click on blocks and let's say for existence I want to click on sub hero and I want to add this block to the page we can do that and then we'll add the block so you can see now how we can add blocks to our page another way is right here under the templates section under my templates right here it says professional services home to this is now our templates stored and right here I'll click on insert and click on yes and it's now going to take that template that we imported and now it's going to put it on our website right here so you can see right here now we have the the website imported everything looks good etc alright so going back up so let's go to make some changes now really quickly you can see right here how we have this gradient background how we Center this text and now we have two buttons right here so let's go ahead and try two achieve that right now so right here the first thing I want to do is I want to add in a gradient background so in order to do that right here I'll click on this little icon right here which remember controls the whole section over here under style we'll go ahead and close this right here and go to background overlay now what we can do here is we can add a gradient background on top of our image or video so for instance right here I'll click on gradient and now you can see how there's a gradient color over our background now if you need help with gradient colors I recommend going to this website right here so just go to google.com and type in like a gradient colors gradient colors and UI gradients is my personal favorite because it shows you exactly what it'll look like and it'll give you the code to use so just go ahead and scroll through like maybe one or two or three of these and you can just go ahead and grab and pick one so this is the one I used right here so you can see how this gradient looks very similar to this one right here I just kind of reduced the opacity so what you'll do here is you'll just simply take this code copy it go back over here and for the first color just go ahead and paste that code in there and then over here for the second code I'll just go ahead and paste this one over here and now I can now we can see that there is now a gradient background and again remember you can always change the location you can also change the angle as well and you can also reduce the opacity of it so just depending on how much you want but the gradient actually helps people see the text so you don't want to really get rid of it because then people really it'll look really messy I mean look at this like that just looks like too much it's too clustered right it doesn't you can see how it's a little bit harder to read the text and there's so much moving in the back so I'll change this over here now let's go ahead and make it like this right here so what I'll do is I don't want this right here so I'll right-click and click on delete now right here I want to Center this and I want to sort of change the text right here I like Monster at this other fonts really ugly you know this is like the default font monsterettes and I want to make this bold and I want to make this a little bigger same thing right here I'll click here style Center now right here I want to duplicate this button because we two buttons right but I don't want to have to make one button from scratch so right here if I click over here I can drag a button right here and then we'll have to modify this and change everything but I think a better way to do this is go ahead and delete this right click and duplicate it now we have two buttons now over here I want to say alright I want a new section with two columns so right here under intersection I want to take this and I want to drag it right there now you see we have these two spaces so what I'll do right here is I'll take this on this blue pen and I'll go ahead and drag it in this box and take this one right here and drag it in this box right here now we need to kind of align these buttons so I'll click on this button right here and do alignments to the right and there you go now maybe you want to change the text like learn more and then I'll click on this button right here and I'll do contact us and maybe I want to kind of get rid of this color you know I don't want I kind of want to have one like you know I don't know I don't I don't want two colors you know the two colors is it's it's a little ugly so I kind of want to have a transparent background so right here I'll click on this button style and the background color will go ahead and leave it as blank right now that actually disappeared so what I want to do is I want to add a border so right here under border under border radius I'll put in like I'll put in two I'll put in solid right here and for the width of this border I want around two pixels something like that right there and also for this one we should do the same thing right because now this is a little bit bigger so we want to make sure these are like the same size so border type solid just put in two and there you go and we can have some border radius what border radius does is that it turns it into a circle you see how now it's a circle and this is a square so the more border radius you have it'll change it into a circle like that alright so guys congratulations we have just made our homepage really simple really easy to do right so now that we've done this let's go ahead and scroll down right here let's make some changes now sometimes guys been using this builder weird stuff happens like these little boxes just click on it and it'll it'll work so it just does that weird I don't know you know I'm not I don't know why it does that stuff I I don't know why now if you want to change something or modify something just simply take this drag it over here right here we can change the text to result based results results ribbon and now we can kind of modify everything so now you can understand how we change stuff now this one right here is called a divider we can't really talk about this too much but what a divider does that it adds space so for example right here we can take this width and then let's say for instance I want to say you know what's I want to put it in the center make a little bit better and also right here we have this style which you can control the weight and also the gap as well so you see now how it's creating space all right you see that now another thing I want to teach you all is about padding so padding is probably something that's probably you don't really use too much or you don't really understand on how to use so what padding and margin is is that it creates space so you can create space in between stuff cuz you know how do you make space between things so right here I'll click on this right here and under the Advanced section I want to add some padding so I want space right here right so right here under padding I want to go ahead and add in some padding to the top you see now how it's creating space between these so whenever you want to add space between something the padding is what you're going to use so let's go ahead and test something out right here let's just say for instance I want to add more padding I want to add more padding right here so right here I'll click on this section go to the advanced and now on the top section all that padding you see that how we're pushing space so that's an example of how you can use padding and padding is very important it's a big part of learning but just kind of does just kind of think about how you want things structured and apply padding to where you want it to go so for instance right here I have too much space right here so I want to go ahead and reduce the padding I don't want a lot of padding so what I'll do right here is I'll click on this row which controls this section under the advanced section we can actually reduce the padding or I'm sorry we can actually reduce the margin so right here I'm gonna say I want this actually start from a dirt a separate points you see that now how we're reducing the margin so margin is basically where it starts from that's what margin means in a nutshell padding means the space between something so margin is saying I want this to start minus 50 pixels so I want this section to start over here you know and you can create a lot of beautiful effects with margin with reduction of margin and everything so it's growing on right here if you want to make changes of something you'll put it right there you'll edit it this section right here I'll click on this and I want to add in a gradient overlay the same one we had before so style click on this gradient overlay gradients and here we can go ahead and add in some gradients something like that and the other section I had was what we had blue or something like that so something like something like that you get you guys get it it was oh this is on hover sorry so right here a second color there there you go something like that right now for the hover option this means in fact all your icons are gonna have the hover feature is when someone hovers over this what do you want it to display how do you want it to chain the button right here has a style section and they have their normal and they have the hover now right here I'll change this to something like green now when I hover over this button it's now gonna change to green right there all right so you can kind of understand how that works so now let's go ahead and say you know what I don't want this section right here I want to get rid of this and I want to import a new section so right here under plus we'll click on this right here and click on the blocks now what we'll do here is we'll look for templates so right here I'll click on team well go ahead and scroll down right here now these right here we cannot use because this is part of their pro feature but I'll just go ahead and say you know I like this one right here so right here add the block to page and it's going to now insert this section onto our web sites and then again we can go ahead and make changes we can swap out the images we can make any changes we want et cetera so now that you guys kind of know how to design everything let's go ahead and just keep scrolling down right here scrolling down anything you want to change we can go ahead and go here and we'll Center this we will Center this and we will Center this now whenever you want to add in a new section right here click on this plus section and let's just say you don't want to use this you don't want to use the templates you don't want to use the blocks you can click on this plus icon say all right I want to make my own section and I want to make a three column row so right here I'll go ahead and take these and I'll just simply drag in an icon box and go back over here I'll add in an icon and feel free to use your imagination here you know you can put anything that you want on top of this you can put it in a text editor you can take this and take this right here and all right let me see right here take this and put it above essentially it's the same thing so whatever you're trying to accomplish your achieve whatever works you know you don't have to use the modules the way they want them to use them it's all about creativity you can do anything that you want so right here image box and then over here we'll add in something like social icons egg etc so you kind of get an understanding of how this works and then you can kind of modify stuff so not I've shown you all how you can modify your website let's go and click on update right here and let's go ahead and exit this page and click on View page and see what we've done right here now the first thing you've noticed is that our header and our footer have disappeared so we need to actually change something so right here under edit page whenever you import a template they actually have it two elements our canvas so right here on our page attributes under templates you always want to make sure that it's elementary full width click on update and I'll click on View page and now you can see that we have our header back the reason why it's elements or canvas is because when you create this elements our canvas is actually an option to actually get rid of the theme customizer and then just have only the page builder so if you want to have your theme customizer you can have it and if you don't want it you can do the element or canvas which will actually disable all of the theme functions and only have the page builder so right here let's click on about us and let's go ahead and design this one right now so I'll click on edit page now right here Elementor full width again right here we'll change this to no sidebar content full with stretched and disable the title make sure you have these settings always checked because this is actually the optimal way of building the sites and right here click on edit with Elementor now right here again click on the Envato here corporate in business we'll go ahead and scroll down right here and then right here under professional services we'll click on that and I want the about Us section now so right here I'll go ahead and find the about Us section and simply just click on import import templates alright cool now we can also just go ahead and import the contact page as well so let's go ahead and find our Contact Us section so right here contact us import the template now this is importing it to our library so we can use it for later so right here I'll close this and right here under this section I'll click on the template my templates and now we have the about Us section so I'll click on insert and click on yes all right cool now these templates actually change the page to elements or canvas so you want to make sure that it's elementary our full width right there and voila here I'll click on updates and now you can see that we have a full websites that is already made for us and you can go ahead make any changes that you want to its so now let's click on contact us right here or I'll actually have to close this really quick so view the page click on contact us and let's do the same thing for this page right here and then I'll show you how you can set up a contact form on your website so right here again I try to make sure you understand how to do this elements are full width customizer no sidebar stretched to Sabol the title and update now also right here we can actually even have a transparent header for this page so let's just enable that really quickly just to give you an example of what this theme can do now this options are here because this is the theme customizer this is what the theme is doing for us that's why we need the theme with this page builder so right here I'll click on edit with Elementor here I'll click on this my templates and we will go ahead and import the contact us section right here alright and again make sure this page layout is set to elements were full width now you can see here how this is now transparent so you can't see the white background behind it and also our logos right there and don't worry about the logo I'll show you how to get one just a bit after we talked about the theme customizer now we need to install a contact form onto our website so when someone comes to our web site and fills out our form it'll go directly to your email so over here under WordPress go to dashboard and what we're gonna do now is we're going to install a plugin so right now plugins add new and over here you'll just type in you can just type in contact form now there's various contact forms a lot of companies make a lot of different plugins the one I think is the best that works really well is WP forms right here so right here click on Install Now and we're going to install this plugin alright and click on activates alright cool so it's activated the plug-in for us now right here it says create your first form go and click on this right here now go ahead and give your form a name right here or you can select from a template personally I think selecting from a template is actually a little bit better and everything's made for you so let's do that so right here at our simple contact form I'll click on this right here so here you can edit your contact form and let's say for instance you want people to fill in like a phone number or something you can go right here under single line text just drag it right there and then right here you can put in something like phone number phone number and make this 8 required section and once you're done you'll click on save now there is a pro version to this as well so there are other things that you can add to this as well I will have a link in the description of this video if you decide to purchase this it's just a like a an add-on for this contact form so if you want to have like a password or file upload or something like that you can go ahead and put it on your contact form but for most of us getting started you don't need that but for those of you who wants to purchase it there is a link below now once you've actually done all this this is our contact form so go over here to settings now this options right here are just staying for like um you know just just for you know when something is sending its gonna say sending the submit button etc so you can go ahead and change all this and you can kind of go through all this and check it out right here and they're set up we can go ahead and go to our form let's go ahead and do that so one more thing I want to do here is under settings right here let me just make sure that this is going to your email right here so confirmation notifications now this is what you might want to change but you might want to leave it so send to email address so where do you want this to send it to now by default this plugin is going to send it to the WordPress email address that you sent if you want it to send to a different address you can go ahead and put it right there alright so that's just a way on how you can change email addresses if you decide to do that but that's you know that's your business I'm not gonna you know I'm not gonna get into that also when you get a contact or what someone fills out your contact form what do you want to say so right here you can put in like a new email from my website and click on save alright and right here click on this X exits and right here now is the one that we have so simple contact form I think it's this one right here we can click on preview right here to view it let's go back really quick I think that was those weird yes this one right here so let's go ahead and take this shortcode right here alright we'll copy that we'll go back to our we'll go back to our contact section and we'll go ahead and just paste it in there so for the contact us just click on edit with Elementor now right here we don't really need all this text so we can just go ahead and just get rid of all this and right here under the text section just go ahead and paste that shortcode now whatever you get a shortcode with WordPress let's say you're using another plugin what you can do here is just go to this right here take any text editor drag it anywhere you want and then under the text section right here the text tab just go ahead and paste any shortcode so let's say you get another plug-in and it says paste the shortcode here this is what they're talking about so whenever you get a shortcode from another plug-in you want to go ahead you put it in a text editor put it in the text section and then just paste it in there and you are all good to go but I don't really need this because we already have this so here I'll click on deletes and we'll click on updates now right here I want to click on preview changes I want to see how this looks cuz this right here is actually kind of buggy but watch this preview changes and now you can see it looks much better right I don't know why it does that but let's just let's just give this a quick little let's just try to see if this is working or not let's just give this a test run so right here under settings or I'm sorry over here I'll go to view the page and let's fill this out now so I'll just put Wilson Daryl I'll put in my email address right here I'll put in a fake phone number so one eight hundred what's that one that one thing on YouTube those guys at the the the talk crap hotline we're like if you're angry you can call them to like talk crap it's pretty funny it's it's called gangster party hotline or somebody that's really funny hey what's up here I'll click on submits alright cool so it sent it to our email let's go ahead and check our email now to see if it's working alright so this is my email right here and you can see new email from my websites I click on it and then right here you can see this is all looking good here I'll say yeah this is safe of course so that's just that's just Gmail but the message will display right here so we know your contact form is now working all right so congratulations you now have a contact form on your website and people can send you messages and it'll go directly to your email inbox so this stuff is pretty simple right it is so in this next section now that we've covered the page builder I'm gonna talk to you about the theme customizer so the actual theme which is basically the wrapper around the page builder so I'm gonna cover all of that in this section so let's go back to the tutorial now when someone first visits your website you're gonna notice they're brought to this probably blank page right here and this is where the theme customizer comes into play all right so right here we have this customize section now you can also get them to go into your dashboard and clicking on customize your website now this is basically what the theme is doing now this theme has a pro version and you can go ahead and purchase it there is a link in the description below but for most of us getting started you don't really need the pro version just yet so the first thing you want to do right here is go to homepage go to a static page and change your homepage to home right here now this is going to basically make it so whenever someone visits your websites it's then going to go to your home page so going back over here we have different options so we have header breadcrumbs blog sidebar or footer all these options right here let's just go through some of these to kind of make you understand what this is so right here is header now site identity now this is where we talked about a logo so if you have a logo you can go ahead and put it right here by clicking on select logo and just go ahead and click on the logo and select its crop the image and then there you go the logo will display right here and then also maybe right here I want to take off the side title so I don't want the side title take those off so now it's just your logo now if you need a logo there's a link in the description of this video it's a fiverr.com guys this is where I got my logo from it's an amazing website I do have a 20% discount I'll put that coupon on the screen but just do something like logo just type in logo that's it and you'll find people that can make you logo for as little as $5 really really cheap stuff and it's go ahead and scroll down right here it's gonna see we can find a $5 gig right here no not 500 gig let's change our budget right here to $5 and the max is $10 and let's take a look all right much better so you can get a logo from one of these people right here and they can make you a really professional logo for your WordPress websites and again you know I got my logo from these guys they're really really good and once you actually you know make a partnership with someone you can use them for something else like a background or something else this is where you can outsource everything and find people from other countries that will make really quality good products for really really cheap now let's just take a logo that I got from them so right here and click on remove select logo upload files select files and I'll go ahead and use a logo that I got right here host helper calm this is a website that I'm currently working on right now sorry here I'll just say uh I'll just produce this I want the logo just show like that all right and there you go crop the image so there's my logo and it's a little bit too big so I wanna make it a little bit smaller and there you go so there is my logo on my websites now also site icon so this right here is the site icon you go to a website and you see that little little thing right there that's the site icon so I'll go ahead and put that as well for my website so now you can see up here how that displace and going down right here if you want to just have the actual letters like you know you can spell out your website you can have that as well or you can actually disable that so that's just what that does going down here primary header this is where you can change like the layout of your menu so you can see now how this is kind of adjusting and changing to any certain style we can have this as full width or we can have it as content with the bot the bottom border size you'll just go ahead and mess around with this you can kind of see what this does a lot of these settings you'll understand what they do just by kind of messing around with it so you can see here now has that black bar looks pretty neat looks pretty sharp it looks pretty cool I like that let's go back over here we can change our transparent menu to the entire website if we want it to so you can see now how its transparent on the entire websites going down here we can change other options if you want to do that remember this section is controlling the header so this is right here is called the header this top section up here blog we're not gonna cover blog it's basically how you can incorporate a blog on your website I have other tutorials on that but for right now I think most of us just want a basic websites for the footer section is probably one of the most important ones right here so scrolling down right here is the footer section and right here we have footer widgets and this right now will allow us to display widgets on our websites so I just went ahead my activated its so we can kind of go ahead and mess around with the background color and change stuff etc so let's go ahead and contents we can change the topography the link color etc so there's just a way on how you can design your footer and don't worry we'll be talking about the footer of the last make sure you understand what I'm talking about menu you get that widgets this is all controlling the footer area CSS most of you don't need CSS so just ignore that section let's go ahead now and design your footer this was the area we did not really talk about that's pretty important so let's go ahead and click on publish and click on close now let's go over here to our appearance and widgets now the footer widget right here is basically where you can add things to the footer so for example you can go ahead and drag in a gallery image on your footer you can grab pages on your footer etc now I'm just gonna click on save right here and let's just visit the website really quickly just to give you an example so you see here how we added pages and we added a gallery but we didn't add any images so let's click on customize right here we can actually customize it from right here as well it would make more sense to customize it from here as well let's scroll down to the bottom go to footer footer widgets let's see footer bar as it footer widgets I think it is actually on the widget section right here there you go widget area one so this is the gallery but I want to remove this and I want to add a widget right here and I want to display just some text right here so text and I'll put like how we got started how we got started and then over here I'll just simply go ahead and copy this and paste it right there alright this section right here we have pages footer area 3 we can add a widget maybe we can even add in like a WP form the form plug-in that we have we can put a form right here and we can use the form that we use from earlier so it's just another way on how people can you know fill out a form if you want to do that or if you want to change it of course you might want to optimize this and make it look a little bit better maybe just having like your name and email and that's it right maybe even at the bottom you can use WP forms to collect emails for email subscribers as well and then right here you can do something like email bliss or something like that you know so now you know how to kind of use stuff you can kind of go back and check it out but I'm just giving you an example now over here what I want you to do is I want to install a plugin that will give you the ability to have a Facebook like box so let's click check this right here and we're gonna go in to install a plugin so plugins add new I know many of you use Facebook all the time and they're addicted like my girlfriend all she does is like refresh the page I'm like dude like you're sick like like what is gonna change what is so important with Facebook it's these people out there it's like a it's like a narcissistic like era where everyone's like oh I need the likes I need the attention if I don't get it I'm no good it's it's like it's like okay you belong in a mental institution you know and I'll just take a gamble here I'll just I'll just choose this developer maybe this one will be good so show me blog in like share box plug-in let's click on install now so what you want to do here is you kind of want to go through find a high rated one and use that plugin and this goes for anything guys this goes for contact forms this goes for virtually anything so let's go back over here to visit sites and go to customize and right here under widgets widget area for add a widget and now we have the Facebook page like box so let's go ahead and scroll down right here to make sure we can see what we're doing right here so right here I'll just do letting like follow me and then right here I think this is my facebook Facebook that's zero Wilson oh three there we go there's my Facebook cool and then right here we can kind of change the width of everything so every plugin guys works differently you know I'm not a professional with every plug-in because every plugin works a specific way but what you can do here is you can kind of go through each plug-in if you want to use this one you can you know at this point is trial and error you know I don't know what the best plugin is out there because there's over like 50,000 of them well you get what I'm saying here I'll just do something like 300 pixels I want to show some things right here show my profile photos when friends like it's and you can kind of go ahead and mess around that sand you know also go to my Facebook page give it a like you know I just hit 10,000 likes pretty excited stuff so thanks yeah anyways here I'll click on publish and that's that so now I'm showing you guys how to how to do that right there let me just kind of give you all a general overview of everything in WordPress to make sure that you understand everything so this section is gonna be talking more about like the miscellaneous settings so what does everything do for my websites so right here we have Settings General this is basically like your time zone your tagline your site URL your language your date your time etc tools right here is something where it might be for like a developer or another platform site health this is shows like how your site's doing appearance you have themes now remember there's other themes out there you don't have to use only Astra but I recommend to use Astra you can use this theme hello element or theme you can use ocean WP in fact I have another tutorial I talked about Ocean ATP and also Astra as well and over here you have templates these are the save templates that we have in our library you can actually go through each template and edit them as well if you want to do that so what you can do is you can import a templates then you can modify it and then make changes to its right here pages so if you want to go ahead and add a new page you can just click on where did this come from my Instagram feed demo I have no idea what that came from that's weird sleep that that's out of it that's gone it's gone so whenever you wanna make a page just click on add new new page and then change all the settings like right here and click on publish and then you can edit the element or also if you want to delete the page you can go over here to new page click on trash get rid of its if you want to adjust the pages right here you go to appearance go to menu then right here we have home about contact us I don't wanna use this Facebook demo but whenever you have a new page you want to go and just click on that and then just put it right there so that's where you want a new page you can also have a drop down menu as well so for example if I want to have this random page I don't know where it came from I think it came from that plug-in if someone in the comments let me know let me know what this page came from it's like the WordPress ghost came in my website right here in the visit sites now you see that we have this drop down menu and if someone clicks on this they'll go to face book demo so I probably let's see this is a Facebook page created by the plug-in automatically please do not delete to make the plug-in work properly okay that makes more sense you know I love the developers give us little signals to let this let us know what's working and what's not now over here and her plugins click on add new now there's a lot of popular plugins and I actually have tutorials on many of these plugins so Yoast right here is a very powerful plugin it will help your website get searched more on Google so make sure you have this installed and watch my tutorial on how to do that also right here who commerce I will be making a WooCommerce tutorial with this same builder and this same theme and it'll teach you how to make an e-commerce website so if you want to watch that in the future there will be a link below in this same video to check that out really quickly I'll just go ahead and show you how to make a blog it's really simple let's go over here to page and we'll just go to blog right here and I'll just well I'll do you a favor this is the bonus section you guys are getting a bonus now usually people gotta pay for this you guys are getting it for free and right here under post this is where you want to blog so post equals blog so my life is terrible and then right here you can explain why so you can just say you know guys my life is terrible my girlfriend broke up with me my dog doesn't like me whatever you want to put right here you can go ahead and put it and over here under documents under featured image this is the image of the blog post so we'll put something like this girl right here where we'll put the screw this girl right here click on save and click on publish now we need to assign this post to a certain page so let's go ahead and do that so over here go to visit sites customize and now we're going to basically assign our blog to a certain page so right here on our home page posts blog publish you get that alright here I'll close this so now we need to assign the blog to our menu so over here under dashboard we'll go to appearance and go to menu and then blog add to menu and then adjust this to where you want it to go save menu visit sites and now we have blog and now you can see that here is the blog now these right here are widgets so remember earlier how we had sidebar widgets you can actually use any widget you want so on my website Darrell Wilson comm you can see I have widgets on my blog page so I'll just give you an example right here I'll go to my blog my websites running a little slow guys I know I'm actually on the process of changing it so these right here I have social icons here I have an image with an affiliate link and here I have a signup form now this is actually called these are plugins right here from elegant themes it's from actually not a competitor a competitor company but they makes a really amazing plugin so you can see here how someone clicks on this it'll go directly to my Facebook page or something like that I have a tutorial and this as well this right here bloom it's another plug-in that will basically collect emails and of course I have another plug-in or tutorial that as well and this right here someone clicks on it they can read my blog post now this right here is all made with Elementor so this right here has the the image we have these social shares and etc so you can kind of go through your blog post click on it and then you can add the same thing so all you really need here is just some social icons you can go ahead and add some buttons right there and then go ahead and talk about your life's problems etc now there is a pro version for this page builder but quite honestly the free version works great for you but I will be having a second tutorial on how to use the pro version so if you do want to upgrade to the pro version there is a link below to purchase it and I'll be having a second tutorial basically the the pro version it adds a lot more functionality has more features in the free version so I'll be covering that more in another video right but let's go back to the tutorial now in this next section I want you guys to follow me here we're gonna talk more about the advanced features of this plug-in and things this can do to make your site look a lot better and also some things like absolute positioning etc now I want to show you all this shape dividers first so you might have noticed I have these shape dividers like this on my website I'm just gonna show you how I added those on because this is included in the free version now right here I'll click on these dots right here and all you need to do right here is go to advanced I'm sorry style right here under shape divider you now the option for top and bottom so with top right here you can see I have different styles of these shape dividers also I can control the color of that as well also I can flip it and I can even change there we go flip and then even change the height of it as well so this is a one feature that I didn't really cover too much in the tutorial because you know it's just I didn't really feel there was a need for I kind of wanted to show you privately now this is a really amazing feature and you can just add some really cool stuff to your websites now there's another really amazing feature about this plugin and it has to do with images and also other widgets that you can kind of mess around with now right here I'll click on this this image right here I'll go to the Advanced section and I'll click on custom positioning now right here in a position I'll change this to something like absolute now absolute what this allows me to do is take this image and virtually place it anywhere I want on the website and then click on update and save you can see here how I've moved these images around like this and then kind of just there you go like now we have the images like that you know so this is just an amazing feature it allows you to really modify stuff really fast and change things but I will give you a warning that you should not be using this to make your website use this sparingly use this for something like small little images but do not design your website with this because you are gonna have tons and tons of optimization problems but for most of us you can kind of use this for something standard you know so what I'm saying is use this sparingly don't go crazy with it don't be like you know don't be like this you know like don't do this if you want do something like this you know this this can be little bit better and then once you do this you can optimize it for removal okay so this is just another amazing feature that I found with Elementor here I'll click on updates next let's talk about blend modes next we'll talk about blend modes now whenever you use a heading text you have the option over here under style with blend mode now what blend mode is that basically allows you to add some different kind of blends to your current text now to be quite honest I am NOT a professional of Photoshop so some of these I don't know how they work but you can kind of mess around with these and understand what they're trying to do so for example right here multiply not sure what that is screen okay overlay here we go here we go overlay there you go so now you can see has this effect right here and you kind of just go through a lot of these and see what they do lighten duller color dodge it looks like right here it's like kind of like having this effect right here this might be for like retro or something like that a saturation you can see the text is kind of blended in in the back but it's very saturated color not sure difference there you go that has a really cool feature and also right here Exclusion hue and Lumosity now let's go over here the one I feel is probably the best one is probably overlay and also exclusion as well but depending on the backgrounds depending on with images in the back and what color text you have it'll achieve a certain style so just kind of go through the saturations and the blend modes and see if you can come up with something creative they do have a tutorial on the elementary channel but to be honest it's very limited it talks maybe about maybe one or two of the blend modes because there's just so many different ways on how you can achieve blend modes so go ahead and mess around all the blend mode see if you can come up with something creative but this again is just an amazing feature that comes with the Elementor page builder next I want to talk to you about mobile optimization now this is extremely important because you have more mobile visitors than you do have desktop users as of 2018 which was last year so in this section I'm gonna show you how to optimize your website for the tablet and also for the mobile device so over here I have the Builder activated now on the bottom left right here we see responsive mode hope you guys don't mind I made my screen bigger 2k to give you all a bigger understanding and just so you can see everything right here you have responsive mode click on this and click on tablets now you can actually make changes to anything on the tablets so it's going down right here you can see that this actually looks pretty mobile optimized already if there's something that you want to change you would click on this and then make a change you see how right here this button how it has that blue symbol on it that means right now this is being modified for people visiting your tablet only on the tablet or weight I say that right yeah visiting your website only on the tablet all right so scrolling down right here now there are some sections that you might not need you know maybe you don't want to have everything on this website like maybe you don't want to have this guy on your site right now you're like you know I just don't need this guy right now it's just not popular what you can do here is edit the column go to advanced you can go to responsive and you can disable this on tablet and mobile so now this section right here will not display for people who are visiting your website on a tablet or a mobile device same thing right here maybe we don't need this image there's this image is useless right so let's just get rid of it so right here I'll click on this advanced responsive hide on tablet and hide on mobile it's going down right here is anything that you want to change this is where you're going to do it and it's pretty important actually to make sure that everything looks perfect on mobile because again there are more mobile users and there are desktop users so this is really really important guys and actually Google will actually rank your website better if your site is more mobile-friendly click on updates now let's go ahead and change this responsive mode to the mobile all right let's let's go back up to the top now this direction right here I mean we don't really even need this button what we can do here is maybe we can Center it or we can't even go to advanced and we can just get rid of this button all together if we don't need it so I already have it on high on tablet and mobile but if you wants to actually display it like this it'll now display or you can actually just hide it and only have one button plus the stacked button that's kind of ugly right scrying down right here everything looks good now again you can always Center this you know you can actually send this line that'll be a little bit more optimized right so you can actually position this to be a little bit more centered not that important over here again the same thing you can actually go to style and you can actually send this as well scoring down here we don't need this but this is actually already disabled so for the advanced member we disabled this section for mobile maybe this section right here we can actually Center this and Center this for our mobile users and also Center this as well for our mobile users let's going down here and it looks like everything else is pretty much adequate everything looks good maybe we don't need maybe we don't even need this whole section right here this this hour our company we can actually get rid of that or we can actually just get rid of this this gallery advanced we can just go ahead and respond to it and get rid of this gallery altogether we don't really need it maybe we just need the text right there so I'm just rying to make you understand on how you can optimize your website for the mobile devices it's very important that you do this after you make a website because your website will actually start to rank lower if Google thinks that your site is not mobile responsive but it looks like by default that the template that we use already made this pretty mobile responsive I don't really see any letters that are clumps together let's just click on update right here and let's go to the contact us page and see if we can find something that just looks like crap let's just let's just see if we can find some that just looks terrible you know that we can actually have a note that's saying okay this looks bad but responsive mode and click on contact that's crawling down everything that looks pretty mobile optimized here but if you see something like like for example right here I'll just give you an example of what not what not mobile-optimized is I'll just click on this right here content or style typography and the size now if you see something like that right there this obviously right here is not mobile responsive it does not look friendly on the mobile device you need to make sure the text is smaller so something like this right here it would be more practical right so that's an example of something when you see something that's not mobile optimized usually has to deal with something like big text or what a letter would actually overlap and go on the bar but just go through your website make sure it's fully optimized and again that's very important so yeah make sure your site's mobile optimized very important let's go on to the next section next what we're gonna do is we're gonna put an SSL on your website now on the top left right here you've noticed throughout this whole tutorial this says not secure now anyone coming to your website is gonna be given a warning by Google saying this could be a scam website or something crazy like that but it's really not we just need to install the SSL on our website so let's go over here to dashboard and we're going to install a plugin so over here plugins add new plugins become really useful guys I mean if you have to do this by code it would take you like a long long time so right here type in really simple SSL alright and right here click on install now now also make sure that you have your WordPress username and your password written down somewhere because when you activate this plug-in it's gonna kick you out of WordPress ok so just make sure that you have it's written down somewhere so you don't email me back and say hey I got logged out on my website I don't know how to get back in et cetera right here click on activate all right now right here it's just go ahead and activate the SSL so go ahead and click on go ahead and activate SSL and then right here just click on visit website and now on the top left you see that that's gone right now so right here let's go ahead and just go to - WP dash admin and let's real aughh in and you know if right here on the top left now how it says connection is secure so now your website is fully secure and people won't give warnings saying that your site is a scam or anything like that so that's how you install the SSL on your website that's basically the entire tutorial guys I've showed you how to make pages I've showed you how to modify stuff now there is a pro version to Elementor so this page builder let's go ahead and go ahead and check it out really quick here I'll just go to visit sites and go to edit with Elementor this actually has a pro version now there's a lot more you can do in the pro version and I'll be talking about that and making a separate video about the pro version it has some really amazing features if you want to support me there is a link below to purchase Elementor pro and basically I make money through affiliate commissions so it helps me continue to make these totals for free but I will be having a full tutorial on Elementor Pro they have some amazing features including a theme builder a WooCommerce builder just tons of really amazing features so make sure to check that out also be having a little commerce tutorial ecommerce tutorial as well with this same builder so that's it for this tutorial guys hopefully by now you know how to design your website I think we covered everything we covered the contact form we covered mobile optimization I showed you how to incorporate a blog I've shown you how to create different pages I've showed you about plugins and how to create header and also a footer for your WordPress websites again guys make sure to like this video I really really appreciate it I wish you all the best of luck and good luck on your new websites so I told you guys that was really easy right I mean literally we got our domain imported a template modified it change the images and now you have the website that you want so congratulations on your new website also I will be having to fault tutorials for this one so I'll be showing you how to the pro version and also for those of you who want to sell something I will be having another tutorial on how to make an e-commerce website with this same page builder so make sure not to miss it my name is zerah Wilson I hope you enjoyed this video and I will see you guys in the next video and enjoy your new website

Channel: Darrel Wilson

Views: 285,965

Keywords: create a website, make a website, build a website, how to build a website, how to create a website, how to make a website, create a WordPress website, Make a WordPress Website, Build a WordPress websiute, WordPress, WordPress tutorial, elementor, elementor tutorial, elementor wordpress, darrel wilson, Wordpress 2019, Wordpress Elementor Tutorial, wordpress tutorial for beginners, wordpress tutorial elementor, free, make a website free, how to make a website for free

Id: 536C08O1AZM

Length: 72min 41sec (4361 seconds)

Published: Mon Oct 14 2019