How To Make A Wordpress Website With Elementor - 2021

welcome welcome party people come on in and take a seat my name is daryl wilson and today i'll be showing you how to build a wordpress website step by step with elementor so guys i spent weeks making this video so complete beginners like yourself can walk away today with a really professional looking wordpress website plus you will learn how to use the elementor page builder and all of this features which is currently right now the most popular wordpress page builder for wordpress so today after watching this video you will be able to create your own websites and you will also even be able to start your own web agency tomorrow if you wanted to trust me this stuff is so easy so go get your favorite snacks go get your drink pull up a chair and let's get started today with this wordpress tutorial today i'll be showing you step by step on how to build and customize a modern and beautiful looking wordpress website and the great part about this video is that you don't need to know any sort of coding or html because we are using the number one most popular drag and drop page builder that makes it super easy to build your new wordpress website and as you can tell this website looks very professional yet simple so i'll be showing you how to build and customize every part of your website so you can walk away today with a beautiful website that your visitors will love now you can build any type of website you want in this wordpress tutorial you can build a business website a portfolio website a restaurant website you can make any type of website you want with this wordpress tutorial i'll be showing you how to make vibrant and beautiful designs with free templates that will stun your visitors and make you and your website look really professional and with 150 free templates to choose from you can definitely find a template and style to fit your business needs and just to make sure you make great looking websites i'll be giving you some professional design tips and quizzes to help you with your web design skills so today in this video i'll be showing you how to build your new website with wordpress and elementor wordpress powers more than half a billion websites and it is by far the most popular platform for making websites as of 2021 wordpress powers more than 40 percent of the entire internet elementor is the world's leading page builder for wordpress elementor first came out in 2016 as just another typical page builder for wordpress however the elementary page builder was a lot more intuitive and stable than was currently on the market at that time in 2018 elementor hit a staggering 1 million active installs and by 2021 elementor has been installed on more than 5 million websites worldwide and growing elementor now employs more than 150 staff and is consistently proving their page builder so you'll be using the most modern and up-to-date software to build your new wordpress websites so with all that said let's take a closer look at the wordpress website you'll be building today in this tutorial okay so this is the website that we'll be making today and you will actually get this entire template for free just by watching this video now you'll see we have the logo at the top left we have our pages and you can make in as many pages as you want so we have the home about services the contact and then we have this button where they can go and contact you or request quote or we can take them to another page and then here we just have another section that offers some additional services and then i kind of threw in this plant here just to kind of take away from all this white and just to give it some you know some friendly elements and just add some decor to the websites and then here we just have an image and you can put your image there and just some general upsells like why choose us where you can talk about your business and then also for those of you who have portfolios or something that you want to show your visitors we have this portfolio here and then again we added in this little image right here this friendly element just to kind of add something to the website so it's not all you know white in the background and then we have some partners so you can put your customers or people that we work with and then we can create some testimonials here and then below that we have our staff so we have meet our leadership or you can meet the staff and you can put images of your staff right there and then scrolling down we have just some more additional information like your phone number your location and then we finish it off with the footer here at the bottom so now we'll be using elementor which is a very fluid drag and drop builder so for example uh here i forgot to put help so but how can we help you and also we have these elements here on the left side and you can just drag and drop these elements onto your page and then all the changes are saved and live on your website so for example i'll drop this text editor right there and then i can change this text to anything that i want and let's say for example you want to add a button maybe you can take them to a contact page or somewhere else i can just drag and drop this button and then i can change the text of this button to something else and then i can just rearrange everything with this builder so you can see it's a very fluid builder it's very simple to use so i'll be showing you how to use this drag and drop builder in this tutorial so i'll be giving you all the template for this and also showing you how to build this by yourself using a drag and drop page builder and this is the about us page so we have this uh you know just some general information about your websites we have this little uh the section right here where we hover over it it can kind of bring this little gray color and then just some other information about your company and then some numbers and then again finish it off with our footer at the bottom and lastly we have this contact us page where you can go ahead and submit a contact form and users can go ahead and ask a question about your services or your business you can also go ahead and put a location of your current uh business on this uh google maps and then on the right side we just have some more information like your you know your address your email your phone number and then at the bottom it's the same thing we have our footer at the bottom so ultimately this is a very clean website and it's multi-purpose so you can use it for pretty much any style website just by swapping in the images and making it look a little different but overall i think you're gonna really like this website are you guys ready are you guys excited good because we're gonna build your new website in five simple steps step one we will get your domain and hosting so for example myamazingwebsite.com plus it's super cheap and you can host your website for as little as three dollars you'll also get an exclusive discount from the owner in this video and that's exclusive to this channel step two i'll show you how to make pages install a wordpress theme and start designing your wordpress website with elementor step 3 i'll show you how to use the theme customizer some wordpress plugins and just some additional settings for your wordpress website step 4 i'll be showing you how to make your website mobile responsive so it doesn't matter what kind of device your visitors are using such as an android or an iphone your website will look great and be responsive on all mobile devices step 5 i'll be teaching you how to use the elementor advanced features elementor offers some really cool features that can really speed up the workflow of your website so i'll be covering all of this in the advanced section of the video and make sure to stay to the end because i will talk about great resources to get tons of free elementor templates and elementor plugins for your wordpress websites now there is a link in the description of this video it'll take you to a page to purchase discounted web hosting and this is named hero.com now namehero.com performed as the most fastest and one of the most reliable web hosting companies out there now how do i know that how do you know i'm not just lying to you right well i actually tested name hero against 20 other web hosting companies for 90 days a name here performed as one of the fastest and most reliable web hosting companies on my list in fact name hero had zero downtime this whole week so you'll have a reliable and a fast wordpress websites now i contacted the owner of this company to give me a special discount so through my link exclusively you all will save 70 off your web hosting if you go to the website normally you'll only save 50 off your hosting packages and the owner gave me this discounts just for my viewers on youtube so when you get to this page you will click on get started now name hero offers four different type of web hosting plans they offer the starter cloud the plus cloud the turbo cloud and the business cloud for those of you who are just getting started out for the very first time i recommend the plus cloud i think that's suitable it gives you a lot of ssd storage it's a very affordable plan and your website will be very fast however for those of you who have been using wordpress for a while and you want to upgrade i highly recommend the turbo cloud now the reason why i recommend the turbo cloud is because this plan offers the nvme storage technology which is a new type of store technology for web hosting servers for example so this graph is from pcworld.com and you'll see that the nvme storage can transfer data a lot faster than typical ssd and sata hard drives also you'll see that the nvme storage can access information a lot faster than typical ssd and sata hard drive so for those of you who want a blazing fast website i think the actual turbo cloud is a pretty good option but i know everyone out there is on a different budget so just select the package that works for you and once you select the package we'll scroll down to the bottom and then you'll click on order now all right cool so this is where you're going to enter in your new website so for example mynewamazingwebsite.com or mydog is amazing.com or whatever you want to put i'll just put demo tutorial 123.com and click on search and look at that we get a free domain on top of that so once you select your domain you'll click on continue lastly we have the review and checkout and look at that you just saved 125 dollars you have a year of web hosting and id protection for under 70 so you have a very good value with namehero.com once you're on this page you will scroll down next we have the billing details so you've seen this screen before you'll put in your first name your last name your social security number your bank account i'm just kidding guys they don't want that information it's a joke you'll put in your billing address and any other information you see here for the support pin make sure you write this down so if there's an issue or you want to know something about your accounts they will want to know about your pin just to verify that it's you calling and they want to make sure it's not just some random person over the internet trying to get your info you'll create a password which you probably use the same password for all your other websites right i'm just joking i do that sometimes but i should really stop that we have the payment method so you can pay with credit card paypal coinbase or credit card stripe look at that people are using crypto in fact crypto i think bitcoin's almost at twenty thousand dollars right now yeesh it's crazy man this is going up and then you can go ahead and fill all this information out once you fill everything out on this page you will then click on the checkout button now i will purchase an account and i will meet you on the very next page and congratulations on registering your domain so this is your current client area here you can access your supports you can access billing you can purchase more domains or you can upgrade or purchase other web hosting packages if you want to do that and name your has very good supports so at any time you have a problem with your website under the supports you can open a ticket or you can contact them anytime if you have issues with the websites so next let's install wordpress onto your new domain under the my cloud you'll go ahead and click on my cloud i like this new interface named hero introduced they recently remade their whole websites for those of you who have been with name hero for a while you can tell they did a really good job at making their site look really nice so i will click on the plus cloud the next thing that we will do is we will access the cpanel so on the left side under actions you will see log into cpanel go ahead and click on login to cpanel all right cool so next let's install wordpress let's scroll down just keep scrolling just keep scrolling we're going to find a wordpress installer and we're going to install wordpress onto our domain so under software you'll see wordpress manager by softaculous and go ahead and click on that next it's going to say install a new copy so let's click on install alright so this is the software setup so let's just change some quick settings while we install wordpress onto our domain for the protocol make sure you have https that just makes sure that your website has a valid ssl and that just lets people know that your website is secure for the in directory make sure nothing is there that just means yourwebsite.com you know that's it we don't want it to be whatever that is so just leave it like that for the site name you can give your website a name and you can also give it a description so this can be web agency you guys can see i i do this quite often and i just put a cool website agency or something like that you can change all this later so don't worry about it for the admin username make sure you put something that you know because you will need this information to log into your website and change it so i'll put paddywhack and then for my admin password i'll put uh paddy wack 99 for the admin email make sure you have access to this specific email because let's say for example you forget your password you will need to have access to this email to retrieve your password and i'll scroll down you can also select your language but i just speak english so i'll leave this as english but you can select all of these languages like spanish turkish arabic and and all those languages and scroll down and then we will click on the install button at the bottom of the screen so now it's installing wordpress onto our domain alright wordpress has successfully been installed on the administrative url link you can click on this link right here and congratulations you have now successfully installed wordpress and your website is now live on the internet all right congratulations you now have a website online so you installed wordpress and your website is online so in this next section i'll be showing you all how to make pages how to install wordpress themes and just how to start designing your new wordpress website with the elementor page builder so let's go back to the video alright so this is the backend this is the dashboard where you can make changes and you can adjust your website however if you want to look at your website right now while it's live on the internet on the top left you can click on your website name and click on visit sites and this is your current wordpress website so it's using a default theme it's kind of bland kind of boring but not to worry we can make it look really really good let's go back to the back end so to go to your backend you'll go to dashboard now before we build the website we need to make some small changes to the general settings first we'll go to users and we'll go to profile this is where you can adjust your profile and also change your email and password for your wordpress websites you can also select a specific color scheme and i do like this new modern one so i think we're going to stick with this one but you are more than welcome to go with any sort of scheme that you want we'll scroll down now if you ever want to change the email for your websites you can do that right here and this is very important because if you forget your password it'll go to this email so make sure it's a email that you have access to then under new password we can set a new password so you can select a new password there if you ever want to change it and then once you're done with all those settings and all that good stuff you'll click on update profile at the bottom now one other thing i want to mention if you speak a specific language you can change that within the back end under settings you can click on general and right here for site language wordpress has various languages that you can switch it has different dialects and they did a really good job at uh translating all these languages so you can go ahead and pick a language that you're comfortable or if you speak english like me you can just leave it as default as english next what we're going to do is we're going to change the permalinks for the websites under the settings tab under permalinks go ahead and click on that now we're going to change this right here to post name now the reason why we're doing this is because when you visit a website usually it's you know yourwebsite.com about us right or dash services or dash contact us so we don't really need all this right here and actually this is much better for seo and it's very good for optimization so go ahead and select post name scroll to the bottom and then click on save changes at this point we are now ready to start designing the website so under the appearance tab go ahead and click on themes and let's click on add new at the top and next i'll click on popular now let me explain wordpress theme so essentially how wordpress themes work is every wordpress website has a specific theme and style every single one of these themes has very similar options to each other one might have something that looks different than the other but ultimately it's just a different way to frame and style your websites however with today's page builders a lot of these themes are becoming a little bit more obsolete because you can use the page builder to design everything now the theme that we're going to use for this specific tutorial is called astra under search themes i mean the theme's right here but if you don't see it just go ahead and type in astra now the good thing about selecting a wordpress theme is that you can always switch different themes let's say for example you're using the default theme or you're using something like hero click on popular let's say for example you're using hello elementor and you want to switch to astra you can do that and you will not lose your work so remember it's the page builder doing all the work which we are going to install next so under the astra you'll click on install all right it's installed now let's activate it all right awesome so we have now installed the astro theme the bloxy is also a very good theme they don't have a lot of starter templates but i'll talk more about themes and switching a little bit later in the video now since we switched the theme we can go ahead and take a look at our website so i'll go back over here to visit websites and now you'll see how the website has sort of changed it has a different scheme it has a different style so remember wordpress themes are essentially just different ways on how to frame your websites so now that we have our website up let's go ahead and make some pages so usually we have this home page here and we don't have any other pages we don't have a menu so let's go ahead and make pages and make a menu let's go back to our dashboard so over here under pages i'll click on all pages now you might have some pages that come with wordpress by default so you can go ahead and delete those if you wish and i think you should because you know those pages are pretty much useless but let's just go ahead and make a page so over here under pages i'll click on add new and then go ahead and give your homepage a name so this will just be home page or just home and then i'll click on publish and publish so i made the home page and now i want to make the about us page so let's go back to the little wordpress icon and then the same thing under pages add new here we go about and then publish and publish and then one more time we'll just do it for the contact us just to make sure you guys know how to you know add pages so here we go contact us and then we'll click on pages or publish and publish pages silly me silly me all right so we created the contact us page the next thing we're going to do is we need to create a menu so we need to assign these pages to our websites we'll go over here to appearance and we'll click on menus so now we need to make a menu for our website so this will be just basically like primary primary menu right the most important menu on your website and then i'll click on create menu next we have pages so now you can see the page that we created right here so i'll click on view all and i'll do the home the about and the contact us and there you might come across two about actually that's a good thing it did so you get two home pages because this is the default home page that wordpress creates by default and it's a custom link however we do not need this so for this custom link we can remove that now this custom link could be anything so this can be like another website this can be your shop this can be your facebook page you can make this anything that you want so for example you can put like facebook page and then you can put your link to your facebook page right here if you want to do that however i'm just going to remove this remember you can add custom links to your menu at any time by clicking on custom links and adding them to the menu and that's pretty much it some people use custom links for social profiles or groups or something like that now that we have our primary menu we can go ahead and rearrange it so i want the home at the top the middle and the about in the middle and then the contact us right there at the bottom and then once that's done i will click on save menu so we created our menu now let's go ahead and take a look at our website so let's go over here to visit sites and then we have our pages here at the top right so we have contact us about and then we have the home page the next thing that we need to do is we need to assign the home page as a home page so we need to tell the website what is the first page that our visitors want to go to when they visit our website or that we want them to go when they visit our websites we're going to use the theme customizer so you'll see this customize at the top go ahead and click on customize now the theme customizer essentially changes various parts of the website that the page builder normally does not however we will talk all about the theme customizer and come back to it a little bit later in the video but first the only thing that we need to do from this section is go to homepage settings and for our home page we will set a static page and for the home page we will select it as home and then click on publish and we can close this all right so now we have our pages and i think we're all ready to go now let's go ahead and install the page builder so we're going to install a free page builder it's really intuitive it's really simple to use and it's actually the most popular for wordpress right now so let's go back to our dashboard and under plugins you'll click on add new you guys are going to love plugins plugins are basically applications for your website and there is a plugin for pretty much everything there's a plugin for selling products there's a plugin for seo there's a plug-in for building websites there's a contact form plug-in there's a security plug-in i mean there is a plug-in for virtually everything and i think there is over what 52 000 plug-ins so no matter what you need for your website there is definitely a plugin for it i had people in the past who needed booking websites or membership websites and that is all available for plugins now we're going to install this plugin right here it's called elementor now under search plugins you can just type in elementor it's the most popular page builder for wordpress you can see it has more than five million active installs with 5627 positive reviews and they update it quite often they're always adding in new features it kind of is hard to stay up to date because all the features they add are really incredible but go ahead and click on install now and once it's done installing you will click on activate all right congrats so we have the page builder installed now let's go over here to pages and click on all pages so we're ready to now use the page builder to start designing the websites so we first want to design the home page right so under edits let's click on the edit under the home however before we start designing the website we need to change the structure of the actual frame of the website so for example this is our home page however you can see it's not full width and i want my website to be full width and i want to get rid of this sidebar this is where the theme options come into play this is why we're using this specific theme because it gives us this functionality you'll see this gear icon at the top right go and click on the settings now we have these astra settings right here and this is from the wordpress theme so for the sidebar i don't want a sidebar on the home page right and for the content layout i want it full width and stretched meaning i want the actual content to stretch across the whole page and i also want to disable the home title page because i don't want visitors to see home they don't need to know that we're going to use the pageable to design the websites and once that's done we can click on updates and there we go you can also add a transparent header to this as well that means you can have an invisible header so if you don't want people to see your actual header you can make it transparent which is actually pretty cool now at the top right here you'll see edit with elementor go ahead and click on edit with elementor alright so we can now start building the website now on the left side you're going to see elements and it's pretty simple and pretty self-explanatory you can just go ahead and drag and drop any of these elements within your website to start building it so for example i'll click on this little plus icon and let's have a two column row just to start right and i'll click on the icons to go back to the widgets section and then let's say i want to add in some text right i can just take this text editor i'll drag it in there and then we can change this text change this text to anything wait did i spell that right no no no there there we go what's wrong with me i graduated and i can't even spell now i'll go back to the elements and you can go ahead and keep doing this so for example an image you can drag in an image and then you can change this image anything that you want and then let's say also right here i can add in a button now let's say for example i want to link them to a specific part of the website or another website i can go ahead and put them take them to my websites so now when they click on this button it'll take them to darrellwilson.com now for every element they're virtually all the same so for every element you're going to have a content which is changing the actual content of it the style which is changing the color the font the background color and also the radius so that means i can make this a circular button if i want and then there's the advanced option the advanced option allows you to add other various things like adding and padding which is space and other of these other advanced options we will talk more about all the advanced options a little bit later at the end of the video but for right now let's just you know we're getting our feet wet we're just getting started out so i don't want to scare you guys so now that we have this we can go ahead and say all right well for this section over here i want to you know throw in the text editor i want to put in more text and then i can add in something like another image and then maybe we can add a button as well below that now a quick crash course so let's say for example you know this is too close to the top right i want to put some space this is where padding comes in i'll introduce you to padding right now just because we're going to use it throughout the video a little bit later however i'll click on this little icon right here and this will actually control this specific column so this little gray icon controls this column and this gray icon controls this column and then this at the top this controls the entire section so for example i'll click on this little uh you know click on this little column and under the advanced section i want to add padding to the top so i'll click on this and let's say i want space now you can see that we're adding in space at the top and also i can add in space to the bottom so for example it's very you know it's very scrunched i can say you know give me some space and get out of here you know get out of here we got some space there and then there we go so that's just a quick example of how you can actually use these elements and just drag them in and just overall use the the builder on your own time you can kind of use this to kind of get comfortable with it you can mess around it you know grab a beer and start throwing in icons and see what you can do let's see here what is this by default there we go ah cool it's a little hearts or a star and then you can you know change the alignment of this and then so on and so forth now there is a pro version to elementor that gives you more elements that you might need throughout your website however you don't need it just yet and i will have a little walkthrough on the pro version if you are interested in later in the video but for now i'll go ahead and delete all this right here let's say for example i want to put in a three column row right you can put in a three column row and then you can essentially just do the same thing you can drag in elements and then you can go ahead and even duplicate this and then you can drag it and you can also duplicate it now remember all these have a duplicate of function so you can duplicate this and duplicate that duplicate this and you can also drag and drop so for example i can take this and i can drag it to the top and this element here which i'll change to nothing because you know it's it's it's easier to stand out i can take this pencil and i can drag it within a column like that and then so on and so forth something like that so now you can see that you can visually start dragging and dropping elements throughout your website so now you know a little bit about editing you know how to drag and drop stuff and kind of move stuff around let's upload a block and then we'll practice with that and then we'll move on to the more advanced stuff so you'll see we have this little template folder go ahead and click on add templates now elementor comes with some default templates that will really help you out with your website however a lot of these are in the pro version again as well and if you do want access to the pro version i'll leave a link below to purchase the pro version but you don't need to just yet some people don't need the pro version and i understand that but here are some templates that you can use now the ones that say pro on it unfortunately that's the elementor pro builder and yeah but there are some free um there are some free templates that you can use like these ones at the top however i think i'm more interested in blocks so go ahead and click on blocks now with the blocks which you can do is let's say for example i need a landing page which is also called a hero we can go over here and click on hero and we can use these on our website now i think something like this is really nice and also this so sound of the future i will go ahead and insert this specific block onto the websites so over here i will click on inserts now the next thing that we'll have to do is we'll have to connect it with elementor now you can make your account for free it does not cost you anything whatsoever and you do get access to tons of blocks that you will need to kind of help build your website so right here go ahead and click on get started so i'll go ahead and connect my website with elementor and we're doing this because we want access to their library of templates i think some of you might need to sign up if it's your first time but if you do have an account you'll just need to click on connect and voila now you'll see that we have this really beautiful big landing page where we have this background and we also have this this audio of this song and we can edit all this as we want so we can change sound of the future to sound of the sound of the wind or something like that and then we can go ahead and also drag an element so just like before we can drag in the elements and we can change that and we can modify all of that now let's say for example well you know i don't need this section so i'll go ahead and delete this and i want to add in an image so i'll go ahead and drag in the image right there so you might have images that you want to add to your website so let's go ahead and upload an image so to upload an image you'll click on choose image now i have demo images for all of you in the description below of this video it's in a zip folder and you can use those images on your website and you can use them on any website that you want courtesy of astro now i will be giving you all a template in this video that gives you the full websites however i also have the images for you as well in the description of this video you'll see a link to a zip file you can go ahead and download that and you can upload those images as practice for your websites so over here under upload files i will click on select files now the folder that i have is called images for tutorial and then you can go ahead and double click and then you can go ahead and upload all these to your wordpress website so i'll go ahead and click on all these and upload them and click on open so these images are now all uploading to my wordpress website alright that took me around three minutes to upload those images now let's say for example you have an image and you just want to upload it to your website so i'll click on the image and on the bottom right i'll click on inserts now you'll see how we have that image display now you can do this for pretty much every section so for example let's say i want to change the background image of this whole section under these little six dots we'll go to style remember style controls the the like the design the topography the color now here we can go to image and change this image to something else so i'll grab this one and click on insert media now you'll see that we have this other image in the back and now this image kind of doesn't look good it kind of stands out so we can just delete this now so i'll right click and i'll click on deletes now this is our landing page and i got to be honest you know this is a pretty solid landing page it does need some work here and there but for a beginning website this looks pretty well now let's say for example we have an overlay here so the image is a little bit darker and the reason why it's darker is because over here under background overlay we have a black color kind of uh over it so we can do is we can reduce that overlay or even change the overlay color so for example you'll see i can change this to like a red or i can click on this little green and change it to this green i can also reduce the strength of this overlay by kind of dragging the transparency there like that or we can have no overlay i think actually an overlay looks a lot better so i think we'll leave it at that however you can add a gradient overlay you can add any kind of overlay that you want to any single image on your website now also for the background you can add in a gradient so if you don't want to use like an image you can use like a gradient color where you have basically like two specific colors at once something like that and then you can change the location of its you can change the uh the angle so you can change like the style people do like gradients however my personal advice guys is don't don't don't use gradient it's i know it's beautiful but it's really hard to carry a gradient throughout your website so just stick with an image on your homepage trust me you'll thank me later so now that we have this we can click on updates and that's it we're done with our landing page and this is probably one of the hardest things to do now for quick practice before we upload the templates go ahead and click on add a section and click on the three column row now let's say for example you want to add in an image and then text and a button which is standard and you'll probably do that a lot on your website go ahead and drag in the image we'll drag in the text editor and then we'll also put the button there like that now to do this all the time would be very tedious to keep doing that so we can go ahead and duplicate this so on the right side we can click on duplicates and then also duplicate again now you'll notice how that makes more columns but we can just delete these columns by right clicking on this and then delete it right click delete it so you can see you can save yourself a lot of time by using their shortcuts and it makes your life a lot easier and you won't have to spend a lot of time on one specific section so for the choose image you can just grab in something like that it's like this mock-up and then this one here you know we can go ahead and change it to like that and we'll use these black gradient which looks really really sharp i really like the way that looks and then here we can change the the color so now that you know how to change all the features here under the style i can say you know what maybe we can add in something like a black button you know we can even change the topography so in the topography section i like poppins guys poppins is a great font so poppins and i do like poppins bold so pop ins bold like that really really good and then you can change the size of it as well you can make it really big or really small and then you can mess around with these options on topography you can go crazy with this and have fun so let's say for example i made this button right but i don't want to do that all over again to all these buttons you know you want to have the same button designed throughout your website well no worry so on the pencil you can right click and you can do copy next we'll go to this button and then i'll right click and now we'll click on paste style so what i'm saying is i want to paste that specific style on this specific button because i don't want to have to do everything all over again i mean that that would suck you know so there pay style and voila and then again if we want to add in some padding to the top and the bottom under this section the uh the sect the whole section right there under the advanced section i'm gonna say you know guys uh give me some space here you know like i tell my girlfriend give me some space you know you're way too close to me she gets really annoying actually but i love her so yeah and then we can add it on the bottom as well like that so that looks something more standard you know it looks clean i like the way that looks now let's say all right well i made this section but it's a little bland i want to add in something like a background image so over here under the little the dots again under the style we have the background you can select classic gradient video or slideshow but i'll just do classic and select an image and then i'll just do something like uh like this right here this little flower all right we got this flower now when you upload an image you might notice that it doesn't look that good and you might have different styles now elementor has tons of different styling options for your images which is really cool so for the position we can just leave it as default however i do not want that to repeat and i want to contain this so that means i want this to be inside of it now you can also do cover which will cover the entire background with the image but i'll just do a contain and you know that's how you can do that now also we can do a custom so i can kind of here we go contain and then under position we will do custom so you can change the position of your actual background which is really really cool so we can you know mess around with that and that you know that looks good yeah so once you're done with all this you'll go ahead and click on updates so i think you understand the basics now of the builder and i think we're kind of ready to kind of import a template and you know go go the next step you know you guys are you guys are graduating congratulations you guys are no longer babies you guys are you guys are just good students so let's go back over here to dashboard and under appearance we'll click on astra options so next we have this installer plugin so go ahead and click on install importer plugin i'll click on install and now it's activating it the great part about astro guys is that you're going to have access to hundreds of templates that you can design and you can control so here i'll select elementor because that's the page roller that we're using now you're going to have access to all of these templates that you can use on your website so we have a template for pretty much everything so for example we have one for yoga and the great part about astra is that they have all the pages so they have the home you know the courses the about the contact and you get all the images for free in this and they import everything for you automatically which is really really cool so let's import a template i'll go back over here and i'll just say i want to import this one for now click on import complete sites now i want to remove the previous website now if you don't want to delete your website make sure that's not checked however i want to clean slate on my new websites and i'll go ahead and click on import now before you do that i just want to let you know that it will create a new menu for you and it also update the pages for you for this specific template but not to worry again remember you can create as many pages as you want so i will click on import and congratulations this is now your new website it's beautiful everything's done for you the guys over there at astra they just make some really good stuff you know now you can just go ahead and swap everything so now you can go ahead and click on edit with elementor and you can completely redesign this however you want just like we did before earlier in the video now let's say for example you want to add another page to this right let's say for example you are i don't know you're a lawyer and you want a terms and conditions page or something like that we can go over here to plus new and go to page so this will just be like terms page or something like that terms terms wait wait wait terms page there we go terms and then also for the sidebar i want no sidebar and then i want this stretched right and then we'll click on publish and publish now when you create a page you need to also assign it to the menu so don't forget to assign your new pages to the menu because if you go to your website again and you go ahead and just check it out i'll go over here to visit sites even if you make the page it's not going to be visible on your menu however if you don't want a page visible on your menu you don't have to have it remember you can link them to your you know your terms and conditions page now whenever you want to link them to your page you can click on view page and then this will be the actual terms page you can just copy this and then you can put it in the button there some people make pages that you don't want on the menu you know not everyone needs a privacy policy page on the menu right so you don't have to like be literal but i'm just giving you an example so let's go ahead and go to the dashboard and then over here under appearance we'll go to menus so now let's say you want to drag in the pages that the starter template created which are the elementor one so we can drag in the home the services and the contacts and then also we can go ahead and add those to the menu and then we can also add terms to the menu if you want to add it you know you don't have to however if you want to add a drop-down i'll take the terms and i'll drop it under this menu now i will delete the about us because we don't have anything on that page and i'll also delete the contact us it was our old school menu you know it had it had to go and this is now our primary menu and i'll click on save menu but i'm going to go ahead and just leave this as a separate page and then just click on save menu now let's go back to the front of the website so now you'll see we have all of our pages here and if we click on terms now we can click on terms and now we can design this and we can also edit this with elementor however remember i don't want the title there so if you do want to change that you'll click edit page and on the right side under the astro settings we can disable the title click on updates and now we can do the same thing rinse and repeat so now we can edit this with elementor and then we can start designing this page with the page builder now one thing to note once you install that specific plugin you'll get a new astro starter template and you can go ahead and upload those templates on pretty much any page so click on starter templates and then what we can do is we can just go ahead and drag in any of these templates that we want they also have blocks as well which is really cool so you can actually and you can use these blocks on your website so if you want to use a specific block you can go ahead and just click on this and then you can click on import block and there you go and then you can design this and style it and make it look really cool so you can see how easy and fast it is now to make a website with astro and elementor now you can also do the same thing with the actual templates so for example let's say you're using these templates but you don't like the about us page right you're like no i don't like the about us page it kind of sucks you can go through another one and say you know what's uh i like this one you know i like i like this about us page and then you can do the same thing by clicking on import template and ta-da now you have your new uh terms page of course but you'll probably put your terms and conditions here but i just wanted to show you that you can go ahead and use these templates on various pages but then you can change this to like the terms and conditions terms and conditions and then you can put your terms you know you can delete all these sections because obviously there's nothing happy about terms and conditions unless your website you know offers something like that but you can just start adding in text here and just say you know if you use our content we'll sue you we'll throw you in jail and you know all that stuff and then they can you know read your terms and conditions so i'll go ahead and click on update that leads us to the next section now i do want to show you something really quick to help you emphasize the design so over here under the dashboard what i'll do is i'm going to show you actually that i use one of their templates and just by adding some small changes you can make it look a lot different so under the starter templates i'll go over here and i'll scroll down there we go all the way to the down all the way to the down what does that mean and then here i have a digital agency so this is the actual template that i used and i remastered it now this template i do like it i like the wireframe however i just felt there was a little gloom you know i felt it was a little dark and just kind of you know it was almost there so what i did was i just took this theme or took this template and i redesigned it so i turned in from this to something like this and you can see how it's similar however i added in little things like this flower and i kind of gave it this minimalist like kind of clean approach we have these pencils right here and if you look at their background it's just this blue on blue on blue and i just felt it was a little depressing and that's why i decided to change it so you can use my template for free it comes with all the pages i've redesigned all the pages for all of you but uh the whole point of this guys is saying that you can use these templates and just by adding in different images changing the color and just by making some small tweaks you can make this website pretty much anything you can make this a cooking website you can make it a lawyer website so you don't necessarily need a specific theme for a specific niche you can use any style and then just change the images and then voila it's a new it's a new website for that specific niche so let me quickly show you all how to import this template so over here i'll go to my websites i'll leave this in the description and i'll click on add to carts now i'm also going to show you how to import templates so maybe you make a website right and you want to put it on another website i'll show you how to do that in this section now i'm going to click on proceed to checkouts all right and then we have our email and our name and then i'll click on place order now once you place the order you will get access to a zip file so this is the zip file that you'll need so go ahead and click on the download the zip file so once you do that i'll go ahead and drag this on my desktop so you guys can all see what i'm doing here so i'll just drag it here i'll double click on it and now we have these templates so if i double click you will see we have the home page the footer the contact about us and the json here as well now there's a real quick shortcut on how to do this on your website let's say for example we'll go to our pages right and this will you know this will work for any page let's go to the about us page or the home page here so what i'll do is i'll click on edit with elementor so next i'll click on the actual gray folder and then here we have this little upload icon so click on import templates and then we can just drag and drop it like that and once we do that you'll now see it's there so it's the home page right here at the bottom and i'll click on insert and yes all right and there we go so now we have the template uploaded now all you need to do here is you'll just need to change the color of these buttons and the reason why they're this color is because the theme customizer is basically controlling this with a global style we will talk about the theme customizer in the next section but overall you can see that all you need to do is maybe just change the text to whatever you want change the button color but the images and the entire wireframe is there for you all you have to do is just go ahead and make some small changes to the websites so that's how you can go ahead and upload that to your websites maybe over here we can go ahead and add in some padding so over here i'll say you know what i want to add in some padding here so i'll go ahead and get rid of this margin actually and then just go ahead and add in some padding like that just oh no no no no no we have to click this and then we'll click on padding at the top like that so we're just adding in space right there and then i will click on updates so that's how you can import the starter templates and how you can have a really quick websites um if you guys have any questions about that specific part of the video feel free let me know in the comments below again i've kind of remastered everything and it does also include all the other pages as well now let's say for example you messed up you're like daryl i messed up my website i don't know what i'm doing uh can i go back and fix stuff or maybe it's too much what do i do here now a lot of beginners have the same problem so let me show you a plug-in that you can use to fix everything on your website and start over now i'll go back over here to dashboard now again the reason why i'm introducing this because all the all the beginners they just make a lot of mistakes like i did and they want like a refresh right so over here click on add new and don't be ashamed guys don't be ashamed it happens to everybody under plugins i will type in resets and you can just reset your wordpress website back to like the stock so it's like you know i want to get rid of astro i want to get rid of all these plugins it's too much over here you see wp resets i'll click on install now and then i'll click on activate so here are the plugins that we have installed so there's elementor and there's this also plug-in it's head elementor header and footer which is what astra installed that's what allows us to have a special header and footer but over here we'll see open wp resets tools and then on the bottom i'll just type in reset right there so reset and we can reactivate astra theme and or we can reactivate the plug-ins but i'm just gonna you know i'm just gonna hit reset websites and i just wanna you know i wanna i want a fresh start guys i messed up you know everyone messes up and there you go so now if we go back and visit our websites so now you can see our pages are gone our menu is gone all of our content is gone and we can go ahead and start from scratch so part of people i hope this part was helpful um i think it was pretty easy right now i'm gonna import a starter template and then in this next section we will talk all about the theme customizer see i told you guys this stuff was easy right so now that you all know how to use the elementor page builder to design your website now let's talk about the theme customizer now the theme customizer controls various options throughout your website that the page builder normally does not so i'll be covering everything about the theme customizer in this section i'll also touch base on wordpress plugins and just some other additional settings for your wordpress website so let's go back to the video guys all right party people break time in this part of the video i'll be talking about the importance of color and show you how to implement color correctly on your websites now when people visit your website that is usually the brand and the color scheme you should use throughout your website for example let's go look at my website my website i have this black red and white color scheme and as you notice i kind of carry that throughout the website so we have all these colors being consistent the same thing with name hero so when you visit name hero right away you notice the colors are going to be white blue and orange and they're going to carry that color scheme throughout the website so we're not going to expect any red we're not going to expect any burgundy we know that this is the brand and the style of this specific company so when you are creating your home page and your website use a color scheme of around maybe four colors so you can see name hero is using blue white orange and they probably have one more maybe like a gray or something like that i or i guess white is you know white's a color right so but yeah mine too so i have a you know white red black and i also use gradients as a wild card so i have gradient here and then also i have gradient here so you can use a fourth color and that can be your quote wild card which is what i like to call it so let's take a look at this website so we have this green overlay with this blue button and as we scroll down now we have this red section so right away you're like wait wait wait wait what is this red why do i need it this is totally out of line right here so your visitors will just be very confused on where they're going now it's like okay red now we're going back to blue so when you're building your website you want to make sure that you are using specific color palettes throughout your websites also i found this really cool article by this website called bluemagneticinteractive.com and it shows you the importance of color so for example if you're using green you know that shows stability money positivity if using like a black gray that's also used for luxury brands you've noticed rolls-royce they use like a black black and a gray also apple they have that gray kind of like iso high-end look and then also red is important that's actually a very good sales gimmick is red is urgency and you'll notice that many buttons on many websites are usually red because it's saying hey you got to click this button you have to click on it and i know it doesn't tell you to do that but your your brain subliminally sees these colors and the wheels start turning saying oh okay red click on it and then we have blue which is trust so you'll notice that a lot of youtubers they like to use blue because they want you to trust them so a lot of banks use blue as well so you'll see that um chase uses blue capital one uses blue and other various banks tend to use blue because it just shows trust you know it shows integrity that's why you see companies like facebook use it because they want you to say oh yeah you trust us you know blue and i know subliminally you don't you're not aware of that but that's how colors are interpreted by our brains so that's just a quick rundown of colors when you are using colors be very cautious if you want to add like a black to your background just know that you're adding a dark scheme maybe like a luxury high-end style where you're trying to attract uh big dollar clients and if you're using something like a pink background then you're attracting someone like of a a girl maybe kid something like that background or audience or whatever you want to go for so just be mindful you know and the main goal is whatever colors you introduce on your homepage that is your brand and you should carry that throughout your website so that is my web design tip number one all right party people in this section we'll be talking all about theme customizers and we'll also talk about other various wordpress themes now every wordpress theme has a theme customizer and remember the theme customizers control various parts of the website like the blog it'll control your archive pages it'll control your header and your footer as well now astra recently introduced their new header and footer builder and you click on primary header you have this layout right here with only three little styles so what i want to do is i want to turn on the header builder so let's go back to our dashboard here and under the appearance we have astra options and i'll click on i'll just close this yeah that's annoying so here we have the astra header and footer builder and i want to click on use the new header and footer builder all right so let's go back and click on visit sites and then i'll click on customize all right so now we have various options so for example global we can change the global so here we have buttons and you can change the buttons globally as well if you want to do that you can also do that with the um you know the colors and also the topography of all of these um you know elements on your website however i want the page builder to do that so i don't want to mess with all of those but let's click on header builder and now we can go ahead and start building our header so you might notice at the top right here we have this header and what we can do is we can add elements to this header so for example click on this plus and i will grab in like an account and i'll put in the account at the top i'll also click on plus and i will add in social icons so i want the social icons to be here at the top here we go here we go oh what what there we gotta just drag it in there like that there we go switch it there we go now if you ever want to customize your um your elements what you can do is double click and then you have the elements so for the design tab what we can do is i want to say you know what for the color type we can have it a custom color or i can say official so now you'll see that we have these colors at the top and then you can go ahead and change the icon size you can see they're bigger and all these options here and then you can go ahead and add in more social icons like behance or other you know other social networks and then you can click on plus again and then you can go ahead and add in more content here like html is essentially just text so let's say for example you want to like give them a message of something like you know welcome to the website one space there and then you can go ahead and click on the design and then you can change the color and the topography and all that cool stuff so that's just an example of the header and footer builder it's pretty self-explanatory you can just go ahead and drag and drop elements and you can also do this with the footer if i go back it goes to footer builder and the footer builder is the footer of the website and you can go ahead and design the footer of your website as well just like you did the header so i will click on publish now one quick note is astro is actually using an additional plugin for elementor to use the actual uh footer now if you want to disable that what we can do is click on the x icon really quick and then go to our dashboard and under plugins under install plugins we can deactivate this plugin right here so astron solves this plugin for us when we import the templates and that's what creates that really nice header and footer by default however you can have the theme build your header and footer for you by clicking on deactivates and we can scroll down to the bottom and now you'll see that our footer is gone and now we can build it with the theme customizer if you wanted to go that route so for example the footer builder now i can click on plus and i can add in like a widgets a widget is essentially like an about us you know or something some sort of element so let's say out of widgets you can put in just some um you know you can put in some text for example text and this text can be like the home page and then this can you know this can be about the home page or how we got started and then you'll see it's all right there and then of course you can add in more widgets and you can add in social icons and then you can build your footer like that so let's go back over here now there's other options but throughout the theme customizer and again these all control different parts of the website however with today's themes all you should really worry about is the actual header and the footer so i will go ahead and click on publish now also one thing to note about the astra theme is we have this transparent header right here however i don't want it transparent now for asphalt specifically we can turn this on and off so for the edit page i'll click on edit page and if you want to take off the transparent header we can click on disabled and then click on updates now if i view the page you will see that we now have this background now you can design this background using the header builder so i'll click on customize really quick now you'll see these three icons on the left side of each so this can control the color and other various parts so for example it can control the height so you want it skinnier and then for the design we can have it as a different background so i can have it as like a red or gradient or something like that or i can even put an image there if i want to do that sometimes if you're going to use a gradient guys you might need to actually click on publish and then close it and then it'll appear so there are some you know small things about the theme customizer that uh that do that but i'm not sure why but sometimes if you don't see the changes being made you'll need to click on publish and then close it and it should work so for the top bar we can change the design as well by clicking on color and image and then maybe you want like a black background like that and then you can kind of keep designing this and i think you guys get the point here so that's how you can kind of design each specific row of the actual header so now that you're familiar with the actual header let's talk about other themes so let's go to dashboard and this is a very common question that i get with a lot of beginners is can i use other wordpress themes even though i demand my website and the answer is yes you can go ahead and switch throughout themes if you want to do that i think one of the best new themes is actually bloxy bloxy is an incredible new theme that i highly recommend now there's probably over 3 000 themes and i've actually made a video on the top 10 best free wordpress themes for wordpress and these top 10 themes are great and there's a lot of features that they offer you can see how this one theme right here bloxy it offers a light scheme in a dark scheme which is really cool now remember every theme offers some different variations from each other some might have different styling options some might make your blog page look different some might have different elements for the header and the footer builder so it'll kind of be up to you to kind of go through each one and check them out but what i'll do here is i'll click on activate for the actual bloxy theme now every theme that you activate will usually have a starter plugin so they call this the bloxy companion so i'll go ahead and click on install block c companion next it's asking me to put in some information but i'm just going to skip that for now i don't want to you know i don't want to sign up and stuff like that now the bloxy theme by default has probably the most features of most wordpress themes and here are some of their starter templates however they only have around maybe three templates for elementor and it is a little limited however the features are incredible and you can go ahead and import one of their starter templates as well if you want to do that and then also here they have other extensions and useful plugins now let's go ahead and take a look at the theme customizer here and see what else has happened to our website so i'll click on visit sites right cool so now you see our website and oh my gosh it looks distorted it looks terrible it looks kind of weird now when you're switching between themes all you need to do is just set the page with and everything will go back to normal because the page builder is doing all of the work so let's click on customize let's check out a different theme customizer here so this is the bloxy theme customizer and it does have other various styling options and different things for example we can change this to a light scheme and a dark scheme which i thought was really cool also under the general they have like a scroll to top so you can add a scroll to top icon on the bottom right side and then you can design it so you can kind of you know put a design to it and then you can say all right i want it to be like this and a circle and sometimes it won't appear so you'll just oh there it goes there it goes if something doesn't appear just click on publish and close it and then you know it'll go through but you can add different little elements on your website also this is really cool they have a website frame so you can actually put a frame on your website and this is perfect for like photography websites so you can add a really cool frame to it like that and there are other various styling options that this theme offers that astro doesn't have so now you can kind of see here how one theme might differ than the other and personally there's no best theme out there i mean there's themes that are really good and very convenient but to say that one theme is the best overall it's kind of hard to make that claim every theme has different styling options so you'll have to just go through each of these themes and check them out but i do recommend a lot of these themes on this video so go ahead and check out this video i'll put this video in the description below of this specific uh tutorial so let's say for example all right darrell we have this little gap right here how do we fix that so let's click on publish really quick and then i'll go ahead and close this now this is being done by the page builder so first let's click on edit with elementor all right now we notice we have to take off this title and we also need to reduce this space so on this gear icon i will hide the title and then i will make this full width and update so the website looks very similar there are some small changes and remember these button colors was done by the theme customizer so that's why i don't recommend using the theme customizer to design the buttons or text because if you switch themes it might distort but overall it's the same exact wordpress theme but now we have this really cool scroll to top and we also have this green little um you know outline so i do think the best free themes are probably neve definitely astra bloxy suki and some other various ones but that's how you can kind of switch wordpress themes without losing your work so before we go on to the next section i just want to let you all know if you guys do decide to actually use the pro plan for the astro agency which is all these templates this is their pro version and these are only available through the upgrade i do have a 10 discount for these templates and there are quite a bit so if you do want access to these templates i will leave a link to purchase them along with a 10 discount i do also have a 10 discount code for the bloxy theme as well i've been using this team more and more and i got to be very honest uh the features that it offers are very good in fact my next tutorial with the amazon affiliate marketing tutorial i will be using the bloxy theme because i feel that it's it's very intuitive so i do also have a 10 code for the pro version for bloxy and i will leave that in the description below of this video if you are interested so that's pretty much it for the themes of the theme customizer go ahead knock yourself out go crazy switch themes and then find out which one works for you let's go ahead and move on to the next section now in this next section i'll be talking about mobile responsiveness now this is pretty important and remember there are more mobile users today than desktop users so you got to take that into consideration when you're building your websites now i'll be showing you how to optimize your website for all mobile devices like androids or iphones and also tablets as well so no matter what device your visitors are using your website will look good for all mobile devices all right let's go back to the video guys all right party people in this section we'll be talking all about mobile optimization now i can't really stress how important mobile optimization is because as of 2020 there are more mobile users than there are desktop users so you really want to make sure that your website is fully optimized for all mobile devices and with elementor you can optimize your website for all mobile devices now there's a few strategies and i'll just cover the basics first now go ahead and turn on your builder of elementor and then on the bottom right here you'll see responsive mode so you can click on responsive mode and then you'll notice the preview for desktop tablet and also a mobile so first we'll click on tablet now people that are visiting your website on a tablet device this is how they are going to view your current wordpress website so let's say for example you're editing your website and on the desktop version it looks really nice however if we go to responsive and tablets you'll now see that the website looks very different and it needs a lot of work so let me show you all how to edit any elements for any device let's say for example i want to edit the specific elements what i'll do is i will click on the elements and then i will go to style and then i want to change the topography so under topography i'll click on the pencil and now you'll see this little icon so you'll see this little icon next to several elements and what i'll do is i'll click on this and make sure tablet is selected and then i'll just change the size like that now let's say for example okay so this button is on the right side and i need to put it on the left side for tablet users again what i'll do is i'll click on this and then i will click on the left side like that to make sure that it's aligned perfectly for tablet users now let's keep scrolling through the website you'll also notice that these elements they might be just too close to the edge and maybe you don't want that so what you can also do is click on the columns and you can also adjust the columns for specific devices as well for the advanced section you can click on the the padding right here and we can reduce the space or increase the space now for this element we're going to use margin and i didn't cover margin yet margin essentially tells the element where it wants it to start so it's not necessarily space it's saying i want you to start maybe you know 10 pixels from the left so remember margin is where the actual element starts from so it's saying i want you to start 10 pixels from the left and that's margin padding is space that's saying i want space from that element so now you'll see how it doesn't have that uh you know that closed gap right next to the edge and we can do the same thing on this side right here now we also have this section and as you notice that we have this image and personally we don't need to show this image at all we just don't need it and i think people coming from a phone or tablet they're gonna have no idea what this is so let's go ahead and just take it out right let's just get rid of it you guys are fired so uh under this little column icon what i'll do is under the advanced section under responsive i can hide this on tablet and mobile so that's it it's gone and we can keep scrolling on our websites and anything that we don't want we can go ahead and take it out but i think overall i think it's decent we can probably change this background pencil but again we can do that with the options here so you kind of need to go through your website and just take a quick look to see if there's something that you want to change now let's say for example you made the changes and you're like well how do i know if it's optimized you know how do i know if what i did is good we can actually run it through a test from google and google will determine if it is mobile friendly so let's do that i'll take this page and i'll copy it now i'll also go to the mobile friendly test by google and i will put this in here i will also go ahead and put this in the description below you can use this to test your website if it is mobile friendly so let's test the url and let's see what google determines about our website and as you can see the page is mobile friendly and this is great because google will actually rank your website if it is more mobile friendly so you want to make sure your website is mobile friendly now there is one thing i probably could have done i have this divider here and what i can do is i can hide this for specific devices so i probably should hide that for maybe the tablet users and also the mobile users but again you guys can go ahead and you know we'll have fun and go mess around with that later but i'm just demonstrating that's how you would do it so now that we talked about mobile optimization let's move on to the next section and talk about some of the advanced features that elementor has to offer so congratulations you made it to the last section of this wordpress tutorial now elementor actually has a lot of advanced features i'm sure you've noticed some features throughout the website that you're not really sure what they do so i'll be covering all of the advanced features for the elementor page builder these features can really help speed up the workflow of your website and make making websites a lot more easier so let's go ahead and cover them let's go back to the video guys now elementor has a pro version and the pro version does give you a lot more control over your website i personally have the pro version so this is my current account and you guys can see i have the expert plan if you guys do want to purchase the pro version i'll leave a link below to purchase the pro version if you guys do decide to purchase it i do get a small commission and of course it helps me to make these tutorials for you all for free now once you actually get the pro version you can download the plugin so you can go ahead and click on it and you can download it and you can upload it to your website once you upload the plugin you guys will get a bunch of different really cool options that includes more widgets the theme builder and also motion effects let me just go ahead and demonstrate some of the things that you get with the pro version so first i'll go ahead and click on edit with elementor all right so the first thing you'll notice is that you now have access to all of these other um you know yeah boxes to all these other pro widgets so you have like animated headlines i'll delete that we also have a flip box a call to action i think there's these widgets will just make things a lot easier so i mean it's they have a lot of really cool stuff as well so then you have access to all of these which is pretty helpful you know and a lot of people said hey you know i really like the reviews i can add that to my website you can put the reviews tab right there and then you can go ahead and edit it you can change all that stuff right here you guys get it i think by now you guys are you guys are already pro so but yeah so you do get a list of all these pro elements and they do help you build your website now also what you get access to is the global so let's say for example you like this button right here you know it's like alright you know what i want to save this as a global and this will be like the main button of your website usually you kind of want to you know carry the same button throughout the website and make it look good and you know make it look hip so then we can go ahead and say you know what i want to take that button and i want to put it here as well and then you can actually edit the specific button and it'll go ahead and edit all the buttons on your website or you can go ahead and unlink it and only design this specific button so it is pretty helpful especially if you have a lot of the same widgets it can really help speed up the workflow of your website and you know i actually use it it's actually really really helpful also a really cool feature that i bet you're going to love here is the animations let me just let me just go ahead and click on this you guys will get it you guys will get this so i'll click on this little uh column now under the advanced section all the elements that you have now have the option to have motion effects and beginners love this stuff just be a little careful i know it looks really fun but it's a really quick way to make your site look terrible but now we have the scrolling effects and mouse effects so i'll turn on the scrolling effects let's say you want this specific section to have like a vertical scroll so that means as i scroll you'll see how the image kind of scrolls up into place and when i scroll down it keeps going now you can control the viewport of this as well you can control the speed and you can also decide if it's up or down so for example as i scroll down you'll see how the image kind of scrolls with me and it goes out of place which just looks really really cool and you can use this for pretty much every option so you can have horizontal as well and we have transparency let's take a look at that one huh maybe we can change that like an other way so but the viewport you can kind of control that so for example it looks like it's a blank spot it's kind of boop pops in right there maybe we can even put it more towards the center but yeah you guys get the idea right you guys get the point also there's blur so we can go ahead and blur that and uh rotates which be very careful guys this this is like really scary you can only use this for like really small images like this one here but uh when i see this on like beginner's websites i'm like yeah man that looks terrible but i never say anything i'm just like yeah it looks great man you know and i just kind of like you know move the other way so also we have uh mouse effects so let's say for example you want something to move when actually someone hovers over it or you want to tilt when someone hovers over it so i'll just click on mouse uh mouse track and i'll put this to something like uh i don't know 1.8 now you'll see when someone comes down here and they scroll their mouse over they can kind of play with it you know i'm sure you guys have seen that on websites and you know it's fun it's entertaining keep like oh man that's so cool you know it's nice and then again we can do that for 3d tilt as well we can tilt it as we kind of scroll now guys i got to be honest elementor has tons of resources and guides on how to make some really amazing stuff with this um i don't want to go too crazy with it i'm just introducing you to it this is what you get in the pro version all right and then let's click on this guy and let's see what we can do here let's an advanced section motion effects mouse effects 3d tilts yeah so maybe you can have this for all of your staff and you can kind of mess around with them and you know it's just fun you know it's just it's something neat and exciting so but yeah that is the example of motion effects and all that other good stuff so you also get the option for attributes and also for custom css so if you are a developer and you want to do something like center align or you want to add some code in there to make something stay or you know margin auto or whatever you want you can go ahead and add it right here and uh yeah so those are just a few of the options now you do get one other option that's really cool and that's called the elementor theme builder the elementor theme builder is probably the number one reason why people purchase the pro version the theme builder allows you to have a different header and footer on various pages and you can set conditions for specific devices for specific pages there is a lot you can do with the theme builder so what i'll do is i'll give you a quick demonstration of the elementor theme builder by changing the header of this home page so let's change the header so right here i'll click on header and what's also really cool is that elementor has all these different headers that you can use on your website so let's just grab one really quick here let's let's do something simple you know i'm not not too crazy here all right we'll throw in this one right here this one looks this one looks pretty good all right cool so now we have our header so you see we have our menu and we have our icons now what you can do is you can actually build a menu with the page builder instead of the wordpress default so we can add in like a button here maybe over here we can add in something else and essentially what you can do is you can build the actual website using the page bowler or sorry the menu with the page builder which just makes things a lot more customizable i mean you can keep dragging all these elements we can change the color and everything else now this right here is a placeholder so you see how it says site logo that means whatever you set as your site logo that's what's going to display right here all right so let's click on publish now where do i want to display this header now we can have conditions so i can display this header on the home page on the about us page i can put it on the home and the about us page and not the other pages so let's click on add condition so by default we can put it on the entire website which i think is standard for a lot of you know websites however we can also do singular by saying no no no no i want to put this only on the home page and i also want to put it let me go ahead and add another condition i also want to put this on the about us page so same thing we'll do pages and then we'll do about all right like that and then we'll click on save and close and that's it now let's go ahead and take a look at the website all right and there you go so now we have this new header now of course it's a little ugly but i'm just kind of demonstrating that you can use the actual builder here to build out your menu and then it'll automatically pull the logo of your website so it displays it there and let's just test it now so i only have this header on the home and the about us if i click on the services page it's going to revert back to the old menu the same thing with the contact page right now if i click on the about us it should be the new style header so you can see how you can set specific conditions and really have a lot of flexibility and control and it actually helps because there's some there's some pages on the wordpress themes that just don't look well and you might want to edit it and that's where elementor comes in now i personally own elementor expert on my subscription you can see that i i do have it and i do use it so i'm not just someone who just oh buy it and then they don't have it of course like i've seen tons of blogs where they mention like a thousand things and they don't even use it but i do have this product i do trust in it uh if you guys do want to support this channel you guys can use my link in the description i have the expert plan and i mean that's pretty you know i i managed you know i have like 20 websites so that works for me but if you only have like one website maybe two i would probably get the plus plan but um you can check out the reviews people really do love and trust this product all right party people that's about it for this section i really hope to help you out hope it wasn't confusing i did my best to explain it i really should change this header it's super ugly so let's go ahead and move on to the next section all right party people welcome to the last design tip and also the most important now guys as you're building your website you're going to put images on it and then you're going to say hey my website's slow why did xero recommend garbage hosting i'm going to vote down this video and guys the number one reason why your website is slow is because of the images now when you're building your website you need to be very cautious about the image size that you put on it now i've made a complete guide for you guys it's completely free it's on my website and this is how you speed up your wordpress website now the first rule is keep your entire page under three megabytes so let's say for example we have the website right you can go ahead and take this and then you can go ahead and go to tools.pingdom and you can paste it in there and this will tell you how large your website is this will tell you all about your website so let me go ahead and start the test now also when you upload your images you want to make sure that they're small so generally let's go back and take a look at my guide right here you want to keep your images somewhere around 150 or 100 kilobytes no more than 200 kilobytes so let's just say for example you load an image on your website and it's one megabyte your website's going to be slow because you want to keep your whole page under three megabytes and i find that beginners make this mistake quite often if you look at if you look at my website here you'll see that i have a 1.9 megabytes and my website's loading at around one second so that's really good you know one second is really really good and let's go back over here so you can see this website has a two megabytes and it's loading at around 2.24 the reason why it's a little bit slower than mine is because i'm not caching it so you might want to cache your websites and that's also included in my um in my guide so remember the images keep it around 100 kilobytes to 50 kilobytes to you know 200 no more than 200 and your total page size cannot be three now under your image you can click on right click and go to get info and it'll tell you the size of the image so this image right here is massive 1.2 megabytes now let's say you find an image that you really like you're like darryl i want this image it's it's huge but i don't know photoshop you know i don't know how to optimize it well let me show you how to do that i know you're welcome you're welcome so let's say we have this image 1.2 it's too big we have to reduce the size what i'll do is i'll go to tinyjpg.com which is another really good website that i recommend on my website what i'll do is i will drag in that element i'm sorry elements the dragging the image here we go i'll go ahead and drag this so by default that image was 1.2 megabytes right it's a pretty massive image you know it's pretty large we need it you know really we need to really reduce that size so let's see what they can do for us and look at that it is now 200 kilobytes i mean that is a massive drop so it is almost six times less than what it was so you can see using this website it'll really help you out it's completely free does not cost you anything they don't even have a limit you know i don't even know how these guys make money you know i just maybe there's ads on it i don't even know i've never paid for them maybe there's a donate button i don't know we should oh there is a donate button well you guys can donate i'll i'll donate too yeah if i'll match your donations just tell me in the comments how much you donate and i'll match it but uh yeah guys so uh make sure your website is fast make sure that you follow these rules uh remember the images that's the number one reason uh because uh i think slow websites is probably the common mistake with beginners so that was it for this section let's go ahead and move on to the next section welcome to the bonus section of this video now in this part of the video i'll be giving you a lot of good resources on where to get free templates and also some really cool free plugins for your wordpress websites alright so let's go check them out all right party people this is our little last section i'll make it very quick and i'm going to miss you guys this is our last section together and i'll just go ahead and talk about the elements of resources so on my website under elementor there are a lot of resources you know there are plugins that you can use there's elements or themes you can use and templates so i compile the list of really good resources like these plugins these plugins they give you blocks they give you templates and they also give you more elements to use and i'm not trying to hate on elementor but these guys do offer a hell of a lot more than elementor's widgets but elementor has the theme builder and the motion effects so i think it's kind of worth it here um now i also recommend themes so we have bloxy this is a newer theme that i kind of started looking at and i gotta be honest they contacted me and told me about the theme and it was incredible also astra amazing theme you can't forget astra neve neve is also a very solid wordpress theme essentials that's the theme i'm using but uh personally if you're a beginner i wouldn't use it it can be very confusing at times but we love them and i i use them so you can go ahead and check out this list of you know some wordpress themes that i recommend also there are tons and tons and tons of websites that have like thousands of templates for elementor so a lighting factory is a good one i do like them i'm not even affiliate for them so if you guys click on my link i don't even make them i don't even make money so they just i just like their designs but yeah there's other ones you know uh theme packs they're all right they're not bad but it's all about what you like so go ahead and check out this page and again guys i hope i hope everything turned out good in this video i think that's pretty much it if there's something that i missed uh feel free to let me know in the comments below i will continue to update all this i'm actually going to edit some things and change some themes because i do like guten x but i think there's a lot better themes than goognex now like sookie or something like that so yeah that's it for this section and uh that's it for this tutorial guys so congratulations you now have a fully completed wordpress website now if there's any questions that you guys have for me like wordpress themes or plugins or websites selling elements or templates let me know in the comments below i do my best to get to every comments but i do get around 50 to 100 to 200 comments a day so it can be a little hard responding to everybody is anything that i missed or something i didn't cover also let me know in the description below and i will see if i can update the video or make a separate video for that and make sure to like this video guys i do spend weeks making this video to make sure it's perfect for all beginners so uh yeah i do spend a lot of time making these so but again i hope this video helps you guys out congrats on your new websites and i will see all of you party people in the next video take care

Channel: Darrel Wilson

Views: 235,345

Rating: 4.8879952 out of 5

Keywords: make a website, build a website, build a wordpress website, create a wordpress website, wordpress, website, wordpress website, elementor, how to make a website, wordpress tutorial, wordpress website for beginners, wordpress tutorial for beginners, how to make a wordpress website, word press, elementor tutorial, darrel wilson, elementor tutorial for beginners, wordpress elementor tutorial, how to make a wordpress website 2021, How To Make A Wordpress Website With Elementor 2021

Id: CXopgNU2sNY

Length: 85min 57sec (5157 seconds)

Published: Wed Feb 03 2021