How To Make A Wordpress Website 2019

hey what's up guys my name is Darrell and in this video I'm going to show you how to make this beautiful WordPress website step by step now the great part about this tutorial is that you don't need to have any sort of experience or any knowledge of coding whatsoever because everything in this tutorial is going to be drag and drop now if you're a small business owner looking to make a website for your business or just the average person looking to learn to make a website for the very first time then this tutorial is for you I'm going to give you all a quick tour of this website and show you how this page builder works so this right here at our current landing page let's say you want to go ahead and just change the title of your website with something like your business now we can also change the position of our text we can change the color we can change the font you can be as customizable as you want with your websites so in this tutorial I'm going to show you how you can do that now also for those of you who like those very beautiful video backgrounds I'm going to show you where you can get free video backgrounds for your websites you can incorporate this on your own websites and also a really cool feature is the gradient effect if you want to have a beautiful great effect landing page in this tutorial I'm going to show you how you can do that it's actually really simple and everything is visual so you can always see what you're doing so for example right here my second color want to do it to something like a burgundy color and then I want to go ahead and make another change now I want to change the angle of it and we can also either focus our location on one color or the other color or both so in this tutorial I'm going to show you how you can do that now let's go ahead and check out the rest of the website so the first thing we're going to be doing is designing our homepage I'm going to show you how you can add an image to your background right here along with putting text and I'm also going to show you how you can add in buttons to your website and these buttons can link anywhere on your website so for instance you click on my contact button right here it's going to take you to a Contact Us page and I'm going to show you how to design and create this beautiful Contact Us section right here so going back to our home page I'm going to show you all how to add in a menu to your website along with a logo maybe you guys don't have a logo don't worry about it in this tutorial I'm gonna show you where you can get a logo and then we're going to create this sexy right here and making changes to these sections are very simple it's just a matter of simply clicking on it and changing it to whatever you like so we can put something like we are amazing or we are cool and of course all the changes right here are live so after we create this section we're going to go ahead and create this section right here with our blurbs and you can change you to any color you can change these to any style any fonts or any position and then right here I'm going to show you how you can add in these images right here and if you notice right here we have this unique style and great effect so I'm gonna show you how you can incorporate this on your website and you can totally drag and drop those images so right here for example let's say you want to go and have two rows of this so we can go ahead and just click on the duplicate row and simply go ahead and drag this over here and maybe drag this over here so it's that simple to make a website so after that I'm going to show you all how to incorporate this parallax section right here and then right here we have a section with text with a simple call to action you have an image we have the split screen effect so I'm gonna show you how you can do that on your own website and then we have it again right here where you have some text and a simple call to action again with a split screen effect and then right here we have our testimonial section and you can put any images you would like right here and people can go ahead and scroll through this and take a look at them and lastly we have our footer so right here we have our menu section we have an Instagram so you have an Instagram this will automatically sync up with your website so whenever you make a picture on Instagram it will show up right here on your website and right here we have our social media icons so these will all link to your your various social media platforms so right here we have facebook we have Twitter and Instagram and Pinterest and then also we have this little section right here like here our story and here you can go ahead and talk about your business or your website so yeah that's how we got started or this is what we do so it's going up over here and the next section we're going to do is the about Us page so I'm going to show you how you can create your own about Us page and right here you can see we have some text with a call-to-action button right here we have these bar counters right here so I'll show you how you can design these you can change it to any color any font any style you would like and again right here we're sit with our color so I'm gonna show you how you can add these number counters right here and again right here we have the parallax effect with some number counters so we have websites completed customers cups of coffee of course you can change this to anything that you would like and right here we have some more icons to show more decor to the website and right here you can introduce your team so I'm going to show you how you can introduce your team with this grid style image effect right here so we have meet the team you can enter some text and then right here you can go ahead and talk about your team members and then right here we have a testimonial section and again we have our footer now also one more thing that right here on the bottom right if I click on this it will bring me to the top of the website every single time now we also have a unique Contact Us page that I've already showed you and this will actually go straight to your email so if someone messages you with a question they can go ahead and put their name their email their message and they can go ahead and send a message and it will go directly to your inbox now also for those of you who want to create a blog I'm going to show you how you can incorporate a blog as well on your website another really cool amazing feature about this blog is that we can actually go ahead and change these waves right here so this page weather has something called a shape divider and it's really cool and it's really fun so for example right here let's say you want to go ahead and change the waves right here so on the bottom page right here you can change it to anything that you would like and you can change it to like a big zag you can change them to like a tilt you can change them to all sorts of really cool stuff and then you can go ahead and might change the height of it so you want to add these to your website now it's very simple to do and then again we can just go ahead and change the color to anything that we'd like right here and it's going down here we have our blog section and going down here we have the shape divider as well so it's a kind of cool look right here so I just basically put in clouds right here on the bottom so let's go ahead and go to our blog section now so I'll click on this blog and our blog is going to look so amazing and so professional so this is what your blog post will look like and you guys can see it just looks beautiful it looks amazing it looks really professional so in this tutorial I'm going to show you how you can create this blog now this was actually a layout and you will actually get this for free in this tutorial so it's not going to be like you have to design it for scratch law this is going to be already done for you and of course lastly I want to talk about the premade layouts so later on this tutorial I want to be talking about how you can actually just get a design from someone else upload it and everything will be done on your website so it's really hard to design a website by yourself but once you learn how to use the page builder and then from there you can go ahead and you know use some of these layouts are going to be free layouts given to you in this tutorial that will really help you out with designing your websites okay I'm going to go ahead and scroll up so if you guys want to make a beautiful website that's very mobile responsive super SEO friendly keep watching because in this tutorial I'm going to show you how to do it step-by-step so the first thing we're going to do is get our domain and hosting and my link Aleksey provides you all a 60% discount off your hosting after that we are going to install WordPress after that we are going to install a wordpress theme and lastly we are going to create the most amazing website ever now there is a link in the description of this video it will take you to a website called psych round and we're about to a page that looks just like this right here now when you get to this website all you have to do is click on sign up okay so we have three plants so we have the start up we have the grow big and the go geek now I recommend the grow big because with the grow big option you get unlimited websites rather than just a single website that's a pretty big difference and you will also receive this sixty percent discount off your hosting so you get to this page all you got to do is go to order now so go ahead and type in your new website name so I'm going to do my famous one I love kylo Ren and go to procede alright it's available cool if your domain is not available it's going to give you like an errors and hey you know it's not available go ahead and pick something else so right here going to put in your email and then right here you can put in your password confirm your password again you're going to go ahead and put in your first name your last name and you know you can fill out your company and your all this information scrolling down here go ahead and give them your card number and your social security number I'm just kidding you do not give them your social just your credit card number and then right here you can help you know put your name etc now for this information right here the period you know I recommend doing just the 12 months because of 12 months remember you always get a 30 day money back so let's just say for example this tutorial sucks you're like you know what that did not work out for me at least you have the confidence of knowing that you get a 30 day money back guarantee so I would recommend a 12 months now for the extra services I actually do kind of recommend these on other tutorials I have not but I actually were MEC amend the domain privacy and the psych round site scanner is actually a pretty cool option for $20 a year for somebody to check your website daily notify you if it's ever been hacked I would recommend that so now the domain privacy is basically hiding your personal information if somebody tries to search you up so if you have this checked they will not be able to search you however to the unchecked it will be public to the Internet so I'm going to check on both of those and after you pull out all this information right here you can always go to pay now now I actually have an account these guys because they've actually performed better than eight other hosting companies that I had a video for so these guys are probably your best option as far as hosting because I've actually tested them and they came out first and almost every single test pretty incredible pretty pretty incredible so right here at my go to sign in and you guys know about to a page that looks just like this right here so congratulations you guys made this far you probably know so you know binding domain but as of right now you have a domain so you have like your website which is really really cool so you've brought your page looks just like this right here now we get to this page all you got to do is go to my accounts so now that we've actually have our domain we're going to install WordPress which is basically what we use to design our website it's like the bread and butter of everything it kind of creates everything for us so right here I'm gonna go to the go to cPanel right here and it's going to say are you sure you're just going to just click on proceed you'll never look at what they there's no security warning just press okay yeah just do that you know so anyways you get to this page right here now right off the back you guys can already see we have a WordPress right here so go ahead click on WordPress okay and guys also remember if you ever have questions if something doesn't work or something happens they have a support team and these guys are really cool you can call them 24 hours a day and they're super helpful so don't feel like you're like oh my gosh I I messed up and you know this tutorials it does no they have a whole support team and they have free live chat I mean they always there to help you and back you up so it's really really cool now over here I'm gonna go to install now and we're first guys is actually probably now the most popular platform on the internet you know besides PHP because you don't have to have any knowledge of coding or any that stuff it's just so amazing what WordPress can do and the invention it's it's incredible so right here I'm gonna click on this right here and go ahead and find your domain now you should probably only have one domain if there's 80 of them then you're probably I don't know but there should only be one right here now right here make sure there is nothing there okay make sure there is nothing here okay we're also going to install your website - whatever you put here which is not what you want so I'm going to give your site a name so we're here going to put the Darrell Wilson and then WordPress tutorials for starters and right here go ahead and put your admin user name and remember guys you can change this at any time so don't feel like you're locked in like it's some sort of contract you know you can change us any time you want so I'm going to put the paddywhacks that's my dog so she's the boss you know paddywhack and then my password I'm just going to go ahead and just copy this so you know one time I actually left this up and someone logged in my website and delete everything so yeah so make sure guys you know you always change your password and make sure it's always confidential okay now right here I'm going to put my email address feel free to email me anytime and then right here it's gonna say - steam don't worry about that right here where it says install also for language you guys speak different languages yeah just going to select one of them English is generally standard but you know go ahead and put whatever you want so under theme to install we don't need to put any because we're going to install another theme that I'm going to recommend and then right here click on install alright it says like three to four minutes but I got to be honest it's probably to be like 10 seconds they always say like three to five yeah see that was not even like a minute that was probably a 101 percent well that's probably less than like 30 seconds all right so right here we have your administrative URL and this is basically what you do to actually log in on your websites so go ahead a click on this now guys if this takes you to a page where it looks very bizarre and it's not correct go ahead and contact psych round because sometimes WordPress takes time to propagate sometimes it could be an hour sometimes it can be instant so I'm not going to be a few hours but generally it's instant but there have been rare cases where you click on it and it takes you to like a random like page and like there's nothing there but you should route to a page that looks just like this right here so congratulations guys you guys have successfully installed the WordPress I'm very proud of you you guys are doing amazing right now and if you guys want to look at your websites and just see how it is is kind of check it out you go up here to visit site and there you go now this is using a different theme it's called like I think it's calling 27 or 26 I don't know I don't know they make a lot of WordPress themes I try to I try my best to keep up with it but yeah it just doesn't work out so over here under dashboard now let's go ahead and look at our list right here so we got our domain and hosting done congratulations we've installed WordPress done congratulations now we are actually going to install our WordPress theme so before we install a wordpress theme I want to go ahead and familiarize you all with some of these settings right here so left side right here under users I want you to go to your profile now if you ever want to change like your you know your color scheme so you can kind of you know get a little bit customizable with your settings and also going to change your password and your email this is where you're going to do it so right here you can see you have an email so you can go ahead and put like your a different email if you ever want to change in the future and also if you ever want to change your password just click on generate password and then you can always put in your own password and then just click on update and then right here let's say yeah it's a weak cetera but um I'm not going to update it for now so I'm going to go ahead and leave it blank but I do like this color scheme so I'm going to go ahead and update it now one more thing I want you to do is go down to settings and go down to permalinks now I want you to change this right here to post name now the reason why you this is because usually when you go to a website like Amazon or Apple and you go to their shop page it says Apple comm - shop right not Amazon or Apple comm - 1 0 - you know all this crazy mumbo-jumbo and this is actually good for SEO purposes so people can actually find your website easier so going down here and we click on Save Changes okay now we're gonna go ahead and salt our WordPress theme so right here on our appearance go to themes and for those of you who are brand new to WordPress and have no idea what a theme is basically how it works is your site is kind of structured so all these are different themes you can tell there's different sort of themes and it's basically the structure of it and it really can't be changed but the theme that we're going to be using we can change it so right here under popular we actually might be able to find our theme I think our theme actually comes up as number one but the theme that we're going to be using is called ocean WP so right here ocean WP now you can also find it just by going to search themes and typing in ocean WP and right here it will click on details in preview and you guys can see it has 53 5 star ratings now I would never ever ever have you guys saw a bad theme now this looks bad right but don't worry we're going to make it look really really cool this is like a really bad preview of it but not to worry it's going to look really amazing so right here click on install alright it's installed now just click on activate awesome now one more thing it's going to recommend right here to this team recommend the following plugin called ocean extra now right here click on begin installing plugin so right here click on install ok so the plug-in was installed successfully so right here just click on return to dashboard now guys you have to make sure that plugin is installed so if that did not pop up for you just go ahead and find it it comes with the theme now for those of you who have no idea what plugins were or what we just did so over here under plugins we can click on installed plugins so these are basically plugins now guys did the best way I can use to describe plugins is basically apps so just like iPhones have applications like you know eBay Chase or some sort of app you use or tinder the same exact theme so right here under add new you guys are going to see that there are hundreds thousands of plugins and these basically give your site extra added features like for example this one right here gives you the ability to sell online this one gives you ability to have your website search better and actually have tutorials on both of those plugins so later on down the road when you you guys are you know better than me with WordPress you guys can always go to those tutorials and you guys can always check them out and they're really really helpful so that's basically what plugins are in a nutshell they're basically just apps so for example if someone tries to log in too many times right here it will lock them out so that's just a little quick rundown of what plugins are so if you want to visit your site right now and click on right here go to visit site and you guys can see it looks absolutely terrible it does not look any good so we're going to go ahead and make it look really really cool now we're actually going to install another plug-in and this is called the elements or page ruler it's a brand new plug-in actually no it came out about only a year ago and it has just been like the number one thing for WordPress right now it's it's really amazing what this page blur can do so you're going to type in Elementor now you may want to make sure you install this one right here the elements are page of alert now look at I have a hundred thousand active installs with very very positive ratings and these are all like third-party plugins so people kind of like loved it so much that they made templates for it they made all sorts of widgets and add-ons but I'm not going to go through all those because I can spend days talking about those so right here under elements or page blur you want to click on install now it's actually really incredible as the page builder is is is very easy to use and it's just it's it's so easy for beginners and it's kind of changed how we make websites today so it's growing down here you can see Elementor has been activated so let's go and make some pages now you know we need to make some pages for our websites so right here under pages go to all pages so we have no pages no pages found so right here click on add new now let's go and make a home page right here home page and then click on publish right here all right and then I'm going to click on one more so let's go to page right here that's like the shortcut method right here see this + new you can make post like blog post or like another user will talk a little bit that little later so here I'll do about us and then one more needs a contact page right so right here under page do it one more time so here contact us and go to publish alright so we basically made the pages now so we made the home page we made the about Us page and a Contact Us page and right here on the permalink you can see that this is like you know Elementor com - contact us so it's not all that mumbo-jumbo that we're number stuff so that's basically why we did the post name instead so again if you want to go ahead and take your website you goes up here go to visit site but actually want to create the menu first before we go crazy and do everything else so right here under appearance we're going to go down to menus alright so go ahead and give your menu a name now I always just do menu one you know it doesn't really matter too much what your menu name is no one's actually going to see it but you so here we go to create menu now right here under pages I want you to click on View all and just click on all the pages so there's two home pages and I'll explain why we have two home pages so right here it says custom link I want to go ahead and delete this page now in the future if you ever want to delete a page this is how you're going to do it off your menu so right here I'm click on this arrow scroll down and go to remove so now all they have is the about us the contact us and the home page and you can kind of you know rearrange these in any which order so in a home about contact us and right here I'm switch on save menu now if you want to drop down menu let's say for example you hover over it and it shows another page all the thing to do is drag this page or whatever page just like that and it'll give you a drop down menu and I'll explain what that is right now so right here I'm gonna go to visit sites now the menu is not there because we actually need to set it so right here I want you guys to click on customize now this is the theme customizer this has a lot to do with the general theme settings like the menu the typography in other settings like that so right here under menus or click on menus go to menu one and then right here there's four different places where you can you can put your menu well there's actually three there's the top the main and the footer so right if you click on footer you're going to see that your I'm sorry the top bar you're going to see that your menu appears up here now if you want it to appear like over here you can click on main so you see that menu is over here and if I take this out this top part will disappear and then also on the footer which is the bottom part of the website there you go through the home about us in the contact us now if I hover over home you're going to see about us show up so the reason why that's happening is because I drag the about us under the home so if you want a drop to menu like that that is how you accomplish it okay so right here we go to back now there's also one more important thing that we need to set we need to set a home page so when your visitors come to your website what caves you want them to first come to probably your home page right so right here under static front page I want you to click on that go to a static page and select the front page as your home page and go to save and publish so now if someone visits your website they're going to actually visit the home page first so by clicking X you can see I have my home page and I click on my contact us of course there's nothing on it because we haven't designed it so we're going to go ahead and do that right now so I want to go to your home page right here and then go to edit page so there's a few things that we need to actually change on this page right here so once again scroll down right here and you're going to see ocean WP settings now basically what this is it's the settings for the theme so right here under content layout I want you to click on this and go to a hundred percent full width and the reason why we're doing that is in case you're wondering I'll go ahead and show you why go to paste so right here is our current homepage but I kind of want to get rid of this gray part and I want to get rid of all this and I just want to have a blank sheet of paper sort of so we can just design the website so right here I want to do 100% full width now for sidebar right here you guys can go ahead and leave that default and then for margins I want to disable that and the margins are actually these little white padding right here that's a line now we really want that either so over here you can click on disable now also for the headers so for the header section right here I want to go ahead and disable this right here and actually want to display the header we can display the header and then for the main navigation I want to click on this and I want to select the menu that we created so basically I'm saying I want our menu to show up on this front page right here and then also for the title I want to go ahead and disable that because right here I don't want this home right here you know we don't need it it's ugly it's not necessary so I'm gonna go ahead and just say you know what you're retired you know you're gone you're you're fired you know so we're going to go ahead and get rid of that right there and then another thing is our footer section now we're going to talk a little bit about footers and widgets and everything else later so for right now I'm just going to go ahead and leave this a default because we're going to come back to widgets a little bit later I'll explain what those are in detail a little bit later right now I want you to click on updates ok and now we can actually go ahead and view the page so I'm gonna go ahead and refresh this page and you look something like this right here it's going to look like this it's going to look ugly you know but don't worry because it's basically a scratch sheet of paper so right here let's click on edit with Elementor all right we're here congratulations guys we're making progress we're doing it we're doing it so you have this section right here which is adding your section now I want you guys to a little like kind of familiarize yourself with these so this is like a text widget a button a video a divider an icon like Google Maps image box all these are just basically little modules and you basically just drag all these till anywhere you want and it basically just puts it there so that's basically how this page builder works or everything is totally drag-and-drop right here so right here if I click on add a new section and I wanted to select one right here so you see our section right here now before we do anything I want to click on this right here now you see the left side right here we have this layout so basically I want to say look I want to go ahead and stretch this section I wanted a hundred percent so I wanted to cover all the page and also for the content width I want to make it full width and for the height I want it to fit to the screen so now you guys can see that we have that landing page like this we can have that big landing page so we can have that like you know the image in the background and we can kind of decorate a little bit now there is a link in the description of this video and it will give you access to some images now the image I use for this same exact tutorial I cannot give you this same exact image because it's actually owned by a company so I can't redistribute it but I've actually put a lot of replacements in that folder so I don't worry and also if you guys need to go get really cool images I recommend going to unsplash.com these guys have some amazing images so a really famous one is like night sky or you can put in like space and these are all like HD beautiful images it's kind of like Instagram but for like super professional photographers you know it's not for the average person like people just don't upload pictures that are not good they only take really really you know really nice pictures so I actually have some in my folder in the the link in the description so I think I use like a few other ones okay so right here I'm click on this now I'm not going to go back over here now under the style we have background type so this is for just like an image this right here is for the great effect which we'll talk about a little bit later and this is for the video so depending on which one you want you can use either those but I want to get very basic and just go to classic and let's say you want a different color so you can have like a different color you know right here and remember this part here is where your text is going to go but I'll do that a little bit but you know I don't want to color you know I don't want it I don't want I just want I want a picture pictures are always easy everybody loves pictures so right hundred-meter library I'm gonna click on select files and you're going to upload the file so I think mine was on my desktop it was for Elementor and I can use something like this right here okay so I'm gonna go ahead and use this right here and go to insert media all right now it does look a little scoot it looks kind of crazier like whoa this does not look that good so right here under our position leave that as default for the attachments I'll go ahead and leave that as default but the main one that you really want to look after is size and I want to put cover so now you guys can see that the image is right there and it looks much better than that little tiny he's that we had before right so and there's also a lot of other cool features you can have like a background overlay so if you want to add like an overlay to this you can go ahead and add an overlay but for right now I'm not going to get too far in these settings because we're going to talk about all these settings a little bit later I just want to get you all familiar with the page Buller and make sure that you understand it so you see this little of a circle these squares up here once you click on that and this will bring the option of these right here so it gives you all the little you know the gadgets and everything else so right here under text editor I'm going to take that and just drag it right here now I put welcome to the revolution but you guys can put whatever you want you know by now you guys can you know it's your website you know so I'm going to put something like welcome to or you know I'm going to do this and see welcome to the revolution and you know guys for for future reference I don't know why I've been in web design everyone capitalizes the first letter of every word it's just the way it kind of goes it just looks really clean and most people out there just tend to do that so I put welcome to the revolution and for style I want to go ahead and Center this now you guys can't really see it too well so I want to change the color so right here on our text color I want to put white now typography so this is actually where you can change the fonts you can change everything about this so the size you guys can make it go bigger or you can make it go smaller so right here I'm leave it at around 35 so you guys saying 30 to 32 is good now for the family I put a tally on it but guys this page builder has unlimited fonts and the great part about this is that with other themes and other page rulers you have to install like the easy google fonts and you have to enter code it's a total pain it's the total pain in the butt but this is actually much easier so I did at Aliannah all right now it doesn't come out too well so maybe you would want to change yours or you know but actually the weight would actually make a big difference so right here the weight is kind of like the boldness so I'm going to go ahead and put 300 okay that's didn't too much so let's increase it to 600 now you can see it's coming out a little bit more clear and I can even go more I can go and then I can go 800 or going to say I want it bold but I'll just leave it at 800 right here now for the transformation we can have it all in uppercase so I prefer to have it an uppercase because I think it looks better but so you can actually do lowercase or you know capitalized or whatever you want to do it now capitalized is actually what I recommend because that's just what people in web design do I know in the grammar world it's not correct but that's just what people do here so yeah so anyways so for the style as well you can change it to normal italicize or obliques so if you want to italic into italic or you can go ahead and just leave it as normal now for the line of the letter spacing I know some companies do this like I think lore'l that shampoo company or if you space it out you see how the letters kind of spaced out like that you can do that or you can make it really really really small but that's that's ridiculous nobody would do that but maybe something like that and then right here you change the line height now I'll explain what the line height is a little bit better this it's kind of hard to give you an example of good line height but basically it's just the the line it's like the space of its but so after I add some other text in you'll understand what I'm talking about a little bit more time to leave that like 20 that one for now okay so now I want to go ahead and add in the next section so right here actually no it's the other website der Wilson tutorial let me go to that one just to show you guys also if you guys need help or you get the resources go to my website Darrell Wilson comm you guys can get a lot of free resources I have a lot of like giveaways I have all sorts of cool stuff now I want you guys to kind of understand what I've done so right here we have a text I have a header I added an underline and then two buttons that's it that's all I did so going back over here you know one delete this one you're fired that one's done that one gone all right so clicking on these little icons right here so right here I'm gonna go to heading and I will put this right here that little line is right there I'm going to go ed and drop it right there now it shows up right here so right here I put Elementor because that's the tazewell's that we're using Elementor I'm go ahead and center that alright now for the style we have text color and typography so right here I'm going to click on this white and then typography I think I used is like the monster it something like that or I wasn't really sure which one I used so right here under the the family right here I think was like the month okay I use this one right here no I know I use open tabs open tend to like mice like the most preferred one so open sounds right here and then I want to change this to maybe like you know 300 maybe a little bit more thinner because once I make it bigger it'll it'll look better now for the size right here I might change it to something like 105 or some like that okay now you see the line height right there so basically the line height is basically saying look I want this much height in between the lines so it's kind of like hogging the lines in a way that's what the line height is doing so going back over here you're not to follow me but right here on the line height you can see how it kind of saying look I want this much space to myself that's basically what the line height is so in a nutshell that's basically what light is so right here I put Elementor now for the style I want to actually make these a little bit I want to kind of space it out right here you know I want that big space right there so 5.1 and for the transformation I'll do something like upper case and then for the style go ahead and leave that as default now guys also one more thing when you're designing your website you might want to close this right here because that's going to actually show you what it looks like and then that's all kind of like you know it's almost the same thing it's just giving you an extra example of what it would look like so the letter spacing I think looks good now over here on my other website right here you can see that I have this little line right here so this is basically a divider so right here under these little gadgets right here I'm going to go to divider and simply take this just drag it right below now the whole purpose of a divider guys is to actually give space in between everything that's really what it's for but you can use it as decor you know so right here I'm a click on center I'm gonna change the color to white and I want you guys to actually see it's I'm going to crease the weight I'm gonna do it a lot right here I'm gonna do two like eight now only doing this just to show you what it is so right here under width I want you guys to see this like you know it's kind of disappearing you know see that but if I have it on the left its kind of disappear to the left and then to the right you can kind of disappear like that but I'll actually want to keep it in the center and I want to just have it if you like something like this right here okay and then the way it does too much you know maybe something a little bit thinner three is good okay now you can actually do like dotted you can do like all sorts of different little decorations and everything now for the advanced time guys don't worry about all this we're going to cover this a little bit later into the tutorial I know there's a lot to cover with this page builder but baby steps so also you guys can do like the weight the gap enough or the gap right here this is basically the sole purpose of the divider so basically the divider is saying look I want this much space in between everything so by increasing or decreasing that you can actually you know put that wherever you want it so I'm going to do like two and later on to the tutorial we'll talk more about margins which is basically like how you can actually push it against other you know places where you can you know like put it anywhere you want so basically the margin is kind of like saying where you want to start from so if I put like minus ten it's going to be a little bit closer but if I do like plus ten it's going to be like farther away but in this case right here I just leave it at minus ten but we'll talk more about margins and padding guys don't worry I don't want to jump into any of the advanced options yet so next we have this two button right here so we have two buttons right here now let's go ahead and add those in now guys I want to be very straightforward with you guys design is everything you know I've seen a lot of other tutorials where they teach you a lot of make websites but they don't look good you know guys what good is a website if it doesn't look good you need to make it amazing and when someone comes to your page they need to know what your website is about in two seconds or they're going to leave because if someone comes to an ugly website they don't understand it they're going to leave right wouldn't you so you want to make sure your website gets to the point very fast very clear so they understand about you and your website so right here under these little two things now once they go to columns and you drag this and we're going to put this below this thing right here so what columns are basically it's just more sections basically it's just more sections so that's really all it is so I have two sections here now if you want to add more you click on this little thing and go to plus and it's going to add three sections but I want to go ahead and just delete it want to only want two buttons if you want to delete this whole row you can click on this little X right here and that will actually delete the entire row okay but I'm going to go ahead and take these columns and drag out and put them right there and then we'll click on these buttons and go to button you guys are probably already getting this you know right and put it right there now I'm going to click this again actually no no we can actually duplicate this row but yeah so right here click on this and click on this little these little two things right here here says duplicate column click on that so now we have two so now this one we can just go ahead and delete it all right awesome now there are a lot of good reasons why you want to duplicate rows because sometimes you're making a lot of stuff you just want to duplicate it you know you already have the font like right here we did the font is everything you know you might not want to do that all over again on another part of your website so you can just go ahead and duplicate the rows now for this button right here I want to go ahead and put it to the right so you see here it's right there now for the type right here you can put it like info but this is just the color so these are just like kind of like for beginners if you don't really know what to put they're basically saying danger is red you know success is little success green Oh cuz I guess money you know I guess whoever has the most money nowadays that's that's such that this is a successful person is so here I'm going to put start now for the link so the link is basically if they click on this where'd you want them to go well we'll do that a little bit later but for example you can put like double W Darrell Wilson calm and if they click on this button right here they're going to go to my website do CENTCOM will actually have to put you have to put HTTPS so HTTPS and then that okay and then when they click on this it will take them to Darrell Wilson calm okay so we'll just go ahead leave that like that for now and then for the icon do you want an icon here so you want an icon we can go ahead and put yes you know we can find some cool ones and see when we got you got the Apple all right we got Apple that's actually really cool and you can actually do like the position so you can have it before after and then you can do icon spacing as well but that looks really ugly I don't think any website does that so we'll probably do that like five or something something standard now for style so we have this hover right here and guys you're going to come across this hover and all of the options worth these things we're basically like if you hover over something what do you want your visitors to see now I'm going to go ahead and use the hover option in this because all the models actually have this so if you go to like any of these other modules right here they all have the hover feature so even the background right here if someone hovers over it you can change the settings if someone hovers over it it's really up to you so right here under these um under the button right here I'm going to click on the button now under style right here I'm gonna click on topography so remember we're just changing the actual button right now but I actually just kind of left it standard you know you can give it like a different font like let's do open sans okay and then the weights you can always change the weights to whatever you like or 500 and these options guys are also repetitive so in the course of this tutorial I'm not going to go in-depth on this again because we've kind of already covered all this you know we talked about this early you know when we talked about the the heading and all other stuff so I'm not going to like once I cover one thing I'm not going to you know cover it all over again because that would just be repetitive and we're just wasting each other's time you know your pager will already solve this you know thumbs down you know so right here we have a normal and then we have a hover so the hover option means if someone hovers over its what do you want it to do so basically you can decide if someone hovers over it the actions will change so right here we have text color I'm going to put white it's already white I'm a click here and now we also have background color so I like this color right here so now you guys can see it's this color but now we have the option of hover see this right here so right now it's a text color is white background color is this blue but if I click on hover right here we can change that so now I'm going to put black and then I'm going to put red so really see where's the red at there it is red okay so now if I hover over the start button it's going to change like that so it's going to be from you know like that and that's basically what the hover is and also contains the animation which is really really cool so basically when someone visits the website for the very first time it's going to get like a really cool little animation so that's only for the hover over effect though so you see I'm over hover over now I can cage the like pull shrink see that how it's kind of making that animation or pop in do that but remember this is only for the hover so if you do this you want to make sure you're doing it for the correct setting now I don't know which one you'd want but right here I'm doing normal and then again we can you know change the you know change the the animation for it as well so I'm just letting you guys know that's when you guys do this you need to actually set it for the hover option you know I actually think the hover option is only for the button when you hover over it as well but it's actually in every module so that's just you know basically if someone hovers over it there you go okay so next thing we're going to go ahead and do is like the width right here so we have the solid and then the normal or whatever you want to put now we can also do border radius and the higher you go the rounder it gets so right here I'm going to do like 30 you know 50 you know we can have it like that and there you go yeah like a rounder button okay now box-shadow everyone loves black shadows so bachata Liz look I shadow around the box so right here we have this blur now if you see the button right here you're going to see the dark little kind of like you can actually change the color to help you see it a little bit better but now you see how there's like that little green around it there's a blue there's like a purple you see how it's kind of glowing that's really what a box shadow is so if you want a box shadow around your button feel free to do that and of course you can change the settings you can have it horizontal that would probably make no sense the exchange the spread of it to something like this right here so you see how it's kind of glowing so that is basically what a box shadow is and you can change the blur to something else that you want okay but I don't want a box shadow no I do like box shadows around other modules but not on buttons you know I don't think it's good and this is also like the text padding so padding is basically space but space I don't want to do it in this example because it's not going to be clear enough so right now I'm just gonna say you know what I'm done with the section you know so going up over here now we click on this button right here now although I want to do right here is I'm just going to go ahead and just change the style to black so I want the background color as black something like that puts like a welcome Earth see right here yeah we'll put the button right here we'll go ahead and put okay and then of course we have our icon you can change it to all these settings as you want okay and then we'll talk a little bit about margin and padding a little bit later how we can put this kind of you know we can put it anywhere we want basically but I don't wants to do that's right now so we'll talk more about that a little bit later but let's go ahead and shrink this right here and there you go we have our homepage beautiful homepage so I have welcome to the revolution see Elementor we have this divider and we added two buttons so congratulations guys you know that was actually pretty easy right this was it's pretty self-explanatory you know it's it's just the effort of learning how to use it so to those of you watching this congratulations other people kind of just like watch it for Amalia I don't know if you are it's not it's very very easy so if you want to make change it's your website right here click on save okay and then right here click on this X and go to view page and there you go we have our beautiful home page right there super simple to make and of course guys I'm gonna put that link in there so durable so calm if I click on the start button it's going to take me to my websites Darrell Wilson calm so this is my website Jorah Wilson calm so again you're just going to go ahead and put any link right there but we're probably going to end up putting our other pages like our contact page or about Us page because usually when they come to our site you want them to you know go to your contact us page okay so now let's go ahead and keep making this website so right here click on edit with Elementor and we're just going to keep going down section by section guys and I want you to kind of understand what we're going to do so right here I want you to look at this section so basically this is a two column section with text text and text so it's a column with three text modules in it that's it so right here add a new section put in these two right here and right here I have the text editor I'm going to put this right here and I'm just going to go ahead and put something else in there like um I don't know what I want to output I have the biggest problem with fighting types so a rest is mine yeah rest of mine rest is mine now for this style right here I just did style and I put it to the right and then I put the color as white okay now I know you can't see it and that's because we're going to change this background to black right here so right here under this section we can go to our style and now for the background type can click on classic and we can change the color to black and now we can see this now we can also do the gradient effect so I'm actually going to show you what the grained effect is right now so the great effect right here if I click on it we can change this to different colors so for example right here I have color and I can change this something like green and then our secondary color we can change the location and guys you can do this for every single module so it's limitless on your creativity so however create creative you are I am NOT the best web designer I'm really not you know and other people are just like so much better than me you know it's they have such creative websites and creative ideas so that's basically how you would do the great effect so I'm actually just going to go ahead and leave it as classic right here I'm going to do a solid block right now okay so I'm gonna click on this right here which is a text module I'm gonna go to style change the typography to something like you know I think let's do an open Sam so the open Sam's and then right here I'm gonna go ahead and say you know I wanted just a little tad bigger maybe you can have it at C we have it at have an atom's I could that's good 20 29 LSU 20 20 there you go 25 this is 25 run another 20 20 20 yeah I'm a perfectionist it's really annoying so this right here is like the settings again guys so open sans we can go ahead and leave that now I want to go ahead and add another one so I want to go ahead add in a heading right here right below that and I want to change the alignment to right so I want it right here and right here I'm going to type in for brands okay then again to style now also you see here it says link so if someone can actually come to your website and they can click on this it will link them to wherever you want and HTML tags you know I'm not going to get into HTML tags too much because this is regarding SEO but this is basically for like you know SEO purposes and I have a video on freelancer if you gather in CID in SEO but I'm not going to get too much into HTML tags they're really not is necessary because beginners you're pretty much never going to understand what it is because as there's a lot with HTML so it's not really important for us but right here we click on style and go to text color and go to whites usually like the titles of everything or h1 and then like the contents like h2 h3 it's just for SEO purposes like you know like search engine optimization and stuff like that so right here I would change it to something like I had an open tend again okay then we can change like the size of it to like a do like 30 that is good now Gasol so what we're going to do is we're actually going to go ahead and just duplicate this whole row because we don't really need to do this twice so right here you can see on this right side we have an empty box we're just basically going to duplicate everything and then just you know do it from just duplicated because there's no reason for us to do it from scratch you know so there you go now we'll click on this and go to text editor and go ahead and put this to the right and then change the two whites and then also we're going to go ahead and put this as open Sam's okay all right cool so we have one section right here and let's go ahead and just duplicate this row and then just add it to this section right here I don't feel like doing all that over again with the with the fonts and everything of too much work so here are my duplicated now I'm going to drag this to this column right here and I'm going to go ahead and delete this one right here okay now the reason it looks like this is because remember the settings are still to the right side so all you need to do is click on this little click on the text right here now I'm the style editor go to style and then I want it on the left side okay so right here same thing the alignment right here for the header is actually right here and then this section right here again style left side and we don't want to change this you know we don't want the same text literally straight a markets and then we'll do like WordPress this fun well that's too much let's do a cool job yeah yeah this is make any sense so over here under this I want to change this to style and I want to change the color I want to change something like this right here so you see what I've done right here so how I have these corresponding colors and it looks really cool now guys some some tips for a lot of you when you're building websites and you're in you're learning how to do this try to keep your colors consistent you don't want like 8 9 colors on your website it's going to look tacky having two to three colors you guys can see I have white black in this that's ugly but that's okay but I have likewise black in this blue it looks good right and it's consistent so I want to keep these colors consistent because I like to teach people how to make really good websites not ugly Lopes now guys so right here is the section so this section right here controls this whole area you see this little this tab right here so over here under style click on that and go to I'm sorry go to advanced now you see this right here it says link value together I want you to unclick that so now we're going to the more advanced stuff so the margin margin is basically saying where do I want this to start from do I want to start from 10 or do I want to start from negative 10 negative 10 would be the opposite direction so again I would click on this again that's really annoying sorry here if I go to negative 10 I'm sorry negative 10 110 so now you see how this is actually starting up a little bit higher than it's supposed to and as a result it's actually pushing up on the page so right here again I can go to assume with some margin angle to minus 50 oh sorry you have to do the minus and then 50 no too much too much so now you guys can see how it's pushing up on the picture just like it is on my website see I'm pushing up right here so it's kind of like not we're supposed to be but it's kind of a design so that's exactly how I achieve that design right there so I just basically put in some like some margin so I also want to show you what padding is so that padding is basically space so how much space you wants right here well let's say I want I want 10 pixels above then you get 10 to fill above let's say I want 50 so basically saying I want space right here I want 50 pixels of space to the top now you can do this for the right you can do this for the bottom and to the left but the issue is we don't really have anything we're ready have enough padding right here we don't really need add more so I just want to go ahead and focus more on the margin so right here when you - 50 oh no too much there we go okay - 50 and there you go so now that's how I achieve that kind of clashing design so right here and I go to save now all right so let's go ahead and keep going so the next section now I want you guys to understand what I did here so right here I added basically just a section for text for text and then I added a divider that's all I did and then I made a three column row with icons so I'm going to show you that is right now so right here I'm gonna click on this click on a new section click on this one right here now I'm going to go ahead and put the text right here so right here under touch editor and I'm going to do we are amazing I want to lowercase so we are amazing and style I want to go ahead and put in center and I want to change this to black and then again I'm do open since oops the long one opens ends and then of course we can change the size of something you know it stains it bigger or something or whatever you want I'll just go and put 20 or 22 is okay and then the ways I'll do like 300 kind of like that look you know it's simple it's easy I think that's what Apple uses so remember how we talked about padding this is actually where's going to come more into use so you guys can see right here this is too close to this right here I don't want this I don't want this too close you know so right here and click on this which is controlling this whole section and go to advanced now for this section right here I want to click on this because if you click on link body together it doesn't for all of them and I don't really want that see how it's doing for all of them no I don't want that so click on this and say look I want to give maybe you know 50 pixels you know 50 pixels or let's do 100 so you see how it's kind of pushing space because we don't want to have everything clustered so just like right here you guys can see that I added space right here so I want enough space to introduce the new section so without it being all clustered and you know noisy so all they did was basically add in some space okay now I want to go ahead and add in another text right here so click on this the header and then drag it right there and again put that in the center and then we'll put we bring something special and I'm a center of this right here now for the style I'm going to change this to black and then you know I'll probably open sand again all then there you go Annie use your telescope what is that font okay that's I've never seen that what any user who names a font any new your telescope or crazy alright so 300 right there I'm gonna go ahead and make this like maybe upper case and make it a little bit bigger all right and the last thing I want to do is go ahead and put in this next divider right here so divider drop it right there and remember this is just giving it look you know so I want to go ahead and put in the center and then reduce this okay and then the gap I just I don't care what the gap I just want to I want to close to that because I this looks good to introduce a new section you know so that's basically why I have this so we have this section right here so right here you can see that we have this section and we have these three little buttons so I want to go ahead and add in a new section so right here and click on add a new section click on these three and now you guys can see that we have these three little bubbles right here clicking on this now we have different ones there's you know there's image boxes there's icon boxes or all sorts of stuff now guys also they have a pro version in this so the pro version basically gives you access to more of those modules but we'll talk more about that after this section right here so basically on this website right here I'm actually going to go ahead and show you guys I'll just go ahead and show you some of these Pro features just to give you guys an example of they offer a pro version you know there is a link in the description you guys can purchase the pro version if you'd want you don't have to but you get a lot of more icons you get a lot more widgets and you also get a lot more of the pre-made layouts so this company actually gives you a lot more layouts that if you purchase their pro and this sites going just a little bit slow all right it's working slowly it's almost done okay so right here you guys can see I have the pro elements right here so they basically give you like slides like doing those full with sliders they give you pricing tables of flipbox and share buttons account down so for example like a like a foot box is basically like saying if you you know you hover over it flips over so that's basically one of the pro features but we don't have to I'm going to talk about all the pro features a little bit later in this tutorial so if you guys decide to purchase the pro version I think it's like a hundred dollars for a whole year and you get like support and everything it's pretty amazing so the pro features you get the pro features and you get the support so it's kind of like a win-win and if you guys do purchase it I do make a small Commission and you know it helps me continue to make these tutorials for free because these are long tutorials you know right like this is a long time you know but it's fine so right here I'm a click on icon and I'm going to drag it right here now that's kind of ugly you know but if you ever want just like a regular icon with no text or anything else that's what you're going to do I don't want that you know I want I want some text I want some flavor to everything you know so lets going down here if you have icon box and then image box so the icon box is the one with the text and the other one is the image box where basically you can put your own picture instead so let's say you're really handsome looking guy or your beautiful girl you can kind of like introduce yourself like this is you know Tiffany and then you can talk about your position or some like that but I'm just going to go ahead and use these icons for now okay but I'm just kind of you know just giving you an example of that so right here I have this is a heading now guys I know that disappeared but you can always just click on like the duplicate or add a new section and it's just going to go ahead and make it another one and then of course you can drag and drop it but I'm gonna close this right here now you guys can also do like plus you no to add another section but um so I'm gonna go ahead and close this again and then we're just going to go ahead and do that again so I'm gonna close this all right and then of course I'm just gonna click on the icon or now sorry a date section and we'll click on these three and I'm simply just going to go to icon box and then just you know now we can just go ahead and duplicate this too you know you don't have to do all that hard work all over again that's another that's another shortcut way to do it like that's but remember you know you guys can have any way you want so let's go and talk about these settings so right here we have the view we can have like a stacked or we can have framed and then right here you can change the icon type so you know however you want to you know these are very self-explanatory you know so if you want to square or short gold is we're going to do it they've made this so incredibly easy so welcome to elemental and then right here we have I composition you can have it to the right to the left or to the center and then of course you can also have this link so if something clicks on this where do you want them to go well that's we're going to you're going to put the the website right there you can also have link options right here like I don't know fall link or open a new window now that's actually a good idea so basically if they click on this it's going to open a new window in their browser and it's going to you know bring them to that website because you might not want them to leave your website so opening in a new window is actually very good now I don't know follow link again that's for SEO purposes your SEO guy might you know know more about that but a nofollow link guys in a nutshell it's basically telling Google not to index those links that's basically what it is but I'm not going to go into SEO so I yeah so open the window you want and there you go okay so right here we have style and we have primary color which is you can put your primary color and then you also have the secondary color so you can put something like blue which is the background generally you want to leave it clear I mean that's kind of like too much color so I think what that's so ugly we got to change that we got to change that secondary color is white we can leave it like that okay and we can add spacing to this so remember you want to add spacing or you can add size make it a little like that okay and then the padding as well if you want to add padding to that you can go ahead and reduce the padding or you can add more remember padding is space okay just one let you know and of course you can rotate this to whoever you want the border with you can you know add more border with if you want or good it's basically just giving the D border more width so basically all you're doing right there and then of course you can do like tortor radius as well so that's basically in a nutshell now icon hover remember someone hovers over this what do you want it to do so you can change it based off the hover animation so if someone hovers over it with their mouse you can basically do all those options all over again so right here I have like bounce in so somehow is over it you can see the animation and then again right here so and also for content you can change the spacing of the content you can change the color and the typography so remember the title is for this section right here this blue section and then the description is for this section right here now I'm not going to get too much into typography again because again remember we we talked about all this already so I'm just into open sans right here and just kind of put it in there and then do the weight like 300 and then I'll go ahead and change the dist description right here I'll make a black typography I'll do open sans remember guys once you have these options open you might want to click click on this and it kind of like gets you out of the options so just make sure that you're not stuck so basically once you do all this remember you don't need to do all this hard work all over again you know you can just go ahead and delete these are just you know duplicate this right here and then delete these right here you know it's there's there's no reason for you to basically do everything all over again right because hey you know you got this part and you know that's basically it right so let's go ahead go over here now we have these three images right here now in this section I'm going to show you how to incorporate these images so you guys downloaded my my folder you guys receive some images you guys can use those so right here and click on add a new section I'm gonna click on these three right here and right here I'm gonna take image and drag it right there okay so right here I'm gonna go ahead and delete this because this is their stock image and I want to go and add in my own so right here we click on upload files select files and I'm going to go ahead and find right here okay and go to insert media all right cool we got my book Darrell Wilson calm I'm just kidding it's it's not it's I don't add alright books I don't I don't so right here we go to image and just do it again okay so upload files and then right here I'm just going to put in this little cool little iPhone mock-up I did and then again right here I'm gonna go ahead and click on this somebody bring up the modules and then I'm gonna go to the image again let me delete that click on this and then go to upload files and then simply claw grab the last one right here this one right here insert media okay so we have these three images but we need to basically grid it you know it doesn't look good like that I mean it does look okay but that's not the purpose I want to show you how to have that grid style effect so by clicking this right here click on this little number this setting right here these three little these three little as things right here that's editing this whole section right here so if you want to basically have this little you know this effect right here there you have to click on this and go to full width right here remember I want this full width section and it's pretty simple all I need to do is say I don't want any gap so under the column gap you can have like narrow you can have like a small one or something like that but I want to say look I don't want to have any gap in between these so now when I straight this you guys can see that it has that beautiful grid style effect right there so that's how you achieve the grid style effect you know and right here you guys can see it looks the same exact way right here so and also kind of jumping ahead looking at this you guys can kind understand that this is a two column row so one column two columns this is a image with a text a text a underlined more text and a button okay now guys one more thing I want you guys to watch this whole entire Torah because there's gonna be a lot of questions that I guess I get tons of questions and people are gay I do you do that I do that I use and they don't watch the whole tutorial or my brother it's in this tutorial we just got to watch it okay so let's go ahead and do the next section which is deep parallax section so over here I'm gonna click on this and I'm going to go ahead and put in some text right here so right here I'm gonna go to add a new section right here and I'm just gonna select this one right here now I want to go ahead and select a heading so I'm going to put something like no experience needed and I'm also going to introduce you to something called the shape divider which is a really really cool feature just like I talked about in the blog section where you can have you different arcs and everything we can do this to any section that we want so right here I'm going to click on this right here to center and under style I'm going to change this to something like whites now you can't see it because I have a background so right here to give it a background to click on this little blue section and under the content with I want to say this is either Fullwood now we can also do a stretch section so let's go to do stretch section instead and then also for style I'm going to click on this right here and add in an image now again guys you can add in a video you can add any grain effect and I'm actually show you how to add into videos right now so you guys can actually go to youtube.com right now so go to youtube.com and then you guys can look up something like 4k scenery images so 4k scenery images so you guys see all these videos right here so I did something like the the 4k night sky so 4k night sky and all day to do is simply just copy and paste these links right here and these will actually give you the ability to have these on your background and it won't carry the audio so I'm gonna click on copy and then go over here I'm sorry over here now for this section I'm going to delete this really quick and just give you an example so I'm gonna add in a video background let me go ahead and paste the link right there so there you can see the video starting to play now we need more space but before I do that I want to finish this section off so I'm gonna click on this right here and I'm going to add an a divider so right here I'm Adam divider and I'm going to put this centered and again just like we did before I'm going to go ahead and like you know reduce the width right here and then put the color to whites you know get a little bit more a little bit more so - and then you know we can reduce the gap we don't want too much gap now for the no experience needed I'm going to kind of you know edit this a little bit I kind of want to do open sans okay another thing I'm going to do on this section right here under the advanced is I want to go ahead and add some padding to it so maybe like I'm going to like 50 or something like that maybe some like that or see here let's go ahead and add in 50 so basically just adding space right here and I'm also going to make this text a little bit bigger because it's kind of small for a heading text this is like no experience needed now I'm gonna go ahead and add in just some more text right here so text editor will go ahead and put it right below this and of course you guys can go ahead and change the color for this and everything else so I'm going to do this right here maybe make it a little bit bigger and then do some open times okay so at this point you guys are kind of understanding how the page builder works it's pretty simple it's pretty you know it's easy right told you guys is going to be really really easy so right here under the button I'm going to go ahead and drag this down and I'm A Center this now also going to do is simply change this to something like you know text color white but maybe you want to add this to this color like this to kind of give it that look and again you guys want to add padding to this entire row so basically right here I added padding with this title right here just with this section but maybe you want to go ahead and add in padding to the entire row so right here we go to advanced and I'm just gonna go ahead and put zero now I'm going to show you guys how to add padding to the entire row so I'm gonna click on this section right here which is controlling the entire row go to advanced and just simply type in this right here and you guys can see it's adding more now again you guys can add a new more than that so you know 100 to give it something that looks like that right there okay now also talked about the shape divider which is really really cool so the shape divider will actually add in some graphics or animations and it'll actually work for video and for images so that's actually really cool so right here under shape divider I'll click on this and this section top is controlling the top so right here we have like mountains so you guys can see how it's kind of like it's giving the top these little animations and you guys can you know do clouds or you guys can do you know this or anything that's actually pretty cool you know maybe we should add the clouds to the top and to the bottom you know that's kind of cool here you can change the height of it you know and then also you can flip it we can invert it the opposite way you guys can change all these settings right here like these are also for like the text in the link and everything else so I'm not going to get too much into like links color it's basically like the color of the link but for the shape divider right here let's say for example I want to go ahead and do the bottom part as well so the bottom right here I want to go ahead and give it the clouds as well so now we have this really cool little effect right here and you know we can change the heights we can flip it so we can invert it we can do all sorts of really cool stuff so that's what the tape divider is guys and it's for every single section so scrolling up like it wouldn't look good right here but you know probably would look into any of these sections but so I can use it right here under the style shape divider see if we can add it to the top right here we have to change the color to black or so it really wouldn't look good and there's really no place for it here so it kind of wouldn't work out so yeah it has nowhere to go so I'll use it again in another example but this here is a good example of how you can use it I think also I use it on my blog section and also right here use it so I just added a different shape divider but for this section I just use clouds and that's a kind of cool combination you know the video with the clouds it's it's unique it's cool so now that's an example of the shape divider and also if you don't want that so you can have the parallax effect and remember to achieve the parallax effect you simply need to go to classic put in this image right here and put it as contained and fixed so again remember attachments fixed and then size want to go ahead and put cover okay so now we can have that same exact image that effect because that's really beautiful it's a really amazing style like if you could not do this with another free thing I promise you I've been around WordPress for a long time that's why I'm the top right instructor on udemy and also scale share so you guys can also do like a great effect as well but you know a great effect it's good at all you know but I personally like the video backgrounds or I like the D the image now one thing I want to talk about is video backgrounds generally will not work on iOS devices I don't know why but just us the way Apple has it for now hopefully in the future they will have an update so that's an example of videos and parallax effect etc okay yeah so really quick I want to go and introduce you all through some websites to offer free resources for your website now this is one it's called vide bonus and this will actually offer you free stock video footage and if you search on the website like I just typed in sky you can go ahead and see all the videos they offer and these are all free to download and these will make really good video backgrounds you can also use YouTube and you know go type in like 4k scenery backgrounds or 4k space or 4k clouds or whatever and you can also use those as your video background as well now another good resource is unsplash and again these are professional pictures from like photographers so not some Instagram pictures these are very high-resolution very professional and they are great for websites so be sure to check out unsplash for example right here i'ma type in something like land and they give you all sorts of different pictures like this right here would be a good background right here that's really cool okay so be sure to check out unsplash now another really cool one is free pic now free pic has a lot of cool mock-ups they have a lot of cool icons for example on the type in mock-up right here it's gonna give you a list of all of these right here now these are the free ones these ones up here are like an advertisement so to kind of trick you so right here you can see that there's all these like a different type of mock-ups and you can kind of take one right here and download it and you can actually go to fiverr.com which is another website and you got some photoshop your logo on it or something you ever seen like those business cards or those things on the internet where you see like these like iphones it had like that company name that's exactly what they do here so you can go to fiber have someone photoshop it for just 5 bucks if you don't know how to do that and then you can have your logo or whatever on a mock-up which would look really professional on your website so I recommend doing that now lastly I want to go ahead and recommend pic monkey now pic monkey is the best alternative to photoshop it's really easy to edit stuff so I'm going to show you an example right now so I'm going to go ahead and edit this picture right here and this is a free service you have to pay for it everything is free so right here I might go to this text section and I'm going to add a text and then let's say you want to just add a text right here try to put something like arrow wilson calm and that's it and then all you do is go to exports and then you can go ahead and save it like that's okay so it's a very good alternative to photoshop it's really easy and they have a lot of other cool stuff not just text they have a lot of cool animations that you can add to pictures that make it look really professional so be sure to check out picmonkey.com okay so now let's go ahead and go back to the tutorial so let's go and do the next section right here so I'm gonna go ahead and do add a new section and click on these see right here now I did mention really quickly I don't wanna go off-topic but I did mention the fact that you cannot use this on videos on mobile devices now a good way to counter that is to actually disable this section on mobile so let's say for example using this section on mobile using a video right here and it kind of sucks because people cannot people cannot visit it on on you know on their phone I mean they can't see the video so you can ask you to disable this whole background if you if you choose to have that under the Advanced Settings so under the Advanced Settings under responsive you can actually hide this on the tablet in the mobile device so that means that it wouldn't come out all weird for iPhone users because they you know they can't see video you know I don't know on tablet devices but I know on certain iOS devices that video does not play so that's exactly what the visibility things for so that's what it means by hide on tablet and also hide on mobile okay alright so let's go ahead and keep going so we're doing pretty good so far you guys you guys are feeling good you know get yourself a drink get yourself a beer or whatever you guys do so right now I'm going to show you guys how to do the next section which is this section right here the split screen effect now I actually have the images in my folder again so again feel free to download those anytime so right here I'm going to put the text editor right here and I'm going to something like we are amazing you know I want a lower case so we are amazing and under the style I want to Center this and I want the text to be black and of course we can go ahead and you know change like the style typography right here go to open sans you know cetera and if something ever if something would happen to your page builder or like something doesn't work just close it and restart it sometimes in the world of wordpress sometimes really weird stuff happens and I don't know why but it just isn't the way it goes you know and I wish you know everything you know in a perfect world and everything we're perfect but sometimes there's just really strange errors just closed up and just reopen it so I grab the heading text right here and I'm gonna go ahead and Center this right here I'm going to put reading something special are you being something special and right here I'll go ahead and just you know put a black black color and change this to something like open sans and then wait I'll do something like 300 which is cool and then I can go ahead and add in a little divider right here give it some decor you know give it some design and everything you know I really like the shape dividers I'm sorry the multitude of I do like but the dividers are also really cool because they just add a lot you know they really add a lot now one thing I want to point out that if you guys want to actually push this a little bit higher you can go to advanced and you can actually do minus 10 for the margin so basically saying I want this to start a little bit harder than supposed to see how it's a little bit closer now so that's something that you can do as well okay and actually we're gonna go ahead and do is we're going to add in some more text and then we're gonna add in a button so here I'm adding some more text I'm going to go ahead and Center this and then I'll go ahead and add a button now this button right here I Center it right there I actually did like a transparent background so for the background color I just put like like like transparent and then for the text color I just did black so right there you can see it says click me right there and for the border type I did solid and I gave it a color so that's how I achieve that other look right there so on this other page right here you can see that I have this right here so I just basically colored the border right there so that's basically you know how I got it and now for the width and you said it with because we don't have a width yet so you know something like you know five or something like that or for one you know if you want to get really thin one and then I achieve the circle by giving it a radius of like 50 so right here you can see that I have a transparent background and it looks pretty cool and we got a box out to it if you want you know if you want to go you know cool you know see how eyes like that shadow you got some kind of message that if you want I'll go ahead and put a little bit you know it works sometimes you know it works sometimes it looks pretty cool so right here I'm going to go ahead a click on this and you guys I need to actually give this whole section right here a background so on this section right here I don't really have a background and on my other on my other my other demo website you can see right here that I have this background right here so you guys can go ahead and go to the folder if you guys choose to use it or not and you guys can actually go ahead and download it but right here click on this section right here and go to style and go to classic and just go ahead and add in an image so upload and I'm going to go ahead and add in that background image right there so I think the one I added was that this one right here see which one I added I think it was this one let's go ahead and find out well I'm actually upload both so it really it really it won't matter so I'm gonna go ahead and upload the other file so we here upload files choose the file and then go ahead and visit this one I just forgot I'm just gonna do both ok so I uploaded the images right here and of course you can click on to see them right here so right here I'm going to go and upload this one right here alright now this section right here now guys this section is a little bit more trickier and I'm going to explain why I do this the way I do this so basically for mobile for mobile optimization to work properly if you add the image like this it could come out wrong it could come out wrong but to clarify a good way to get past this is to actually just put in a a regular little module right here don't have anything there and then add in a background text now I know that sounds a little weird but I've used as page builder and that's what makes it work for mobile devices so basically I added I've module here but I'm not putting anything in the module I just want the image behind it so right here I'm gonna go to background type go to image and just simply select the image like that and then right here I'm gonna go to our cover and there you go so now I have my image right there now I can also add my other one right there so I use the other ones in this tutorial so go ahead and upload the other one I had see here you guys came up with any images you want also I would I would recommend unspotted let's do this one oh no actually I use the other one here so we'll use we can use both we can use either or so I'll put that one and then upload these two right here because these two are also for the next part I also included these in this tutorial as well guys so just you know just for you guys if you guys need them I know it's kind of hard to you know get started everything so right here added that image right there now I want to actually stretch this whole section right here so this section right here and I click on edit section ongoing stretch this section and make it full width and I don't want any column gaps so right here on a call gaps I'm going to do no gap you guys can see that this section actually is it's it's pretty close together and it looks pretty good now again we can always go ahead and you know stretch this section even more by going to our Advanced section you know we can actually make padding we can do margin we can do all sorts of stuff so right here I'm gonna do something like you know 50 padding now that's only if you guys want like it condense inside you see that so now I'm basically saying I want to add 50 padding right here 50 padding right here could be padding right here and 50 padding right here okay so that's just an example if you guys want to do that but um for this section right here I'm gonna go ahead and increase the padding right here and as a result you guys can see it will stretch the image out as well now you can do that for either side it'll work for both sides so that's basically how I achieve that section like that so again this section does not look good like this but if I add 75 padding now you guys can see it looks a little bit better and voila we have the split-screen effect right here now I did the same exact thing right here except I just added more margin you know more padding right here so it's basically how I teve that and I made the text bigger so that's basically why it looks a little bit smaller here so if I make this bigger it'll look the same exact way guys so see you bring something special and you guys can see it's pushing the other picture down so I'm going here topography I'll go ahead and give it a little bit bigger way too big do something like that and then of course we can add more padding or more space but you got to get the idea so that's exactly how I achieve the split-screen effect right there and you guys can see there's no there's no like there's no mod like there's nothing right there because the I didn't I just wanted it for the background I didn't want the module but I'm just using it for the background so now I'm going to show you the other way which is the wrong way just just to clarify that that this is the correct way to do it because I've used this page with ER before and I ran into errors sorry here I'm gonna go to I feel just do this I can actually just go ahead and duplicate this whole row I'm not just um yeah I'll duplicate it why not uh my way wrong way whoops okay I'll just go and make a new section so add in your section and I'll start from scratch because I want to show you guys the alternative way which is basically the wrong way so right here we go to text and then of course I'm just gonna put something like we are amazing and style and then I'll just go ahead and leave that and then go ahead and add in the header now you you guys don't have to follow me you guys choose not to but I'm just showing you how to achieve the split-screen effect you rain creativity and then I'll go ahead and put something like you know we'll do black or something so here we go style will do black I'm do open stance and then we'll make it a little bit bigger so you guys can see how fast I'm making this page I mean once you guys get the the basics of it you guys can make pages like so fast I mean I can make a website in like seconds you know and like I mean like no disrespect to web designers but for small projects like this WordPress is definitely recommended but of course you know this is built off PHP so it will always need web designers and web developers you know so right here I'm goes to text editor again and I'm go ahead and drag this down and then you know style on the center it's and I'm going to add a button really quick sorry here by going down to button and the time I'm just going to go ahead and leave the button add something like black you know something something just simple style what something like text color or there you go okay so we have this section right here now I'm going to go ahead and add in the image now this is the alternative way which I don't recommend so image right here and then you guys can go ahead and but it is I mean like this and then of course the section right here I'm going to do we can do full width and remember no gap okay so this is the alternative way and then of course right here I'm going to add in some padding and another thing before we do that is I'm going to add a background image to this right here so right here click on this right here and go to style and I can add in a background image now you guys can also remember added like a gradient you get to know that basically whatever you want right here we're going to go ahead and add in something like this right here and then make this size cover and there you go we have some decor you guys can always you know do like default you guys contains a position of it to to like you know have it any which way you want it to show so I'll just leave like that for now and go to save now right here I'm going to go ahead and do this monitor right here and click on tablet so this is what it looks like for tablet users so it looks pretty cool but let's go ahead and scroll down right here and you guys notice right here the image is cut off now the reason why that is because basically it's taking only the size of the image so if the image is not you know optimized correctly it's going to look like that now a good way to prevent this is by doing this way so this way right here is basically you know you can see how the image is being forced on the background now this little thing right here won't show on you know on tablet so don't worry about it but so that way that I showed you the first time is the correct way because it better optimizes it and it forces the whole image as a background so right here I'm gonna go ahead and change us back to a desktop now I'm going to go ahead and just delete the small joint here so I'm gonna go and delete this I don't want this right here so this thing too I'm going to go ahead and just say you know what you're retired so I'm gonna go ahead and close this now I'm going to go ahead and add in a heading right here I'm going to put nothing in the back and I'm going to go ahead and add in a style and add in am I'm sorry right here under this section I'm going to add in a background to it so this section style classic image now guys this is only if you want the split-screen effect to achieve properly okay so if you don't want to screen a displayed screen effect you don't have to do it but that's just an alternative way to do it so I'm gonna go ahead and save this and then let's go ahead and see how this looks on tablets and you guys can see now it looks much better on tablet and we'll get into mobile optimization a little bit later in this tutorial and you guys that is very very important because now Google ranks your website on mobile optimization more than your desktop so right here you guys can see it does look a little funny now there are some settings that we can change but I probably would recommend you know even disabling certain sections but we'll talk more about optimization a little bit later so you go back to your website right now some look kind of funny because we have not optimized it yet for mobile so it looks a little strange so don't worry about this too much because we're going to talk all about mobile optimization a little bit later in this tutorial okay so let's go ahead and go ahead and keep going so basically we achieve the split screen effect right here and remember if you want to widen it you can do it the same way we did it to this section but let's just go ahead and go and add in this little section right here so this whole section right here so what happen happy customers and we have this cool little testimonial section right here so right here I'm going to add a new section click on that and then I'm going to go ahead and add in a header so right here I'm going to put this right here add this in the center and I'm going to put something like 1000 happy customers and for the style I'll go ahead and you know we can leave it as a we'll leave it as black for now and then for the Advanced section I want to go and add some padding to the top so let's go and add some 50 you know let's give it some space right here and then right here for the style I'm going to go ahead and put it my famous one open sans and then of course we'll put this you know like that at this point guys you're probably you're probably getting really familiar with all these options because it's very easy right it's a very very easy page builder to learn and everything so right here I might put centered and I was introduced to with something like this now the reason why this is so far apart because this section right here we put padding remember so we put too much padding on the bottom so I'm gonna click on this right here and say I don't want any padding on the bottom so now as a result it's much closer okay and then again right here we can go ahead and click on add a new section and I'm going to go ahead and add the carousel in so that's a new module we haven't used yet so right here we have the image carousel we have also the image gallery but I want to go ahead and use the image carousel so right here I'm going to put this in and then go ahead and to add some images so you know I can add as many images as I want and see so I can upload files select files and you guys all the images are also in the in the folder so I don't have them here but they're going to be in the phone that you guys have so it's gonna go ahead and use these for now I already have those so I'm gonna go ahead and let's go ahead and do these homes right here so I'm going to add on all these ones so I'm gonna have repetitive ones so right here we go to create a new gallery you can also give these captions but that's up to you so you can put like our business or our home base and then right here we go to insert gallery and then as a result you guys can see that the images will show now I recommend using PNG images so PNG images guys have a transparent background so as a result they don't have this background because you don't really want that for like this X to see how these they have no background so they blend in very easily so you want to go ahead and make sure that you use these PNG images so I'm giving you these for now but again remember that's when you get your own you want a transparent PNG background because that's the correct way to do it these are just you know they're just any images you know I'm just using just for just for tutorial purposes so right here you can change like the image size you can do like a different size of them you can decide more to show so if you want more of these to show you can go ahead and do that you can also do like image stretch so you can kind of like stretches across and you know however you want to design it this thing is so customizable there are like like millions of options you guys can do you guys can do like medium/large something you know even bigger slides to show you can have it like as many as like I think they have like you can show as many as 10 or some like that they show a lot so right here you can do like dots you guys can do just regular things so right here you can see that on the bottom right here we have dots and then all also you can have arrows so on the sides right here now you have arrows and of course you can add a caption to the title you have something else like here you can see I have the titles for the images you can add those in as well or you can put the caption which is basically number our home base so you can add that as well and additional options as well you know you can go through these these are pretty self-explanatory like you know the speed of it basically the auto speed 2000 is basically m/s so it's basically like 2000 m/s which is basically two seconds so that's basically how it works you want an infinite loop you can have an animation speed you can have it go right to left etc you guys can probably you know get that and understand it and also for the style you guys can do Aero size so right here you can actually change the color as well so right here we have the arrow so right here say yeah I want a black you know I want to black there you go and we can make it bigger so I like that now that actually kind of works a little bit better you know this section actually looks a little better now a better way to do this would be to stretch the entire section so right here I click on this and we can you know change it to something like let's see right here we can make this stretch all the way and then we can have like no gap or something or full width but that's just you know that's just you want to get unique and crazy you know but I wouldn't recommend this I mean I would if you're using transparent images but that's just an example of you know things you can do with this because it's very customizable you know this testimonial thing is really customizable and I just want to introduce you to it so that's an example of the image carousel and ways you can show up testimonials you can show off all sorts of really really cool stuff so I'm just going to do box or something like that you know and then go ahead and uh I don't like any caption that is a lot of good okay someone's going to say this now let's go ahead and do an important section which is the footer section right here so right here after this we want to go ahead and put in all the stuff right here so these are basically widgets and I'm going to talk about that right now so right here I'm gonna go ahead and view the page and let's go and look at our beautiful website so far so our website is looking pretty good now there are something that we could improve on so right here we can probably add in some more padding so right here we can add a more space right here maybe to the top and the bottom to get make it a little bit better right here we can probably add more padding in between so you'd have to go do this one right here and adding patting going down here everything else looks pretty good right here remember how we can stretch it a little bit more so I want you guys to sort of like visualize and look at your websites to sort of understand design guys because it doesn't matter how amazingly cheap your products are if someone comes your website and it looks terrible they're going to say you know what I don't care what this guy sell and I'm leaving you know and they're going to leave your website and you don't want that you don't want to lose sales because of landing pages and there are sewing tutorials on the internet with landing page and everything but let's go to talk about the footer section right here so right here I'm gonna go to I first let's go to edit page and make sure that we have our footer enabled so right here I'm gonna go to footer and right here an able footer widget area yes and then display copyright area I'm going to ahead and click on that enabled right now okay so now let's go ahead and view the page again so now we enabled it so now we went and enabled it and right here there's still nothing but we're going to go ahead and click on the theme customizer and we're going to go ahead and add in something to the bottom so plugins also coordinate with widgets like I talked about earlier plugins are basically apps for your website so you can have like an Instagram app you can have a Facebook app you can have a Facebook like box you can have a Twitter feed you can have there's there's limitless widgets out there and it's very hard to cover all those in a tutorial but I just want to expose you to basically how it works so right here we have like our footer widgets and that we have widgets right here so right here we'll click on widgets now you see how it says footer one footer to put er to three footer for so these correspond to flirty footer one footer to footer three and footer for now guys I'll be honest I had some issues with this the first time but after like kind of like you know messing around and resetting stuff like that it worked out fine so right here I'm gonna go to add a widget and let's do about me let's not about me widget right here oh just a me like a you know about me let's see right here we'll go ahead and put in something like a John Doe you can added some social links to it too I'd actually know we can do let's see that's fine actually so right here you guys can see that we have the picture right now and you know we have the right here you have like you can upload your image right here so right now I'm not using an image but I'll go ahead and upload an image right now upload files choose the file and I'll select an image also like I like this guy right here he's having a good time yeah but we'll select him all right so I'll put something like Darrell Wilson all right and then here for the social type we'll leave that as blank and then of course you guys can add on your own social your own your link so basically like your fanpage or whatever you're using you can go ahead and put your link for your profile there and people can go ahead and you know target it and talk all about it and also guys don't worry about the colors everything else there's actually a separate section where we're going to change all that okay but I'm just exposing you to basically widgets and everything else so going back over here and also guys if you have an issue with your theme or somebody's not working with your theme feel free to contact osha WPS website the link is also in the description they will also provide you with free support on wordpress.org pretty cool right all right sorry here we go - out of widgets now I'm also going to add in let's see what add on over here I added in the social media icons so there's also like a Facebook like box there's Flickr there's Instagram and all sorts of really cool stuff so Instagram now you'll need to go ahead and put in your username so you put in your username right here these images will show up and of course you guys can you know just different styles of it's like there's all sorts of like different ways you can you know have it so I'm actually using one from Adidas right now so you guys can you know put your your username or your hashtag right there and it'll it'll come out fine so right here you have Instagram but you would like follow us on Instagram instead a little bit more official you know and then you know you guys can actually go through all of these settings like these are just like you know how you want to design it like order by popularity etc so there's just a lot of ways you can get customizable and decide which ones you want on your website so this is basically how you would basically intertwine your Instagram onto your website really really cool and everything is done automatically so it's it's amazing it's simply amazing so right here if I go back and now we're going to go ahead and add in the do the follow us we'll do the social media icons right here so we'll make sure that we'll put this one right here so add a widget and then I'm gonna go ahead and find social media icons they're here somewhere did I pass them do you guys see them they're on our social icons though all right so social icons right here and you know for the dimensions I'll do something like 20 pixels font size they give you like a recommended one like 18 you know etc so right here you're going to go ahead and put in your social media icon guys but again remember that I'm just you know I'm just you know you're going to put your your network in and everything else okay so make sure not to put these because this is nothing so these dimensions are actually pretty big so you guys might have to like go through some of these and I check them out and you know put what dimensions you want you can also have like different transitions like you can have them like float in or you know however you want it to look you can do like a blink yourself you can put the dimensions you guys can go through these and it's pretty self-explanatory on all these you know so I'm gonna go ahead and say okay you know you can also have like dark or you can have like a tea colored but we'll go ahead and change all these colors a little bit later so this is just if you choose to have it like this guy so feel free to go to these options and check them out and last what I want to do is the custom menu so let's just say a lot of people actually still use this now I don't I really don't but a lot of people use custom menus because all your your pages show up there but I actually talked to clients and they were saying they actually go to the bottom of the page to find a page and I says really you still use that stuff like crazy you know like what are you what are you stupid you're like you're crazy right here just feel like our pages to our pages and then again you guys can change the fonts and everything else but I don't want to go into fonts and everything you know that's that can go on for days so there you go guys we created a successful footer right here so I'm gonna go to save and publish and go to back so congratulations guys and we basically kind of finished the first page the first page was pretty simple by now you guys probably have around a 60 to 70% understanding about this page builder works but a very big area we need to cover is probably you know some of the pro features we need to cover mobile optimization and other things now right here we can go ahead and change this bottom part right here so put our bottom right here you guys can also change this bottom section right here so you can put like this I was made by copyright whatever and then you can put like a made by Nick designed by Darrell Wilson designed by Darrell Wilson and then of course you guys can change like the background color for it so you guys can you know do all that stuff but I'm not gonna go through all these options because it's it's just repetitive and you know color tags you know it's pretty self-explanatory you can also do padding so if you want to add padding to this you can add that and I hope you guys understand what that is so for example if I added more right here it's going to push this up so remember just like we did before padding okay hope you guys understand that congratulations all right and then also the footer widget area at this section right here so we can go ahead and change the section now I don't recommend doing page ID at all I don't even know why they have the option but basically this will be replaced by a page I wouldn't use it I'm against it now guys remember when you're in the world of WordPress sometimes weird stuff happens and just you know things just don't give you options that don't really make sense especially for Yost's you know that plug-in gives you a lot of weird options but you know they still have to offer them be just because it's just how it goes so right here you can change the background color to something that you would like or your color scheme and then also the text color right here yeah something like whites and then the links color the border colors everything else etc okay so that's basically how you guys would change like all the the the colors and animations everything else so for border colors we can also do something like you know why it's etc okay so that's basically how you guys would you know change this section is also the typography so this section right here will actually you know change the fonts and everything else for different sections right here so like for the footer menu you guys can change like the font the font size you know there's there's so much customization here it's it's crazy that's why I use this theme a lot of other things don't have this you have to install plugins you have to you know do like a coding PHP just to get it across but the typography section right here will control like the colors it'll control the font the size everything okay so make sure to check out to the part of your section for like the footer areas because that's basically how you're going to style your font and everything else okay so X and we're going to go to the top and now let's go ahead and do the about Us page hey guys so I'm actually going to introduce you all to a brand new feature that just came out called the text shadow now this is my current header right here and you know you can change like the fonts you can change all the stuff but Elementor released a new feature that gives you the ability to have a text shadow so right here on the bottom right here we see text shadow I'm a click on yes now you guys going to see it has this sort of this shadow behind it you can change the blur you can change the color you can change all sorts of really cool stuff to give it this illusion that you know it's emphasizing the characters now there's tons of different ways you guys can use it and I think the best way right here is to actually watch one of the new videos that Elementor has released so this is the current example that they're using and it's all about creativity guys so you guys can use this like your current landing page and these guys are basically giving you ideas on different styles so here they have this like kind of kind of cute little you know headline and then here we have this like sort of like kind of like a I don't want to say it's like a dramatic kind of thing but there's a lot of different ways you can use this blur too you know emphasize your main page and you know also emphasize quotes and just make it look more professional and the great part about it guys that it comes free with Elementor so I recommend using it again it's a brand new feature update so it is basically on most of the modules right here so be sure to check that feature out because I mean it just looks really clean I mean this is just a beautiful a text shadow right there okay so let's go ahead now and go back to the tutorial alright guys so before we go on to the next page in the next section I want you guys to take a break you know go ahead take a break and I want to go ahead and show you all some of the pro features and what this page Buller has as its full potential now this here is a slider right here it's a full width slider and has a lot of really cool options now you guys are sort of familiar with a lot of the other modules by now so I'm going to show you this module I'm going to show you what it is and guys this is basically very similar to a lot of the other features that we've been using so this right here is a slider right here and I put like believe you know you could put anything and there's all sorts of really cool features you can have like the Ken Burns effect you can have a background overlay so if you want a different overlay colors you can go ahead and just add it in right there and it has a lot of different slider options so here you can change the speed of it the autoplay the transition you can have it fade in instead of having a slide you can change the transition speed you can actually decide where you want the text to come in on when it comes in so right here instead of having it come up you can have it come down you can have it zoom in there is so many features and amazing things about the pro version on also for the style right here you can change all of the same thing you can have it like vertical horizontal you can you can put it anywhere you want so I just want to go ahead and point out that the pro feature will include this forward slider and it's really really cool you know you can see what their kind of zooms in we have that ken's burn effect right there and it just looks really nice so this is something that you guys want this is included in the pro version as well and of course right here I have two sliders so you can get creative you know you don't have to have it like as a full width one you can even have like a four section right here and people can kind of like you know scroll in and see like oh I know this what's this what's this and you can be talking about different things and also right here is a another feature now I'm going to go ahead and show you all the the pro features right here so on the left side right here you see the pro elements now this right here is a post widget so basically let's say you're making a menu or something the pro I'm sorry the post widget right here is really helpful because you can like talk about menus right here you can have all like a steak dinner you can give a description about the steak dinner or something else and it's it saves you a ton of time instead of trying to find out how do I do this you know the pro elements are really amazing and also comes with a contact form and I like this contact form guys because it integrates very well with the page filler now I will be talking about another contact form a little bit later but their contact form I will be honest is a little bit better because you can decorate it you can get very customizable well you can change everything you can change the color you can change the messages you can change the position you can change anything in the same way we did it with those other modules you can do the same exact thing with this so I recommend to getting as well and also a really cool feature that these guys have is these flip boxes so if you guys like this feature right here they have some flip boxes and guys I know this looks very basic but you can get so customizable with this stuff you can keep making like all sorts of different things and trial and error and working on your sides to find out how you can incorporate these on your website now I'll be very honest you know the pro elements they always add a lot of more stuff you know when I did this tutorial maybe around like 6 months ago it's actually the highest-rated tutorial on udemy I got over 1,000 positive reviews but I didn't even clued the pro elements you know and I didn't have these features weren't even available back then so the page builder has gone such a long way it's these guys have really outshined and that's why I want to introduce the pro features because when I did that other tutorial on udemy there were none of these who were here in a year and these guys consistently add stuff you know they always add a lot of new themes like this right here is a pricing table so if you guys want to have a pricing table right here you guys can do that because the pro feature will also integrate well with WooCommerce so you guys can like have like a little like a gold membership silver membership and everything else and I also have tutorial guys on memberships and commerce and all sorts of other cool tutorials so be sure to check out my channel if you guys are ever interested down the road on memberships or anything else with like booking or something like that I have so many tutorials on on virtually everything and right here we have a countdown timer so right here I took the countdown timer right here and let's say you want to have like a movie coming out or something you want to put it on your website you know this can be your whole landing page you know you can just say you know we're coming soon on this and so days so right here you see we have the days we have the hours we have the minutes and you guys can customize this to anything that you want you know right here we can change this to like in line or a block we can take off days we can take off hours we need just have minutes or seconds or you can just make your own custom label you know you can decide what you want here so right here we just have minutes and seconds but we can have something else like you can put here like I don't know light-years until maybe you're doing some Star Wars you know a promotion or something like I don't know we know people out there do all sorts of things so you can have it like you know you know talk about whatever you want and another really cool one is the login feature so if you have a forum which I also have a tutorial for it's a free tutorial so all my tutorials are free I never charge for any much tutorials so this right here is like a login form so people can go ahead and login to your website and then they can like post on something or they can leave a comment on one a year your you know your blog post I'm like that this is where you can integrate the contact form and of course everything is fully customizable so you can always customize it to your liking and for those of you who are like you know CSS you know developers like that you guys can you know enter your own CSS here so maybe you want to go ahead and inline this Center or you want to go ahead and give it a drop shot or something like that for you developers out there you also have the ability to add custom CSS to this so it's not just for complete beginners it's also for people who are you know developers and want to go above and beyond and add some you know extra stuff or whatever you want to add and this next section right here is oh it's nothing but I also want to show you all the I think I had the the share buttons which are really cool so let's say you want to go ahead have people like share your stuff you can simply to take this and maybe I'll just drag it right here and now people can go ahead and share your websites on LinkedIn they can share it on Twitter they can share it on Google and also Facebook so the share icons are also a really really cool feature and again I want to also talk about the templates so right here we have this template right so I'm just gonna go ahead and drag this down now maybe you want to actually duplicate your page somewhere or you want to you know do something or you have all your pages right here so if I click on the home page right here guess what the entire page is just going to create right there again just like we create a first page everything's there so we don't need to do all that hard work again you know so that's why I recommend doing the the home page template right here because it's it saves a lot of time right I mean that's up to you though it's really up to you and your decision on it but um it's it's just another pro page that they have I think it's really cool me personally though I probably wouldn't use that I would probably just go ahead and save save the the pay and export it and we'll talk more about that a little bit later when we talk about the pro features and guys look at the price here so you also get all these templates and I'll talk more about templates a little bit later but they include all these free templates for you so the basically they're pre-designed websites and they do everything at one on one button click they create everything and guys these guys are always adding new widgets like every week do these guys had so much stuff there their pro features because you guys are new to the community and they really want to shine so I recommend getting the pro feature and guys honestly look at these prices right here what is $49 for the entire year like what is that worth to you you know when you're making a website guys you never want to cut corners you know the website is a representation of you it shows who you are so I recommend getting the pro version of course if you don't need to have those features I wouldn't get them you know I'm just saying if you are you know looking to expand your website you want a lot of these Pro features I mean 50 bucks for the entire year like you have to be great enough to get it because remember guys you also get a year of support and updates so if you have a problem with something or something's not working you can just you know ask these guys and they'll help you out now I recommend probably I mean it depends you know if you guys are just looking for like one or two websites I would get the business one but for those people who want to start a career on this and you want to develop your skills I recommend the unlimited because think about it you get one year of a limited updates you know and this is actually for the entire year guys so you can always like you know three months from now you can email them and they'll help you out right away you know and honestly you guys when you're working a website you don't want to cut corners and you don't want to get frustrated because I guarantee you for these over you watching this you're going to run into problems and you're gonna leave me comments you're gonna say hey Derral this isn't working well I'm gonna say guys you know if you had their you know their pro support you guys to help you in matter of like you know a few hours so I recommend getting it and you not only get the support you get all those pro features and you also get the templates and remember like these guys have coming soon stuff these guys are always bringing in new pro widgets to sort of help you guys out and increase your design and your imagination so I recommend getting the pro version but again if you don't want it you know you can just stick to the basic features because they still work you know and for a free page builder it one of its probably the best free tase bowler I have ever seen you know I've been on WordPress for you know five six years and the pro feature is simply nothing short of amazing okay so that's basically all I want to talk about as far as the pro features ago we will talk more about the templates because again you do get pro templates with the the pro features as well so does that make sense Pro templates with pro I guess I don't want the column you get you get new ones you know so right here under the add template right here usually with the free version you're only limited to maybe like half of these but with the pro version you get access to all of them and these are pre-designed websites guys so basically everything is already made so I'm going to go ahead and give you guys an example of that right now so let's go ahead and say let's do this let's go ahead and make a new page I'll go ahead and close this I'll make a new page and I'll show you guys a quick example of the templates but again I'm not going to go too far in depth because I'm going to talk more about that a little bit later but it's making a page guys is it's so fast so right here I'm going to go to plus page so right now basically just going to create a page right and you're thinking you know it takes a long time to make a page you know so I'm going to demo pro and go to edit with Elementor alright and I'm just gonna click on add a template right here and then from here you can just simply click on any of these and it's just going to it's just going to import the entire thing and then your websites already done so there you go just like that and then right here just click on insert and then everything's done so that's basically what a pro what a template is so it really benefits your website now of course it looks like this because remember I hope you know why because we didn't actually set the page where we have to we have to take off the header and the the other part but just for you know its internal purposes we'll talk more about this later and you just get a whole you know you get a whole website done for you in a matter of seconds you know so I highly recommend it it's really really cool and you know if you're looking to make a website really really fast you know I would i I would definitely look into the pro features and the templates are you guys are amazing you know it's not about working harder it's about working smarter right you want to you want to make a website as fast as possible and with the pro features you're given that access so again I was going to do it right here you know I'll go ahead now which one which we add let me show you one more I think this one right here is pro-1 I'll do let's see here we'll do another one letting page coupon a real estate Oh for real estate agents huh tourism will go ahead and add in I don't know we'll have this one right here this this photography one so there you go you know that's it you know you get this entire layout look at that someone someone basically already made a website for you and like you know a landing page for you in sections so it's really amazing what the pro elements can do okay so I hope this was helpful I do have links for the pro the pro features in the description you guys do purchase it and make a small Commission so I get like maybe like I don't like 10% or some like that but the pro features guys are truly amazing and again if you have problems with your website or somebody's aren't working these guys will help you out okay so I will talk more about the pro layouts a little bit later and also like mobile optimization everything but let's go and go back to the tutorial and talk about you know making the website you know you guys are already doing really really good and if you guys are here congratulations because a lot of people don't want to spend the hour two hours to basically give them a whole new career a whole new trade right but they'll spend five years in colleges are nothing you know like myself so let's go ahead and go back to the tutorial okay guys welcome back so in this section we're going to do the about Us page now we're also going to do other things like we're going to do the transparent menu I'm also going to show you where you can get a logo so I'm also going to go a little bit more on the menu section or how to edit that and get this transparency or however you want it then I'm going to go ahead and talk about all this stuff right here as well as these shape dividers and now I got these number counters right here and again going down right here I'm going to talk about how I made this grid image right here with meet the team and of course this testimonial section so you guys are already like you guys are already probably you know familiar with the page builder you guys are learning so I'm going to actually go a little bit faster in this section because I want to sort of force your brain to understand like how we got these now by looking at these you got to understand text header underline text button and now this is a two column row okay so let's go ahead now and go through this now I hope you guys remember the setting so if you guys don't remember the settings that you need I'm gonna go to this page right here now again for the section you're going to have a hundred percent full width so let's go ahead and do that right here so I'm going to go ahead and just show you guys again and you guys have to do this for every page that you create so again right here content layouts 100% full width and then right here just stable the margin and then for the header section right here let's go ahead and show you guys again we disabled it right here and we enabled it and we have our menu right here so disable default and then menu right here disable default and then menu one then right here we have our title which we're going to go ahead and disable because we don't want that other section right there you know on you know at like right across your page it doesn't look good you know it's not really needed we don't we can make our own and then of course that's about it so once you're done with that you can click on update or publish or wherever you're going to do and then I'm gonna go ahead and go to view page now you guys can see basically it's a empty page now so you can see all that stuff in the middle was gone okay so right here we click on edit with Elementor and i'm going to go ahead and design this section right here so this part right here and then we'll talk about the menu and the logo and then we'll move on to the blog section so let's go ahead and get started so right here I'm gonna go ahead and take this right here and slap it in and I'm gonna go ahead and put this in the middle I'm gonna do about us guys remember I'm gonna go a little bit faster here because I want you to understand how I did this and I don't want to have to you know give you time to sort of like oh how do we do that I kind of wants to push you a little bit to make sure that you kind of understand how I got all this okay so right here if I click on this I'm going to stress the menu I'll make a full width and right here I can add a background to it so right here under the Edit section I'm gonna go to style and I'm gonna go to background and go to classic and I'm just going to simply go ahead and put in an image right there so I'll put in something like this and then remember how we got that before we did the style and we did the cover now you guys can also do the parallax effect by doing the fixed section which will make it a parallax if you want but just for this section I'm not going to do that and I want to add padding so right here I'm a click on this module inside click on this and then I go to the the Advanced section and go to maybe like 50/50 so I'm like that or however you wanted to be like 100 however big you want your section right here and then right here of course you want to go ahead and change this heading right here it's it's too small you know it's way too small so I'm gonna go ahead and put this white and then right here I'm gonna do something like open sans' we've been doing open tons for a while and then of course I'm going to go ahead and put something like a size a little bit bigger and then you know a good idea is to space that out you know it's facing out the header right there is always a good strategy because it just looks clean it looks really really good and then I'll do the upper case so that's a pretty cool one right there you know that's a pretty good like about like right there it's pretty simple it's pretty self-explanatory okay so let's go ahead and move on to the next section so right here I'm gonna go and do add a new section now by looking at this guys again I want you to understand two column row we added these bars text text underline text button okay so let's go ahead and do that really quick so right here I'm going to put a nice T right here and I'll click on this so we had text and then what over here we had header then we had another text then we had no I'm sorry we had the underline so here we have the underline section so we had to underline and then we also had the button right here so the button so I put right there and of course guys it looks it looks very weird I bet you're thinking like how does this look like that you know it's it's so much different and all it really is is just spacing and content and font and color so that's that's really all it is you know it just looks like it's a lot but it's really not so right here I'm gonna go ahead and say you know it's um I want to go ahead and give this space padding right here or margin you know it's too it's too close to the top so I'll do something like a loose on like 10 or 30 you know and then right here if it's something like it would look like something like we are amazing or something so here we we are amazing and then right here put something like our services or whatever you want to put and then I want to go ahead and style apps maybe I'll change this to black okay and then family will do open fans and then wait we'll do 300 okay and then section right here I want to go ahead and reduce that gap something like this you know make it look make it look stylish you know I make it look creative so I'm gonna make this a little bit bigger - this is a little too small for me okay and then right here you can put something like our services or something like that and then right here you can go ahead and just say like you know I want to go ahead and add a black button right here and also I'll talk more about like pre-made layouts and everything else a little bit later and templates how you can basically get this to save and it'll be really easy now this row right here I want to go ahead and click on this now I want to stretch this section and I want this full width and I don't want any gaps because we're going to add a picture right here right so I don't want to go ahead and edit any gaps of that section and then over here I'm gonna go ahead and put in just a regular module anything I'm gonna go ahead and get rid of all this and I'm just going to go ahead and add a background to this so style background classic image and then voila we'll go ahead and this one right here and again guys remember you need to put cover okay so now it's covered like that and we can always make all this stuff bigger by doing the you know we can click on this right here and we'll go ahead and say you know what need some more need some more padding or something down the top or we know wherever so right here we can do something like that but I don't want to I don't want to achieve that look so we're probably going to be using this module right here and this one right here we can do something like padding so or we can do margin I'm sorry we'll do margin do like a 100 and there you go so now we have that section coming out a little bit better right so if you want to add more to it you can go ahead and you know put more mart into it or you can you know customize it however you want you can give this section more top you know for example with you like 200 I'll make it even bigger so you know just depends on how you want it we actually covered this before in the in the pre other section I'm sorry in the UM in the split-screen effect so I'm going to much in this there's different ways you can you can edit it and stuff like that so I'm going to go ahead leave it like that okay now of course this doesn't look as good as this because this text is a little bit bigger and I think right here we actually align this stuff to the center right here so this section right here you know we could actually align everything in the center and make it look a little bit more like the demo right there or you can actually even put it to the right side you know maybe even to the right side would probably look a little bit better but it really depends on how you want to build your website you know you can have actually everything on this side but I'm going to go ahead and leave it like that for now okay and I'm going to go ahead and move on to the next section which is this section right here now this section right here is basically the same exact thing it's the same exact thing so I'm going to go ahead and just say you know what I'm gonna go ahead and just copy this whole row you know I don't want to do a hard work again now why should we because you know we don't need to do all that hell over again and I'll introduce the bar counters as well so this section right here click on this oh no we actually clicked on this right here and to duplicate this whole row okay and then of course we can go ahead and we can go you know we can go ahead and you know take this section and maybe swap everything around let's see here I'll go ahead and swap it over here and there you go okay and then right here I'm going to go ahead and say you know I want a module here you know I want to go ahead and click on this delete this and I also want to go ahead and elite the background now I deleted that an accident so to get that back all you need to do right here is just you know duplicate a column and then there you go so I'm gonna go ahead and trash all this now and then I'm going to go ahead and simply put the bar counter module in right there so there's a lot of different ways you guys can you know like I made the mistake of there doing that but you know it's any which way it works you know you can you can delete everything or you can just you know put it out a new row there's so many different ways so I'm gonna look for the bar counters right here we have the progress bar now I'm going to go ahead and say you know what I don't want to have to keep dragging on in so I'm going to go and duplicate it like that maybe it's like this right here okay and just like the other modules so here we have my skill you can put something like our or air like FTO and then give it a percent and then you know do like our success rate and then for the style or we change the type right here now the type is just like a premade color so it's not really necessary but if you choose to have it you can you know do that now for the style again I'm going to go ahead and say you know I want this black the background color I want it you know that that blue that we have going on the inline text I'll leave it as white and the title which is this section right here you can change that something like black and then you know you can change it's open as well now a good idea if you guys are doing that is instead of actually you know making all these like from scratch again you can just go ahead and maybe delete these and then just go ahead and just duplicate the one that you've already done you know instead of actually having to do all the hard work again so I'm gonna say you know what I'm going to duplicate these ones right here and then from here you can just go ahead and you know you know you've already got the font and the color and everything so just change the title you know to whatever you guys would want so that is basically this section right here now let's go ahead and go to the next section oh also the number counters so let's go ahead and add in some number counters as well so right here I want to add up some number counters so I'm going to go ahead and actually click on this right here and bring in the column section right here and just drag it right below that and right here I'm gonna click on this and I'm gonna go ahead and find the number counters the number counters where are you guys we have the testimonials accordion tabs so guys there's a lot of other modules you know so feel free once you guys get a little bit more you know comfortable with the page to sort of go through all of those but the counters are right here and again so right here we have starting number so you guys can like make it start at a certain number you know you can make a start like a number like you know fifty and then make it go to number 100 if you'd like you have a number of prefix also the number of subjects as well and you guys can do also the time so if you do 4,000 MS that's basically four seconds okay so remember it's an MS time so you want to basically put it for ms time okay and you can do like thousand separator which is like the the comma for thousands right here I'll do like cups of coffee and then for the style I'll do something like black and of course we change this to something like open tan and then again we can go ahead and just duplicate this row instead of making like you know five or six five or six up no rows we'll just you know there you go yeah done and then of course you guys can you know change anything else and of course you guys can see it looks pretty good so also you might want to add like a different shade to this background you know adding the shade will really help so right here under the styles have the gradient effect so right here I can click on like a color maybe I'd like to color to this I think I did like a white and I basically added a dark blue so let me show you I'm sorry light blue so let me show you how I did that so I kind of like made it like go from whites just kind of fade in from there and all they did was basically just you know reduce the location and the angle right here so let's see right here you can also reduce the angle I'm going to do 150 so let's see how I can get this right here I'll should probably do I switch these around I should do from white blue to white okay and then from there I'm going to do like our location let me do like an angle see how I can make this work there we go there you go so now you guys can see that I basically made the page kind of it kind of like soaks into the blue you see that and you know you can always increase the location to make it go up or down so that's how I basically achieve that effect of this color right here kind of like you know right here like kind of like fading in and then fading out okay so it's just you know kind of like messing around with it's messing around the settings you guys will get it you know I'm sure you guys will get all that stuff I'm sure you guys are pretty pretty affluent with it so right here we go to add a new section let me click on this and I'm going to go ahead and add in a header text so I key I'll put it something like a no experience needed I'll Center this right here and I'm gonna go ahead and add some padding to this oops so under the Advanced section right here I'm going to ahead add in some padding so maybe like a we can add in like I'm going to add some margin actually I think the margin is better aligned like 100 and then of course we'll just go ahead and add a background to this so clicking on this section right here the blue section I'm going to stretch this section go to full width style and remember guys you can have video backgrounds you can have gradients you can have the classic I'm just going to go ahead and add an image right here and just insert the parallax effect so again remember to get the whole picture up there we're have to go to our our size and go to cover and then again if you want the parallax effect and go to fixed and ball off we have that beautiful parallax effect right there on our website alright so here I'm changes something like what do you why you know we'll do white whites good and then we'll increase the size we will do that open stance so we're doing open stance you know I recommend guys open sans' or Roboto or lado those are all really good ones no experience necessary and then we'll go ahead and insert a divider right here that's a little too far you know why it's doing that is because we added too much margin on the bottom okay so right here we go to advanced take this out and go to zero so I don't want any space if you guys don't notice on all my tutorials guys I am never scripted so I am NOT like one of those guys who like rehearse and everything I just know how it works and I just basically just show it from scratch you know I know what to do so I'm not on I'm not on a you know I would never do that I'm never like on a scripted like that those people are crazy so right there you guys can see we have this section that appears right there looks pretty good now let's go ahead and add in a counter right here so we'll go ahead and click on this so we have four counters so you guys know how to do that we're going to go ahead and grab these column widgets right here and just drag them underneath and then we can go ahead and duplicate this row like that to have four okay and then I'm just going to simply click on this and drag in these number counters like that okay or I can duplicate this row but I'm just gonna go ahead and just drag them now I want to drag them you know I want to I want to change it out I'm tired of doing everything the same one you know so number counters okay number counters okay and how did I get that effect right there how did I get this effect do any of you know how I got this I don't want to I don't want to you know ruin it for you but that's the shape divider okay so basically the shape divider for this section I basically just add it to the top and the bottom okay and remember for the shape divider you're going to have to make it control this blue section right here so shape divider right here the top section you can add whatever you want okay so you know you can do something like clouds and of course you can change the color of it but you know guys keep it consistent you know don't get tacky you know you always want like maybe three colors max on your website you don't want any more colors than that because if it gets more than that it just looks ugly and people are like you know this website looks kind of tacky and it doesn't look good so now the bottom section I'm going to add clouds again and that looks pretty cool now except for this section right here but you guys don't know how to fix that by now you should but you can increase the padding right here or on this module or on this module it really doesn't matter which module you add padding on but right here click on this go to advanced we can add padding to the bottom which is more space but I'm going to let you guys do that you know I think you guys know how to add padding now and add more space and you can push it and stuff like that so I'm gonna go ahead leave it right there now for the cool number again guys you probably want something like a like a white font you know it looked a little bit better so the typography again you can change so this is for the number and also for the title you can go ahead and change it to whatever else you want so wise probably black right here because I have to probably push this stuff down so I can go ahead and add some margin right here to the bottom section right here something like that so give it a little bit more space or I can add arc and add padding so right here I'll click on this actually this will work just like that you can do like that or you can add padding to the bottom instead you know it really depends on if you want margin or padding they virtually almost work the same but they kind of don't they're very different but they do kind of work the same in some aspects okay so that's basically this section right here so we went back over here we have these three right here and these are basically the blurbs all right here I go to add a new section insert three rows all right so we have one two and three now I actually inserted the icon box okay so again icon box right here and the icon box alright so I can click on one right here and you know you can do stacked or frame and then of course you can do like circular squared you can you know you can change the icon right here so put them like that now also for the icon position look better like that that's also how I did it and you guys can actually get guys you can get as customizable as you can possibly think of you know so for example right here let's say for example I don't want to use this one I'll give you a better example I'm going to remove this column and you actually I'll go ahead and just duplicate this right here and let's see what else I can do here I'll go ahead and put in this image run right here this is like this is a trick right here so the image box I'll just go ahead and put it like an image box and I'll delete this one right here now I know it looks like it looks kind of like you really can't do much with it but you can actually turn this into some sort of profile so right here i'ma click on delete put this guy right here and you're probably thinking ah doesn't look good but once you do this and you have a bigger picture right here you know because we can actually increase the image size right there and now what kind of looks like a profile right it looks like a a person's profile so I'm just kind of using your creativity right here like for example we can put something like um I'll do something like let's see here Darrell Wilson and it'll be like I don't know CEO or whatever whatever people put in these days you know and then this guy helps people people with WordPress tutorials and then you could talk about your company and our company you know is going to fail or whatever succeed because we are amazing so it's it's basically just kind of using these in any sort of way to get the results you want there is no right or wrong way to use these modules so I want you to kind of understand that you know just because it says it's an image model doesn't mean you have to have it like this is a profile right here you know and for you know other ones we use we use them not the purpose they're used for but it's all about creativity so any which way you can possibly imagine to use these use them you know and right here add it up a profile maybe I can add to right here and add like a split screen effect to it you know like a split screen profile maybe you and your partner you know it's all about creativity and just using your imagination to get the results you want because there is no right or wrong way to make a website guys there really is not and then of course right here you can put something like your LinkedIn profile you know like even you can say like click on this to go to my LinkedIn or something like that you know whatever you can possibly think about and also we have meet the team right here and I have these four pictures all right here we go ahead and goes to add a new section click on this and I'm gonna go to header I'll put this one like meet the team I'll put a center style go ahead and put open sound right here to decorate this and then one black and then maybe oops and then maybe right here we'll do something like a weight of 300 and we'll increase the size and I want some padding between this I don't want I don't want to close you know so we'll do something like that right there and then actually for the bottom we'll put zero because I hope you know why we're going to add a line right here and if we have padding right here it's going to push the line away so humor click on this go to divider and drag it under okay and then I will go ahead and center that reduce the width increase the weight and then I will go ahead and reduce the gap and change the color black looks much better with black right all right so we have meet the team section right here now I want to add those four pictures so let me click on this right here and add in or I can click on this add new section right here and click on four pictures okay now this section right here you're simply just going to drag images right here so we're just going to go ahead and put the images of this guy and also guys on the folder I have different pictures for you so I'm just going to use this one but feel free to use your company or whoever you want or you know your your brother or your sister or whatever you want to do so right here I'll put that and then again I'll put this and add that and you know I can also go ahead and just duplicate this instead of wasting all that time so that's just another way you guys can use the duplicate row okay now for this section right here I'm gonna click on this row right here and again I'm going to do full width because I'm basically saying I want this order to be full width right here you know so by clicking on this right here by clicking stretches section and full width and remember I don't want any gaps so I have no gaps and as a result we have that grid effect right there so you can have your team there you can have all sorts of really cool stuff and you guys can kind of mess around with this you know like why would you put the screen or you know min high you know the min height maybe you can kind of increase the size of it but that's if you choose to or you can do like you know if you want like a full screen one you know you can like fit the screen but I wouldn't do that obviously this default and you know that's basically that's pretty self-explanatory you know if you guys want to caption right here you put like a put Darrell Wilson right here Darrell Wilson and then right here you can put like your other partner or something else and you guys can always change the like the cuff on everything or what you can do is just go ahead and say you know what we can just go ahead and add in a text editor right below that and then we can talk about our our person and then let's say for example we have the pro version we have the social media icon like we talked about now I don't have them here but I wish I did so because we can add the social media icons below that make it look really professional and really clean but we do not have that so that's unfortunate but if you have the pro version you can add social icons at the bottom right there okay that's basically how I achieve this section right here so you want a section like that but the grid effect that's how you achieve that section okay and the last section we're going to do is this section right here now this is really easy this is this is too easy now for you guys you know now it's just being like repetitiveness so I'm a click on this right here and go to our our module right here and we use testimonials testimonials so right here you can talk about your company on the content right here so this section right here corresponds to the content and then for the image I'm a delete that and just put this guy right here this guy is the main guys today you know you you gets an a you know and then right here you could put something like you know your company name so if it's there all Wilson and then job I'll just do like WordPress WordPress dude dude and then right here you can do like alignments you can change the alignments to whatever you guys would like and then also from here on the style you can change the content color to something else like black and then to the PAS graffiti open sans you know people love that font I don't know what it is but it's just the most popular font so I don't know why but people people really love it you know and here we can change like the size you know everything else it may be uppercase line-height you know we can change the line spacing so I'm coming to do that you know I don't know that too much you have too much you know I don't know we got to tone it down there that's too much something like that that's a little bit better and then for the image you can change it for the name so it's so customizable you know and I can't go through every option because the name corresponds to Darrell Wilson the job corresponds to WordPress dude and this stuff right here just corresponds to the fonts and in typography so just you know just go through if you want and now that'll be it's okay sorry here we click on this Oh guys for more things don't forget to say please don't don't forget to save I've had people comment or like hey Durrell I was always building my website and then I didn't click on things and I'm like well I'm really sorry you know I'm sorry that happened but you know what do you want me to do I'll email you a Starbucks $5 gift card or something you know so I mean that's really all I can do right so going back over here we completed it now I want to talk to you guys about the header right here so this right here looks really good right and our website does not look really good our website keep opening that tab our website has this right here so we need to go ahead and fix this section so go ahead and save this stuff and let's go ahead and go to our what we can actually view the page and then right here and go to customize so we need to change the options in the theme customizer all right so it's loading my theme customizer and there we go so right now I'm going to show you guys how to make this transparent and I'm not going to go through all these right here and explain what these are just so you understand you don't have to follow me here but you guys can just kind of watch and understand and get the general concept so slight identity right here so for example like your website com you can put it up there but I'm actually going to replace this right now with a logo so it doesn't really matter what I put there I'm just not going to have this year because I'd rather have my logo there then you know this text and I'll show you guys where to get a logo in just one second and also for the site icon so again right here on the top left right here you see we have these little icons whenever someone visits your website you can go ahead and put it right there or whatever you want so here I'll put this right here and now you can see right here on the browser that that will show up whenever someone's visit my web site so I'm going to give you a website that you guys can get a logo from it's really cool and next right here is our menus so we have many location again we talked about this so we have the top bar we have the main and we have the footer so we basically put that and also for mobile which is optional so you can you know decide to put it there but it's only it's going to be a hamburger menu for the mobile so I'm not going to go to that but I will cover mobile optimization in the next section so make sure to stick around because that's extremely important so going back over here we have the widgets we talked about the widgets right here on the bottom of the page so again right here we have our widgets going back over here the static front page again you always want to set your homepage to right here like your static homepage is this and also your post page is whatever you want and we'll talk about the blog in just a little bit it's going down here we have the general options so a lot of these actually don't really apply to us because we've actually used our own page builder and we didn't really use their page builder so as a result many of these right here are not really needed but there are some like scroll to the top like the scroll to top button way at the bottom you can go ahead and change that you just icon right here we can change that to something else we'd like okay so you can you know have fun with those and change those to whatever you want like the input textarea no I yeah this is a field of like at the weight bottom right here so you guys can kind of go through these and customize them and decide how you want it but I'm not going to get too much into all these right here because a lot of these guys are not applying to us because we do not use their page Mueller reviews Elementor and like for like the layout style so you don't really need to mess with any of this because we've actually had the plug-in do all this on our own so we don't need to mess with any general settings whatsoever okay so going back over here topography again we don't really need to use it too much because we are using our own right here like we don't need to basically like to like our body like a font but I mean it actually really is helpful if you guys decide to use their page wheel and everything else but we're not so I'm not going to actually use it and it you can see it only applies to something like the menu where that was like the top right here but we're actually going to replace this right now so it really really doesn't matter however it actually does matter for the menu so I want to make sure that you guys don't skip this out so if you're going to top right up here you can see our menu we'll change so it only applies to the menu and the footer menu as well okay so you want to go ahead and change them of those settings right here for the menu this is where you're going to do it and I recommend doing something like so even you like capitalized and we're doing like open sans let's go ahead let's keep it open sans right here and I'll do something like we'll do like you know these look like that it looks pretty cool and I think for this section that's probably it so I'm gonna go to save and publish and go back right here I'll go back again and right here we can go to top bar now the top are we actually replaced so that was the other bar right here so we don't really need the top bar so on this section we're not really going to use it for much because we actually disabled it so we don't need the top bar as well okay so I'm gonna go back and right here under header now right here we have like our general our menu or logo etc so your logo your going to go and put right here now guys you're going to have to go to fiverr.com and i want to actually talk about like good people and you know good sellers and everything so you can type in something like logo now there's also a link in the description it will take you to web I'm sorry a fiber comm if you guys do you purchase something I think I make like I think I get paid just fighting like traffic I don't even know how I never even like go to like my affiliate program but right here you guys can see they have really cool logo makers right here so I will do a business logo and you guys can get a logo for just like five bucks and guys you don't want to cut corners with your logo you know your logo is a representation of you it is what people see when they talk to you so these people right here will make really cool logos for starting around five dollars like this guy right here five dollars these other guys right here like that are like 25 you know you don't have to use them you can use to do someone for five bucks my logo is made for five dollars so these guys will provide you some really really cool logos okay so go ahead and get it from one of these guys and once you're done with that you guys can actually go back to your website and insert it in so right here under logo I'm gonna go ahead just put this for now and go to select and then once you like kind of like Sligo what part or like you know how much of the logo so I'm just going to like select this little bottle right here you know just just for tutto purposes guys so there it is there's my new logo and again guys you want to make sure that it is P&G okay so this logo I have right here my website this is a PNG file and what that means is it has no white background so like this right here is a JPEG image so as a result it has it has a background you don't want a background right there okay so I'm actually just going to go ahead and like to remove this this looks horrible it goes so I'm just giving you an example of what you would want for your logo I think the general size is around like you know 50 pixels by 50 pixels so you want to go ahead and use that as well and you can also change the size of like the logo and everything right here as well okay so go to that website get your logo for five bucks and then come back here and you can go ahead and upload it right here okay and you have like the menu right here and you can like Center it you can do left you know a lot of these settings guys are very self-explanatory like the link color you know the accent colors most important one that's the actual color of your menu right here okay and then this right here is your secondary menu so this right here about us is your secondary menu so remember we're never making customizations to your your website you want to make sure that this is the secondary menu so that's just something you know what it is okay so I'm going to put white right here and the reason why I'm doing white is because I'm actually going to add a transparent background so I'm go to save go back right here and this is like your menu social you can go ahead and enable a social menu at the top so you want to go ahead and give it a social menu you can do that but I'm not going to go ahead and have that no thanks now going back over here for your mobile menu as well and I'll get him to mobile optimization in the next section so you guys will understand it a little bit better but this is just basically decorating your menu on mobile okay alright so you can go right here to general and I seen a style right here so we can style this menu different ways so for example right here I'm adding a transparent background so now you guys can see is transparent or you can have top menu and also a full screen or center or medium or whatever you want to do so these are the example of the the headers so custom headers that's basically where you'd like make your own little header and you can do like like you know you basically make a header on a page and you can select it right there but it's really not needed you know the transparent menu is probably one of your best options right here so we're here and click on this is a header bottom border and then that gets rid of that now guys remember you can actually just have a regular menu like this the most websites have it like this you know so this is like the standard now the reason why it transmitted the the text is wise because remember I added a transparent I'm sorry a white text but again you can change the background color to accommodate that you know so you can kind of see it a little bit but I still want the transparent background I don't want any of the I don't I don't want to see anything right there okay all right so I'm go ahead and save this right here and now I'm going to go ahead and you can also change the hide the menu so you can make it like bigger or smaller but I think other things like 74 was good now I'm going over here and go to logo and I'm going to go ahead and add in a logo right here I'm adding these logos right here so I'm gonna go ahead and put these in to give it a little bit more of the you know an idea of it stuff like that so there it is my logo and you can also do like a red no logo if you want to you know whatever you want so and then also you can change like the the height of it the max width actually I should probably probably remove that one let's see fit this to 500 and go ahead and redo that one okay so there is there's my logo guys and again if you guys need help make sure to go to fiber you guys can get a logo for five bucks you guys can use my link I make like you know ten cents it's really it's really cool you guys welcome back so I'm actually going to introduce you all to another feature update so sit back and relax now this feature update again just came out so right here you guys see I have these images right here now if you want to be able to have people click on your picture and have an image like that pop-up I'm gonna show you how to do that in fact you can actually go ahead and change all of the colors when they actually click on it so for example right here you can have all sorts of really cool background colors if somebody decides to click on your image and this will actually kind of match your skiing so go ahead and click on an image or you guys can just go ahead and watch me and when it says link to to simply go to media file and now this feature light box will pop up until we just click on yes now there's also another global feature right here under global settings which will have all of your images have this so open the lightbox or opens all image links that will have a lightbox pop-up now to get this feature again remember you have to have it linked to the media file so what that means is the global feature is basically saying for any image on your website that is linked to a media file it will open up a lightbox of this color right here so global settings lightbox and for example put this one right here so basically if I click on any of these images right here it's always going to have this cool little lightbox and this also works for the gallery module so this will you know if you want to have people scroll through your images you can go ahead and use the the gallery module as well and that will basically display all of the images or you know they can click on it so it'd be this module right here they got the image gallery and again they can go through and scroll all the images all the images that you put inside the gallery this will work as well okay so it's a really cool feature update they added and it gets released it so if you guys are watching this today congratulations you guys are ahead of the game so make sure to check out the feature updates and also you don't want if you don't want like all the images on your website you know if you don't want to global you can go ahead and disable the global feature so global settings and turn this off and then you guys can just have it for the each specific image so remember you have to go to this section right here and do it through each image however if you want it on your entire website you don't have to go through all your images you can go over here to global settings lightbox enable this and voila it will automatically work on all the links to an image file okay so be sure to check that out guys now let's go ahead and go back to the tutorial alright guys so in this section I'm going to show you all how to make a beautiful blog now depending on what you want to do I'm going to show you two different ways now one is the freeway and also one is the pro way and I'm gonna show you both just because you guys want to change your mind in the future upgrading to the pro or you want to say it's a free so this is the free version right here and you're just basically going to get like a little blog post right here and you know your blog will look beautiful and look really really cool your blog post will because we're going to use Elementor to actually design our actual blog posts now if you guys decide to use the pro version it can look something like this right here where you can go ahead and decorate it so right here you can see that on this top part right here I have these cards and you can change the background and everything and in this section right here you can change the font the color the read more the link you can be very customizable with this version right here okay so this is the the pro version right here so again it's the same thing except this doesn't include this top part right here so depending on what you want so I'm going to show you both versions and then you can be the boss of your own website and decide what you want so again pro version and this is the free version layouts right here so let's go ahead and make the free version so right here we go to plus new and go to page now I'm going to do something like the free blog post version now for the sidebar I'll just go ahead and leave the sidebar to the right because you might want to use sidebars I'll talk about widgets in just a little bit I'm going to say well the margins the header disabled enabled and then menu one and then for the title right here I'm going to go ahead and enable it and then what you actually wants to name this blog well I'm going to do something like the best blog ever and then go ahead and put publish so I'm go to view page now we need to assign this page as our blog page okay so to do that so we need to go to customize alright and then right here under static front page you want to set the post page as the free or whatever page that you created so this is the free blog post version so I'm gonna go to save and then your blog post will show up right here so I'm gonna go back right here and also for the blog section right here you can change your blog entries so for blog entries right here you can put your sidebar to the left you can you know take off the overlay off the image now in just a second I'm going to show you how to make blog posts so don't panic don't worry you guys can change the blog style so here you can see we have two now it's kind of grid like this you can change all sorts of stuff you can have like three grid columns now also right here the element positioning you can have like the title below the content so you can see now the content shows up above the title so you can kind of drag and drop them like that it's a very amazing blog feature they've added but I want to go ahead and just like get rid of all the meta like the author the date the categories I want enough stuff to show up on the blog pace right here so something looks like that you guys can do more excerpt which is basically more characters so instead of instead of basically nineteen characters now is showing 42 words okay so you can kind of reduce that but now let's go ahead and make the actual blog post so I'm going to go back right here and click on X so this is the actual blog page okay and then right here we go to plus new and go to post so post not page then this is the page we are creating now again right here for the content layout I'm going to use a layout from Elementor so I need to make sure these are all on the settings that I need them on so right here header probably done this a few times already yes the other learning okay and I'm go to publish okay I'm gonna go to edit with Elementor and all I'm going to do guys is simply go ahead and add a template right here I'm going to use the blog post template if you guys actually have a lot more on their websites so be sure to check out these layouts so right here I'm gonna go do blog post launch then they have like two or three times like styles and again you can just make changes right here so you can put like your website you know your website blog go ahead and delete all this voila and then you guys can go ahead and just you know change the content here or do whatever you want because everything's already done okay so that's basically how we did that so here we go to save now one more thing I want to do is I want to go to view this page right here so this is the actual page right here that this is the actual post now we need to make sure we need to change some settings like right here we have this stuff at the bottom right here we want to go ahead and change all this stuff so right here under customize is go to click on that now we need to actually go to the actual customizer where talks about the actual blog post so not just the style the actual post so this is a single post right here and right here you guys can see now I kind of recommend just getting rid of like mostly everything here because we're not really using any of their stuff right here we're not using anything so we're using elementor's version of this so we really aren't you know we don't really need any of this stuff you know all right so it's going down here now all we have left is just the comment section right there I think content will actually get rid of all of our content so you don't want to do that that's not good you want to go ahead and make sure you have content and just comment maybe an author box too you know you can have an author box as well because with the Elementor page builder guides we don't need these other settings that the theme gives us because it's just not necessary because we're using elementor's page builder to design our own so we don't really need any of that stuff and obligated okay so right here we go to click X and now let's go ahead and go back to our page all right I have to close out of it sorry about that all right so let's go ahead and go to our actual blog post page so we're here we go to our page two pages so we did the free version all right so I clicked on that and then we did this is the page that we're creating so this is the actual page and I click on it it'll take them to this page right here and voila we have this beautiful blog post okay now one more thing if you want to add a featured image to this you want to click on this right here and goes to edit post and you want to go ahead and add in a featured image so it's going down over here at the bottom click on set a featured image and this will basically allow you to put a featured image right there let me set this and then go to update okay now instead of going to view the post I want to go to pages I want to go ahead and see that page I didn't so the free blog post so this is the actual page remember the page we are creating and then voila we have this section right here now this sidebar section guys is called the widget section and basically what this is is well it's for a lot of things you know you guys can add a lot of things there so click on widgets right here and also you can go to appearance and widgets now here to a sidebar so right here we have all these little boxes right here you can put like the about me remember how we decorated the footer the same exact way you decorate the footer is the same exact way you would decorate the sidebar you can have like a Facebook like so you can add a subscription like subscribe to my newsletter I have a tutorial on that as well guys so be sure to check out my tutorial it's a free resource take full advantage of it because it I teach you all about MailChimp and how to use like email marketing all that stuff at no extra charge no cost it's all free so I'm going to close these sections and then you know social icons now you can add social icons right here something and then again you guys can add all sorts of you can add a video you can all sorts of really cool stuff to your sidebar guys so that's basically what the sidebar is and that's how easy it is to decorate your sidebar because you know when you go to like a blog page they would have like a sidebar and stuff like that well that's exactly what it is so I basically all they do is have searched recent posts social icons and categories now for category a for these things these might show up I don't know if you have to set the dimension for it now it's really hard for me to know which plug-in how it works guys because I had used thousands of plugins so every plug-in has their own little way and they have our own little attitude so you kind of have to adjust to it so I'm actually go to my dashboard and view that page right now okay so remember we made the plea the free blog page so the free blogpost version I'm going to view the page and voila and again right here we have the recent posts we have the search bar to follow us I probably need to add in a little the little Asterix symbols to make the follow with icons appear and then we have categories because members you can also categorize the blog post as well and if I click on this right here there we go we have a beautiful blog page okay so that's basically what we did right there okay guys so now that I've shown you guys how to do the free version I'm going to go ahead now and show you all how to do the pro version okay so right here we go to edit element or actually I actually have a another one on this server this one likes a little bit quicker this is a psych round this one's actually much better so I'm gonna go ahead and go to my page right here so you guys are probably a little bit now familiar with the page builder guys so I don't want to sort of go really basic and beyond because you guys probably understand how to do a lot of this stuff so I go to edit with Elementor and just like we made the homepage Devadas page you're going to do the same thing right here okay but I want to show you how I design this section okay so this section right here is actually a shape divider and those are really cool so if you want to have this look right here basically all I did was I clicked on this little top icon I set this to stretch full width now for the style I actually set it as a shape divider and then the bottom part I gave it these wave brushes right here okay so that's how I kind of design this and remember you guys can like you know change it you guys can change the hides all sorts of really cool stuff okay so I'm gonna do waves as a wage brush now how did I get this section right here well what I actually did was I inserted in image gets entered an image right here so again right here I want you guys to look at this this section right here and guys this same image is in the folder okay so right here for this blue section I just simply made a stretch section a full width section style normal the background type is classic and I put this image right here okay so basically all I did was I just basically put in an image I stretch it all the way across text module and then I put a divider module now one really cool resource I want to give you all is how did I blend it in perfectly so this is an image but this is not so how did I blend it in perfectly well I'm going to give you a website right now that's going to show you how to actually get the color code off any image you want okay so I'm going I'm go to Google and I'll go to HTML color code HTML color codes so it's this one I here don't worry guys the link is also in the description so it's HTML - color code info now right here I'm going to choose file and I'm going to go ahead and select the Elementor one I have a lot of videos you know mostly this one so so right here I have the home portfolio and then we go to show image I'm gonna click on this right here see that I clicked on that it gives me the color code amazing this is amazing so let's go ahead and go back to our actual page now this section right here for the shape divider on this bottom part I'm going to actually put the code in there but it's already there but I'm going to change the color on purpose so shape divider bottom I'm gonna change it changes of this color all right now the same color code these guys gave me they're saying this is the code of that color so all I'm going to do is simply take this and paste it in there and voila it blends in perfectly okay so I'm going to go ahead and leave this section this is like an old blog section now I'm gonna go ahead and add in the pro feature okay so the pro feature is the post section right here so go ahead and find it it's on the pro section oh it's actually on my other website right here so I'm going to go ahead and save it and I'm go ahead and add it in right now alrighty I'm back so I just installed the pro version of elemental so right here I have the post section now I'm going to take this right here and simply drag it to this bottom section right here so now you guys can see I have this section right here and all they did guys was I just basically put in some padding right here so I'm give it give the image some space and everything okay so I did 120 120 120 and on this section right here I left it all blank and then this section again I left blank now how did I get that achievement so basically what I did was I took this right here and I reduce the margin in fact I made it negative so I'll click on this right here and do negative maybe 90 and now you guys can see I have the image is kind of pushing up right there to give it that beautiful design so that's exactly how I achieve that right there okay so all your posts will show up right there and again you guys can go ahead and take this this module right here and you guys can decorate it you know if you can just do like classic they also have cards which is like a new feature so it's really clean it's really professional you know you can change the image size you guys can kind of go through these settings now that you guys are familiar with how this page builder works you know you guys can go through all these settings because you know column gap row gap this stuff is pretty self-explanatory you know change alignments the card the border radius you know you can change it like that there's so much you can customize with the pro features it's it's simply incredible you know you can have like that you know and it just looks you know it looks really cool even though it doesn't look like it's not how it's supposed to but you know it looks good so it doesn't matter how it there's no right or wrong way to do it you know you can also have like an image hover over effect you give like a grading effect you can do like the image the color background the text the batch position as well it's just limitless guys on which you guys can do to you know get customizable with dis okay so you know go through this check them all out I don't want to have to go through and go through oath upon groupie you guys understand what that is by now okay but that's how I achieve that look and it's beautiful you know it's a really clean look you know what just like if I clashing them all so you guys can see it's sort of clashing you know I can even add more you know more right here maybe like we can add like 1 1 30 let's see what 50 and then if I go and reduce this you're going to see like how these just kind of push up and it looks like a split screen effect right there okay so that's basically how I did this section alright let's go on and move on to the next section alrighty guys welcome to our first quiz now I have these two images right here it's a really beautiful design it has really cool decor but how did I make this you know how did I make these two images collide together and you know if you want these your websites I'm sure you want to kind of mess around and I'm going to show you how I made this and how you can incorporate it on your website so here we go to edit with Elementor and I'm also going to talk about responsive issues as well so basically all I did here guys was I have two columns I have one column and I have two columns right so all I really did was have one column right here to come right here and this one right here this column I have full width no gap and I just stretched the section okay so this is basically we know what it's one giant section but with two columns now for this column right here I decided to take the columns right here and put it on this section right here so as a result I have two images so I have one and I have two now by default it's not love something just like this right here it's going to look like this right so if I take the columns right here and I drag it over there and then I put two images wolof wolof it's going something just like that so how I achieved this section was on this section right here I put it as full width and I didn't really add any padding but I added some margin so the margin will do something like that right there some space so by adding some margin I'm basically kind of centering it right there and I can go as far as 90 okay now for this column right here I kind of want to move this column around so I went to the Advanced section now for the top right here I'm going to put 100 down for the left side I want to go ahead and do minus a negative 180 and voila we have this classing section now if you look at it it's beautiful it looks great now there's one notes I want to make here guys this section right here is going to have responsive issues so you want to make sure that you go ahead and disable this for the tablet and also the mobile because by default it does not look good so how can you prevent this from looking bad on mobile users you can just go ahead and just disable this whole entire section okay so if I go into the Advanced section under the responsive you can go to hide on tablets and hide on mobile but it will appear for desktop users so again right here we're go ahead and visit it on mobile device and fall off it is gone okay so that's a quick alternative on how you guys can make that page look really good along with responsive issues to fix it it's go ahead and scroll through the rest of this so this guy's will not show up so again don't worry about this section too much because again we disable this on the tablets now if you want to see how it really looks you can click on this and then scrolling down you can see it's gone see that images are gone so it will be fully responsive and everything else okay so that's basically it that's how I made it I hope you guys enjoyed this quiz let's go ahead and go back to the tomorrow we're going to talk about all their cool stuff all right guys welcome to the mobile optimizations section so here we're going to talk all about mobile optimization tablet optimization strategies to use and you know just things to watch out for so right here I will click on edit with Elementor all right so we have this section right here now to look how it you know to see how it looks on mobile you want to click this computer right here and go to tablet so go ahead and scroll down and if everything looks good to your websites feel free to leave it if it doesn't then go ahead and change it now one thing I want to look at is this section right here you know I don't really want this section so right here on this section right here I'm going to advanced go to responsive and I want to disable this on tablet and mobile the reason why is because I don't really care if people out there see these on mobile or tablet you know I don't want this section to show for mobile users have you ever been to like Skype comm or another website on mobile and it looks completely different than their actual desktop website that's exactly what we're doing here so here we'll click on safe so I don't want it to show up so let's go ahead and scroll down this looks pretty decent actually you know I'm surprised usually there's a lot more work but let's go ahead sell it looks on mobile I guarantee you on mobile it's going to need work you know it always needs works on mobile so let's go into go ah right here so this other one makes sense you know welcome to revolution it's it's it's too high up you know and it doesn't really make sense also this is kind of out of whack so let's go ahead and go to advanced and I want to go ahead and add a top margin of maybe like 100 or no 250 there you go that looks much better right so now you can see that this section is pushed down and maybe this button right here needs to be aligned right here so I think that looks a little bit better than it does as well and also for this other button right here that's hidden behind it now there's a few things we can do we can just disable the button or we can you know push this down more to make it show but I think I'm just gonna go ahead and disable this button because I don't want to give the user too many buttons on his phone because they're a lot bigger and you might not see what it is so under responsive right here I'm just gonna go and say you know we're going to hide it so now the user can only see the start and honestly this is a much cleaner idea than having two buttons that are like overlapping each other right so over here again maybe you want to go ahead and Center this text so you can Center it and then here same thing we can go ahead and center it because remember the user can't the user can't really understand our websites I mean I'm sure he looks from a computer you're like oh I get the style but if he sees it like this right here everything's trained forward this is clean this is very easy so I'm going to go ahead and save it like that now again you can do the same thing for this bottom section right here so it's going down here does everything look okay to you guys I think so remember this section is disabled on tab and mobile I hope elemental will actually reduce a patch where they make it white out because for the Divi theme it's actually white out so you can understand it's disabled or not ah here we go right here this section right here is too big so let's go and reduce the size of it no experience needed and then again right here we can go ahead and say you know this is actually this is actually fine maybe we make the text a little bit smaller or it will Center it and then I will go ahead and actually know what to we can do here there's a lot of different ways that we can go about this but some thing for this section right here we can add like a top margin or something of like 50 50 50 and that will not work okay so I think that's basically it looks like it's better like that but remember video backgrounds will not play on any iOS device so make sure that you have to add in a different background to this okay so if you guys remember mobile users cannot see all that stuff okay so I'm just reminding you all that it doesn't work another way you guys can probably just fix this section is just disable it you know because this section right here I remember users that are on mobile can't see video so this is going to stable it you know it's too messy and I'm just saying you know what I want a simple website that's the smaller your website is on mobile the better because people are going to have to scroll a lot on their phone you know from a desktop it looks very different right but for a phone they have to keep scrolling scrolling and scrolling oh you know what this is way too long it's way too big I'm leaving you know I'm leaving this site it's way too big so it's going down here so we have this section right here we have we bring something special and we have these two things right here now remember earlier how we add these as background but we added just a small a module to basically let people see the background on mobile so I'm sorry on desktop so this section right here it needs some work right we have this section and it isn't really look good now once X I do want to talk about that you guys probably saw but you guys probably didn't understand was this section right here under responsive which is the reverse columns so I click on reverse columns right there it's going to put this picture on top and this picture on top of this now by default it comes like this and I'm really glad that page builder introduced this because this was actually a big problem for a lot of other page builders because on mobile no matter what you did it would come out like that it it sucked you know so right here I'm gonna say you know I'm over I'm a reverse these and here we can actually put some text and make little bit bigger so right here let's say you want to add some you know we can just make this a little bit bigger you can go ahead and say we can change the height right here so the height minimum Heights we can kind of increase the height see here I'm sorry for the heading right here we want to go ahead and increase the heading size so again we'll go to this and what good is at some marginal it like 100 to it there you go so we can do like that or another good way is you guys can reduce the or just just get rid of the section altogether so you know what I don't want a picture here so under advanced I'm gonna go to responsive and say I don't want this on I don't want to show this but that's if you decide to have that so if you like this look you know feel free to have it if not you guys can just disable that and then as a result you just have this section and then you know maybe you could you know get rid of it it really depends because you have to basically go over here and increase the margin on it to make it look like somewhat decent you know so you guys can do it like that or you guys can just go ahead and disable that section altogether okay it's going down alright everything looks pretty good alright so remember that section was disabled on mobile so don't worry about this section sometimes use these literally skinny sections are just really hard to show up on mobile so it's better off just to get rid of it because it's just it's just not needed you know it doesn't it doesn't even play you know it doesn't even play them the mobile or the the video anyways on mobile so as you guys can see now that section right now that video section is gone so this is a perfect preview of what your customers will see so simple easy perfect looks really good right except for that logo but don't worry that logo will actually shrink when you actually go into it it's not going to show up that same size so it's just doing that because that's the logo of the size on our media ok so let's go ahead an other page let's go ahead and go to dashboard and let's go ahead and go to another page let's let's see if we can find something really hairy you know really really bad that we just really need to work I guarantee you on this page we're going to have to change something you know so I'm gonna go to edit Elementor all right and i'ma go over here and go to tablet now I didn't really optimize this section at all for tablet looking at it oh this section right here so this section right here it has these are so clustered together as a result will either have to remove this whole section or we will have to make these very very small now my personal advice is to just get rid of this section because honestly it's too it's too clumped together you know it's just not going to work for mobile users so over here we go to responsive and hide this right there okay and we'll go to safe all right this keep scrolling down now this section right here so again this section right here will not appear on mobile users but I haven't actually really good strategy that I want to show you all that's I've actually used in the past for another tutorial so basically look this section doesn't work right let's just say you really really want this section so go ahead and just duplicate this section let's see how we can do this right here alright so tell you what I'm gonna go ahead and do the go on the desktop now this is a really cool strategy so right here I'm gonna go ahead and duplicate this alright now this section right here I'm going to go ahead and add a background alright and I kind of want you guys to understand the the logic behind this okay so let's just say for example that this is a video background okay and this will not play so here I'll give you guys a error I'll do it like this here no experience needed this is mobile and then right here oh but this is computer okay so what you guys can do is that if you have a video background and just it's not working out you can actually disable this section for computer and you can disable this section for tablet and mobile users okay so let me give you a better understanding okay so right here this is for the computer this is for the mobile now this is great for video background so remember if this is a video background that this will not show up so you basically want to accommodate that for mobile users so try to understand the logic here I know this might be confusing but I'm gonna have to show you anyways because I want to make sure that you guys have a website it's working properly so right here this is for computer this is for the mobile so I want to actually disable this section right here for the computer oh sorry this section right here advanced responsive and I want to go ahead and I know I'll disable this one right here for the computer okay so the logic is guys this section will not show on tablets or mobile users okay so will not show now for this section I want to go ahead and say you know what okay blue section again sorry advanced responsive and hide on the desktop so the the logic here guys is that if you have a section right here that you want to show on computer and then one on tablet basically this section right here will play on computers this section right here will play on mobile but people on computers will not see this and people on mobile will not see this section and this is the best idea if you have a video background section you will need to make another section for it okay so let's see if I give you guys an example of the mobile and I'm going to trick it down so I see how it says this is mobile so you see the other part where the computer is gone so basically the part where the computer is is gone so this is the best alternative if you are trying to have your background now let's go ahead and fix that section right there that looks pretty ugly you know so I'll use it for the I only show how it looked on tablets see right here so tablet it looks okay but for the mobile we'll need to change this right here for mobile we need to make sure that this is hidden so again you guys remember to if you if you make it bigger like that I remember that's that's the after effect so right here that other computer part was gone okay but if you open this it's going to show up okay so just make sure you don't get fooled that you're like oh I thought I'd disabled it is disabled this part is disabled it will not show up just this part will so right here I'm going to enter this and let's go ahead and make this exercise a little bit bigger this is mobile and there you go you know we can change you can change these things but um I think that's fine you know I think that's okay let's run down here these are all okay meet the team this looks all okay now this section right here you might not need all these you know you might not need all of these so you can probably just disable you can probably disable this section you know I don't think you really need it but if you want to have these you can go ahead and probably get rid of these on on the on the on this section right here now the problem with this guys is that you guys cannot actually delete the pictures right here so as a result you're going to have to basically oh you know you can't sorry so for these two images right here you guys can go ahead and delete them all so let's say for example you just want this one and you don't need these ones so one two and three you don't need them just go on click on this one right here advanced and then again responsive and then hide on the hide on the hide on the tablet and the mobile okay so you guys understand that sorry guys it's kind of late so if I uh if I go over or something like that it's like it's like 4:00 in the morning here so again responses I'm go ahead and take those house but that's not like my schedule you know my schedule is actually really late so right here responsive disable these okay so now let's go ahead and take a look at it on our mobile you on mobile device all right so now you can see those other images are gone and we just have this one right here and if we scroll up right here here it says this is mobile and the other part which says this computer is gone so that is a very good idea now this section right here you know it's kind of it kind of doesn't workouts you know you guys can see that's on mobile it just doesn't really doesn't make any sense you know it doesn't make any sense so maybe right here we can go ahead and you know fix this part maybe you can actually use the reverse option I think they have right here the reverse columns that might work so now this section is on top and these are on bottom but do you really need this section do you really really need it here probably not you know you probably don't need these number counters either because I mean it depends it really depends on what you really want your customers to see I would disable these ones right here so remember to disable the module click on this one right here advanced and then again responsive and get rid of those ones okay but if you want to get rid of the whole column you'll have to click on the this section right here advanced responsive and that will disable it for that section out there okay so oh that's really ugly ooh it has to imagine someone came to your website and they saw that they're going to be like where were you drunk when you made this website you know so we need to make sure that this is you know it's fully optimized so let's go ahead and change the size and there you go so that looks a little bit better we can make the weights oh no the way we'll change it so 300 was perfect and there you go that's a really clean that's a really clean about Us page know about and then blah voila okay scrolling down anything else number this section will not show up so just ignore that no I hope they change that I really do you know because it's really annoying because if I actually view it it disappears but if I open this part it shows up again you know they should have a like grayed out you know right grayed out so make sure to write elemental or so hey guys you know make sure to grade out so and we're doing mobile optimization you can you know know better and guys this is so important because Google just released a huge updates and now they rank websites based off how well your site is optimized for mobile so it's extremely important because if you decide to make the site and you don't optimize it for mobile guys you will your site will only not look like crap but it will not be found either so this section of the tutorial guys is very very important do not ignore off most of the nation many people do many many people do and it can destroy your website it really can because you know sites are ranked based off your your optimization so let's go to view page so that was actually pretty simple guys you know it looks really really good now I mean I know you guys go back nothing was changed you know nothing was changed on the computer so it was only for the mobile users and the tablet users as well okay so I hope this section was very helpful guys um again you know you always want to make sure it's optimized for mobile it's very important you know go to every single page go to your blog post go everywhere with your phone you know open up your phone right now and go to the website and say does this look good you know is this acceptable well people like it and you have you know some decent judgment so you can make these own decisions okay so now let's go ahead and go to the last section we're going to talk about the contact us page and we're going to talk about closing thoughts and future videos right I'll see you there alright guys so we're going to now create our Contact Us page and the great part about this contact page it's going to be beautiful it's going to be amazing and all of the emails will go straight to your inbox and I'm going to actually show you all proof that's when someone sends a message it will go directly to your inbox okay so let's go ahead and create this same exact Contact Us page you guys can see there's a video background playing it's a very stylish creative page and I think your visitors will love it okay so let's go ahead now and create it so I'm going over here and go to plus do and go to page and we are going to create this Contact Us page so here Contact Us page and again right here for the content layouts make sure you have these same exact settings so default margins disabled header enabled the menu one and then the title disabled and then there you go all right so I'm gonna go ahead and publish this Contact Us page alright and edit with Elementor and you guys can actually go to like youtubing a lot of videos and don't worry I'm going to show you guys where you guys can get a lot of these like beautiful videos like this or they'll just play and the great part is the audio will not play in the background so that's a very big plus because that's really annoying you know when you go to a website and like you know music starts to play like you ever been to like CNN or something where they start playing those advertisements and you're looking for and trying to close it and you can't find this in the idea it's like you guys are so annoying you know it's okay so anyways so right here I'm going to do heading and I'll do something like contact us and insert that there style let's make this white typography open 10 now we have to have the background right here to see it you know we can't really see what's going on here so again this section stretch this section full width style we're going to click on classic image to add a background and I'll go ahead and select we'll just select any one this one right here okay and then right here for the size I'm going to cover okay or we can do a needs contain no yeah cover covers the right one yeah all right so right here I want to go in to add in some we need to add some padding to it you know so right here I'm add like like a weed like 100 100 something like that then right here I'll go ahead and make this little bit bigger so size a little bit bigger contact us and then I think what really works is the 300 and aniline spacing you know it just looks that looks professional and oh that looks really good like that so I recommend doing it like that now the next test we're going to do is this section right here so basically need to contact us and we're going to go ahead and make this section right here so basically what I did was I just made a 1 column row and I kind of destroyed the padding right here and I introduced a video background in the back so let's go ahead and do that it's right here one section and then right here I'm going to do something like um sorry like don't be shy don't be shy contact us put that in the center all right so it's in the center now I'm gonna click on this right here and go to stretches section and I want to go and make this full width now I want to go and add some padding to this I'm going to add some padding of make sure to unlink this right here so only wants 200 to the right and the 200 to the left okay I'll explain why I do that in just a little bit now also right here for this these you know this section right here the actual heading I want to go ahead and add some padding to a little bit of everything you know because everything's a little bit too close so we're going to go and add 10 10 10 and that basically just kind of kind of give it space around everything and then on this section right here I want to go ahead and go to the Advanced section right here and I actually want to go ahead and add in some padding and margin so I'm gonna double click both of these and I'm going to put 40 and I'm also going to put 40 right here and also for the padding I'm going to do 40 40 and then also the left will be swimming 40 so basically now you guys can see that what I've done is I'm basically kind of just putting space around over here so that's basically where the video is going to go okay so once you guys get a better visual of it you guys will understand so let's go ahead and keep designing this little section so let me go ahead and put this black and let's be using the new text shadow you know the guys this just came out it's really cool if you guys introduce this especially to have like a two color scheme you guys can get all creative you guys can make the blur it doesn't come out too good because probably it's two lights you guys can see the blur right there it doesn't come out too well on white backgrounds but like on my homepage it's amazing you know so let's just let's just go back to the basics you know open sans and then I'm gonna go ahead increase the size here and I like the 300 and I like the the transformation of uppercase I'm like that okay and then right here and go ahead and add in a divider you guys are going to be like yeah divider darrell like you get it we love it you know but the divider is amazing guys it really it just adds a lot of decor to your sites it looks really cool so black and now right here I'm going to insert a text module I guess you want to call them widgets or modules I don't really know it's everyone out there you know it just really depends you know depends on your background you know so okay so this section right here guys we can either use the pro contact form and if you have the pro contact form it's gonna look something like this right here so I'll give you an example now guys I'm actually going to show you a free version so don't worry if you guys don't understand how to use the pro version but with the pro feature you get it you get to the contact form so like right here you guys can see on the pro elements that's the contact form is going to be right there so form so for example if I just delete this right here and then I take the where's it the forms drag it you can have a contact form there it goes like that and you guys can might go through all these and design it's you can do like extra action after buttons there's all sorts of really cool settings in the pro ones you guys can do like the rogue app you can change like the spacing there's a lot of stuff you guys contained in the pro features so if you guys are interested in the pro version I recommend to get it because you can decorate all this stuff and you can keep adding new things like you know right here you want to add like a phone number or you want to add like an address you can go ahead and insert it right there and then just say like you know this is going to be we can change this to like a address or something or whatever you want so you can see there's a new bar right here alright so this is with the pro version now I'm actually going to show you the free version as well but before I do that let's go to YouTube let's go to youtube and do something like 4k with wind so I do 4k with wind swallows or whatever you guys can just do 4k scenery just 4k and you'll get a bunch of these videos there's tons of them out there so just go ahead and grab one and I'm going to grab this you know this one right here I'm going to go ahead and copy this I'm gonna go over here now I'm gonna click on this section right here which is the Edit section go to style and go to video background and simply go ahead and pay snaps right there and now my not show up right away but you guys get to you guys get the you know the general point and idea so I don't want it to basically show up right here I mean I'm sorry I don't want this section to be like hidden so on this section right here we need to add a white background you know by adding a white background it will actually give us that look of having a contact form that's not part of the background so you guys can see now since I added the white background on this specific column now we have this really cool stylish contact form and guys I strive for model ISM I'm sorry lot of the model ISM modernism and all my tutorials you know what good is a website if it's not beautiful and creative anyone can make some ugly website but guys having beautiful website is what makes people stay and buy on your website it doesn't matter what yourself you could be giving away free cars on your website but if it looks kind of scammy and let's kind of shady-looking about yeah I don't like this guy's this exactly I'm leaving you know that's really what it is so remember the website is a representation of you so let's go ahead now and save this and if you guys choose tap the conservation I recommend it the link is in the description you guys can go ahead and buy it it's almost like crazy not to get it because it's like 50 bucks entire year but I would just get the unlimited to the $200 the entire year because how much money you spend on like you know beer or like junk food or like Starbucks coffee you know you probably spend like you know 20 or 30 dollars a day on nothing that you really need right so you know having something that's an investment is actually much better so let's go to the dashboard right here and we're gonna go to plugins and go to add new now this is the free alternative so we're going to type in ninja forms inter forms is actually really good contact form you know I use a bunch of them I used to recommend contact form 7 but I gotta be honest I don't know what they'll happen to them like they just they just destroy their own plugin like I used to recommend it I loved it myself and mean my developers were just like hey bro like contact forms not working and I'm like what's wrong with it now like always a problem though I recommend ninja forms now so this is ninja forms and if you guys notice on the left side right here you'll see ninja forms so one over here to dashboard and you can basically create your own form so right here they give you a basic they already basically give you a form so right here you have name email message and then submit now these red asterisks mean that these are required now let's say you want to go ahead and add something in click on this little plus symbol and you can just basically drag and drop anything you want so you want a city you want the first name you can just drag it right there you want the products you want the quantity you would simply go ahead and drag and drop everything right here now this to this page builder I'm sorry this contact form it can do a lot guys it can really do a lot so I don't want to spend too much time talking about it I will have a tutorial down the road on more contact forms but you guys can probably already understand that it's just a drag-and-drop thing so I don't really want to go too much into it because you know you guys are already smart people if you made it this far so I'm going to go ahead and go back so let me go ahead and close this right here and I just need the shortcode so this right here is a shortcode okay so a shortcode so let's go ahead now and goes to our first actually let's change the email address we have on file so the email address that this goes to we need to actually fix that so we want to make sure that it's in the rights it's going to the correct email so we need to go to a wordpress or user section and change that so we're gonna go down to our settings and go to general and again make sure that this email is the one that it goes to so I'm gonna go ahead and put it to this one right here and basically the ninja forms will correspond to it and they will send emails based off whatever you have in here okay so remember this right here is what you need okay so let's go ahead and go back to our page so we go to all pages and I'm gonna go to the contact us page and we go to view all right and now you guys going to see the video is going to prove beautiful that is gorgeous yeah I'd be honest now the top section is probably not as good-looking so you might want to find a good image you know these are just for too-tall purposes so don't build the same exact website you know usual images go to n splash calm and everything so I'm going to go and enter that so right here I'm grab this heading we're go ahead and place it right there I'm gonna delete all this stuff I'm go ahead and paste this and go to align Center now I'm goes to save alright and let's go ahead and go to view the page and pull off we have a beautiful contact form with this beautiful kind of video just kind of just just comes in right like that that's amazing right that is a beautiful contact form so here gonna do like Darrell Wilson and then email I'll just do like a whoa calm and it'll be like howdy now this might come this color because that's the color we used now you could change it on the black or you could change the italics but I cannot guarantee you if that will actually change the current fonts and everything because I've never tried that so I really don't know if that will work I don't know if they'll much a page Buller will actually change the fonts for another plug-in that would be actually really cool not be amazing so you guys can see right here you know and also the person that sends the email will get a confirmation for its okay so they kind of get notified and you also get notified so let's go ahead now and check my email so I'm gonna click on my email and voila so you see right there any message from Darrell Wilson howdy and that is from the that's from my website right here okay so remember if also sometimes in rare cases it will go to spam if it does go to spam contact your hosting company find out why a lot of the times is because when people send these contact forms they might just send something really quick you know they might just end like a message and the plug-in recognizes it as spam so five times that we like Daryl and then you know sometimes when the messages have written too fast and like it's something like this sometimes in rare cases it will go to spam so that happens again make sure to check your you know talk to web hosting company see what you can to fix that but a lot of that is probably having to do with the plugin let's go ahead and check it and you guys can see now it does not show up because it just came from a really bizarre email and you know she did show up it's down for this one because who writes the message like oh you know no one does that so if you do get a result like we're you're ending in spam be sure to check that out okay guys so this is the end for the contact us page very easy very self-explanatory again I recommend getting the the actual pro section you know actually really really quickly let's go we're going to on a mission right now let's go ahead and find out if this will actually carry the color and the font let's go and find that out you know I I don't want to leave that I'm a perfect it's kind of funny like I'm doing this tutorial like how to do this on my other way to do this but I've never tried that I've never seen if the mentor page builder can actually change the fonts for another page or for another plugin we're going to find out right now so I did just enough to make it skinnier a little bit skinnier to find out there we go now we'll find out or it might just change the color moment of truth let's go ahead and find out and it does not so it just changes the color guys so if you want the color change to change the color but it's not going to change the font everything else okay but it's not amazing contact form very beautiful very professional okay so that's about it for this contact section let's go ahead and go on to the next section hey guys so in this quick small section I'm going to show you how you can export layouts how you can import layouts how you can save search in sections and you can you know put them onto different parts of your website maybe you kind of want to keep your website similar and you want to save some work and export it to a different page I'm going to show you how to do all that right now so I'm going to first start off by adding a templates now these are all templates that come with Elementor now there are some pro ones and you will have to get the pro version to receive those now the link for the pro version is also in the description but I'm going to go ahead and click on this law firm right here as a home page now right here I'm going to change this title right here to Darrell Wilson Darrell Bolton calm now there are some other features I want to talk about so let's say for example you just want this section right here you just want this Big M section right here so in order to do that all you need to do is click on the Save icon right here and put something like the header image section and go to save now you can go ahead and export that to another website you can slap that on to a different part of another part of your website or whatever now let's say you want to go ahead and save your entire page so I've shown you how to save sections right here right now I'm gonna show you how you can save the entire page so right here on the bottom left you see this little folder right here click on that and go to save templates now I'm going to put Darrell Wilson law page and then click on save okay so I have these two seconds right here now right here you see how it says export now let's say you want to go ahead and take this same exact page and export it to maybe a different website so right here and click on export and click on leave and now you can see that right here on the bottom left I have a dot JSON file okay so basically all of that stuff that I just put is on that file right here so now I'm going ahead and show you all how you can load it on to different websites or whatever else so look we have the header image section which is the top section I have the entire page and then I actually have a layout so I have three different templates right here and I'm gonna show you all how you can put it onto different parts of your website so let's go and make a new page then let's just go ahead and make a whole new page so here we go to my dashboard I'm not going to save this now I'm go to plus new and go to page so right here on will do layout and I'm gonna go ahead and set this section right here so hundred percent full with default disabled again you don't have to follow me here I'm just basically showing you all how you can export and import layouts so right here I'm gonna click on edit with Elementor so I'm first going to show you all how you can use the ones that we saved onto the library and I'm going to show you all this bottom left one right here on how you can actually import that onto another website domain or a different part of your website so here I will click on add templates now are here under my templates you're going to see header image section insert and voila now we have Darrell Wilson comm you guys can see it just took the header part right there so there's no reason why you'd want to do all the hard work again so that's a very good shortcut way to go so I'm going to go ahead and cancel this and now I'm going to go ahead and go add a template my templates and click on Darrell Wilson law page and click on insert so now you see Darrell Olson calm and instead it brings the entire page guys so you don't have to sit there and you know design all the websites again from scratch you can go ahead and use the layout system which is incredible I mean it's it's so amazing how fast you can make websites and how easy it is now let's go and talk about this one right here on the one that we exported right maybe you want to take that and put it on a different domain or you want to put on a different website right you can kind of like make premade websites and actually businesses actually have full time business structures where they just make layouts and sell them to developers and those people use them on clients websites so if I click on X right here and go to dashboard now over here under Elementor I'm gonna go to my library now right here on the top I'm gonna go to import templates so I'm click on browse right here and all I need to do is find the templates so it was the dot JSON file so I'm just gonna do John occation and there it is so I think it was this one it's one of the two I think it's a I'll just take again well get this one right here so I'm go to open and go to import now and voila now we have the page right here so you can see as published right here these other ones are just like duplicates ones I made so it shows you your entire library but these have the same title because that's basically what we imported and exported on our websites okay so this is the one that we have right here now again you can export it you can do whatever you want you can edit with elemental or so all you need to do is go ahead and make a new page and Darrell Wilson law page right here we've made one minute ago so you can go ahead and import that so right here pages add new sois page and then again is going to go ahead and change some of these sections right here so how to percent full with default header blah blah blah all this mumbo-jumbo same stuff okay publish edit with Elementor now we're here at a templates if I go to my templates right here you're going to see that I have two so this is the correct one right here this is the most recent one and if I go to insert it's going to show up right here on my website voila so remember that's how you would you can export it here and then you would import it to the library on another domain that has Elementor and then you can go ahead and just use that on any domain or any other websites okay so that's basically a quick rundown of the templates it's amazing what this page ruler can do it saves you so much time and I highly recommend to get the pro version because then you can take advantage of all of their pre-made layouts that they have created okay so that's about it guys for this section with the premiums layoffs and everything else be sure to check it out and remember guys it's all about working not working harder but working smarter alright guys well congratulations you guys have made it to the end of this tutorial I want to go ahead and say congratulations you guys have learned a incredibly valuable skill which is trending and will never really get a little you know now I want to actually give you guys more resources and different things that you guys can use to further your either career or knowledge with WordPress and making websites now my youtube channel guys provides a lot of free valuable information like you want to use you know membership programs you want to sell online or you want to sell on Facebook you want to earn Facebook marketing I provide all these free courses on my youtube channel so for example right here I review some web hosting companies right here I talked about an ecommerce website and right here talk about a real estate website with WordPress so I talked about everything guys so if you guys have questions regarding stuff also like you know how to make a forum how to do email marketing like the best you know free e-commerce WordPress beings or the Divi theme or all this stuff new commerce guys all the resources are here so be sure to check out my channel there is a lots of knowledge that you guys can guess with this because I go over everything you know YouTube advertising Google Analytics anything you possibly think of I talked about on my channel so I am a big WordPress promoter I like to promote all things with WordPress because it's amazing it's the most biggest advancement of technology we probably ever have in history so I want to go ahead and share you guys with all these videos make sure that you guys can further your skills learn SEO learn web design whatever you want to learn be sure to check out my channel also be sure to check out my website right here is one of my blogs I fo you know have some blog post you guys can also subscribe to my newsletter I give away a lot of free stuff like plugins I gave away a lot of layout a lot of really cool stuff so be sure to check out my blog and also my you to me courses guys so this course actually will be taught on udemy as well and again I want to let you guys know that my all these very honest guys my content is very very high quality you know all my classes right here are you know four and a half stars are better because I want to be very thorough I wanted to you know I don't want people to watch my videos and feel like they didn't learn anything you know because I was there to where I watch videos and be like you know I watch this video but I learn anything you know there's a lot of people out there that do that and that's not me that's not who I am I want to help my viewers I want to help you guys succeed in your careers or whatever you're trying to learn also my facebook page feel pretty go to my facebook page guys go ahead and like it go ahead and give me a comment rate it let me know what you guys thought about this because you know your feedback it really helps me out you know companies out there pay millions of dollars for feedback and I'm asking you guys to provide it for free so again you guys can go to my facebook page send me a message and guys I try to get all my messages as I can but you know it's really hard to get to all the messages you know I get like you know 50 100 emails a day and just responding to all those is it's a lot it's a lot - it's a lot to do that you know it really is so I'm here to check out my channel guys be sure also to check out my YouTube me courses I'm also on Skillshare and go ahead and see me on Facebook hey guys so congratulations on your website really you made it this far you know fire yourself on the back more people would not a lot of people don't want to invest the time to learn such a very valuable skill is it drives me crazy I'm like dude I'm teaching you how to how to start your own business in a matter of three hours but you'd rather sit there and spend hours on forums or something trying to learn something that you can be taught right here for free okay so again guys congratulations on your website's be sure to subscribe to my youtube channel and I'll see all of you in the next tutorial

Channel: Darrel Wilson

Views: 569,363

Rating: 4.883791 out of 5

Keywords: how to make wordpress website, build a website, create a website, make a website, how to make a website, wordpress, how to create a website, wordpress website, how to, how to build a website, elementor, create a wordpress website, Create a wordpress website, make a wordpress website, build a wordpress website, tutorial, elementor page builder, wordpress website tutorial

Id: VdKB7UjEo_k

Length: 215min 24sec (12924 seconds)

Published: Fri Aug 04 2017