How To Make A Wordpress Website With Elementor PRO 2020 - NEW FAST & EASY WAY!

hey what's up party people my name is Darrell Wilson and today in this video I'm gonna show you all how to make a website with Elementor pro and then the wordpress Elementor is the world's leading page builder with more than 4 million active installs because it's super easy to use for beginners and completely drag and drop so you can see why it's so popular and to be quite honest making websites today with WordPress and Elementor Pro has gotten really simple because you don't need to know any sort of coding so you'll have your website up and running in a few clicks ok so we're gonna build your new website in four simple steps so step one will get your domain and hosting so for example my amazing website com step two will install WordPress and big companies like eBay Facebook and also Mitsubishi all use WordPress because it's really simple to use step three will then solve the Elementor page builder the elementary page builder is the number one most popular page builder for WordPress and step four we are going to build your WordPress website with Elementor and I'll guide you through the process of building your website all the way with Elementor pro you can make any changes you want to your website like changing the text switching the fonts or color adjusting the size of the column adding any images you want to your website and even moving them to anywhere that you want you can also add these really cool shape dividers to your website you can change the style and also the color of the shape dividers you can add gradient backgrounds or even a really cool video background to your website Elementor pro also allows you to add these amazing motion effects to your website which you can animate in any direction on your new WordPress website and let's not forget your website will be fully optimized or Mac PC tablets and all mobile devices plus with hundreds of pre-designed blocks and templates to choose from you'll have the website you've always wanted up and running in a few clicks and the great part is these templates and blocks are completely free so elements are pro and not only allows you to build a website but you can just add some amazing functionality and design to your website unlike any other with no coding whatsoever so are you guys ready to start this tutorial huh what okay let's get started with this tutorial so step one will get your domain and hosting step two we'll install WordPress step three the elements or page builder and step four we are going to build out your new amazing website and you're gonna love it I promise you are gonna love it now if there is a link in the description of this video it'll take you to a page that looks just like this right here and this right here is psych ground com now you've seen my other videos I've been recommending Saigon comm for about four years now and that's because psych on comm came up as the number one as the fastest with the best uptime when you're hosting your website so I tested 15 other companies and sycron came up with a low time of around 1.8 seconds so you can be searching that your website will be very fast compared to other web hosting providers so we have three plans right here we have the start up we have the grow big and the go geek for most of you you probably want to go with the grow big plan because with the grow big plan you can host unlimited websites and you get a little bit more space rather than just a single website so you can see the difference right here and personally I don't think you need to go geek just yet that's for people like myself or who have a lot more web sites and stuff so right here under the grow big plan click on get plan alright and right here you're gonna give your website a new name so go ahead and talk it over with your friends or your buddies and give us some thoughts because this is going to be your new web address so for this tutorial I'll just do something like a web site tutorial Darryl dot-com and then right here I'll click on proceed all right cool and this right here is the checkout page so right here you'll put in your account information and then here you'll put in the client information like your first name and your last name and then here we have the payment information so you can pay with credit card and then also here you'll put in your social security number I'm just kidding no social just kidding right here is the purchase information so right here we have a period and I recommend doing 12 months because 12 months will actually give you enough time to decide this is for you or not and you also get the largest discounts with 12 months and remember there's a 30-day money-back guarantee for any reason whatsoever and then here we have extra services now I require you guys to check on this domain privacy the reason why is because if you don't have domain privacy checked you're gonna get all these unsolicited emails and spam trying to sell you viagra sex pills and SEO packages and all this really weird stuff that you don't want so if you have this check this will protect your personal information so make sure you have that check right there and then scrolling down here we have the Terms of Service and Privacy Policy so make sure you have that checked so once you're all set click on Pay Now and I'll meet you on the very next page all right cool so after you've purchased hosting it'll take you to this page right here and then right here click on proceed to customer area all right awesome so to setup your website right here just click on setup sites now right here we have two options we have start a new website and migrate website right here just click on start a new website and right here we have four options but we want to select WordPress so click on WordPress here you'll create some login credentials so make sure you break this down because you're going to need this information every time you log in and make changes to your WordPress website so I'm gonna go ahead and put in an email address and a password alright so I'm all set and right here once you're done you'll click on continue so right now it's asking us if we want to add this to our plan personally I don't need this right now and I don't think you do either so I'm gonna skip this and just click on finish and that's it and right now psych round is setting up your new website make sure also to check your email because you're going to get an email from psych round saying verification required open up this email right here and you're going to verify the domain that you purchased so right here you'll have this link so click on this link and it'll take you to this page right here and you need to verify your domain basically saying that you're a real person and not some robots are also going to suspend your domain so all you need to do right here is just click on verify information and you're done your domain is verified alright cool so the website has been successfully installed and we are all set so right here click on manage sites so this right here is the site ground dashboard so on the left side right here you'll see WordPress click on WordPress and then click on install and manage so this right here is going to show the installations of WordPress that you have for your website and right here on the bottom we can see our website and then right here you can see that WordPress has been installed right here under actions on the bottom right it's gonna say login to admin panel click on login to admin panel alright cool and it'll take you to this page right here but I don't really want to go through the setup wizard so on the bottom right here where it says exit click on exit and congratulations your website is now live on the Internet now if you want to see your website right now on the top left right here you'll see my WordPress just click on visit sites and this right here is your new website it's a little plain it's a little boring and it's really ugly so we need to make a lot of changes to it so before we go into the design process and start building our website we need to change some general settings so right here under my WordPress let's go back to the dashboard so the first thing we'll do is disable this plug-in right here we don't need this WordPress starter so right here in our plugins click on installed plugins you're gonna get very familiar with plugins as this tutorial goes on but right here we have a wordpress starter go ahead and deactivate the wordpress starter all right cool next let's go right here to users and go to your profile so in the future if you want to change something like the color or your email or your password this is where you're going to do it so right here I must select Midnight's I like midnight I feel like Midnight's I don't know I like it you can just go to these other ones and see which one you like scrolling down here so if you ever want to change your email this is we're gonna change your email and that's pretty important because that's what you're going to use to log into your websites and then right here we have the generate password so if you ever need to make a new password this is where you're going to do it you can just click on dinner a new password and then just go to update profile and you're all set ok cool another thing I want to let you know is that if you speak a different language right here and our settings in general you can actually have the backend change the text right here to your specific language so many of my viewers asked me about a plugin for that and I said guys right here to the site language so right here you can select any language and they have pretty much any I think they have every language out there they have a lot of languages so you can select your language and then once you're done you'll click on Save Changes and it'll apply throughout the entire back end now there's two more things that we need to change right here under permalinks we need to change our permalinks and I'll explain what this is so right here we have our permalink settings and you want to have it under post name the reason why is because when someone comes to your website like for example your website com - about us right not a bunch of numbers and a really ugly permalink so post name is the best for SEO and it makes your site look a lot more cleaner so once you click on post name right here click on Save Changes next we need to fix this ssl right here so you notice right here on the top of your website how this says connection not secure and if you go to other websites like Google you're gonna see that this is a secure connection so we need to change our connection to a secure connection so we just need to install a free plugin right here in our plugins click on add new what plugins are guys there are essentially applications for your website so there's an application slash plugin for pretty much everything out there just like your iPhone so right here under search plugins you'll type in really simple SSL I'm not kidding that that is the name of the plug-in really simple SSL and this right here is a plug-in that you need it has 4 million active installs right here just click on install now and then you'll click on activate alright so right here it'll tell you that you're almost ready to migrate to the SSL now before you do this make sure that you have your password and email written down the one I told you to write down because it's gonna kick you out of WordPress and you're going to have to real aughh in so right here click on go ahead and activate the SSL alright cool so on the top right here you'll notice that the connection is secured now in the future I'm going to show you now how to log in to your website whenever you want to make changes to your WordPress website so right here you'll see your domain name so what I'm gonna do is just go ahead and delete all this and right here you'll type in WP dash admin just like that and then you'll click on enter so this is the address that you need to type in every single time that you want to make changes and login to your websites so right here I'm gonna enter in my username and my password okay and here I'll click on remember me and I will log in alright cool so all the general settings are done and your SSL has been activated so now your site is secure now as you guys use plugins and themes you're gonna get notices from the developers you can just close those messages they're just little things saying hey go give me a five star rating etc so if you want to do that you can do that but you can always close all notices at any time okay so now we're going to move on to step three so we're going to download Elementor Pro so right here I'm gonna go to Darrell Wilson dot-com - Elementor now this isn't a feeling so if you guys do decide to use this link I do get a small Commission and it helps me make these tutorials for you all for free alright so here we have the Elementor Pro pricing plan so we have personal plus and experts now with all these purchases you get a year of support and updates and you also get a 30 day money back guarantee for any reason whatsoever so most of us that are just getting started out I would probably recommend the plus plan because with the Plus plan you can have it on three websites now personally I think the best value here is the expert plan because for just a hundred dollars more you can get it on a thousand website so I think that is the best value as far as money goes and remember you do get full support and updates so if you have a problem with something or something's not working you can always go ahead and let them know and they'll fix any problems that you have on your website so right here I'm gonna click on Buy Now alright and this right here is the checkout page so right here you'll see that you'll be charged around $1.99 and then here you'll go ahead and put in your payment methods and all this good stuff now I already have Elementor so I'm gonna go ahead and log in to my account and I'll meet you on the very next page so once you purchase Elementor Pro it'll take you to your account so right here you can see your accounts your purchases your supports if you want to promote Elementor you can do that as well and then here you have your personal profile and then this is the experts tab the only thing that you need from this page is download plugin so right here just click on download plug-in and we're going download elements or pro all right cool so now that we have elemental pro we can upload it to our website so right here in our plugins click on add new and we're just going to simply upload the plug-in to our website so right here you'll click on upload plug-in and then right now you'll go ahead and upload the zip file that you downloaded from the Elementor websites so this right here is the file I'll click on open and then right here I'll click on Install Now alright cool so the plug-in has been successfully installed right here just click on activate plug-in alright awesome we now have Elementor Pro on our website but we need the base version of Elementor so right here it's going to say install Elementor now click on install Elementor now and then we'll click on activate plugin alright so right here saying welcome to Elementor and it's a little setup wizard but I'm gonna close this right here so right here on your dashboard it's saying welcome to Elementor Pro so I want to connect this to the Elementor website so I can get updates and support so right here I'll click on connect and activate and right here I'll simply click on activate alright awesome so now we have Elementor Pro activated so before we build out our website I want to install a few plugins that'll help us build our website so right here under plugins we'll click on add new and right here under search plugins type in Envato elements everyone loves plugins because it's just a bunch of free stuff that helps you build your website so that's why everyone loves plugins so here we have the Envato elements right here we'll click on install now what this plugin does it gives us access to tons of free templates and blocks that we can use that'll really speed up the design process of our website and then right here we'll click on activate alright cool and there's one more plug-in that we need to install so go back right here to add new under plugins and then right here type in peyote net Pio T and ET and then press enter and this is an add-on for Elementor so this gives us a lot of cool things like gradient buttons gradient backgrounds and also really cool stuff that we can add to our website so right here just click on install now and then click on activate alright cool so it'll take you to this page right here and this just has a list of features that we can add throughout our website like gradient text a gradient button sails pop video playlist all sorts of really cool gadgets and widgets we can use throughout our websites so there's nothing we need to do right here but right here you see this elements tab click on the elements tab now we install the first plug-in we need to actually go ahead and agree to the terms so right here click on agree to the terms and then click on continue and this is going to give you access to their library of templates that we can use for free on our website alright cool so this right here is our library of templates and blocks that we can use so we're gonna come back to this as we build our page the next thing that we're going to do is install our WordPress theme so we need to install the theme that we can use so that we can build our website on so right here under appearance click on themes so right here under themes click on add new and we're going to install a free theme so there are tons of free themes that you can use for your website and basically every theme has a pro and a con so everything does something that maybe another theme doesn't and there's Astra hello Elementor ocean WP just tons of free themes that you can use and the great part is that once you're building your website you can always switch back between themes without losing the content on your website which is really cool now we're gonna install a newer theme and it's called nieve so this is it right here so nieve is the newest theme out there and it has a lot of features like a header and footer builder that a lot of themes like Astra at notion WP don't have so we're going to install this one right here it's called Neef so right here just click on install also if you can't find it right here in our search themes you can type in nieve and it'll take you to the theme as well and once the theme has been installed you can click on activate alright awesome so we now have installed nieve on our website so let's import a demo website and then we'll work off the demo website so right here it says try one of our ready to use starter websites click on this alright and they have a bunch of free templates that we can use on our website so you can kind of go to this list and check out all these free templates that you can use and don't worry about it you guys can always delete your entire website and then upload a new template later once you kind of learn how to use the page builder but we're going to install this one right here called web agency so right here click on import now right here it's asking us about what we want to import so the contents the customizer and also the widgets and then right here just click on import so right now I'm just installing the plugins and the content so it'll basically make the website for us automatically alright awesome so the content was successfully imported if you got an error you can just try again sometimes weird things happen you might get an error here and there and you can always just try it again and it should work so right here just click on view website alright cool so the website has successfully been imported so we have our logo we have our menu we have our buttons let's go ahead and scroll down here just to make sure everything looks good and in order everything looks clean everything looks good and it looks like we are all ready to rock and roll so let's go back up here let's check the other pages really quick so right here click on the about Us page and then we have our about Us page everything looks pretty good and then we have our contact page good and then our portfolio page so it looks like everything has successfully been imported so let's go back to our home page here so Nexis go ahead and build out our website let's go ahead and make changes and let's go ahead and modify our website to make it look like how we want it to look now there is demo images for all of you in the description below of this video that you can use to follow along in this tutorial so right here click on edit with Elementor and this is what we're going to use throughout the video to build out our website alright so now we can start editing our websites on the left side right here we have a bunch of icons that we can just kind of drag and drop onto our website and then right here we have the pro features so these are here are the pro elements that we get with Elementor pro so we have animated headline we have all these other cool widgets and if you want to go ahead and drag something in you would just go ahead and hold it and then just drag it on to your page and then just drop it and that's and then right here to the left side you get a bunch of options where you can change the style and you can go ahead and change all the settings for the alignment and all this stuff so what I want to do first is we have this text right here I don't really want this text so right here we can change the text change the text change the text to anything but I don't want this text so right here under this pencil icon I'm gonna right click and then click on deletes so that's how we can start deleting stuff that we don't want on our website so what I want to do here is I want to use this heading module right here because this is a pro feature and right here we have the before text and then we have the highlighted text which is this little red circle under this text so I'm gonna put make make websites with Derril and then for the highlighted text I'll put Wilson and then right here we have the option to do highlighted we can rotate and then here we have the shape so we can do something like curly or underline or double and you guys can you know get the idea in the picture here so I'll just do circle and then also right here we can paste the link so if you want to link that to somewhere else we can do that also right here we have after the text so I'll put example so let's say for example that you want to have more text after this you can go ahead and do that if you choose to do that but I'm just gonna leave that there and then right here we have this style so style is basically how you can style it so you can change the color typography and everything else and every single button and everything else on your website have the same style box so for example this one right here I can change the color to something like red or something like that so once you kind of learn one element you learn basically all the elements so one thing I want to do here is I want to go ahead and make this a little bit bigger because I think this is a little bit too small so right here under the headline we have the text color where we can change the color of this and then also typography so right here under the family I want to use Poppins I think Poppins is like the the standard one and right here also we have animated text so here we can also change the fonts and everything else so maybe here I can do something like Montserrat I think by default the theme is actually using Poppins because it's a very it's a very friendly font and I find that most people see it and it's just it's easy to the eye so right here this text we want to make it bigger so right here I will increase the size of it like that something like that and then I can reduce this and then that's how our site looks right now so it's pretty easy to make changes and everything now one thing I want to do here is I want to change this background image because it just you know it just looks a little dark and a little gloomy and I just don't really like it so if you want to add or change something to the background you'll click on these six dots right here and then right here we have style here we have the classic we have the gradients the video and then a slideshow so for example if I want to add a gradients I can click on this and then I can change the color to something like gradients so the first color would be this and the second color would be that so now you can see it's a gradient color and then you can kind of go through these options and mess around with it like radial and you can actually do like you know where you want the start and the location so there's just a lot of different ways on how you can customize your website so right here I want to go to classic and I think standardized most people use images so what I'll do here is I'll go ahead and click on choose the image and then click on media library and these are like the demo images that you get so whenever you get images or you upload them to your website they're going to always be displayed in the media library but right here I'll click on upload files and I'll go ahead and upload the files that I gave you all for free into this video so here I'll click on select files and then click on open so right now the images are uploading to the server alright so the images have successfully been uploaded and the one I'm going to select is plants and stuff it's this file right here and I'll click on insert media so you can see now how the website it just looks a little bit more friendlier it looks a little bit nicer it looks a lot cleaner than before but this button right here I want to change the color scheme of my website so right here under the Lord more button I'll click on this and I'll go to style so you're gonna notice right here that we have this gradient button feature and this is the plugin that we installed earlier so now we can actually apply gradients throughout our website so right here I'll click on gradient button and I'll enable the gradient button so here we have some options we have the color and the secondary color and the location and all this stuff so what I'm gonna do now is I'm gonna kind of adjust this right here so for this one right here I'm gonna put 40 for the location to kind of add a gradient to it and then for the second location I'm gonna put 87 and then right here for the angle I'm gonna put 150 just to kind of give it a little bit of angle like that now one thing you'll notice that this text is black and it just doesn't really look good so we've got to change that so right here under the button icon under the text color we can change this to white and there you go so now you can see that the site looks a lot more friendlier it looks a lot more inviting and just really clean so our home page is done congratulations and one thing I want to notice to you all about your home page your home page is a representation of your entire website so I will be having a web design course pretty soon and once you kind of make the style for your home page you need to kind of carry that throughout your entire website so it doesn't get tacky and ugly because let's say for example I scroll down right here and then they see yellow right there it's like there's no yellow right here so we want to go ahead and keep making changes to this so right here I'm gonna open this up and right here we have this plus icon now I want to add a new section right here in between these sections so I'll click on this plus icon right here and then if you want to just kind of build the site without using templates right here we have this plus section and here we have different columns so we can have one column two columns or three columns so I'll click on three columns I'll click on these little nine squares I guess that's to go back to the elements and then here we have Pro elements so what you can do here is say alright you know maybe I want to add in like a flip box so right here I'll take in the split box and I'll just drag and drop it until I see that blue line and then just drop it and there you go and then here you can kind of see how we can kind of decorate stuff so this actually has a front and a back and this right here controls the front and then this right here controls the back and if you want to style something just click on style right here and then you can kind of style it how you want it to look you can make the icon bigger you can change the primary color you can rotate the icon to be a different part so see how the Stars kind of rotating so just go through these options and kind of just get an idea of what they do I don't really need to go in these in depth because I think you guys know what these do right so you know it's just styling and making things look how you want it to look so let's go back over here to content and I'll click on these buttons again right here and let's say I want to add in something else so maybe I want to add an animated headline and then also I want to add in a button so I'll just drag and drop it under there and then here I can send our line as well and then right here under the Style section we can always go ahead and style that and you can always apply the gradient as well and then under the advanced features there's other options where you can kind of move it around so if you want to add space here actually I'll uncheck that if you want to add space so padding is basically space so you can see here how the buttons creating space and if I reduce its it actually you know it goes back and forth so padding is basically space well touch more we'll talk more about padding and margin a little bit later in the video but for right now let's just get comfortable and just use like the basic elements and then also right here we have positioning responsiveness and other things that we'll cover a little bit later in the Advanced section of the video but going back here I'll click on this and let's just go ahead and just drag in one more element to get you a little bit more comfortable here so I'll just grab in like a call to action right here and drop it and then for example right here just choose an image I'll choose this one insert media you know I'm actually really glad to introduce this module because before I had to actually create an image an image module a text module and a button module so when elements are first came out it did not have this so I'm actually really glad they actually introduced this and they have different skins so they have classic and they have cover it's just different styles and how you can design your your you know your website and everything so this is how you would build out the website in the basic way however we are going to use pre-made elements that'll make it a lot more faster so I'm gonna delete this section right here so under this X little button right here I'll click on that and then right here on the plus icon I'll click on this green icon right here and this is the plugin that we installed on our website called in bottle elements so they do have a lot of templates that you can use but personally I think that most people tend to use the blocks the most so right here we have blocks so click on blocks and here we have different blocks so we have hero which is the landing page call-to-action about and all these different categories for our specific blocks so for example right here let's go ahead and click on the About section so I'll click on about and here we can scroll down and we can see that we can just click on add this to the page and it'll add this block to our page so basically this plug-in will take care of all the design aspect so we don't have to build everything from scratch because that could take a long time you know it really really can so the one that I installed was the one on the bottom I believe I think is right here on the bottom on the about Us section this is it right here so this is the one that I installed right here and then I'll click on add this block to the page and you'll notice how this requires Elementor pro because it's using pro elements alright cool so now we have this really nice section right here and we can make changes to this so I'll click on this right here and I'll just put Daryl Daryl Wilson alright and then right here we have the image so if you want to change this image right here you can always just click on choose image and then change the image in the back but personally I'm just gonna leave it standard for now and right here under style we have the style of everything and here we have content so what I want to do is I want to change the content actually so right here under the under the typography I'm gonna change this to poppins now a big word of advice for all of you watching this please only have one to two fonts on your website if you have more than that your website will look very tacky and it won't look good so here again I'll do Poppins alright so you notice here how we have this style and you know it can be very tedious to actually do that again and again so let's go ahead now and just copy elements so right here I'm gonna right-click and click on copy that we got copy right and then right here I'll right-click on this text and here I'll click on paste style so you notice what happened right there what it's gonna do is that whatever I did to this if I copy and paste it it's going to take whatever settings I have and it's gonna paste it over here so you can see how that will drastically speed up the design process of your website without you having to kind of redo everything in fact we're gonna copy this button right here and we're gonna paste the style throughout our website so we can always have the same style button throughout our website any one thing I want to change here is the hover effect because when I hover over this this one's black and I just something that looks good so if I click on this button right here so here we have the normal and then we have hover so click on hover here under the text color I'll change this to white so now when I hover over the button it's gonna stay white and I think that's a little bit better than what it was before also right here we have hover animation so if someone hovers over this for example shrink it'll get smaller and then here push it'll push and then you know bounce in bounce in something like that you know just it encourages people to click on the button so now that we have this section right here I don't want this section right here because this is the default standard and now it just doesn't really thing with our website no more right so let's go ahead and delete this I'll just delete that and right here under plus let's add in another section right here so I'll click on the envato elements button click on blocks and next let's go to features and benefit so here we have the features and benefits blocks and you can see that there is a lot of blocks that we can add on our website and the one that I chose right here was the see if I can scroll down just keep scrolling just keep scrolling Pancho's all of them at the bottom of the page huh that's kind of what I do that Daryl here we go here we go so we have the benefits features and benefits slider so let's add this block to the page and I'll kind of talk about how you can move stuff around all right awesome so now I have added this to my website but I want to move this so I'm gonna take this and just drag and drop it like that now for features and benefits I want to change the colors of this so what I can do here is I'll just go to style and thing just to black and then for the typography I can put pop-ins or remember earlier how I can copy and paste styles if I want to do that so I can either go up here and copy the styles and paste it right here or I can just do it manually it really doesn't matter so here on this section right here changes to black as well because I don't have any blue so you want it you don't want to make your website really tacky and stuff so I think this right here is just fine maybe I can even change the typography remember earlier how I said keep it at like maybe one or two fonts at most I think even two fonts is pushing it personally but that's just my opinion so we have this title right here now I want to change this button scheme so what I can do right here is just go right here copy scroll back down and then pay style and then we're all done now I want to align this so I'll click right here and under alignment I'll click to the left now you can also upload your own images right here so if I click on this right here you'll see these images and if I want to have my own gallery I can click on this pencil click on add gallery and then simply just add in any images I want to the gallery and click on add to the gallery so that's how you can have your own images rotating and display your own images instead of the demo images so I'll click on X now one thing I want to do here is I want to add a background to this so I like the whites but I just want to add a background just because I'm feeling you know if you're feeling dangerous so you're clocking these six dots right here and go to style and also what we can do is add in a video background I didn't really show you all how to add a video background just yet so if you do want to add a video background just click on video right here and just paste the link so for example if there's like a 4k beach from YouTube you want people to see just go ahead and paste the link and you'll see that the video will start playing in the background like that so that's really cool but for our specific website it doesn't really match you know we have the beach and then we have black text and then there's like elegant stuff but that's just an example of how you can paste video videos for your background so I'm gonna go ahead and get rid of that go to classic and go to image personally guys I know beginners love video backgrounds but video backgrounds they don't really play well a lot of devices especially with different screen sizes so try not to use video backgrounds a lot they they have a lot of issues and problems from what I've experienced so I'm gonna take this picture of the mountains and I'm going to insert this and there you go so now I have this picture of the mountains and it just makes it a little bit more classier makes it a little bit nicer and I just like that feel and style of this so I think this part right here is done so what I'm gonna do now is scroll down and we have this section right here now you can choose to have this style in fact right here if I just click on paste style and then right here click on paste style you'll now see that we have this style applied through our websites and you know this now now this kind of matches and correlates to the website so I can choose to leave this or take it away if I want now remember if you want to link someone with these buttons click on the button and then right here under the link just put your website or wherever page you want them to go to so you know wo Wilson comm and then they'll go to my website if they click on this link which you can also do right here is under link options you can open it under a new window so that means if I click on this button it'll open up a new tab in my browser and they'll go to my website or whatever website you want them to go to or whatever part of the website you want them to go to so here I'll go ahead and say you know it's let's just add in a new section so right here I'll click on the plus icon and Envato elements and then we'll select blocks so next right here I'll click on services and this is the one I actually chose so I'll just click on add this block to the page alright awesome so here we have this text and here we have these icons so if I click on these icons right here we can change this to anything that we want we can change the alignments and right here we can just change the font so you can put in like amazing websites and capitalize that huh and then of course under the Style section we can go ahead and change the topography and the solve everything so what I want to do here is let's just go ahead and change this right here so under the style we'll change this to Poppins Prada kind of fonts that huh but you know what's on this section right here I want to make this gradient so I have Poppins applied but I want to make this gradient so right here we have gradient text click on gradient text and here click on open so now you can see that we have this specific gradient applied to our text and I'll just change the same thing before so I believe right here we had a 240 right that's a 40 and then for the location I put 87 and then 150 right 87 and then 150 150 so you can see here how that looks really good you know it just looked really clean it looks really elegant and it just looks really nice and you can always go ahead and copy this right here and then you can always paste it over here as well if you want to do that so that's up to you though you know it's gonna actually take the size of the font as well so I'm gonna do POG Rafi you might want to reduce the size but you know when you're using gradient guys you have to be very careful because if you use gradients it's very easy to make the site look really bad really fast so I wouldn't use too much gradients I know gradient looks really nice but if you just add a little bit here and there it really makes it look a lot better but if you have too much gradients it's gonna make the site look really tacky so I want to undo what I just did so right here on the bottom right here we have history and let's say for example that you did something that you don't want to do so we have the heading style that I see if I change here click on this there we go there we go so that's how you can kind of go back and see okay I made a problem let's go back and see our history so all of your history right here is saved throughout Elementor so now that we've done that right there I want to actually bring this up so I want to take this features and I want to put it above you know I think on the demo website I have this part above this so let's do that so what I'm gonna do now is take these dots and I'm gonna hold it I'm gonna scroll up with my mouse and I'm gonna drag and drop it like that alright and now you can see that this section right here has now been applied and everything else looks pretty good so at this point you can kind of go to this and make any changes you want so I think most of us are using poppins right so yeah Poppins and then right here you can just copy this and then just paste the style and then paste the style and then there you go and then right here you can always go ahead and change the change the actual image to whatever image that you want now also if you want to use the icon library I recommend that as well so I'll take this icon right here and I'll just drag and drop it now this icon I'll line it to the left side and then right here we have the icon library so Elementor actually has a lot of different icons and a lot of different things that you can add so if you want to add that to your site you can do that so I'll just grab this one right here I'll insert that and now I'll just change this to black so here let's add in a new section so we're almost done with the home page which is the most important part so here I'll click on this plus button and then here I'll click on in the bottle elements also like blocks and the one that I chose is the image gallery so I want to start using the images throughout our website so here there's just different images now images can be the trickiest thing when you're building websites to be quite honest because image sizing is everything because if you have different images with different sizes it's gonna come out a little distorted so personally when you're making your website try to use the same image sizes if you don't know how to do that just go to fiverr.com and hire someone to just help you size the images correctly because I I build websites for a lot of and I've seen that they've give me like 50 images and they're all like you know they all of them are they look very different and the site looks terrible but the one that I chose was a see right here this one right here called image gallery carousel so right here I'll add this block to the page all right so you can see here how the gallery has been applied and people can actually go ahead and rotate and see all of our images like this right here and when I click on one image you'll see that the other images they just kind of slowly go and they kind of keep showing so that's pretty cool so right here is the image carousel and we can always go ahead and change the images right here if we want to do that so just like before if you want to add in your own image here I'll click on add to the gallery and I can just you know add in the stairs and add that to the gallery and then insert this into the gallery so here we can see the images slowly sliding and then we're going to see these stairs just pop up right there so that's pretty cool so that's how you can display images on your gallery and then right here you have different options so this is basically controlling this section right here so for example right here we have navigation do you want dots or arrows you want two slides to show you can show three images at a time like that's even four images at a time but I think one was good you know yeah that was good good and then right here style so remember whenever you want to style this right here this is the section that you're going to go to so we can style this and we can change the size of this we can change the color of it as well and then there you go so our our navigation is now changing and then for the images we can have a border to it so if you want to add in a border we can add it in a really cool border so here we'll give the border a little bit of width I'll click on link values together and I'll add in just like I don't know ten just give an example and now you can see that we have this really nice border effect to our images like that so there is that border and we can also change the color to anything that you want so something like that you know it looks really cool so that's how you can have a really nice gallery on your homepage next let's add in a call to action so when you're building your website you you kind of wants to encourage people to you know check out an offer or something like that so right here on this plus icon I'll click on this I'll click on the bottle elements click on blocks again and then we'll find the call to action module here it is call to action and they have a lot of different call to actions and I chose this one right here and I'll add this block to the page you see the websites you want to go ahead and kind of introduce different styles on every block so we have this header section which is look good you know and then we have this section which looks good this section which you know it looks looks nice and then we have this section so essentially what you want to do is you want to go left to right and then maybe like three columns left to right buttons in the middle so for every section if you had buttons in the middle the site would look very ugly you know but we since you change every section the site looks a little different and it just looks better than having just call to actions in the middle all the time so right here we have the button to the right right here we have no background no buttons here we have buttons and a background and you'll make it look a lot more professional than just having call to actions and buttons on every single page because our section because that looks really ugly now I'm lazy guys I'm really lazy so I'm gonna go ahead and copy this and we're gonna paste this style right here and then here I'll make this Center aligned and then we're done so this can be something like get 60% off and then this can be something like talking about your service and this can link them to your contact us page and if you want to build an e-commerce website I have a full tutorial that also I'll put that in the description below as well it's actually a really good video and it's really easy to set up so we added a call to action which just it just adds a lot of different style and since this is a block right here and I think that kind of matches the scheme of our website so we have like a black white and gradient style so I think right here that just works just perfect next well go ahead and add in the last section which is the testimonial section so open this right here click on this plus icon and the umbrella mints under blocks we will find testimonials so right here testimonials slider now at this point guys you are pretty much pros and I think that now you can kind of go through these and pick something that matches for you but I'm gonna go ahead and select this one right here so a block to the page and of course this is using Elementor pro and we have elements or pro so that's awesome alright and here we have the testimonial section so what I want to do here is I want to go ahead and change this text to Poppins right and I also want to go ahead and add in a different background so hero Poppins and I'll go ahead and add in a different background so if I open this right here or close this I mean you'll see that the site has is kind of I guess you want to say this like a pearl a pearl white background and it looks like grandma's house you know it doesn't look that good so we're gonna change this here so I want an all-white crisp clean background so right here on the dots under the style we'll click on image right here and I'll select one of the images and then I'll click on insert media it's called white background in case you can't find it and there you go so I feel like this is a lot more friendlier rights now another thing that I want to do is I want to change the gradient you know I want to add this gradient so what we can do right here is go back up here and I'll copy this cuz I'm lazy rights and I'll paste that setting right there paste that like that there you go so that looks a lot better now you'll notice right here how I didn't make this gradient and the reason why is because we already have too much gradients you know we have gradient here gradient here now when you just scroll down and they see gradients very close it looks tacky so that's why I did not edit gradient there because I'm a really good designer so I know the rules of web design so here we have this section right here and if you want to adjust these tutorials I'm sorry these testimonials right here under image one we have the image one and then right here to be the testimonial here you can put the name of the person in the title so for example right here we have a picture of this girl right here so what you can do is just click on choose image will select I don't know will select this this guy right here enter that into media and then here I'll put Darrell Wilson and then for the title CEO so you see right here in Darrell Wilson CEO and then right here you can to change the contents of the testimonial to say oh this is the best oral on YouTube I will give Darrell a like and a subscribe and if I don't then I suck that's what you're gonna put right there in the content section and then right here under the Style section you can change the background color you can change the the the image you can go to the content and you can kind of mess around with these settings like by adding a gap or border radius a border radius guys is essentially making it square or circle so that's basically what that does and then the content you can change the content settings right here such as the font and the typography and all that really cool fun stuff so that's how you can add in testimonials now right here we have the bottom section we can keep this or not I'm gonna delete it just because I feel like it's too much content on the home page and then right here I don't really want this either the featured work I do want this actually but I want it up so I'm gonna hold these dots and I'm gonna drag it up like that's and drop it all right cool and right here we have testimonials now I already have testimonials so I don't really need this anymore so if you want stars you can just kind of drag them to different parts of your website like maybe I could drag them right there and then I can align them to the center and then right here I'll just make them really big you know something like this and there you go so that's how we can add stars but I don't want this section so I'm gonna delete it and then this section right here I do want it I think this is a good ending section but I want to change this button to gradient so remember how we did that's we can go to our button and we can copy this and then I'll scroll down and then we can go ahead and paste that salad right there and then we're done with our homepage so now we can go ahead and take a look at our home page and you guys can see that the website looks amazing so now you have this beautiful home page that we created for the very first time and for a beginner standpoint this is very impressive so congratulations on the home page now for the rest of the pages I have templates for all of you so I'm gonna show you now how you can export your work and then how you can upload it to your website so you can use them on different websites or even different parts of your website and don't forget once you make the changes you'll need to update it so right here I'll click on update so here we have this premade template that the theme made for us already however I want to show you all how to import and export templates so if you want to do this for other websites or if you want to import a layout that you created on another website let me show you how to do that so in the description of this video there's a link to my website Darrell Wilson comm and it'll take you to this page right here where you'll see Elementor layouts now I'll just link you to the actual product in the future so right here is the Elementor web agency kits so I'll click on this right here so here is the actual complete website for you already made so what we're gonna do is we're gonna download this and then we're gonna upload the templates throughout our website so you don't have to remake everything from scratch so right here you'll simply click on add to cart now this is a free layout that I've created for you all so it's not gonna cost you anything at all and then right here you'll click on View the cart and right here you'll click on proceed to checkout and then right here you'll just put in your first name and your email address or put in Daryl and then right here I'll click on place order alright awesome so once you download it right here it'll say download Elementor web agency Kids so click on that so let's go back to our about Us page and now right here I'll click on edit with Elementor alright and right here I'll click on this plus icon and I'll click on this right here the gray folder icon now with Elementor you do actually get premade and templates as well so right here is some blocks that you can get personally I think that the ones that we use are a lot better there are a lot more nicer and these are just black and whites and although they can be decorated nicely I feel that's a it would take a lot of work to make them look good so that's why I didn't really include them right here is pages you can use them throughout your website and since you're a pro user you get all of the pro templates now they do add a template every single month so there will be a new template so but I made this video there was probably only like four or five templates and they just added one this month so that was pretty cool of them so right here we have my templates and whenever you make a template it's going to be displayed right here so you can see here how there's some templates that we've already that we already have because of the involve elements plug-in now right here you'll see this little import template plug-in or import template button click on that so this is where you're going to upload the file now there's a really cool shortcut on what you can do so what I'll do is minimize this and here is the elements for Web Design kits I'll open this folder and here are the files that I need so I have the home the contact and the about us etc so what I can do here is just take this Jason hold it and drag it onto the page drop it like that here I'll make this a little bit smaller I'll close that okay so I uploaded the template and this is what it's called right here it's called the about US agency simply click on insert so here you go so now you have this fully functional about Us page that you can use on your website so everything's fully designed now right here we have the our team section so you'll see here how there's these four slots so what you can do is you can insert your team right here so you would just go ahead and upload the image that you can use for your clients or even your company and then just upload them so I'll just grab the scroll right here and insert media and then right here if we can do the same thing and so on and so forth so I didn't purpose I purposely left out the images because you know if it's your team I don't want to put the picture of other people because it's your company right so so here I'll scroll down and here we have partners so here you can just add something if you want about your company or whatever you want to add about your partners one thing I want to note that if you click on this right here you'll see this image but there's nothing there and you'll see the actual PNG file you can just delete it and it's gone so sometimes you're using Elementor and you export templates you just get some weird stuff you get weird errors so just there you go that's all fixed so that happens once or twice and then scrolling down here we just have this really beautiful call-to-action and we have the original about Us page still here so what you can do is just delete it so right here delete it delete it delete deletes deletes and then you're finished so you can scroll up and just take a look at your new websites of course you might want to change the actual images here yeah this really cool feature where we actually hover over this and the crew actually moves we'll talk more about that in the advanced features when we talk about advanced features of Elementor and that's it so you now have a beautiful about Us page that's already made for you so right here click on update so next let's go to the portfolio and the Contact Us page now there's a shortcut that I want to talk about so if you hold command + E or for those of you using Windows Windows and E you'll notice this finder box right here and what you can do is navigate your website without having to exit out of a page and having to go and exit the Builder so I want to go to the portfolio page so I'll type in portfolio and just by typing in Pilar t we have a list of pages so right here I'll click on portfolio page and there you go so now it's actually navigating through out our pages without us having to leave and next to the page which takes a long time and it give me a pain in the ass you know to be honest though let's now upload that second template so right here plus icon template and then right here I'll simply click on export template I'm sorry import templates and then right here we have the portfolio page and I'll click on open so now it's exporting I'm sorry it's importing the portfolio page for us alright awesome so you'll see right here portfolio page agency right here click on insert all rights awesome so you'll notice right here we have this portfolio section we don't need it so I'll close this and then I'll scroll down right here and you'll see that everything has been successfully imported everything looks really good so right here some images didn't show up and if that happens sometimes guys you can just use the demo images so for example I'll click on the Andreev le and then right here choose the image and then for example I'll just select the girl and there you go now right here we don't need any of this stuff right here so you can choose to keep this if you want and you can you know drag and drop stuff you can custom my stuff but for this video I'm just gonna get rid of it because I feel like this right here is just enough content for the portfolio page we have the gallery right here of whatever I want to show we have some more testimonials about how great it is and then we have like just go ahead and contact us you don't want to overwhelm your clients or your website with a bunch of unnecessary stuff so here I'll click on updates now let's say for instance you made some changes to this but you want to export it this time so you want to have your own layout that you can use and upload it just like I did to you guys so what I'll do right here is right here we have save options right here I'll click on save as templates so this is going to be the tutorial template so this is examples of if you want to take the work that you've done and export it and maybe apply it to a different part of your website so right here I'll click on save now right here on these dots see these dots right here how it says export I'll click on export so now what I've done is I've exported that layout on to a JSON file so now I can take that same file and upload it on my websites and just use it on any part of the website so let's go ahead and go to the next page so this right here is done so we've done the portfolio page here I'll open up the finder by by clicking on the windows + e or for those of you on Mac ctrl I think it's command e yeah command E so let's go to the contact us page now aircon there is contact us contact pretty cool we don't have to keep exiting I mean that makes it really simple but let's go ahead and upload that layout that we exported just to see if it's working because maybe you want to see how I do it and if there's a mistake I don't want you guys to freak out and yell at me you know so let's go ahead and do that so you don't have to do this this is totally optional but let me just do this really quickly for those of you who want to export upload your layouts so right here I'll click on the folder import layouts select the file and I'll select the file that I exported alright so here's the file that I exported now you might want to give it a name because it can be confusing so right here you can see I just actually exported that so right here I'll click on open now you'll see we have two files - the total template so I'm gonna actually insert that one right there and there you go so now we have that same page that we exported on our Contact Us page it looks like the image actually carried over there so you see that you know sometimes guys that just happens you know I don't know why but let's actually now upload the proper page so I'm gonna delete all this right here so I'm gonna delete everything on the contact us page because I don't want it and let's upload the Contact Us page that I gave you also same thing and then here is the Contact Us page let's click on open it's going down here we have the contact us agency and then I'll click on insert and there you go so now you have a beautiful Contact Us page already made for you and everything is ready to go so you can see here how the page looks great and let's make this expand it a little bit so you can see what we're doing here and there you go so now we have the contact us we have some information about the company we have a beautiful contact form and we have these happy people right here reassuring you that they are happy all right so let's now go ahead and test the contact form to see if it's working so first click on the contact form now you're gonna see email right here so you have form fields you have submit button you can change the button what it says - a different color or you can make it change to whatever you want so right here is email now right here it's going to this specific email and it's going to tell you a message so it's going to be from this email right here and it's going to reply to that email as well so go ahead and just put in the email right here as the email you want it to go to so I'm gonna put mine as I'll do darrel Porto @ gmail.com and I'll click on update so next let's test out the email so I opened up my Gmail right here and I'm going to go ahead and exit out of this and I'm going to submit a form on the contact form right here oh what's that man and then I'll click on submit message and then let's go to my email and right here you can see a new message from my blog and there you go so hey what's up man and then there is the information so now you can see how your website is connected to your email inbox so whenever you want to receive messages just make sure that you have this layout and it'll all work fine so lastly I'm going to show you all how to add pages and add them to the menu because we didn't really cover that just yet so right here click on plus and click on page so what I'm first show you all is how to make a blog page so right here blog click on publish and publish next let's make another page so I actually have to exit out it's kind of annoying they change that in WordPress so right here we have plus new and go to page and we're going to do the pricing page now and publish and publish here I'll close this so the first thing that we're gonna have to do is we're going to assign these pages to our menu so right now if I go to visit sites you'll see that we have the home the bouts and portfolio and contact but we don't have the blog or the other page on our menu so let's add that so there's a few ways on how you can add it so right here I'll go to dashboard we have appearance and menus so right here on their pages you'll click on view all and you'll find the page that we made so also the blog page and add that to the menu and here I can rearrange it by dragging and dropping and then I'll click on save menu and I'll take a look at our website again and now you'll see the blog page is there so I'll click on the blog page and of course nothing's there because we haven't added anything to the page but that's okay so we have another page and let's add that to the menu through the theme customizer now so this is an alternative way on how you can adjust things on your menu right here we'll click on customize now we're going to talk more about the theme customizer in just a little bit because there's a lot to cover with the theme customizer but right here we have a bunch of different options so right here under menus we have our menu right here I'll click on the menu and right here we can add an item so I don't add them to the menu and here it lists our pages so right here we have the pricing page so I'm going to add the pricing page to our menu and then here I can also rearrange it and then click on publish and there is the pricing page next let's actually apply our blog to our specific blog posts so we're gonna make posts in just the bids but I need to tell the website where I want the blog posts to be so right here in our home page settings under post page you'll select blog and then click on publish so now whenever you make a blog post it's going to display on your blog pages so right here I'll click on blog and you'll see that there is some blog content right here it's really stylish I really like this theme it's really clean really needs so now that we have a blog page let's first go ahead and upload the last part of our website which is the pricing page so right here I'll click on edit page because you'll notice another Elementor is gone and here you'll see edit with Elementor so if it's if it's gone in the front end it'll be in the front and everybody in the back end for sure so one thing I want to note is that so we have some options right now so we made a page from scratch but we need to actually adjust this right here so we have the theme customizer settings you can have it contain or full-width also right here we have the option not to have a sidebar so if you don't want to use the theme customizer settings you'll need to change it to full width but right now we are using the customizer settings so I'm gonna leave it as customizer settings and click on updates right here I'll click on edit with Elementor so we can now design the page with the page builder so same thing guys simple right here I'll click on templates my templates import templates select File and then pricing page and click on open here I'll scroll down I'll find pricing page and click on insert alright awesome so now you can see that we have our pricing page here so the pricing tables have been made for you so for those of you who want to maybe become a web designer here are some prices that you can charge and I will be having a web design course coming out very soon and I'll leave that in the description below this video for those of you who want to pursue your career in a web design because I myself the web design for I want to say 3 to 4 years and I met some crazy people so right here you can see here how some of these image - images it improperly export so what you can do again is just use demo images so if that ever happens just simply grab a demo image and there you go I'm like Elementor because it really sizes the images very easily so it's a lot of other themes have a lot of resizing issues but Elementor does really does a good job at that so there is the pricing page and we are all set so here I'll click on updates and at this point you not have a fully functional website so we have the home page the pricing the aboutis the portfolio of the contact and your site looks amazing so one last thing we want to do before we jump into the theme customizer is I'm gonna show you all how to create a blog page so here you can talk about your feelings like oh my girlfriend sucks or my boyfriend won't get a job or whatever you want to talk about in your little world of whatever so here under plus new will click on posts and this can be something like top 10 things women hate now one thing to note here is that featured image this is the image that your blog post is going to display so whenever you see like people will share stuff on Facebook and you see the image and the title this is the image that you're going to make people see when they see your title so right here make sure it's something that you know correlates to something that you're talking about so here I'll just paste in some demo content and then I'll click on publish and here I'll view the post and this picture is actually much better so you can see here how it's a little it's bigger and it just looks a lot cleaner and it's just a really nice-looking blog post so that's how you can make blog posts to your websites and under the blog section every time make a blog post is going to display right here alright awesome so now we have a fully functional website so let's move on to the next section where we're going to talk about the theme customizer settings [Music] so theme customizer now every theme in WordPress has a theme customizer so what a theme customizer does is that it controls virtually every part of the website that the page Buller does not such as the blog layout and the header and footer and other various parts of the website so for example right here we have layouts and here we'll click on blog archive and let's just go to the blog page really quick to give you an example so here you can see the layout of the blog now you can change the layouts by clicking on these little icons and it'll virtually change the style of the actual blog so you can see here how the blog changes and then right here the images are on other sides now right here you can actually take stuff off so right here it says by admin and the dates you can simply just click on that and take those off so now it doesn't display so you can kind of go through this right here and miss around these settings for the blog also right here for the single posts as well so for example on the actual post itself you can take off the title in the meta the thumbnail the content the tags and also the comments I'm not sure why you want take off the content but for the people out there might want to so if you want to adjust this you can you know drag and drop it or if you want to change anything you can do that right here with the theme customizer so let's go back here and also right here for the container you can change the actual width of the entire website by doing that but I think most of us want to use the page builder for that I don't want to mess around with the width because you've already design the website with the full width anyways so let's click back right here and back now we have the header option so you can actually build out a custom header with knee which is really really cool so let me just go ahead and explain how this works so we have a top bar we have a middle bar and then we have the header at the bottom so right here click on the plus button so right here we have 6 icons so what I can do here is just add in something like HTML and then just go ahead and put in whatever you want so I can put and whatever I want and here I can actually drag this like that and I think I can even make it a little smaller too so the header builder with Nev is incredible because you can actually just say okay I added that let's add in a button and then right here we can change the style of the button maybe put in a background of black right something like that now personally I don't think it looks good there and you know we need to change the actual text to white that's really ugly yeah yeah right oh that's you know I think that's even worse I think that's worse there we go there we go white so what I want to do now is I want to take this button and put it behind the contact so right here I'll take the primary menu and I'll just shrink this down a little bit smaller and here I'll take the button and then just drop here we go we've got to make it a little bit smaller and then there we go now if it's you see how cool that is so with this theme you can just fully customize your menu any which way you want here we have the logo site and identity so if you need a logo there's a link in the description below to fiverr.com this website right here these guys I'll make you a logo for like five dollars it's really really cheap so right here just type in logo and I got my logo through fiber comm because they're really cheap and they're really good so for example right here you can go ahead and go to budgets just type in zero to ten dollars you know $1 to $10 and then apply and then people will make you a logo for as little as ten dollars and their logos are actually pretty nice so if you want a logo checkout fiber comm I'll leave a link in the description below to this website it's really cheap so here you can actually go ahead and remove it and upload your logo instead and then you can go through these options right here and just mess around with it and change stuff now also right here you see how the fiber has that green little circle that's what the site icon is so let me go and add one really quick so I'll just grab in a demo one right here and go to crop image so now on the top left right here you'll see there's an image of the actual phone so that's how you can have your own site icon here I'll go back so right now you can just kind of get an idea so if you want a third menu right here click on the plus button and then here maybe add a menu icon we can add in a search icon we can add in a secondary menu and so on and so forth so here a search form and then we can make this smaller now I don't have a secondary menu created so if you want a secondary menu created just go to menus and then just create a new menu and add it as your secondary menu so that's basically how you can kind of style your entire header so here in our style you can change the topography you can change the weights and the font size and everything else so weight is just the size of the text so you can make the text really fat or you can make it really thin like that so go ahead and go crazy knock yourself out with these options and you can have just a really cool looking header also right here we have header presets so this is something standard maybe this is something where they creates and they're really good designers so maybe you want to use their designs so you can do that if you want to do that I think that looks really clean I don't know what do you guys think let me know in the comments below what kind of head are you guys like alright so let's go back over here and here we have footer as well so footer is the same exact thing guys it is the same thing as the header so for example right here plus here I'll put in footer 1 so here we have footer 1 now what do you want inside of footer 1 well let's add a widgets right here a lot in a text widget and here I'll put in about us and then here you can put in some content about your company now let's scroll down right here to give us an example of what this is so right here about us so I'll put on some demo content there and let's add in a new widget so right here plus footer area 2 and then we can add in something else so you can add in a menu you can add in something else but I'm going to delete this and add in something else maybe you want to add in a calendar you and I'll drag that right there and then right here we can add in footer area three and then we can do something like a you know just like another text widgets so or a recent pose now this calendar is way too big so it's making our and you look a little ugly there so I don't want that there so we can delete that and then right here we can add a footer area for and what I'll do here is I'll make this bigger now what we can do as well is we can install plugins that gave us social icons so let me click on publish here really quick and let me go into the backend now you don't have to follow me here I'm just giving you an example of if you want to add different stuff to your footer and header so right here under plugins you'll click on add new here I will type in simple social icons now there's a lot of plugins that you can use for social icons or header in the footer and to be quite honest it's really hard for me to give you advice you'll just have to go through each one and just find out what you one you like to be honest but right here I'll install simple social icons and click on activate alright so let's go back to our theme customizer so here I'll click on visit sites and go back to the theme customizer I'll go to my footer and then here under footer area for all out of widgets I'll scroll down and now you'll see simple social icons so I'll click on this right here and now I can just add in the icons I want to the footer right here so here you would put in your behinds URL or your URLs for Facebook pages or Flickr or something like that and here I'll put like I'll follow us so you can customize this by changing the colors in the background but I'm just give you an example of how you can add gadgets and widgets to your footer so next we have typography so this will actually change the fonts throughout your entire website so right here under general we have pop in so you notice earlier how our building on our website that a lot of this was Poppins and that's because you can actually display a global font right here through the general and typography section and then also for the heading so once you have specific heading tags you can display a specific font and style for those specific h1 h2 h3 tags etc so for example this right here to be h1 this right here would be h2 so you can actually design everything and that applied to all of the h1 tags and then over here under h2 you can design this and this will be displayed through all of the h2 tags as well so that's just a it's another one how you can sound design the font on your website here we have buttons so earlier we saw we have the buttons at the top so I took it out but if you want to add buttons to your menu right here this is where you can customize the buttons so let's go back menus we went through menus widgets we talked about widgets home page settings whenever you make a brand new website you always need to select your homepage as your homepage because you need to tell the website what is the main homepage of your websites and then for the post page we set it to blog and lastly we have additional CSS but this is more for developers and people who are serious web designers so if you're beginner I really wouldn't worry about CSS right now so I made all the changes to my website but I do want to change the header back so right here under header I'll go to header presets and change that and then here I'll click on publish and that's it so that is the theme customizer and a nutshell [Music] all right party people in this next section I'm going to show you how you can optimize your website for all devices so we're gonna optimize our website for tablet and also mobile devices so on the bottom left of your screen right here you'll see this responsive mode so click on responsive mode and here we have the desktop the tablet and the mobile so right here well first click on tablet and we'll optimize our website for tablet users so right here you can see that this is pretty standard I don't really see anything that doesn't look like needs to be optimized except for this section right here so we have this padding right here and the text is kind of scrunched right here so let's actually fix this so the first thing I'll do is get rid of this padding right here so here I'll click on these six dots go to the Advanced section and here you can see tablet is selected so right here I'll just put 0 and then for the bottom I'll put 0 and that got rid of the padding next we have this text right here so I'll click on the text and I want to Center align this you know I want it to look a little bit more cleaner so here under the style I'll click on Center and then the same thing here for the divider we can Center this and the same thing here for the button there we go so this section looks pretty good so let's keep scrolling down just keep scrolling so as you go on through your website you want to make sure that if you see something that doesn't look correct make sure to fix it because Google will actually rank your website on the search engine depending on how well your website is optimized for mobile so it's very important now we have this section right here so we have this text on the bottom that we really can't read and then we have this image right here that displays first now personally I think the text should be just display first right so let's fix this section right here so right here I'll click on these 6 dots next I'll go to the Advanced section and go to responsive so right here we have the option to reverse columns so if I click on this right here it's going to reverse the columns right here so now the text displays first and then the image displays which is pretty cool so you can see here how this looked pretty good but maybe you want to centerline this stuff so it's it's very simple so just like you edit it on the desktop you would click on it and then Center a line so you can see right here how its selected for the tablets and then right here same thing and same thing now remember we're only making changes to the tablet version we're not actually editing the website so this is only for people who are coming to the website on tablet devices alright so that looks pretty much all good now this maybe we don't need this image right here because you know it's just I don't know I just don't want it so let's actually hide specific elements for specific devices so I'll click on this right here and go to the Advanced section here under responsive we have the option to hide on desktop hide on tablet and hide on mobile so I want to hide this specifically on tablets and also mobile devices so now the image is not displaying so another thing that we can do is if you have an image in the back that you just really don't feel belongs we can actually change the specific background image for specific devices as well so we have these mountains in the back but quite frankly maybe you just want a different color for mobile devices right so right here I'll click on these six dots and we'll go to style so right here you can see that we have this selected so there's a few there's a few ways on how you can do this you can either upload an image to cover this one so you can just upload a second image or you can go to background overlay and add in a specific color and then increase increase the opacity to 1 so let me give you an example so here I'll click on classic color and I'll just put something like white so you can see here how the mountains are starting to fade out but they're not completely faded out yet so right here under opacity I'll drag this to 1 and now the mountains are gone so there's really no right or wrong way to do this so if you want to upload a white background you can do that or if you just want to have a color and increase the opacity as well you can also do that as well so I think the sections done and the best thing to do is to get on your phone and just go to your website and just see how it looks like on your mobile device so next we have the gallery section and then we have this call to action so there's a few ways on how we can optimize this you know we can even disable the gallery section maybe you don't want it to display the images on mobile or what we can do is add in some margin right here to actually make this not so close to each other so right here I'll click on this column under the Advanced section under margin a lot of some margin right here I'll add in like a 20 20 pixels so you can see here how this is starting from a lower point now so I could even go to something like 50 so right here you can see that now we're actually creating space so if I take this off right here you'll see how it gets closer so if you want to actually use margin oh that's too much space so there we go 50 now you can see how it's just kind of like a little you know a little way form it or what you can do is click on this column and then you can actually optimize this entire column but that'll be a lot of work and I'm not gonna do that but I'll just give you an example you can either optimize this column or you can push this away and you know leave it at that scrolling down here this right here looks pretty good I don't really see anything we need to change the testimonial section looks good and I think that looks all good right there so yeah so our website basically looks just fine on the home page so what you want to do is you want to go through all of your pages and you want to go ahead and optimize your website for specific devices so we optimize our website for the tablet let's quickly go ahead and check out the phone so right here we have mobile so click on mobile all right let's scroll back up okay so there's a few things that we need to change right away so this title is way too big so let's actually change the text of the the size of the text right here and here will click on headline on our typography we can change this so right here you can see how it's set for mobile something like dad's right something like this and then here we can just disable this actually you know I don't really think we even need this so what I'll do is go to the advanced and responsive and I'll just disable this you know I just really feel like we don't need this text you know it's just really not important we just want the to see the title and then maybe learn more or hire us also this background is too much this background is taking away a lot of the emphasis from the text so let's disable the background so right here I'll click on the buttons we have the style and then what we can do here is you know I left this on the whole video so I change that so what we can do is the same thing for background overlay we can just go ahead and add in a white background overlay or we can do the same thing we did for the tablet one so we can either add another white background image or I can add an overlay just depends on what you want to do so here I put whites and they'll crease the opacity so I feel like this will be a lot better than what we had before scrolling down here you can see here how there's still padding for the actual mobile so that's why you always want to keep checking to make sure that there's a everything looks good and what we can also do here is maybe Center align this but that's strictly up to you you can go for this this look where it's against the wall kind of or you can actually Center align it so here you can see that this is center line so what we can do is probably center line this or we can just disable this section just to say you know what I don't want to say I don't want to mess with everything so this one section is making my site like a little tacky so right here I'll just disable this section as well so right here for responsive we can hide this as well this is going down here this all looks pretty good text looks good this section right here we're actually disabling that on mobile and that's good because it's just a lot of empty space that looks really good gallery looking good everything's looking good so far and I think that is pretty much it yeah that's good so you want to make sure that every single page is optimized for mobile users because Google is very serious about it now because again you know there are more mobile users than desktop users now so having an optimized website is crucial into this business so I basically covered how you can optimize your website for tablet and mobile devices let's now talk about the more advanced features and what elements are pearl can really do so next let's talk about the more advanced features of Elementor like the elementary team builder which I'm pretty sure you've probably heard a lot of about the elements or theme builder allows you to have a specific header and footer that you can custom build ignoring the theme customizer settings so let's create a custom header and footer for our websites so right here I'll go to my blog and go to dashboard so here I'll scroll to templates and click on theme builder next I'll click on header and now I want to apply a specific header throughout my website so here I'll click on add new header and you can give your header a name but I'll just leave it blank for now and click on create template so here's a list of headers that we can use that we can customize throughout our website so what I'll do is just grab this one right here and click on insert so here we have this menu that we can fully customize so I can control the menu I can even add additional elements to it like if I want a button below the phone number here I can Center it and I can make it smaller so here we can actually go ahead and fully customize the header so you can go ahead and mess around with these settings on your own free time we can change the color we can change the fonts we can build whatever we want just like any other page so so the header is basically what you're building on this specific page so I'm just gonna go ahead and say publish for now and click on publish and now we want to go ahead and display conditions so where do I want this header to be applied on my websites so right here under add condition I can simply just click on entire sites or I can get a little bit more customizable maybe I only want this on specific pages so right here I can click on singular and right here under all singular I can select pages or I can select posts or I can select whatever else I want to add maybe just a 404 page right here under pages we have okay what pages do you want to apply this header to well here I can put my home page right now if I want to display this on another part of my website I can simply click on add another condition and include this on another page so for example here I'll add it to my contact all right and here I'll click on save and close and then update so now let's actually take a look at our website so right here I'll go to view page here I'll click on home and there you go so now we have this custom header being applied on our websites however if I click on something like the about Us page it's going to be the default header because remember this header is only being applied to the home and the contact us so that's it so that's how we can kind of have a custom header throughout our website so usually people would probably want to select entire website because you know you really wouldn't want to have a different menu for different pages I mean you can and some websites do but for the average person I don't think we would have multiple menus for different pages but with the theme builder you can do that so you can totally build a custom menu with the theme builder so I've showed you all how to create a custom header but right here if I scroll to the bottom right here you'll notice that we have this really ugly footer that doesn't really match with the header so let's fix that so let's add a custom footer so right here I'll go to my dashboard go to templates and theme builder so here is the header that we created now right here under footer we can go ahead and create a custom footer so I'll click on custom footer and click on create a template the theme builder is actually very important for a lot of pages that you can't customize so as you're installing plugins like e-commerce and also lifter LMS or learning - courses or something like that you can't customize those pages so you want to use the theme builder for pages that you can't normally decorate or design with the actual page builder so here we can go ahead and select the footer' for our website so you can go ahead and just kind of just grab a pre-made templates because we're using the pro version and the pro version we get all these all for free which is really really cool so right here I'll just click on this one right here and click on insert and we can design this and customize it any which way we want so we can click on these dots right here and we can go ahead and change the color of it and vice versa but I just want to publish this right now so publish add a condition and I wanted this place on the entire website you know I don't think we would need different footers for different areas and as you're creating your website guys keep it simple don't get too crazy and start having different headers and footers for different pages that is a quick way to make your website look terrible so let's take a look now on our website so here we have the header and if I scroll down here we now have a custom footer so so this right here replaced the themed footer and now we have this as our specific footer and right here if I go to the blog page and scroll down you'll see that it is the same applied as well so if you want to go ahead and apply this throughout your entire website you can also use the theme builder to decorate your header and footer areas another thing to note is that the inaudible elements plug-in also has a library of headers and footers that we can use and add to our library and if we scroll down right here we'll see header and footer so right here I'll take a header and here we have a list of more headers that we can use throughout our website so I'll just go ahead and grab one really quick so right here I'll take this one right here and click on import to library alright now we can go ahead and edit this right here so click on edit template so here we actually have the header now so here you can go ahead and fully customize and design the header so this is where you would go ahead and make changes to it and whatever else you want to do so right here maybe we need to actually make a little bit more space it looks a little bit too scrunched so what we can do here there we go so now that looks a lot better than what it did before here I'll click on update now let's apply this to our website and here we have the templates being applied on our websites so let's make another one so right here under header I'll click on add new and this will be the new header and click on create a template so right here I'll go to my library and the one I used was called header with nav which is this one right here so let's go ahead and preview that just to make sure and that is the one that we were using so right here I'll click on insert and then click on yes all right perfect so here I'll click on publish now right here a lot of condition and I'll apply this through the entire web sites so next we need to go ahead and disable the other theme builder because the other theme builder is being applied on the home and the Contact Us page remember so let's disable that so right here I'll go to exit to dashboard under theme builder we have header this one right here I'll just go ahead and trash this I don't want to know more there you go now let's take a look at our website all right awesome so now we have our new menu being applied on our website so here we can go to the home the blog the contact and everything looks really really good so this is why the theme build are so crucial because it allows you to have a custom header and footer throughout your website that you can fully customize next let's talk about the blog page so the blog page you can fully customize with the element or theme builder as well so right here I'll click on this and this right now is your default templates but wouldn't it be cool if we can make a templates that we can use every single time and make a post we can do that with the theme builder so let's do that so right here I'll go to dashboard and here I'll go to templates and click on theme builder and right here we have single here I'll click on add new single and right here it's saying select the post type so I'll just say for every single posts I make and click on create template use on our website and the cool part is that this has dynamic content so you might have heard a dime add content before and not understood what it means but then that my content is basically having the ability to change the title depending on what you're talking about so for example also like this one right and I'll click on insert so this right here is our new title so you can see here how it's pulling the other information so here I have the image from my old blog post and then I have the exact same style and formats for my blog posts so this is what it means by having your content update dynamically so right here I clicked on title and you can see here how it's being the post title so for your future blog post whatever you talked about the title is going to dynamically update to your new title the same thing right here for your featured image so your featured image will dynamically update to whatever you're talking about so let's go ahead and make a new post to give you an example so I'll click on publish right here now for the post conditions I want this to be on all of my posts and click on save and close all right awesome so let's make a brand new post so here first I'm going to go ahead and disable the sidebar so let's give this a name there's gonna be this is an amazing tutorial right guys right yeah yeah but hit that like button so right here we have the featured image so I'm gonna add a featured image here so I'll just put in something like this guy right here yeah this guy right here and then here I'll paste in some demo content and then paste a little bit more and we are all ready to rock and roll so here I'll click on publish now let's view the post and see what dynamic content has done and how it's being applied to our post alright cool so you can see here how it's dynamically updating all of our content so it's taking the format of the post that we selected and it's inserting our content here so here we have the featured image we have a post and then we have our contents and then we have the social icons at the bottom and then people can comment which is really really cool the theme builder also allows you to customize other parts of your website like the category pages the blog archive pages and also for or for pages as well so you can have a lot of customization with the Elementor theme builder alright so let's talk about another element or pro feature pop-ups if you want to add pop-ups to your websites in this part of the video I'm going to show you how you can do that now you can add pop-ups on virtually every part of your website you can also put pop-ups depending on what your visitors do so that's really interesting so let's go in now and apply a pop-up to our websites so right here I'll go to dashboard we'll scroll down till we find templates and click on pop-ups so here I have a pop-up but I'm gonna delete this one and I'm gonna start from scratch with you guys so right here I'll click on add a new pop-up and then you give your pop-up a name if you want to do that buts here I'll just ya know no name for my pop-up just create a template and then here we have like a list of pop-ups that you can use throughout your website so you can kind of go through these and check them all out so they have tons of them and they're really nicely designed to look pretty cool so I'll just grab this one right here and I'll click on insert so you can fully customize and design your pop-up just like you do any other page so right here under the little - icons you can go ahead and add stuff to your pop-up and you can build it how you want it to look so you know you can do that on your own time and you know you can have fun and you can go crazy and all that stuff so let's just say for example I'm done designing my pop-up so I'm done designing it and I want to publish it on my websites so right here I'll click on publish and right here we have conditions so where do you want this to be displayed at it's well I wouldn't put it on every single page because I can get really annoying really fast but here we can click on this and go to singular and you can apply it to specific pages so if you're a blogger maybe you want to put it on your posts if you are someone that's just selling a service maybe want to put it on your home page so for this example I'll just select pages and then I'll just select the home page alright so I have the pop-up being displayed on this page right here so right here I'll click on next now we need to go ahead and say okay so it's being displayed on the home page but how do you want it to be displayed so we have it on the page load so whenever the page loads I can say as soon as the user is on the website for five seconds I want the pop-up to be displayed or I can say I want it to be displayed on the scroll when the user scrolling down fifty percent of my page so when the user hits 50 percent of your website going down it'll display the pop-up or you can have it on scroll two elements on the click after inactivity or on page exit intent and this is actually a pretty cool one for sales so when the user is actually going away to click off their browser like this you can actually display a pop-up saying hey wait don't leave yet we'll give you 30 percent off you know something like that so you can apply this to people who are leaving your websites and then if they're inactive if they're just not doing anything you can say hey are you lost you know and give them a pop-up if if they're lost or whatever you want to do so yeah you can kind of go to these and strategize your little marketing campaign and find out how you can make people stay on your website using pop-ups so right here I'll just say page load we'll just keep it simple and then I'll click on next and here you have some advanced rules so you can go to these on your own time like you know show on specific devices etc how many times per person so you go through these and have fun and knock yourself out but right here I'll click on save and close are you guys ready let's take a look so here I'll click on that and go to exit to dashboard and I will now view the websites so let's count 1 2 3 4 5 oh let's see that 5 seconds so it is right on time so now we have this pop-up where people can go ahead and put in their email address and subscribe and you are all ready to rock and roll so this is how you can add a pop-up to your website and this is exclusive for Elementor pro so it's an amazing feature and if you're using Elementor pro which i think most of you are i highly recommend to add pop-ups to your WordPress website next we're going to talk about a feature called the Elementor theme style so wouldn't it be cool if you can design your entire website with one little area well with the element or theme style you can so here you can notice that we have these really weird - things above all of my images and that's because I'm using the elements or a theme style so right here I have the Elementor menu and I'll click on the hamburger menu and then right here we have the theme style so click on theme style so what the theme style does that this allows you to customize your entire website with this section right here so this way you can actually customize everything on your website without having to do it individually so let me give you all a crash course of the Elementor theme style so the elementary team saw allows you to basically change all the elements on your entire website from one location so here I'll change the letter spacing in the font and I'll also change the color now these changes are being applied throughout the entire website next I'll change the color of the button and the radius and all the buttons on my website will be changed here we have the form field so this is going to apply changes to all the contact forms on my entire website from one location and lastly right here image so if you want to change all the images on your websites these changes right here will be applied to all the images so here you can see I can solid differently I can add some saturation and some hue and just give my images a different look on the websites so first let's go ahead and take a look at typography so for example right here if I want to change the body text of the entire website I can do it from the theme style so right here on our typography if I click on this and change the font family to something like yeah I don't know what should we do this gamble here let's let's do I don't know atma you'll notice how the fonts changes for the entire website so it's going to apply through all of the body paragraph which is pretty cool so with the theme style you can decorate and design your entire website with this area right here but I'll leave this blank I think at m'as that's not a bad font you know that's actually really cool and I might actually use on my next video but to be honest it's pretty cool so that's how you can design the typography but what about something like the images so with the images right here maybe I want to add in something like a a I don't know a dashed border we can add a dash border and make it black all right so now I'm applying a border to all of my images so let's go ahead and find some images here so here we go we have some images and now it's being applied to all the images throughout our website so this is a pretty cool feature here you know and we can change the color of this to something else so any image that you have on your websites that you apply it or any image module I should say that you can go ahead and design it right here with the actual theme style all right guys in this section I'm gonna talk to you about the Elementor Pro widgets I'm also going to talk about some additional things that we didn't really cover like global styles etc so let me just give you a rundown of everything so far so these right here are the basic elements with Elementor so these are in the bass free version that you get with Elementor here is the elements or pro widgets so every single widget does something different and personally I think at this point it's just kind of like trial and error so for example posts these will display your blog or your blog posts so if you just dragons rapids it'll then go ahead and display your blog posts and then here you can change the the the style here you can change the actual you know the color you can add a background color to it or whatever you want to do so at this point guys it's just trial and error so just go ahead and experiment with the widgets and just go through each one to see what's for you and what looks good on your websites and then here we have animated headline and then also we have the you know what is this pricing tables or call to action pricing tables there you go so at this point you guys kind of understand a little bit about that and you can kind of you know have fun on your home time right so let's keep scrolling down here so we have the pro elements right here and right here under the general section we also have additional elements so here you can kind of go crazy and you can mess around with these and have fun and just see what works for you now scrolling down here we have additional widgets as well so we have this free widgets and then also for the sites we have additional site widgets and then also here for single which this is for the blog posts so you can go ahead and customize basically every part of your website so this would be something maybe for the theme builder rates and this would be something for like a blog posts so blog or post title post excerpt etc these are here are free widgets that you get wouldn't be installed that to plug-in earlier and this right here is also free widgets that you get when we installed the Neve theme now when you're using WordPress you're going to be installing plugins and you're going to be using themes and sometimes these themes and plugins will give you additional elements for element or sometimes they might even compete with element or pro so for example right here the orbit Fox add-ons also has pricing tables so let's take a look at their pricing tables of course they're gonna look different but here you can see this is element or pros table and then this right here is Neves pricing table so when you're using WordPress and you install plugins you're gonna get like there's I mean there's so many plugins out there with add-ons for elementals probably like maybe 200 plugins that give you additional elements and add-ons for Elementor all so a lot of themes out there also do offer elements for elements or as well so there's some one theme forest but personally I think all you need is the pro version don't overthink it don't try to get too crazy because that's a quick way on how to make your website look really terrible so I believe or about that in my web design course that I have coming up soon and then also right here we have the WordPress base widgets so these are like the default widgets that you get with the WordPress and quite honestly they're really poorly design and they're really ugly and I just really want to use them on my websites but I'll just go ahead and give you an example really quick so here I have a navigation menu I'll just drop it in there I'll select the menu and then put menu and there you go so now we have the menu and you know you really can't style this and it's just it's really not that good-looking and you don't have a lot of customization that's why a lot of people don't like using the the WordPress default widgets because there's not a lot you can do also right here we have simple social icons so this is from the actual plugin remember how we installed the plug-in so if you sometimes it's all a plug-in you will get granted more elements that you can use with the page builder and since there's like I told you before maybe to 300 plugins it's really up to you to kind of go through and see which one you like test them out because even myself I use plugins sometimes and then they break or they just suck you know or something like that so that's just a general overview of the elements and everything else on Elementor also right here we have a global and you'll see global right here and for you it'll be completely empty so for example right here I have this one elements so whenever you want to assign a global elements which is pretty simple let's say for instance I have this pricing table right and I want to take this pricing table and save it and I want to apply it on different parts of the websites so let's do that so here I'll put Darrell Wilson and then I'll right-click on this element and I'll click on save as a global and then here I'll put Daryl's pricing table and then click on save essentially what this is you're basically creating a template but in a much faster version so here I'll scroll down to the bottom of the page and I'll just drag in this new element and there you go so now I have this element that I can use throughout the website so that's really cool it's very you know it's quick and if you want to go ahead and edit it you can click on edit and then edit it however this is a global widget so remember it's going to apply to all of the elements so that's actually a quick way on how you can edit your website so for example right here if I click on edit and put Daryl or put I don't know Jessica Wilson and then click on updates if I scroll to the top right here you'll now see that Jessica Wilson is being applied right here because it's global and it's affecting every single element so it's a pretty quick way on how to edit your website next let's talk about these bottom icons so right here it says preview changes here you can just click on it and I'll just give you an example of the page right here we have the responsive mode which we're going to talk about in the responsive section here we have history so again you can go back to any part of the process of you building your website and then you can you know like okay I made a mistake back here I'll go back here and then I can work from here so it's just basically allowing you to go back and then right here we have the Navigator now I didn't really talk about the Navigator that much quite honestly I like the Navigator but I just don't really think that you're gonna use it all the time however people out there all like their own little thing and they all like to do with their own style so with the Navigator is essentially it's just displaying your website in a small navigator way so for example right here if I want to go ahead and say you know what's I want to go to the top section really quick and then I want to click on this column right here and I want to edit it right here so the Navigator is essentially just allowing you to edit everything through a navigator point-of-view so if you like this style you know if you want to go ahead and say oh I gotta edit this section here on the bottom the pricing tables just click on the section but this is a quick way on how you can kind of just see everything through a navigator point of view click on it and then edit it like that so that's what the Navigator is also if you hold ctrl e the finder will display and this way you can navigate throughout your website and maybe you want to go to the home page you can click on home and then just click on home and we'll take you to the homepage without you having to exit the Builder go to the menu click on home so it's a very fast way that you can navigate throughout your website so next on the bottom left right here we have settings so here we have the title the status the featured image and then hide title and the page layouts so this right here is the title of the page status is saying ok the page is live right now do I want to make this page privates or pending review or draft if you select any of these 3 the page will no longer be available for viewers or people visiting your websites featured image I wouldn't use it it basically oh it actually depends so when you share something to Facebook you can actually use this as your featured image and if you share this specific page this will actually be shown now there's also SEO plugins that do this a lot I guess you want to say better so I probably wouldn't use the featured image but if you aren't using an SEO plug-in I would use this so maybe you want to add in an image so if someone shares it to Facebook they'll see that image instead I do have a tutorial on Yoast SEO so I'll leave that in the description below if you're interested hiding title this will hide the title of the page however most themes out there offer this feature but if your theme does not you can hide the title of the specific page this right here is pretty important the page layout so you're gonna see that there is the default elementary canvas elements are full width and then the theme actually offers its own page layouts so Elementor right here offers a default layouts so a default layout is just default so it's just basically whatever the theme whatever the theme settings are that's really what its gonna apply to so here we have the page title the menu and then the content in the middle and then here we have the theme builder I'm sorry the footer as well so right here under settings we have other options like elementary canvas elementary canvas is pretty interesting it'll actually disable all of the theme features on your website and only have Elementor being applied on your website so for example you've noticed that the header is gone it's going to the bottom the footer is gone because we are only using at this point the page builder so with the elementary cannabis it disables all of the themed features so you're only using the elements or page builder here we have elements are full with this right here is pretty standard here we have elements are full with now the elements are full with is probably a very standard way of building your website so it's going to display the header and the footer and it's also gonna make your content full width like this so this has a pretty standard way on how to build your website to be quite honest page both are full with nieve you know guys there's teams out there that offer all sorts of different styles so I really can't say I know what I'm doing but I I would probably just stick with the elements your full width so I would just you know I would say you know it's I don't want to go with that I'll just go with elementary or full width it's a lot cleaner and easier so those are basically all the general settings here at the bottom at the top right here so here we have global styles so global styles are essentially basically acting as the theme so remember earlier how nieve actually has global default and colors and fonts if you want to have Elementor apply global default and colors you can actually go ahead and go to their settings tab and right here under disable default colors we can actually disable elementor's default colors and use the theme if you want to use Elementor as a default color we can go ahead and uncheck these boxes on Save Changes so here again I'll click on default colors and now you'll notice right here that we can actually have element or kind of style our website which is really really cool so here we can kind of get some ideas and color palettes from the actual elemental or color palettes and then here you can kind of go ahead and have fun and go crazy with all this stuff right here so right here we also have default fonts so for example if you want all of your primary headlines to be something like Roboto condensed you can do that if you want your secondary headlines to be something like rock salt you can do that so see here how it's only changing the secondary headline so if you want to use this to basically style your entire websites you can do that in fact I recommend it because this will be a lot easier and faster so for example you know make all of your primary headlines Oh sans and make this one Ariel and then make this one Roboto or something like that so you can see here how you can quickly solve your entire website using the global styles so here we have editing handles and if I turn this on so right here you can see that we have these three elements right here and if I turn this on right here you'll see that now we can go ahead and even duplicate it so I believe what it does that it just allows you to see your website in a lot easier fashion so it highlights everything and it brings up every option when you hover over an element so that's pretty much for the overview of Elementor pro widgets and all of these settings so let's go on ahead and move on to the next section next is a really cool feature that you can apply throughout your entire website called motion effects and mouse clicks so right here we have this image and then you can see here how it's rotating depending on where my mouse is now you can apply this to specific images you can also apply this to specific backgrounds as well so let me show you how I did this so right here I'll go ahead and open up the Builder so you click on an image and then go to the Advanced section here we have mouse effects and mouse track and then we have 3d tilt as well we also have the entrance animation which you can apply on virtually every single elements so right here I'll turn this off and you'll notice that the image now it doesn't make any movement so right here I'll turn on the mouse affects the mouse affects our best ideal for images or something that is already on the page so for example right here under Mouse track we can have something like opposites or direct and this will actually follow the mouse like that or we can go ahead and choose opposite which will go away from the mouse and then here we can control the speed of it so if you want it to be faster and longer we can always do that as well which is really really cool so that's an example of Mouse track and you can apply this on virtually every single part of your website which is really really cool so you can see how you can have tons of fun and you can go crazy and have a lot of fun now that's Mouse effects so we also have scrolling effects but I think scrolling effects is best applied to something like titles and it's also best applied to the background images so for example right here all select this Howell right here and go to advance here we have motion effects and then here I have scrolling effects so here we have the vertical scroll we have horizontal transparency rotate blur and scale so for example we can just go ahead and mess around with these settings right here so here I have the direction is up and I have the speed set to something like five so what happens here is if I scroll down the page it's going to scroll up into the place as I scroll and then we have that effect like that now if I select down it's going to have the opposite effect so it's going to actually go down as the page Scrolls down which is really really cool now this is actually best applied to something like background images maybe so you can see here how it's being applied for the text but here I'll take this off and I think something like transparency is pretty good or blur for text so here we have blur now here we have the fade in so as I scroll down it's going to fade in so here we have the level maybe I want to reduce the level or increase the level and then also here we have the bottom viewports and then the top viewport so this is basically saying where does the top want it to start and then where does the bottom on it or where is the bottom going to fade it in so the best way to learn guys is just by trial and error so just mess around with the settings and get comfortable so here you can see how is being blurred in and there it is so here maybe I want to go ahead and just see here if I can do it like that makes more sense so 52 to 0% so here if I scroll down there it fades in perfectly so that's a really cool effect and you can apply this to virtually every part of your website now let's say okay so I know how to apply it to images and titles let's apply it to the background so here I'll click on these dots and here we have motion effects so I'll turn this off and then turn it on again just to make sure everything refreshes so here we have horizontal and vertical in fact you can turn on both so what I'll do here is I'll say look I want it to scroll horizontally to the right as I scroll down on the page I wanted to go let me close that I wanted to go up as I scroll down on the page so let's see how this works so right here it's scrolling up into the right and then it falls into place like that so next we have scale so what we can do here is scale it so we can scale it up so if I scroll down you'll see how it kind of scales into it and then it'll go back down like that so there's just so many different ways on how you can customize this and make it look how you want it to look so maybe even scale down so maybe right here we think oh my gosh this page is too big but if they scroll down it shrinks into play and you can see how we can use it in conjunction with other effects now personally I wouldn't go too crazy with this because this is something called JavaScript and the more JavaScript you have the more slow your website will be so you can add motion effects here and there but just be mindful and don't add too much because then your site might get a little slow so at this point you guys are professionals you guys are really really good and you can see the power that you have with elements were pro now I do want to show just a few more features like one or two more features before I let you go so keep watching you know just just bear with me here I just I want to make sure that you understand everything that you get with Elementor pro because it's an incredible page builder so right here we have Elementor and we have a roll manager so click on roll manager so if you have other people building your website you can actually choose them and you can actually apply specific roles so for example we have editor what can the editor do right here I'll open this you can say you have no access to the editor or access to edit content only same thing for contributor the author etc so how do you actually have people sign up and how do you actually have how do you you know assign them so right here is your users and this is all of the users so here you can actually add users so right here you can add a user and let's say you hire someone to actually help you out with your website so you can go ahead and put no tatse Elcom and then you can make them something like a you know we'll make them a editor all right and then here I'll add the user alright so here I have a new user and this person got an email and it's gonna go to their email and they can go ahead and log in to your websites so now we can actually see that they are an editor so now that's where this comes in again and we can go ahead and use the role manager and saying okay so I hired someone from Fiverr to build my website or to help me with my website a developer in fact you can go ahead and say I only want this guy to have you know he can edit the content that's it that's all he can do he can't do anything else so that's a really cool feature that you can have with the role editor now lastly your website might break sometimes and that's just how WordPress is guys so if your website ever breaks when you update something so for example if your website looks perfect right so it looks great but then you update Elementor and then your site breaks and you're like oh my god my slight broke and you know that's like the worst thing that gonna happen trust me happens to me all the time there's a feature called element or version rollback so let me go ahead and show you what that is so Elementor will update and your site may crash eventually now I can't guarantee you that it will or won't usually it does not but there are like maybe like the 5% people where your website will crash because maybe you're using a plug-in that's not compatible at Elementor or whatever the reason so here we'll go ahead and go to Elementor and click on tools so here you have some just general options where you can go ahead and run Elementor in safe mode and then here you have some other options that you might not need like maintenance mode where you can go ahead and run your website in maintenance mode and you can go to these settings so here we have some general options like regenerate CSS you can sync your library you can turn on safe mode on your websites and then also you have maintenance mode so you can go ahead and choose maintenance mode so that'll basically like just cut off people from visiting your websites but right here we have version control so if your website ever breaks you can go ahead and actually roll it back to a other version so let's say for instance you used Elementor version two point nine point three and then you update it to two point nine point seven and it crashed well you can always go back you can also become a beta tester now this again is not Rick on live websites but Elementor always has new features coming out all the time so as you're watching this video right now from probably six months to a year they're gonna have a lot more features than than they do when I made this video and I'll update it and make a new one of course but you can always opt in to be a beta tester if you want to do that but right here I'm just giving an example so if you're pro version you know crashes on 2.9 points too you can go ahead and roll it back to 2.9 etc so that's just a way on how you can protect your website because sometimes you're using these plugins right here sometimes you will come into plug-in conflict and that's just part of WordPress so for example maybe this guy right here doesn't update his plugin for a new version of WordPress and these plugins do then this plug-in right here might conflict with these other plugins so this is a very beginner problem that I see with most people building websites so don't panic you can always go ahead and change your version of Elementor to make sure your website does not crash so guys I'm really happy that you guys made it to the end of this video and I really hope this video helped you guys out I do spend a lot of time picking these videos to make sure that you know I cover everything in general and I want you to walk away knowing how to use all the features with elements or pro now there maybe is like one or two features that we didn't cover like the WooCommerce builder but that's totally for e-commerce websites and also a CF integration that's also a third-party plugin that we use to integrate with dynamic content but I will cover that in another video so make sure to LIKE this video and leave me a comment below and let me know what kind of website that you built and if this is Horrell helped you out and if you would like to see more tutorials like this my name is Sarah Wilson and I will see all of you party people in the next video guys take care

Channel: Darrel Wilson

Views: 87,498

Keywords: how to make a wordpress website, build a website, create a website, elementor pro tutorial, elementor, how to make a website with elementor, darrel wilson, neve theme, how to make website, wordpress website tutorial, elementor pro, wordpress, wordpress tutorial, elementor wordpress tutorial, make a website

Id: d9tcmqJEEu4

Length: 129min 55sec (7795 seconds)

Published: Mon Apr 27 2020