How To Make A Wordpress Website 2020 - EASY And FAST!

hey guys my name is Darrell Wilson and today I'm gonna be teaching you all how to make a wordpress website step-by-step with no experience required you can be 13 years old you can be 65 years old and you can watch this tutorial today and walk away knowing how to make a wordpress website and you need to know a thing about coding or have any programming experience whatsoever everything this tutorial is gonna be drag and drop in fact you're gonna have access to over 500 different templates and layouts to help you create beautiful responsive mobile-friendly websites that fit for 2018 now I know you're probably thinking this guy's probably trying to sell me something I'm not gonna sell you anything today I'm just gonna show you how to make a WordPress website step by step so you can build a website maybe you can build it for your friends maybe you can build it for your family or maybe you can even start your own business like my viewers have in fact I'm gonna read a few comments from my viewers right here so here we have Farhan he says hi Daryl I just wanted to say I run on me stumbled across your WordPress website to tour from a years back I used to make my own website soon after I purchased the Divi theme upon your recommendation I now have a portfolio of clients and I love what I do from a hobby to an honest paying job I can't thank you enough your friend your fan from London Baran now this isn't that hard it's just the fact you have to watch it you know spinning out of your time and pick up a skill that's gonna really last a lifetime here's another viewer thank you for existing thanks to you I learn WordPress I started my own business hoe works fine public typo keep doing this Andres repo so these people actually spent the time to watch one of my videos and then they picked up a skill that's gonna last them a lifetime and we're gonna be using a very popular platform called WordPress you know companies like eBay use it Mitsubishi uses it beyonce you use it MTV uses it it is the most popular platform in fact it powers more than one third of the Internet making it the most popular platform for making websites so do yourself a favor you want to learn how to create websites either for yourself or for your family or for your business maybe your boss might even ask you to build a website forum you never know what's gonna happen but watch this at all today and you're gonna walk away knowing how to create beautiful and professional WordPress websites so if you're ready I'm ready let's go ahead now and get started with this amazing tutorial okay let's get this tutorial started so the first thing we're gonna do is get our domain and hosting so for example your website comm and basically this is where your website lives and breathe so you want to make sure you have good hosting and SiteGround came up as number one as the most fastest hosting against Hostgator and also eight other competitors so I recommend psych round and you also get 60% off through my link now if you already have your hosting you can keep your own next we are going to install WordPress and again WordPress powers one third of the Internet it is the most popular platform for web design out there after that we are going to install our WordPress theme and after that we're going to go ahead and create our amazing WordPress website step-by-step 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 sycron com so this is the hosting I recommend now you can also get to this website by going to Darrell Wilson comm - sigh crown and if you click on enter it'll take you to this page right here you can click on signup you will see the discount regardless let's go ahead and choose some plans so we have three plans but I'm only gonna recommend one and I've been doing this for three years and everyone does the same thing most people choose the grow big because with the grow big option you can host unlimited websites rather than just a single website so that is a pretty big difference and most people usually switch to the grow big because they might make one website and you know they wanna make more so next let's click on order alright so this is basically your new website so you know your website or I don't know what you want to make the the cool business calm or whatever business you want to make whatever domain you're gonna go ahead and enter it right here so I'm an enter I used to love Star Wars I'm not gonna I'm gonna be honest you know Star Wars eight just kill it for me I can't believe that was a Star Wars movie like I felt like I was watching like I don't know a kid movie or something now also if you want to change your domain to something else like net.com dot biz taught info you can do that right there as well when you register your domain so let's go click on a pro Cee'd alright so this is the final step now right here going to go ahead and enter in your account information your password you're gonna enter in all your good information right here right here we have client information so your name you know your street everything and then your payment information right here and then also your social security number I am just kidding don't ever give everyone your social that's a joke okay so next we have hosting so I recommend twelve months because again there's always a 30-day money-back guarantee and for twelve months you actually receive a discount on your hosting so next we have the domain registration the domain privacy everyone get this please leave this checked because if you don't check this box guess what's gonna happen there any all these guys that are gonna spam you with like they're gonna pretend to be hosting companies they're gonna try to sell you stuff it's super annoying so domain privacy protection will drastically reduce the amount of spam you get sycron site scanner I do recommend that as well in fact my website was infected by malicious content and on the next page you're actually going to see that because this service actually told me someone's injecting something into your website so I recommend psycho site scanner and then right here you can click on Terms of Service and you're gonna read through that all right that is enough right you guys read that and then right here same thing private policy all right you guys can you guys can go to that I don't think anyone reads that stuff you know but they they got to put it there so once you're done with that to click on pay now now I know hundred nineteen dollars does sound like a lot but that's all you're gonna pay you know and again you're not gonna pay me anything you're not gonna pay for any other service you can do this just with your hosting and you guys use I crown because half the people that come to me from other hosting companies spend like three times more because they go around looking for really cheap companies and then they come back to me to like man I should have just chose our legitimate stable one that's really easy to use so once you are done with signing up with site ground you're gonna go to your login area so right here I'm gonna go to sign-in and I personally use this service I have a VPS and I have two other Hosting's on this because they're really good and really really fast the speed of it is what I want so once you get to this you'll be brought to this page right here and also congratulations you now have your domain good job so this is your portal basically and here you can check your billing you can check your your supports and also your accounts if you have a question you can call them and again sycron has 24-hour customer service you can call them any time of the day so you're gonna see your hosting plan right here now I have three because I have a lot of websites and I use different postings for each of them but you are only going to have one so right here you're gonna go to manage account so you're hosting you're gonna see right there and go to manage account and then right here you're gonna go to go to cPanel so right here are my websites but your website will appear a little bit later because you don't have WordPress installed yet so we're here go to cPanel so you look at this malware detected on my website but dead-set see I'm lucky I have that because now I know I need to look into it maybe just run a little scanner on it and take care of it it's probably something really really small let's hope so right here and we go to WordPress we're just going to simply install WordPress on to our domain let's scroll down here click on install now so right here we're gonna go ahead and find your domain so where is your domain well you're only gonna have one so I have tons of them and the one I'm gonna use is called the Elementor tutorial com there's that one but it's let's take a look at where it is let's go to the bottom first let's work away yep oh there it is way at the bottom the element of total calm all right right here in the directory please do not put anything there because if you put something there it's going to install your domain - whatever and that's not what you want so don't put anything there right here our site aim you can always change this later in the theme customizer so don't worry about it you can only change this but you can put the best website all right and then description a newbie I've been user name so we're here I'm gonna put a put patty-whack where's my dog and then we're here to put patty-whack again put paddywhack 99 so right here go and put your personal email so this is my personal email please don't set my you know spammy with questions and stuff you know here select language you're gonna go ahead and select your language and you know they're still as the debates he wants to leave a comment about it I think it's Mandarin but everyone says it's Chinese I don't know it's like everyone says do you speak Chinese like no I speak Mandarin but according there was a viewer that says this is the correct waste but yeah you're gonna go ahead and select your language right there I speak English I'm gonna go ahead select English and then here I'm going to click on install so we are installing WordPress on to our domain it says like four minutes but it takes about like literally 20 seconds and it's done that's it so here I'm gonna click on WP admin and voila this is WordPress if you ever hear someone talk about WordPress or say like oh you've with WordPress this is it right here and it's very user friendly it's very simple now your website is live on the internet right now so right here if I go up here click on visit websites this is our website so anyone can actually see it and look at it right now now of course this is demo content it's using a default theme that's really bad some people out there use it but no I only use the best you know I do a lot of research so I know the best now guys congratulations you know this is this is progress this is this is good we're working here now before we start designing the website I want to change some settings and I want to make some pages so that you can you know walk away knowing all about the settings and everything else so first let's go ahead and change our permalinks and I'm gonna talk about that what they are in just a second so here settings and permalinks so right here I want you to take this and put it to post name now this is very easy to understand when you go to your website like you know your website com - about us right not to 0 8 0 8 you know this is like robot language we don't want that we want to keep it very simple and this is also very good for SEO sorry here Save Changes ok now the next thing I want to do is go to users and go to your profile and this is where you can kind of decorate stuff and get a little customizable so you can change the color here I'm gonna do midnight I mean that's always good and right here is where you can change your and you can also change your password as well so if you ever want to change your password in the future or change your email this is where you're going to do it so right here generate password and then you click on update profile now I don't want to so I'm gonna click on cancel and that's about it now I've shown you most of the settings right here or most of like the important settings I should say we're gonna cover most of these in just a second one thing I want you to do right now is install our theme and I'm going to talk about what themes are so a wordpress is basically installs themes onto your website so basically every single theme is different in a manner so you can see that's every site kind of looks a little bit different but the one that we're going to use is called ocean WP this one right here it's under the popular tab right here and always need to do right here is click on install now when you install these themes it's not gonna look like these pictures it's gonna look really ugly and that's because you have to sort of design it you have to you know make it look like that now right here we give this notice is saying this team recommends the following plugins Elementor and ocean extra right here click on begin installing plugins now what are plugins I'm going to talk about that in a second but right now plugins are like apps for your iPhone you know there's an app for everything right you have an app for iTunes you have an app for the bank you have an app for basically everything that is basically what a plug-in is it's added features to your website sorry here click on install go to a journey dashboard now let's go ahead and see those plugins so right here install the plugins we're gonna go ahead and scroll down right here and you can see that Elementor is activated and ocean extra is also activated now I want to change this background color really quick this is a really ugly background color so your profiles midnight and click on update profile okay so the next thing I want to do is create some pages so we have our home page about us contact write all that stuff so right here click on add new and now we're going to go ahead and create some pages so here home page publish and then right here again about us just like a website you know have the pages you know we're do that's exactly what we're doing you here and then right here I'll do contact alright so we've made up our pages now we need to actually assign it to a menu so we need to make a menu for that so right here we're gonna go to appearance and go to menus and give your menu name I just always do menu one it's just the easiest so menu one right here under pages I want to click on View all or you can click on most recent and just add those pages and click on add to menu and you can always reassign these you know you could put them right there you can you know cuz when you go to your website it's going to basically look like the way you assign it's and if you ever want to create a drop-down menu you can just take it and put it under it and that's a drop-down menu so I'll explain what that is in a bit but right here under main I'm gonna click on main and go to save menu now let's go ahead and take a look at our website really quickly so right here we have the home and we have the contact and see how about us is a drop-down right there and if I go to those pages there's nothing on it because we haven't really designed anything now let's go ahead and go to the theme customizer which we can kind of fix all of our menu and then we're going to start designing stuff we're gonna add pictures and all that really cool stuff and it's really really simple with a drag-and-drop builder so here we go to customize okay so this is the theme customizer and on this section right here is we're gonna do all of our settings for our menu and everything else so right here are a lot of options so site identity we have you know our site title and how are you again the theme customizer controls the theme it doesn't really control the page itself it controls the menu it controls the header options and also the footer the bottom so the actual designing we're gonna use a plugin called Elementor now a few things you have to do before we start design our website here under homepage settings so what is this and what does this mean a static page so when someone comes to your website what pays you want them to learn on first well want them to go to our homepage right you don't want them to go enter your website and then go to your contact us page or your about Us page I want to make much sense so I want them to go to our homepage over here we have our other options like general options top bar now I want to go ahead and change some things and then we'll talk more about these a little bit later but for right now I won't go to header and go to general now this is our actual menu so here we have like a top menu you can kind of change how your menu looks right here so see how it looks a little different we can do it to medium you can do it to Center and you can also change the color this as well you can make this full width see how it's it's full width now and again right here you can always change like the background color to it so all these options right here are for your menu so if you ever wants to make changes to your menu such as font or padding for those of you don't know what padding is it's basically space so you see how I'm making more padding it's just creating more space that's what padding is but I would leave it at default you know once you get into padding you can kind of mess up the way the menu looks so I like the way this looks I'm gonna go ahead and say I'll just do I'll do minimal it almost good I like it basic click on publish now let's go back and really quickly right here we have our header media this I wouldn't recommend to use because it doesn't really look good we have a logo and don't worry about you don't have a logo we are going to show you where to get a logo a little bit later and then our menu right here so here you can kind of change where the menu is you can change the style of it you can change the link color you have a lot of customizable options you know what color you want it's you know when someone hovers over it so right now it's a blue color but you can change that to purple and now you see you on the hover over it it's purple so this section right here all controls the menu and styling options as well and it's pretty self-explanatory you know like link background color all that stuff it's very simple to understand here we keep going back and go to social menu now right here I'm enabled a social menu and then I'm going to maybe say you know what I want to add some social icons maybe have like a Facebook page or something else so here you're gonna enter in the you are of your of your social accounts or whatever you are and then they're gonna appear right next to your menu and then again you can always change like the font size you can make them appear in a new window but I'll go ahead and just I'll leave them as 20 or something click on publish here I'm gonna go to mobile menu I think mol menu is good and then our header media so this section right here is pretty much all done another thing we want to do is disable this top bar so we have this other top bar right here and we don't really need to have it so you can decide if it's up to you to have it or not maybe you can add something there like a phone number or something sorry here I'm gonna say you know I don't want the top bar tables I really don't want it enabled and I'll click on publish now you might have notice right here the icons have appeared so it did take a little time but usually when you refresh the page or publish usually it shows up so that is basically a quick rundown of the header you can add your own various social icons you can add your pages all that stuff now what makes ocean WP good is the fact that you can do all this a lot of themes you cannot add any of this stuff so this theme right here ocean of EP is very customizable it's very user friendly and has a lot of customizable options for you so we're here and click on X so are you ready to make the website are you finally ready to do it let's go ahead and do that right here to click on purge as she cache now when you get site ground you get this purchase C cache and this will actually purge all of the cache and that will make your site much faster because over time it absorbs information and stores it and it control your site down so the purge su cache is great and it's just for us sycron users out there so right here click on edit page now we have this big button right here for any width Elementor now before we do that we need to change some settings really quickly so right here under content layout I want this a hundred percent full width basically I'm saying I want the content to stretch all the way across the website sidebars we can go ahead and leave that default but I don't want any margins margin is space so I don't want any space between those between our menu so here my pace is really quick and just give you an example and then right here header display the top bar I want to sable that but I want to enable the header so this right here is our header right here so I want to keep this displayed still now the reason why there's options for this because you can change this for every single page some people want maybe you don't want a menu for a different page maybe you want to add a menu for a different page you know have a different menu or something the great part about ocean WP is that it allows you to do this other themes - not allowed to do this so while it might look a little confusing it's very easy to understand what you actually kind of think about it and lastly once we set that so we want to go to our title and for our title I want to disable this because I don't want this here the home I don't want that there and then we'll go ahead and scroll up and click on update now we are ready to build our websites now I'm first going to show you all how to use the element or page builder I'm not really going to use any templates because that's going to spoil you and you're not really going to learn how to use this but Elementor recently introduced a new feature called blocks and i'm gonna give you an another resource or you're gonna have over 500 different sections pre-made sections to use but first let's just go ahead and keep it very simple let's just say we want to add a new section in so right here add a new section and let's just create a landing page you know let's create a big beautiful landing page now there is also a link in the description to images you can use these images they are free to use you can use them on any website you want your copyright free so right here I'm gonna click on this little this little edit section now this section right here I want to make it really big I want it to be like those like the Apple website a very big beautiful website just like Apple so over here under the height I want to go fit to screen so now we have a full page right here and right here under the content width I want it full width so this is just for landing pages this is not going to be for every single page you know so here under the style you can add you know a gradient color you can add whatever color you want so here we have a black color or you can just have a classic color or you can even add an image or you can even add a background video so you would simply just take a youtube video and just simply copy and paste it right there I'll do that in just a second but let me just show you the classic so this is just like classic and again you can you know well there's actually no reason to position this but you know you can add in any content so let's go ahead and add in content just to show you so right here and click on these little nine buttons and drag this header right there so I don't want it right there I want it centered so let's click on the center and then right here I'll put welcome to your new website and then under style I want to change the text color to maybe something like whites and typography you can change the font and also the size so here I want to make it bigger and then wait you can give it more weight it just basically makes it look a little bit more skinnier see that and then we can change the fonts right here as well so different fonts you can mess around with this and also we have line hides and all these other options so transform upper case lower case all of these are very self-explanatory you know if you use Microsoft Word you know how to use these you know underline you can underline it etc and also right here we're gonna go to content and if you want to add a link you can add a link right there but we don't really want to do that because we're going to add more content so here I click on this right here and I'm gonna take this we can actually we can do a lot of different things we can add a text editor we can add a heading but right here I'm take this and drag it right there now you see how it's that there's that bar right there that means I can drop it and here you can go ahead and add in more contents so here under the style and say you know what I don't want it there I want it centered and I want to change this color to white that looks much better right and under the size right here again we can change the style as well now we can also control like the letter spacing as well basically like the space in between each specific one you can add light hinde as well to this now one thing I want to show you that will really help you all is the actual the content I'm sorry the how much it's spreading right here so you see how it's spreading all the way across maybe we don't want to spread it all the way across so over here under layouts click on layouts and right here i'ma change this back to boxed now right here it's saying okay what how much content with do you want so right here I'm gonna say you know what's I want to be something like this right here something a little bit more centered right and then right here I'm gonna take this right here a button and just drag it down right there and I want it centered and then here we can kind of change the color of its so I want to leave it that color now we have our landing page but I don't this background is not going to work for us you know so right here I'm gonna click on this little icon and under style I want to add a background to it now right here we have gradient of course you can add a gradient so again you can change like the first color second color so for example let's get all those dark colors you know let's get it's gonna light colored here and maybe something like this that's too much or maybe that will work and then of course right here you can change the location of it you can change all of the settings you can even make a split screen effect something very similar that right there you know if you want to go for that look but I don't want to you know I don't think that looks good but you can kind of mess with this and kind of have fun with the you know with with this as well there's a lot of customization that you can do with this but I don't really want gradient so I'm gonna go ahead select an image and again there are images for you in the description of this video so I'm gonna go ahead and upload those right now so select files and I'm gonna go and select all these files right here and upload these to my library so these files right here we're going to use these for our our tutorial I'm going to talk about like where you can put your menu and just use some of those wow that was really fast and I want us like this one right here I like this one so right here insert media now our text is a little hard to read and you might come across this using you know you know page builder and stuff like that because sometimes image is not perfect not to worry we can add a background overlay to this so right here background overlay and we can kind of add just a little bit of color so by adding just a little bit of color we can kind of dim it and make it look something like that right there so it looks beautiful now we can also add a video as well I talked about so some of you might like to have video backgrounds so right here video background go ahead and paste this right there and now we have a YouTube video that I that I basically copied and pasted that you can you know have as a video background and you can simply go to youtube.com and just copy any link and just you know check it out so for example right here I'll go to my YouTube channel see I'll go to YouTube or I'll just go to Darrell Wilson terrible sin YouTube and then we're gonna select one of my we can select a video I have I've tons of videos on on tons of them so you can just simply take this right here and copy that and if you copy that you can go back to your website and simply paste it right there and I recommend going to like you know type in like 4k videos or something like that type in something like 4k or k clouds or something like this to give you an idea so a lot of the the 4k like nature or 4k waterfalls are great for web design now there are some additional resources that I'm going to give you right now so another website you can go to is unsplash com unsplash.com has the most beautiful images it's basically the Instagram for web designers and you're just going to like you know I put in sky just grab one and you can add these to your background as well there's tons of them and also free pick calm is also a very good one so here you can kind of get like you know like graphics or whatever you want and I'm gonna talk more about what these are and how you can use them for fiber we'll talk more about that we talked about our logo so let's go ahead and go back over here I don't want to get off or go back go off-topic too much but I want to add just a classic background like this I think this looks really good really clean maybe I should add a divider for it so right here maybe we can add a divider to kind of give it some space but here we'll change the color to something like whites and then we'll make it a little bit thicker and then right here we can reduce the width as well you know give it a little clean divider now of course this is not the best landing page you know I would never use this fonts but I'm just showing you exactly how it works and you know basically that is it we have our landing page and this was pretty simplified so I mean we've basically made the landing page in like five ten minutes which is really simple so let's keep going so right here I'm gonna click on add a new section and select these three right here and guys it's it's very simple so let's say I want an icon box just take an icon box drag it maybe I want an image box just drag it right there and then maybe I wants one more I can add in something like we'll add in another image box now another way we can do this is by simply saying you know what um I'm gonna go ahead and close these right here and just you know close these as well sorry that's how you close it and we can actually just duplicate this so I didn't really have to even do that I can just duplicate it and just make it three in fact we can duplicate this whole entire row right here by clicking on this little duplicate button so it saves a lot of work it's it's very uh web design is just incredible today so right here I'm a click on this and say you know what I want to choose an image and you know you can basically put any icon you want you can you know put an image of this guy you can even use this as a profile so right here you can say like this is John and then you can talk about them right here you know and then you can add in like a link to his website now this module is not for this purpose but it's all about being creative you know you can add in anything you want right there so here I'm gonna click on delete and say you know what's maybe I don't want it so I'll just you know I'll put in something like this right here and then you can go ahead and talk about whatever you want to talk about the image size as well you can change the image size right here you can kind of mess around with it and tinker around with it as well you can make it really really small or thumbnail or you can do custom or you can make it even bigger as well so going over here style we have the image spacing we have the image size as well and the opacity so we can even make it you know smaller so right here is like margin and padding now I'm gonna explain what margin padding is just once because it's you might never use it but it's simple so right here click on this little icon margin is basically where when do you want this to start so if you say 50 pixels it's going to push this 50 pixels so if I put 200 pixels it's gonna push it down even more you see that and we can also do that for the right side and we can also do that for the bottom or left side wherever you want to go ahead and put it so you see how now I put it 100 or sorry 100 pixels how it's pushing this down it's basically saying I want space right here okay so that's basically what margin is padding is space so margin is where it starts from and padding is actual space they might look the same but they're actually a little bit different so padding is just saying the space like so nothing can be here margin is saying stuff can be here and I want to start from here so that's the difference between margin and padding okay so if you ever come across that and that's what it is and of course entrance animations you can make these like fade in fade up and every single module that we talked about today has these same options so you don't have to really you know once you learn the module for all of them you learn for all of them and you can kind of you know think about stuff to do like you know you can make it slide it in slide down and you can kind of make these like work with it you know so here you can even do like entrance animation and maybe you know bounce in so everyone will have a different animation as well so that's basically this section right here so here of a click on X now I'm gonna show you something really quickly but I don't want you start using these just yet okay so right here at a section I'm sorry going to add a template and I'm introduce you all to blocks so these right here are templates and you can simply upload these at any time and use them but I don't want to use these yet because I want you to get more familiar with the page builder before you try to learn how to use these and some of their designs so right here under blocks we have these right here and these are great because these are all pre-made there is a pro version which you can actually purchase their link in the description but before you do that don't do it just yet I'm gonna still gonna show you another service that you might be interested in so theories are like just things you can pick with or mess around with so let's just go ahead and pick one I'm gonna go ahead and grab one of these right here I'll grab in I'll grab I'll grab this one right here it's on cert this and these are all designed by Elementor so right here you can simply just go ahead and just change this to something else you want so marketing and of course the app the options are all the same so you can put my composition wherever you want etc the view stacked or frame so it adds a little circle and then pencil you can say you know I want to be PayPal maybe this is gonna be PayPal and so on and so forth and then the styling right here you can choose spacing you can make it bigger you can add padding which we talked about remember padding is space okay so that's what padding is right there or you can even rotate it you know see how it's rotating right there and then right here we have border-radius which is basically adding a border to it as well so you see how the more border rays you add the more square it gets so I'm at a 10 and then it's kind of like a square and then again right here at entrance animation now my personal advice is don't use too much animation okay you can get really old really fast for now I'm gonna go ahead and click on add a new section and go to 3 and I'm just gonna you know I'm just gonna do my thing I'm just gonna add an icon box right here icon box and I'm just going to duplicate it two more times and click on X right here alright so let's say I made this section but I want a heading for words so over here we go to add a new section one click on a heading make this centered and put like our services right and for the style I might want to make this a little bit bigger so typography we can make this just a little bigger now if I'm going too fast don't worry about it remember you can always pause the video and go along with me but I'm just giving you an example so this would be like our services and by now you know how to change the color by going to this style text color and maybe black something like that right there okay so that is basically like our services again and right here we click on add a new section and you know you can basically add in whatever you want maybe three or something maybe add another three and just find a module that works for you so we can add an icon box a gallery a counter so for example we can add a counter right here which basically woops I missed it it's basically a number and right here it's basically very self-explanatory of what it does so you know ending number you want to end on 105 you can change all the settings right here you can add a separator by a space or a dot right here into this style you can change the text color and the title same thing right here you can change the color as well and maybe even add like whatever you want weight transformation line Heights line spacing see how the spacing gets bigger and then smaller and then the advanced same thing you can add entrance animation you can even add background but you know I would never use a background to this because that's really ugly you know you can always there are some cases where you might want to add a background for a specific one like that but you might want to add it to the entire row so again remember to edit the entire row you're going to select this one right here and then go to style and this is going to apply for everything so if I go to class it can go to color now we're doing the entire row so again remember this section right here controls the entire row and this one controls each specific module right there okay so here I go do X now that's a quick rundown of the page builder and let's go ahead and just add in a little bit more content and then we're going to work on our footer and our footer we have to go to the theme customizer and I'm also going to teach you all about plugins so here add a template and let's simply go ahead and go through all these right here all right add something like this right here now the reason why they looked at all black and white is because it's really up to you to kind of decide what you want as a background so right here under edit section we can go to style and under the background type remember I showed you how to add a video a gradient whatever you want you can add in right there so they basically left it open for you so you can kind of add whatever you want so here under image you can select something like this right here and then maybe it's saying you know what it's a little too bright I want to add an overlay to it so I'm gonna add a quick little overlay to it and then something like that and then maybe we can even change that to blue or something that would work too but right here click on this changes to something like whites right and then same thing right here style color white so you can use these blocks to make a website you know from scratch you don't have to be a good designer you don't have to do any that because Elementor provides you all with amazing blocks and templates and I'm gonna give you a resource with 500 amazing templates that are a little bit better than elementor's in just a bit so right here I'm gonna add one more to it I'm gonna say you know what I want to finish this off with something like a call to action on the bottom or something now there's so many of these you guys can go through these and just take a look at your yourself and just see there's a lot but I'm gonna say you know what's so right here I'm under the category I'm gonna say a call to action that's a much easier way so here let me answer this one and there you go and here we can change this to any text you wants again in this style you can change this to a specific color here you can change this to you know small medium large you can align it to the right senator etc under the style right here you can change the typography you can add a text shadow to it so maybe you want to like make it like blurry or you want to like make it like horizontal etc you can add that as well to the header styling as well so here you know of course you can change this to anything you think of etc so there's a lot of options that you can actually have to a lot of these that'll just really enhance the design and everything of it so you know once you kind of learn how to use the page builder it's everything's pretty simple it's it's pretty self-explanatory as well so this right here is not working too properly up there it is that's why it was using another text I was like where is it it's adding a text shadow to it so I was kind of like where is it going you know so it basically adds a text shadow so basically what it's doing is it's kind of like you know it's a it's a look it's a design so you can kind of see what they're what they're trying to accomplish here like this would be something for like the gym you know like never give up and you can add a text shadow to it and maybe just you know you know be customizable with it and stuff like that this would work pretty well so we've done this section right here we have a call to action now this doesn't look the best but I'm giving you the tools to basically create everything so now that we've done that let's go and create a footer section which is pretty important sorry here let's just say we're done with this you're gonna click on update the bottom and then right here under settings right here I'm sorry on the top I'm gonna go to exited dashboard and we can view our website right now so right here I'm gonna click on View on page and there you go everything is saved everything is live on the Internet's so everyone can see how our website looks now one more thing before we go on to the footer I want to mention mobile optimization mobile optimization is the most important part so I'm gonna click on purge SG cache and then click on edit with Elementor one more time and I'm just going to show you really quickly how to optimize your website for mobile devices which is extremely important because Google had a new algorithm and if your site is not optimized for mobile they will dear ank you so right here see on says responsive mode click on tablet so this is how your website looks like on a tablet does it look good does everything look fine do you want to change anything you want to change anything now's the time so here you're gonna click on it and then make any changes you want now when you make a change to this this is only applying to the tablet so for example I'm gonna say I want to make this just a little bit a little bit smaller for the tablet for our tablet users typography and then change this something like you know make it a little bit smaller and then click on update all right now again responsive mode and click on mobile so mobile optimization usually is required so usually when you're designing your website it's not gonna come out perfect it might come out a little weird and strange this looks pretty good but there is some things that we can change here our services that's a little bit too big for the phone I think we can make this a little bit smaller so style typography and then let's just produce the size for our phone users and click on update and these are all for the mobile and it's a great preview of it I mean looks like an iPhone an iPhone right here so all you need to do is just you know change that and you're all set and ready to go so now your site is fully mobile optimized so you don't have to worry about that what I'm a quick thing right here there is a little it's too close to the top right that doesn't look that good so if that ever happens to you right here there's a few ways you can do this you can add padding to the section or you can add padding to the margin it's going to produce the same results so right here under this blue section I'm click on that go to advanced and go to click on this right here because that would links it together I hate that now remember we talked about margin so just simply add didn't like some pixels you know maybe like 200 pixels or actually no we're gonna add in I'm sorry we're gonna click on this module right here this text module and go to advanced because I don't want to make a lot of space right there that won't look good so right here under the margin I'm gonna add maybe maybe 50 pixels 50 pixels and there you go and then again that's how it looks like on a phone congratulations you just learned how to optimize your website for mobile and right here same thing maybe you want to add in just a little bit of margin you know a little bit of space between that button right there so right here I'm gonna go to advanced and I want to have some bottom padding so here I'm gonna say you know it's I want some little bit more space just a little bit more you know just so it doesn't look so clump for our mobile users and now it looks perfect alright so congratulations we learn how to optimize it for mobile so here my code to exit to dashboard now this next section is very important so please don't skip it please keep watching in fact watch this all the way to the ends because I'm going to talk about a template service that will drastically help you with your website along with the Elementor pro version as well and what it can do for your websites so right here visit site and now we're gonna go back to our theme customizer remember the theme customizer remember how we're using that before so right here I'm gonna go to customize okay so it is goin alright so I'm gonna scroll down right here now I want to go to widgets right here and we have four widgets and this is for the theme so right here footer one add a widget I want to add maybe [Music] me widget you know about us you know so right here we can edit like about me about let's see is it's right here about me or about our company about me whatever you want to put then right here we can upload an image if you select the girl or whoever is for your company or even my website Potenza com that might be too big doe might be just a little too big now if it doesn't change right away don't worry about it so if you kind of like mess around with it you add a text there you go yeah text it appears sometimes I don't know why you know WordPress is the best but it's also kind of like glitchy sometimes but it's really not a big deal you would just press like a little button and everything's fixed so here you enter in your social icons and there they go so I'll click on publish now go back over here and footer area too maybe you want to add in a new another one right here so right here you have a Facebook like box now I want to talk about plugins just a bits maybe there's ones for like Instagram or some you want to use but this actually I believe it's a plugin that offers all these it gives you all these but you can get all these for free anyways but I'll talk more about that in just a bit so right here I'm gonna click on Facebook like box and I want to go to my Facebook fan page and if you guys are watching this go ahead and go ahead and like my like my page you know we're going to copy this oops there you go and I'm gonna go ahead and paste it right here and go to follow me and there you go so there are my friends and right here you can have the option to show a face you can show the stream you can change this the color scheme to light or dark etc and we'll click on publish go back over here footer area 3 so we have three sections right here or four sections maybe right here I want to add in something like you know you can add in social icons you know more if you want font size I would do the recommended and then down here you can kind of add these in right here this is of course if you want to add social icons to the you can maybe add in some text or something to kind of you know make it look better but that's just an example it'll follow us here and lastly let's do one more you know we can add in one more right here we'll add in something really simple you can add a Twitter feed as well you just enter in your Twitter information now on turn pages so these are basically all of our pages our pages and then about us our contact home et cetera okay so that is basically how we made our footer and again this goes on every single page so no matter where you go it's going to follow you so that's the great part it's gonna show on every page and have to worry about it there are some advanced methods to create custom advanced custom headers and footers but we're not gonna do that right now so here I'll actually want you all to just to kind of watch me watch what I do you don't have to follow me here this is just added practice if you guys don't want to see this section you guys can skip I'm just gonna basically create a really quick page and I'm just gonna go ahead and just show you all like basically how this works so right here let's just say this is like the about Us section and then right here I'm gonna say you're my advanced I'm gonna add some margin to the top and to the bottom maybe I want to add in a background image right here so over here I'm gonna say you know what's I want this kind of full width let's go ahead and stretch this section and then right here I'm gonna say you know what's I want to add any background image right here I'll simply add in this blue color right here and then maybe change this section to something like changes something to like white or I'm sorry the the text right here to something like white and just make it just a little bit bigger because it's kind of small so you put the ibadis right there then right here add a new section or even you know will go ahead and just simply add in a template right here I'll add in some icons here I'll just put in something like I'll put in this right here because I might use this for later now I'm not gonna use that next but I'm just gonna kind of show you what I'm gonna do so we have customer views but I don't want to add that right there so here I'm at another click templates maybe I want this for later this will be at my bottom part and then I'm gonna go ahead and add in one more a lot of the templates and then this will be like our we need images you know a good tip of advice is always add images and then content images than content you know mix them up because if you just have content everywhere it's gonna be really boring and really ugly so let's go ahead and add in something really quickly a lot in this right here okay and then maybe right here in the background here we're gonna go ahead and add in an image so classic image and then here a lot in a lot of this right here and a lot in an overlay because it's just not looking that good right we want to add in just a little bit of overlay there we go and right here we'll change this to black or even white why would work you know but we'll change is a black this text right here I'm just gonna go and delete it I don't want it and then I'm gonna take this and just drag it up right here maybe we should change that background color right here this one's not working good that doesn't look good you know we're gonna add it to add in like a year something there we go sorry here and then right here this is good and then right here you might want to add in an image again remember keep it like this text image text image text image if you look at most of the designers that's all they do is add text image text image because it works you know it's you don't want to have a bunch of empty content everywhere so this section right here I'm gonna drag it up and then we have this section right here and we can either drag this back into the image which we should that's a little weird alright we'll close it we'll add that one more time this right here will work perfect and take this and simply drag it in between and there you go so now right now we have a fully functional about Us page of course it's not the best-looking one but you know it works it works great now let's just give you a quick example of that now one more thing I want to show you before we go on to the next section is I want to show you how to do grid images great images are pretty popular and I just want to show you just because I don't want to leave it out of this tutorial so again it's a beautiful page already you know it's it's beautiful our header title isn't that great that's really ugly actually I probably not use that but lastly let me just show you one more thing and then we'll move on to the next section about plugins I want to talk about grid images so what I mean by grid images is right here at a new section and I'll add in three sections right here and right here I'm gonna add in an image another one well I didn't we'll just do this we'll duplicate it no I'm lazy you know I like I like to do everything the quick way now right here I'm gonna select this and I'm gonna go ahead and click on this one right here now these images are also for you in the description below so you can check this out now if you ever want to create a grid style image which maybe your client wants or maybe you've seen on the internet that looks really good so right here we have these three images now I don't want any space in between this you know I just want to have the images there right so over here we can go ahead and click on column right here and do no gap and then we can actually do full width and Trust this section there you go so now we have these three images like that and then we can take this maybe put it right there and then maybe even maybe even delete this or something I'm just giving you an example of how you can create great images you know you can add and then right here you can even duplicate the row you know you can have like more images if you want so I just wanted to basically create a quick page just to show you all how fast and easy it is we created an about Us page in literally a few minutes all right so let's go back to the tutorial really quickly so right here under plugins go to add new now we're gonna talk about plugins so what are plugins plugins are basically apps for your websites so for example right here click on popular this is a contact form this is Yoast in fact I highly recommend installing this I'll have a tutorial for you all in the description below of this video I highly recommend to install this plug-in this basically allows your website to get searched and index it by Google so for example right here if I go to google and type in Darrell Wilson you see all this right here all this contents all these pages right here this all this information this was all done with the Yoast SEO plugin so it basically displays your website on the search engines how you want this is a blue commerce I have a whole commerce tutorial there's so many plugins and these are all free so none of these are these are all free plugins and let's just say you're looking for something like maybe you're looking for something with Instagram right just type in Instagram and you you're gonna come across so many different plugins and it's up to you to decide which one you want to use so this one has 90,000 600,000 active installs these are good reviews maybe looking something looking for something like YouTube this right here you can bet your YouTube stuff your your YouTube gallery there's a bunch of different authors and developers that stand behind their products so just go ahead and do your own research on what you want there's so many plugins out there I can't even think of all of them you know I mean if you look at the bottom right here under popular if you go to the bottom right there it says 52,000 plugins like there's a plug-in for everything like literally if you have a problem this one right here helps for security this right here creates pricing tables and all these tables for a portfolio this right here will actually copy your website so you can have a backup this right here will show events like on your on your website it creates a little section redirect manager very good that means if your site has broken links it'll redirect it to a page with links and again there's a lot of plugins for Elementor so if I type in elemental right here there are a lot of add-ons so a pop-up box if you want to make people subscribe for a certain service essential add-ons etc so I'm just basically showing you the keys and you can kind of go it go to it from there alright so that is a quick rundown of plugins so right here is how you create your pages if someone comments on your stuff this is recumbents you're gonna show up your users now I'm gonna talk about the Elementor the options right here so right here we have settings so let's just go through some of these these generally you might not need a lot of these you can change in the actual page itself but there is something called a roll manager now this is actually pretty cool so let's say for example you have clients you know some of you might decide to have clients and honestly clients are a pain in the butt because what they do is they start messing around the website and they messed things up and they come back to you like hey can you fix this and you're like dude I just did this like don't mess with it so for example you can make you can assign your client as an editor and then say you know what's no access so that means they can look at the website they can log in on the bat behind but they can't make any changes to your website and ruin all of your work I as a developer I'm sorry designer I know that's that if you're a designer or developer who have worked for clients they're gonna do that and it happens to me all the time right here under tools you can actually you know we're dinner at your files we're place URLs a lot of this stuff is not needed this right here is let's say you update Elementor to a version and it kind of messes up your site a little bit you can always go back you can always reinstall back to the old version system info none of you will probably need any of this stuff right here this is for basically support tickets so they might say that you need to you know if there's something that you need you can check it out custom fonts you can add custom fonts right here but you need the pro version as well now before we talk about the pro version I'm going to talk about templates and I'm gonna give you additional service and then I'm going to talk about the pro version last so right here I'm gonna go to about us and let's just decorate this one page and then we'll talk a little bit about maybe some fiber and other stuff so right here edit page and I'm gonna quickly just show you templates you don't have to follow me here you can kind of just watch and hang out and grab a beer and just chill you know just chill so here under my header disable enable and then for the menu I'm sorry for the title I'm gonna disable that and right here edit with Elementor now we're here we can simply just add a template and there are tons of templates that you can use over here we can grab this one or this one a study page they have a lot of templates to help you out so for example this right here and I'm gonna quickly show you how to modify it just really quickly because I want to show you all the shape divider that was one amazing feature Elementor introduced that I really want to show you before we you know before we talk about anything else so I'm gonna give this section right here a background color just to give you an example again you have to follow me here I'm just giving you an example so right here if I scroll down we have shape divider now this is really cool so right here we can add certain shapes to it see that how we're adding all these really cool shapes so what you can do is basically maybe choose one color you know like choose like black and then right here you can also do the bottom right here maybe add zigzag or something you know and then here you can change the width and also the height of it as well you can also flip it and you can also invert it as well and it's just a style you know it's a it's a really cool style maybe right here you can you know keep doing you know keep going black or something so here maybe you can keep going black and then you can also add a shape divider above that shape dividers are probably the coolest thing ever but they are also the most dangerous thing because if you use this too much it's gonna make your site look really it's gonna be too much you know as a designer myself I know that this is a great feature but adding too much of anything can really just destroy your site you know it's like it's just it's too much and people are gonna say you know I don't know what all that is it's it's a lot and I'm gonna go ahead and click off you know but I'm just give you an example of how you can kind of decorate your site with the the the shape dividers because it's just amazing I mean this is technology that went into this page Weller was simply stunning and amazing so that is a template guys we basically you know we've basically made a template right here we've added it all in you can go ahead and just simply change anything you want so how to make a website you put welcome to my business and simply you know move it around you right here you can go ahead and maybe even delete this and you know you can basically you know do whatever you want here so if you can Center this instead and then right here you can center instead so it's just all about what you want to do for your websites so that is basically templates now there is also a link in the description to this next website and it is called Krakow block so we can go to jail Wilson calm - croc Oh block let's say pronounce it croc Oh block now this is a website that has tons of demos and it has tons of just amazing features for your website I highly recommend to get the service because you get a lot of demos but you actually get tons of pre-made sections now I'm actually going to show you all these seconds and I'm gonna give you a quick example of this website and how it can drastically help your website alright so right here I'm go to my appearance that you don't have to follow me here I'm just gonna give you a two minutes you know preview of what the service can do now I'm actually gonna install their theme called kava you can always switch through themes with Elementor the great part about Elementor is that they don't use shortcode so you can always switch the different themes if you guys are interested in which theme that i percy recommend you guys put my websites there's about six or seven but ocean WP is a great one you know right here in my plugins wizard now guys today it's not really about working harder it's really about working smarter so these are all of the demos that you get and these are great because this is gonna really speed up the process of making a website now imagine you have a client and your client wants a website that has to do with something like fitness well you can say okay cool I have a fitness template right here I'm gonna go to start install and then right here I'm gonna go to next so this right here is basically saying what plugins it recommends and everything and remember each plug-in has a different purpose so one plug-in might be for a special menu one plug-in might be for you know a pop-up or something like that but every plugin has its own style now today again it's not about working harder it's about working smarter so I highly recommend the service because I have clients or I've had people I watch my videos that have literally watched my videos and started their own full business now they're actually designing all their sites from scratch this service you can pick between like hundreds of sections so right here it says a pen demo content I'll replace I want to go ahead and replace it append means it's going to add it on top replace means it's going to erase everything it's going to basically add everything from scratch so right now it is basically importing our entire website for us I don't have to do a thing okay every is just automated I mean today there's so much services and technology out there to make your life a lot easier and to build a website from scratch today is crazy because there's thousands of designers out there that constantly make stuff like this and I mean for like 30 40 bucks like that's what I spent at Starbucks with like two people right you can get a system that'll give you hundreds now and also thousands of sections and layouts for your websites so it's almost done generating our full website for us so again just imagine your client asks you to build a whole gym website and you're thinking to yourself you know I'm starting out I'm not the best maybe I need a little bit of help that's where crackle box comes in again there is a link in the description there also might be a coupon code I think they were going to give me a coupon code for a discount for my viewers so make sure to use that coupon code if it is there again these companies we kind of give and take you know sometimes they give me a code sometimes they take it away but I think this company will give me a code so right here click on view your sites and voila there you go so we have a fully functional gym website in a matter of seconds and it's just incredible of the technology that goes into this you know right here we have our about Us page so you can see they fully design our about Us page for us and the designers on this website I can vouch for you know in fact I actually promote another theme they use called the bright theme and that to me was just like one of the best themes out there now let me show you one more thing if you're not impressed by this to say okay that's cool you got his templates what else you know but let me just quickly show you sorry here I go to Ed of the Elementor now I'm just gonna erase the entire website I'm gonna say you know what's that this is cool but it's just not working for me you know I don't want it you know all this stuff you got to go you know you're done you know you're fired so imagine your client says that you're saying you know I don't like it so right here we have magic button now this is available only with Krakow blocks now this is not my websites you know this is just someone I recommend because all the services they provide so here are all of the pages so you can kind of go through all of these pages right here to find now what's good for your clients and again most of these are the ones that I showed you before but let's just say for example you're looking for just a specific section like I need an about Us page well here you go you got about us pages right here and all you need to do is simply click on any of these and click on import so right here I'm gonna click on insert and it's going to import that entire layout for you let's take maybe like a few seconds maybe like 20 30 seconds and there you go so now you have this page right here it's beautiful it has a lot of animation and right here we have more stuff and there you go it's a very clean layout I mean it's very modern it looks great and again you can modify all this so right here you can say Oh welcome to my web design business how do you spell it a design visit there you go okay there we go and you know here you can just like you know swap the image to somewhere else you want it you know you can take this and just drag and drop it's whatever you want to do you know so I don't want you to walk away without this resource you know why would you start trying to make websites from scratch when you have a beautiful resource like this to just help you make anything you want again right here magic button let's say you want to add specific sections now I showed you the sections with Elementor croco blocks adds a lot more I mean look at this there is just too much information here that it's just incredible you know so just for example you needed a testimonial section right here you have a beautiful testimonial section and this is something for like people who are you know want to add you know like a cute style fashion website and you as guys too don't think that you're not gonna use this because you're gonna come across female clients that want you know a salon website and here you can just add in like a background color or something else you know whatever you want to add you can go ahead and add it right there you can fully customize every single one of these sections so I just want to go ahead and show you all those sections as well and I want to introduce you all to croco blocks again the link is in description below I highly recommend it because the service all the stuff they offer is just ink it's incredible you know you you're getting basically a a machine that just pumps out templates for you right now one more thing I want to show you all is a great place to get a logo so right here I'm gonna go to Darrell little Singh Kham - fiber now I personally use fiber because you're gonna need a logo and these guys are probably some of the best designers for logos and they're really really cheap you know that's like five bucks so right here a logo and if your clients you for a logo in fact I'm gonna show you logos I actually purchased so right here there's this guy right here you can use the same designer and right here I basically said I need I need the the website on these now these are some logos that he made for me you know watch these cost me he's cost me $5 no so they're great you know the only thing that I forgot to add was just the domain name maybe is public I wasn't clear the instructions so that is basically a great place to get a logo you can just type in logo right here and simply find someone that will do it for $5 dudes all do these guys that are like $100 that's crazy right here you can like do the price range maybe even ten bucks and then there you go all these people do logo for five dollars right here five dollars ten dollars okay so that is basically where you can get a logo and remember where you can enter it you can go ahead and go back over here I'm gonna go back right over here and I'm gonna go to customize now I'm gonna show you where to put that logo we talked about that remember all right so I believe is under header and then logo and then right here you're just gonna simply take the logo and then just pop it in right there I'm gonna say okay I want to put it right there crop the image and there you go we have our logo right there so the amount of work you have to do is virtually not much you know but in the beginning this is a tutorial I told you this was gonna be really simple I mean is this simple I mean is this not the easiest if anyone can build a website today you know and it's just the fact that you sitting down and learning how to use it so I've basically showed you how to make a full website from scratch you can have fun with you know elemental or you can have fun with croco block you can go to fiverr.com and also there's free imagery sore is for you in the description below okay so in this section right here I'm going to show you how to create a contact form where people can fill out their contact information and it'll go directly to your email I'm also going to show you how to create a blog and also add in some really nice icons right here such as a Facebook like box or even Google Adsense you can start generating money from your websites so let's go ahead and first decorate this contact page so I'm gonna go to edit page now for those of you who don't know how to get to your pages right here you can go to all pages in fact you can even create a new page so here I'll just I'll make a new one so add new and I'll do the contact page and click on publish so now I'm just creating a contact page now I'm gonna scroll down and just like we had before I want to make these settings the same so hundred percent full width and I want to go to the header and disable that top bar enable the header and then for the title I don't want it to show that's it so right here I'm go to update and then right here edit with Elementor now by now you know how to use the page builder you know you're getting familiar with it so I'm just gonna go ahead and add a template but I'm also going to show you how you can embed the contact form as well so here I'm gonna do contact and I'm gonna select this one right here alright so this is the contact us page now I want to sort of familiarize what these modules are so basically now that you've used the or created the at home and about Us page I kind of want you to understand what these are so this right here is a text a divider a text and basically this is a background image for this section this right here is three icon boxes so we have an icon box and icon box an icon box and they basically just added in some space right here now below that they actually added in a header text so they added a header text and they aligned it you see that so they did the same thing for these three right here and they added in some padding and they also added in a border to two of these modules it could have been this one it could have been this one either way it would have produced the same result you know for this one they could have added the border right there for this one they could have added it on both sides etc this next section right here this is the Google Maps widget right here so over here you can see the Google Maps you can just insert it and you can always change the address you can change anything you want right here so by clicking on it you can just put in like Hollywood California or whatever address you want you can change the height of its you can change the zoom level etc so there's it's fully customized you know you can put your business right there and and whatever else you know you want to put on there prevent scroll that's actually a really good option because if people scroll down its gonna start scrolling the map and it might actually um it might get really annoying for for people who are trying to navigate your website this section right here this is just a simple social icons widget right here so icons right here and then they just added a background color to it so I'm kind of hoping you are understanding how this page builder works and like what widgets you can start to recognize when you look at pages but so really quickly right here let's go ahead and update this page now the pro version has the contact form but we can actually just get a free plugin that will make it so we don't have to get the pro version if you don't want to so right here under plugins just go to add new and then right here you can go to popular now you can also do your own research by just typing in contact form there are so many plugins for virtually everything you know right here 1 million active installs right here when I mean active installs there's this one called era forms etc there's just tons of contact form so if we're gonna use the most popular one well they're all popular you know contact form 7 W forms and ninja forms are also really good but I'm just going to go ahead and use contact form 7 because it's just it's quick and simple so here click on activate now once you do that you get on this left little icon right here this little thing pops up so right here click on contact forms now you see the shortcode right here you need to copy and paste this but maybe you want to edit it now personally I think their default is very good but let's just say for example you you know you want to add a little bit more so right here someone has to enter their their name their email their subject and the message now I'm just gonna go ahead and copy and paste this and then we'll edit this in just a second so let's go ahead and go back to our contact page sorry here and imma go to edit page oh I forgot to update that that one more time oh you know what that was actually a different page I didn't forget it was this one right here okay so I'm gonna go to click on view so this is the page so basically right now I want to click on edit with Elementor and I want to add in a shortcode now there's two ways to do this it both produces the same result so it really doesn't matter how you do it let's just say I want to put in a contact form above the map so what I'm going to do is I'm gonna go to my text editor and simply just drop that right there now I'm gonna get rid of all this now right here under text click on text and then right here just simply paste this right here and there you go you can't see it right now but when I update it and then we preview the page you're going to see a contact form now show up didn't show up right there um maybe we have to actually click on let me see here we have to actually maybe exit the page up there it goes now okay yeah I was just being a little weird so I'm going to exit the page and just show you all click on View page now and there you go now it's a little bit too big right there so maybe you want to go ahead and make in something like uh put it in a module you know to kind of force it in a little smaller area so let me just give you an example of something so I'm saying yeah that's too big maybe we can even put inside this right here so I'm going to say you know it's I'm gonna go ahead and close all this but I want to add in you know the text editor now we can also use a short code so it's typing in show code right here I can just take that and paste it in there and again I can just paste that right there and apply and then there you go we have a contact form and maybe right here you can add in a header so for example right here you can maybe duplicate this and just drag this up here you know like on it and then add like a contact us now of course this is not the best example but I'm just showing you that this is you know how you can add a contact form there's you know there's virtually you know any style you can add this in there's tons of different styles or you can use the pro version if you decide to upgrade but this will work just fine okay so I'm gonna click on update but maybe you want to add in a phone number or something right so let's go back over here to exit to dashboard go to contacts and contact forms now right here and click on edit and then right here I'm gonna click on or I'm gonna type enter and then right here we have telephone number so right here I must say you know what I want telephone required now right here it says label I want to start this again so right here I'm gonna go ahead and put in label right there put in a little space and then type in telephone we want them to let them know that this is for telephone right and then right here we're gonna close it now this right here is just for contact form seven other contact forms don't require you to do this but just for this specific form they do but this basically will you know do it does its job now also for the additional settings you can add some CSS but for those of you who are new you probably won't know what that is the message is right here so once someone does something with the form you can let them know you know what it is right here like oh the form of seven congrats and then for male you're gonna put the email address that you want sent to right there okay and then they have a little template right here and you can kind of mess around with this and you know have fun so let's go ahead and go back over to our contact page all right so I'm gonna go ahead and refresh this so now we have the your name required your email required subject and then we have our new telephone right there okay so you can kind of you know mess around with these settings with the contact form you can style it however you want you can kind of you know play around with it and see what works out for you but that is basically how you can add a contact form to your websites so I also want to talk about linking so when you build a website you want to sort of guide your audience to basically make them go to the pages that you want them to go to so I have this landing page right here and if I click on this button nothing happens because we don't have them linked to any other page so right here I have my contact page now I'm gonna go ahead and copy and paste this URL go back over here and I'm gonna click on edit with Elementor now I want people that actually visit this page to go directly to my contact page now this is just an example you can take them to your pricing page you can take them to any page you want a blog page etc so I have this button right here and right here I'm gonna put paste and then for my text and I put contact us and then click on update okay so now basically I'm saying I want people to go to my contact form and then click on this button so let's go ahead and preview these changes so right here we have two contact us and if I click on it it will take them directly to our Contact Us page so remember when you're creating pages you want to use the buttons to sort of direct your audience on where to go and that is what conversions are all about to make sure that they are basically reaching the pages that you want them to reach ok so that is a quick little tutorial about linking so I've shown you how to make a contact form but now let's talk about how to make a blog page so let's go ahead and first create a blog page let's go and make a page for our blog so here under pages I'm gonna go to add new and I'm going to type in blog and I'm click on publish ok so we made a blog but we want to basically make some posts right so let's go ahead and do that right here under posts I'll go to add new and then talk about something you know like top 10 best things to do for summer and then right here with icon publish and now we can also edit this with Elementor or you can even use the default editor you know you can just type it whatever you want right there but I recommend using Elementor you know it's a much better tool than the default editor so here I'm gonna say alright so I want to add a template and type in posts and maybe add in this one right here now they also have posts for Krakow block I believe so make sure to check that out so this is our post right here now we click on update so when someone comes to your website you know they're going to this right here you know and it's a beautiful it's a beautiful blog post you know they did a great job with it and right here they can you know share it to any website they want so right here I'm gonna go to to back to the dashboard and a view the post alright so there it is top 10 things to do for summer now if you want to disable this blog remember how to do that so we're gonna go to our settings on the blog page and then we can do that just like we did before those other pages remember so same thing so not offend you how to do that let's go ahead and assign this to our blog because right now the blood the post don't go anywhere beside the blog page but we need to tell the theme where to actually put it so right here I'm gonna go to menus and I'm just going to assign the blog page okay so now that they can go to our blog alright and one more thing I want to go to customize and this is a very important part just like you know how we assigned the homepage as a home page you need to assign the blog page as our blog page so don't forget to do this step where it's not gonna work so over here we're gonna go to home page settings post page and select blog and click on publish alright now also one more thing before I exit out of the customizer there are customizations that you can add to the to the blog page itself you know that's why ocean double-ups a great resource because it has a lot of customization so over here on our blog under single posts you can decorate this to ever you want you know you can hide the featured image you can hide the title the meta you know you can put the featured image you can change the layout right here also for the blog entries as well you can change all of the cells whatever you want right here and again by clicking on the little thing it is basically just disables that section so that's basically what those eyes mean if you you know close it that means it's not going to show but I didn't show you how to add a featured image to it so let's go ahead and add a featured image so here under the blog right here I'm gonna click on this our blog post and edit post now importunately blog posts need pictures you know that's everything so scrolling down right here set the featured image I to add in a featured image that someone's going to see when they click on our posts so my mine was talking about best places to go for summer right so I'm gonna put this image right here and then click on update and now I'll view the post or actually I'll click on the blog the blog section so now you can see we have this image and if someone clicks on it it will take them to our blog page now remember right here you can choose to hide the featured image inside of the theme customizer remember how it said the featured image and then there's I so you can close that if you want so when someone clicks on it maybe you don't want to show this again so you can go ahead and change that in the theme customizer as well you can also change the font you can change the color whatever you want in the theme customizer and then right here it's recommending your other posts and then people can comment right here and you know you can respond to them by going right here this little thing right here so these are people who comment and you can like approve trash or reply to them so that's what this is for you can also get to there by the comments section right there now one last thing before we talk about the pro version I'm gonna show you how you can start adding in widgets so you might have heard widgets before and widgets and plugins are virtually the same thing so whenever you can solve a plug-in you will basically see them appear on the widgets section so let me see if I can find one so right here I'll just do like social icons now we already have social icons but I'm just showing you I'm just giving you an example I'm gonna go ahead and solve this one okay and then of course every you know every plugin has their own thing so you know they all have like their own little page or whatever they want to sell you or anything but you can always use the free version so over here under appearance I'm gonna go to widgets now you see right here size is white right sidebar you see that I'm gonna go ahead and say I want to get rid of all this stuff you know we don't need all this stuff what is all this junk it's all junk right here this is all junk so maybe you want to add in your Instagram or you can add in your Facebook like box and then remember here how we added in Sderot Wilson com so who's under yeah under Facebook and then I'm gonna go to my fan page right here make sure to add me in the Facebook group so you guys will see me in there participating in facebook groups gonna copy Nats and right here I'll just put like follow me just like we added in the widgets for the footer this is the same exact thing social icons as well maybe either is that one plug-in that we have in CES he no ultimate social there it is of the ultimate social media icon so remember whenever you install a plug-in they will have widgets for you as well no I've never even used this plug-in I don't even know if it works or not but I'm just gonna take the gamble and add it to the right sidebar so here it's gonna go ahead and take this and drag and drop it I don't know if it works or not so we're all gonna find out right now and then right here we have an Instagram one you can add an Instagram you can add about me you can add all sorts of stuff just like you add the widgets for the footer this is the same exact thing so maybe you want a Twitter feed calendar I'll just go and put a calendar in just just our calendar and once you learn how to use Google Adsense in fact I have a tutorial on that so all you're gonna do is just grab a text widget and then you're going to add your code on this right here and that will basically enable you to start making money with Google Adsense now I have a free tutorial on it's in the description below it doesn't cost anything to join Google Adsense you can join it for free so why not you know just get it done you know just learn more you know develop learn more get better you know there's no reason why you've why you shouldn't learn this stuff it's free so I'm gonna go ahead and go to our our post now so let's go to our post and then there you go so we have our icon we have our social icons and those are beautiful those are really nice actually I should probably use that more we have our calendar and you can add all sorts of stuff right here so the sky's the limit you know it really is so we've created a contact form successfully oh not this one the other page so I don't know why I made two you know I'm gonna go and change that right now so over here under pages if you ever want to delete a page just click on trash alright and there you go now this contact I want to add this to my menu so I hope you remember how to do this remember appearance menus and this one isn't is invalid because we deleted it and then the contact page right there and save menu okay now see this thing is giving off that plugin is giving us all sort of weird notifications they're just trying to like upsell you and stuff you know like stuff so weird and right here at the contact page and there you go so we have a contact form etc now one plug-in I do recommend that you install is either Yoast plugin and again I have a free tutorial on that as well so over here under plugins I've already added it in so there is something called Yoast and what Yoast does it basically indexes your website for search engines like Google Yahoo and being you know when you search for something on the Internet it basically displays your website on the search engine this exactly what Yoast does it's free I highly recommend it it's a free plugin it creates like all it does all like the technical SEO stuff it makes it super easy and I have acetal on that too the description below you can see it has over 1 million active installs so there are a ton of people using this plug-in so be sure to check that out ok so let's go ahead now and talk about the pro features I think I've covered the contact section the blog section virtually everything that you will need to start a fundamentally awesome website ok so let's go ahead and talk about some of these pro features ok in this last section we're gonna talk about Elementor pro version now while I was showing you this tutorial you saw there are a lot of Pro features that you get with Elementor now alimentar alone is free you do not have to get this however if you want to add a little bit more to your websites you can upgrade to the pro version where you get support you get a lot of other Pro elements and you get a lot of other templates so this right here is a template that I actually use with the Elementor pro version it's beautiful the designs of my monitor are very very good so right here I'm gonna click on updates and I'm gonna say you know what I'm gonna go ahead and go back actually no I can do I can just close all this and I'm just going to basically show you some of the templates that you receive with elements or pro now before we actually solve them so right here where you see the pro section that is the templates where you get the pro version so these are all the templates that you get and again right here under block you get a lot of other blocks as well with the Elementor Pro as well so you can kind of scroll down right here and whenever one you want you can see that there little probe button right there but you get more than that so you don't just get the you know the header and all the other stuff you get a tons of other stuff so let's just say you want to add in some modules now they have Pro elements so posts like this is right here is for blog you can add slides so if you want to add a slider you can add a slider right here and then you can kind of just edit it right here you can change the color around the content the styles are here but like welcome to our website and then of course you can go ahead and go through these options of style like you know content with padding many of these are very similar you guys are going to see that a lot of these modules are very similar you can always make this full width you can increase the height as well there's a lot you can do with the elements of the pro version right here out of new section maybe you can add in to something right here I'll click on this right here because I'll take us back to our pro elements and this right here is like a menu you can add like a specific menu anywhere you can add in like a form so right here you have a contact form you know you can kind of go through it again you can kind of take a look at it and then you know put whatever you wants a change whatever you want you can even add in another item right there maybe for like a phone number right here see that we have a good item for you can add something for like a phone number and then or we can label it as our phone number sorry there we go and you know you can you know mix and match them you can just like drag and drop it to wherever you want so there is a lot of elements that you get with the pro version that you do not get with the just the basic free version like this right here is a box and when summer is over it it has that cool little animation and right here there are a lot of other elements like the animated headline this is also a really cool one so it basically creates that animation right there so you see how it was like that little circle you know there's a lot of other you know styles that you can do like animation underline double underline so you see those animations how it's doing that maybe that can be underlining page in fact the underlying is used mostly on the on the landing pages so right here we can add a new section and I'm sure right now you guys get the idea like a countdown of sharing buttons sorry here you can share it and these pro elements there are some embedded on the templates so it gives you a better idea of how to use them like this right here is not a good example you know don't ever make a website like this but I'm just kidding you you know the basic understanding maybe you can add in some text or something and then you know make it look a little bit better right here you can add on a Facebook page a facebook comments Facebook you know a like box or media carousel a call to action maybe you can add a call to action right there so right here you have a you know some text a call to action and then an image so that'll make it a little bit more easier you know instead of actually doing a tags to text you know it basically is trying to cut down the amount of work you have to do and right here priceless now this is great for restaurants I'm gonna show you this one this one's good so priceless right here I'm gonna take this and there you go now you have a menu so if you have a website that people are buying stuff on like a restaurant you can put your menu right there of course you can decorate it make it look a little bit better than that but I'm just giving you a basic understanding of what these modules are so again those are some of the pro elements you guys can you know if you guys want to buy it there's a link in description to Elementor and you can buy it on their websites it's up to you I think it's great to have it you know if you especially if you're in the web business and you want to use it more I would recommend it's also one important thing is custom CSS so you are allowed to use custom CSS on your websites and also you have global features as well global features I don't use it too much but it's basically saying it's basically like a template that it will apply everywhere on your web site so instead of having to do like for example this section right here you can add a global section where it will add on every single page kind of like the widget or the footer and it's a it's a much faster way to get things done now there are some other things I want to show you that you actually get with the pro version so you get templates you get sections you get a lot of Pro elements you get the advanced custom CSS so you can now add CSS to your webs but it's one very important one they don't want to lead out is the the custom header and footer so I'm gonna go ahead and fleet this right here now this is only available with elements or pro and this was like their ace in the hole so right here under templates I'm gonna go to adding new templates right here I'm gonna go to header maybe you want to create a custom header and footer for each page now were we talking about that earlier so here I'm gonna do like custom header and create this template alright and maybe I want to choose something that looks like this so these are all pro elements so these are all really nicely well designed here I'm gonna say I want this one right here alright so I basically made a header now this header right here we're gonna go ahead apply it on our website now I'm gonna click on publish now this right here you're saying condition so when do you want this to show up well I'm gonna say I want this on the entire websites or you can say I want it on a particular site so maybe I want it on certain posts or pages or whatever you want to add a category so right here all pages and then I think I have the about us on this section yeah so maybe you want a header for just the about us so that means this is going to display only on the header or you can say you know what I want to go ahead and exclude that I don't want it to be there or you can add another one saying excludes on archives so on old stuff you know like you know categories or you know anything old from from your posts you just say I don't want it there you can add another condition saying you know maybe I want it's on this other page right here so singular I want it on the 404 page something like that something to get you an idea of it so I'm saying right here I want this on the entire website and click on publish all right now right here it says your header is live let's take a look sorry here have a look now right here you noticed it actually disabled our header so the great part about this feature is that it will actually disabled your current theme header and it will replace it so you don't have to worry about it stacking so it's kind of really save you a lot of time you know so this is basically what you're gonna find out on your website so let's go ahead and take a look at our website really quick now you guys can see right here we have the menu right here so remember it's going to replace it's going to basically replace the theme and it's going to put its menu on there as well so there's a lot of ways you can manipulate it to look really really good so if you are interested in that it's an amazing piece of technology they've added that will start disabling themes maybe you don't like the the the header options for WP ocean our ocean WP or maybe you don't like the options for kava you want to create your own you can do that with the pro version and this will actually disable your theme header and they'll replace it with whatever you want and you can do the same thing for the footer so maybe you don't want all this stuff right here you can say you know what's I want to create a custom footer I'm gonna go ahead and show you that one more time so right here Elementor my templates now I'm gonna go ahead and add a new and now I want to do a footer custom footer now you don't have to follow me here of course I'm just showing you resources to help you decide if this is something that you would want to be interested in I'm not really trying to sell you anything I'm just kind of showing you what this is you know cuz it wouldn't be fair if I left all this out because this is a huge part of what elementor's done so right here I'm answered that oh it's right there okay so we have our custom header and then our custom footer now right here I'm gonna go to publish and then I'm out of condition and I want this on the entire site that's it alright so let's go ahead and go back to our websites alright so we have our header right there and now we have our footer and have you noticed our footer is gone so this replaced our footer so that's basically what this option is so it's pretty incredible I mean right here this is all what the page builder so this is not what's a theme so it's basically manipulating the theme and kind of stripping it away and adding the elements you know the Elementor builder on it as well so that is basically a nutshell no I really hope by now that you guys know how to build your own website from scratch you know if you need anything please feel free to comment on on the video also let me know if you you know if you have a question you can also go to my web sites I have tons of resources Elementor is a great help also there are Facebook groups for Elementor as well that will you know help you you know develop your skills because when you first start you might not be the best you know I am personally not the best I'm I do my best but I'm not the best designer you know in fact a lot of these templates I've actually used from other from other websites as well so I hope that's this tutorial is really helpful for you I sincerely wish you the best I really hope that you got a lot about this tutorial because it's really inspiring to me when people walk away from these tutorials with a business and it's it's the most gratifying feeling I've ever felt I know like showing it tutorial on YouTube and someone can actually watch this and make a business but there's so many different resources to go to people don't know where to go and I'm like this is it like cuz hizzy this is why I got like you know 70,000 subs you know people really truly watch my stuff create a business and then you know support their family so again I hope this was helpful my name is Darrell Wilson and again please leave me a comment below and let me know how this all worked out for you okay so thanks again and I will see you all soon and make sure to subscribe see you later

Channel: Darrel Wilson

Views: 510,939

Rating: 4.8623066 out of 5

Keywords: Create a website, build a website, Create a WordPress Website, WordPress website, WordPress tutorial, WordPress for beginners, make a website, wordpress tutorials, darrel wilson, elementor tutorial, elementor page builder, elementor, how to make a wordpress website, how to make a website 2019

Id: L7r_-FaJNV4

Length: 99min 2sec (5942 seconds)

Published: Wed May 30 2018