How to Make a WordPress Website with Elementor | (Best Elementor Tutorial)

what's up guys my name is dale mcmanus from creator pro website and in this video i'm going to be showing you how to make a wordpress website with elementor elementor is a easy to use drag and drop page builder for wordpress that allows you to create almost any website that you can possibly think of and the best part it's completely free and honestly i prefer it over a lot of paid page builders because it's super easy to use and it has over 2 million active installs so if that's not proof enough that it's awesome i don't know what is elementor gives you a ton of customization so let's go ahead and look at the website that i'm going to show you how to make so this website is a really cool one-page design so everything just kind of animates in as you scroll down and we've got an about section here where i'll show you how to change the image to one of your own i'll show you how to change all of the text as well as these little skill set bars we've got a gallery so i'll show you how to put all your images in here and visitors can just scroll through them as they please and as we scroll down we've got our social links that i'll show you how to hook up that goes to your social accounts and i'll show you how to change the button colors i'll show you how to change the text and fonts and everything we've also got a client section we've got other brands that we've worked with and this is also a slider that you can kind of poke through and then we've got a contact section at the bottom so we've got all the information here on the left and then an actual working contact form over here where people can fill this out and send you an email and i'll show you how to hook it up so that it goes to your professor sorry your personal email and then we've got a footer at the bottom that has more social icons and then can take you back to the top and then at the top we've got our menu up here so as you click on these buttons they go to different sections on your website which is pretty cool these are called jump buttons and then obviously i'll show you how to change the backgrounds i will show you how to create kind of this gradient style fade background that kind of fades into these stars i will show you how to do everything on this website including the logo up here so i'll show you how to create a free logo with an online software that you do not need to download it's super easy you can do it in about 60 seconds if you really want and of course i'll be walking through how to use elementor from scratch so i will show you how to create text images and buttons all with the drag and drop software from completely nothing so that you understand how the plugin works and this website is a hundred percent mobile and tablet responsive so as you can see everything resizes properly for any device and this is extremely important because more than 52 percent of global online traffic is done on a mobile device so that means a lot of people are searching the internet on their phones just as much as they are on desktop so you want to make sure that your website works for both okay so let's go ahead and get started okay so in order to create a professional wordpress website we're going to be getting three different things so let me go ahead and show you what those are so first in order to get a wordpress website we're gonna need a domain name and this is gonna be just about five dollars because i've got a special discount worked out with the web hosting company that i use that i can give to all my viewers here at creatorpro website so that you can get a domain name and hosting for pretty cheap so next obviously we're going to need web hosting so web hosting can be as low as 275 depending on the plan that you choose but web hosting is a must-have if you're gonna own your own website and if you're not entirely sure what web hosting is or how it works i will put a link in the description to one of my other videos called what is web hosting i break it down with visual examples and it's super easy to understand but basically web hosting just allows you to have a place on the internet where you can put all of your pictures and your text and all of your other media and store it somewhere so without web hosting the alternative is a free website but there's a few reasons why you should not get a free website so first is you can't monetize your website with ads so that means you're not gonna be able to make as much money as you probably could with a professional website next you can't upload plugins to increase functionality aka no elementor because elementor is a plugin next you can't upload themes for increased customization you only have the limited options and next you do not own your own domain name so it won't be yourwebsite.com it'll be more like yourwebsite.wix.com or dot wordpress.com or whatever company is hosting this free website for you okay and lastly we're just gonna need wordpress and wordpress is completely free so if you're not sure what wordpress is i'll also put a link to another video that i made called what is wordpress and again i break it down with visual examples but basically wordpress just allows you to create a website without touching any coding you just kind of use the visual interface and wordpress writes the code for you and you never even have to see it wordpress powers over thirty percent of the internet so that's a lot of freaking websites and a lot of people use wordpress okay so with all that out of the way let's get started on this tutorial so step number one is to secure your domain name and your hosting plan okay so like i said i worked out a special discount with my hosting company which is hostgator.com the reason i will use hostgator.com is because they're fast they're reliable and to be honest i don't promote anything unless i've tried it out for at least a year so i worked out a special discount code which you can get by clicking on the first link in the description or you can go on over to createaprowebsite.com slash hosting and this will bring you to a co-branded landing page that i have with hostgator where you can get your web hosting and we're actually going to be signing up for the hatchling plan because if you're just starting out maybe this is your first website this is the cheapest plan to go for so the baby plan is if you want unlimited domain names if you know you want to buy like 10 to 20 different domain names i recommend going with the baby plan and if you have any plans to make a ton of money with your website then i really recommend the business plan but you can always upgrade to that later so we can just start with the hatchling and then later down the road you can always upgrade so what we're going to do is click on buy now underneath hatchling and here is where you can purchase your new domain name so if you already have a domain name you can just click on i already own this domain but let's just assume you don't and let's get one so i'm going to type in elementor website dot com and look at that it's available so you'll see in green here it'll say added primary and it's going to offer you a bunch of other like dot dot.club.site.net all these honestly i recommend stickingwitha.com because it's kind of the most legitimate looking it's what most people type in whenever they type in a url so you might as well stick to that so if we scroll down you'll see the domain privacy protection here and it's checked under our new domain name and i highly highly recommend keeping this checked because i whenever i first made my first website did not do this and i got bombarded by solicitors trying to call me saying that they'll build my website for me and you know offering me all these packages and such and that's because my email and my phone number became public whenever i bought a website and this has nothing to do with hostgator all hosting companies offer this protection so i highly highly recommend keeping that checked okay and scrolling down this is where we're going to make sure our package is correct so right now it's hatchling which is right and then our billing cycle is set to 36 months which is going to be the biggest discounts this is 271 a month and this is with the 61 off this is the discount if you clicked on the link below this video or if you went to creatorprowebsite.com hosting so the next recommendation i would say if you don't want to commit to 36 months is to do 12 months because whenever you buy your domain name you're buying that for 12 months anyway so you might as well get hosting for the same amount of time but if you are just starting out you just want to get your feet wet and you're not sure yet whether this is something that you want to stick to then just do the one month there's nothing wrong with that you still get 30 off if you use that discount code and that discount code is my affiliate link so if you want to use it uh go for it it'll save you money if you don't because maybe you don't like me i don't know you don't have to use it but i guarantee it's going to be the best one that you're going to find on the internet okay so next we're just going to create a username so i will just do my name and then a security pin and then scrolling down we get to the billing info so here we're just going to put in all of our billing info so that we can actually purchase web hosting so i'm going to do that really quick okay so scrolling down you will then get into the additional services so you'll see that included free is a free ssl certificate so what this is is this little lock symbol up here at the top left that's next to your url and basically this just lets people know that this website is safe and secure and they can trust their information with you or just trust being on the site that they're not going to get any sort of viruses or anything like that so next you'll want to uncheck a few of these boxes so uncheck protect your site from hackers and back up your hard work so i have tutorials for these things on my channel to do them for free so i recommend just checking those out there's really no reason to include them in your package so let's just scroll down and make sure that the coupon code says create a pro website which it does and again this is my affiliate link but it saves you a lot of money and it also kind of helps fund these free youtube tutorials that i'm doing so it's a win-win for both so let's just do a quick check so we've got our five dollar domain name which is right here and we've got that for one year and then we've got our hatchling plan for one month which is 767 because we chose to do one month so again if you chose 36 months or 12 months this will be even cheaper and then our add-ons is just our domain privacy protection so all in all comes out to about 27 so all you have to do is just click on the terms and con sorry terms of service and agree to it and then just click checkout now awesome so now hostgator is now setting up your account and in just a minute they're going to take you over to your cpanel which is basically just the dashboard for your hosting account okay cool so now we are inside our cpanel so from here we can move on to step two so step number two is to install wordpress installing wordpress is pretty quick and easy so let me show you how to do that right now so first what we're going to do is just go on over to marketplace over here on the left and then just scroll down until you see one click installs and just click on that and then just go ahead and click on site builder and cms and then you'll see wordpress right here in the middle and as you can see it's free so just click on that okay and now just simply go over to select your domain and i have a ton of domains but this is the one that i just bought elementorwebsite.com you will most likely just see one in here and then leave this as directory and then just click on next and then give your website a title so i'm just going to call this elementor website and admin user just going to put my name then my first name last name and then admin email cool then just agree to the terms of service and then click on install now wordpress is installing and this should only take a moment and just like that it's done awesome so from here what i want you to do is grab all this information right here and just copy it and put it somewhere on your computer that's safe like a notepad or so on where you can remember it because we're gonna need this crazy obnoxious password to log back in and don't worry i'm gonna show you how to change that password so yes you could log into your website by clicking on login which you will be taken to a site like this and this basically means that hostgator needs time in order to send out this new domain name across the entire world to let everyone know that it exists and this process is called propagation and it usually takes anywhere from 20 to 30 minutes it says it could take up to 24 hours but i've never actually had it take that long so my recommendation is to take a break for 20 to 30 minutes and then come back and we will get going again okay so we're back and the way that we're gonna check on our website to make sure that we can log into it is just to go up to the top type in your new domain name and then do forward slash wp-admin this is the way that you should get used to logging into wordpress all the time okay and now we can log into our wordpress account so if you can try to remember yourdomainname.com forward slash wp-admin that is always always always how you're going to log into wordpress and that's going to come in handy all the time okay so let's go ahead and log in so i'm going to do my name and then i'm going to paste that ridiculous password that i copied from earlier into there and then click on log in and awesome so here we are inside the wordpress dashboard uh i am just going to clear up this dashboard to make it look a lot less daunting because to be honest we don't need like 90 of what's on the screen so just go ahead and click on the x on everything awesome okay so that is a lot less daunting looking so now what we're going to do is change our password so in order to do this just go on over to users and then just go over to all users and then just click on your name and then just scroll all the way down to the bottom and click on generate password cool now delete that crazy one and then let's put in a new one so this should be something that's easy for you to remember cool now just click on update profile okay so step number three is to activate a new theme and a theme just allows us to customize our website and there are hundreds of thousands of awesome themes out there on wordpress but we need one that's going to work very well with the elementor page builder plugin and that theme is called ocean wp so let me show you how to get that okay so we're back inside our wordpress dashboard and from here we're just going to go over to appearance and then go over to themes cool and now you can see we've got three themes already installed these are just kind of the basic ones that come with wordpress and right now our active one is the 2019 theme which it doesn't look very good so let's go get oceanwp so from here just scroll down and then click on this big add new theme box cool so now just go over to the search bar at the top right over here and click oceanwp sorry type oceanwp and it's this one that says just do it it says oceanwp right here so all you need to do is just click on install and then now that that's done you can just click on activate cool so now we've just activated oceanwp so oceanwp is different from elementor in the sense that we're only going to use our oceanwp theme to customize the menu at the top and the footer at the bottom but everything in between the header and the footer is going to be elementor page builder which is the drag and drop software so that brings us to step number four which is to activate the elementor plugin and we're actually going to be getting two plugins we're going to be getting the elementor plugin as well as the essential add-ons plug-in for elementor which just gives us some helpful tools to our elementor plug-in so let's go get those now okay so in order to get our plugins all we have to do is just go to this menu on the left and then just go down to plugins and then click on add new okay and just like searching for themes you can also search for plugins using the search box so in the search box just type in elementor and then you'll see elementor page builder right here as well as our essential add-ons so first we're going to get elementor so just click on install now which you can also see it says two million active installations told you i was not lying about that okay and then just click on activate awesome so it's gonna ask to give us this little tour which we're going to hit the x and decline because i'm going to show you your way around elementor so now we need to go back to plugins and then go back to add new and then go back to the search bar again and type in elementor again and then we'll just click on install now for the essential add-ons so just click install now and then just click activate awesome so now we've got our essential add-ons as well so all this first stuff in the beginning is a little boring just because you're trying to get your environment set up to customize your website so getting these themes and plugins and all that is very important even though it's not the most fun but don't worry we're moving on to the fun part now okay so step number five is to customize your website so i'm going to be showing you how to set up a new homepage as well as how to use elementor from scratch so that you can create any website that you want as well as importing an elementor template which again i have supplied in the description below so be sure to go download that and then we're going to customize it okay so let's get started okay so first up in order to create a new homepage we need to create a page so in order to do that just go over to pages and then go to add new cool and from here all you have to do is click on add title and let's just call this home page and then if you go over to this menu here on the right and you click on page attributes you can then change this from default template to elementor full width because we want the entire screen from end to end to work with and build our website so be sure to change that to elementor full width so now just click on publish and then publish again awesome so now we've created this home page but we need wordpress to understand that this is the home page we want displayed whenever somebody types in our url so a little bit confusing i'll just show you how to do it right now so just go up to the name of your website and then go to visit site okay and from here you'll see a little customize button at the top by the way before i click on that you can see this is our website currently uh kind of boring white and ugly so we're gonna go ahead and change all of that so first just click on customize cool now just go down to home page settings and then change it from your latest post to a static page and then you'll see home page right here and then just select the page which we just created this new page called home page so we'll just select that cool so also while we're here we're going to go hit the back button and we're just going to go down to general options right here and then go to page title and we want to get rid of this page title because we don't want our homepage to actually say homepage we just want it to be that way so we'll put uh style over here you'll see default we'll put hidden in this box and that will then get rid of this little home page just like that awesome and while we're here we might as well fix the footer as well so it says copyright oceanwp theme by nick so let's go ahead and change that so just hit the back arrow and then the back arrow one more time and then just go down to footer bottom and then you'll see where you can change that right here so we'll just do copyright we'll say copyright 2019 and we'll just do elementor website or whatever the name of your website is you can put that right there or you can also put your name there if you'd like so then i'm just going to click on publish to save all my changes cool so now i'm just going to click on the x and then from here i'm just going to go back to my dashboard so if you go hover over your name up here of your website and then go to dashboard that will then take us back cool so now what i'm going to do i'm going to close up some of these as well there we go a little bit cleaner i like my dashboard to look super clean okay so now just go back to pages and then go to all pages and i'm going to show you how we're actually going to start dragging and dropping and customizing our home page so let's just go click on home page and then now you'll see this little button at the top that says edit with elementor so just go ahead and click that button cool so here we are inside of the elementor page builder and this little menu over here on the left is going to be your best friend this is where you're going to drag and drop all these cool widgets in here so just plunking around in here you can see we've got images we've got text videos icons dividers all sorts of helpful widgets to design your website so what you want to do first is just click on the little plus symbol so i'll just show you how to build something from scratch just so you know how to use elementor so just go ahead and click on the plus symbol and then you can see we've got our different columns here so this is a single column two columns and so on and you can drag widgets into each one of these columns but i'm just going to go ahead and click on one okay so now we've got this little blue box here that just got added and that is a section so as you can see the section is in blue and then the column is actually this one in gray which is inside of it so you've got sections then you've got columns and then you drag widgets inside of columns so if you kind of memorize that hierarchy like that it makes this so much easier to use so let me show you a little bit better so if i click on the little three dots for this section that means that i can edit the properties for this section so over here on the left you can see we've got our width we've got our height and so on so i'm just going to go to height and i'm going to change that to minimum height and then you can see i can drag the height of this section up and down so now you can actually see we've got a section column inside of the section and then this is where you drag widgets in so i'll show you how to do that so if you just go to this little rubik's cube looking symbol here and click on that you can just drag things inside of it so i can drag a heading in here like that and now we've got some text which we can edit over here on the left so if you want to edit any of these widgets you can do that over here on the left so i'll just change this to how to make a wordpress website with and then i'm going to put another heading underneath it and make elementor the same size but i will do that in a second so just editing this text what we can do is change the alignment over here so i'll change that to a center and then i'll put it right in the center and you can change the size over here but i don't typically touch that because what i do is actually change the typography size so i do that by going to style and using the style tab for almost any widget on here you can change all of the design properties of whatever that widget is so in this case you've got text color the typography which is like the font and the font size you've got text shadow and so on so if i want to change the color i can just click on this little box and i can drag there we go drag whatever color i want so we'll just put it black for now just to show you what i'm doing and then if you go to typography you can change that to whatever font you want so if you go to family change this from default you can actually type in any font that you want and these are google fonts by the way so if you're not sure of what google font has to offer you can just open up a new tab go to google and just type in google fonts and google fonts will have a whole list of different fonts and what they look like but i'm not going to get too far into that right now so yeah you can change the font and then you can also change the size by dragging the little size meter up so i'm going to just do maybe something like that like a 28 you can change the weight uh just all sorts of cool properties over here but i typically don't mess with any of these except for maybe the line height and the letter spacing so if you drag the letter spacing up you can really space it out or really crunch them in but if you ever want to undo anything you can just hit control z and that will undo it so that's back to normal so in a nutshell that's basically how to edit text and now i'll show you how to add a background in here so if we just go back to the section up here by clicking on the little six dots you can now edit the section properties so if we go over to style and then we've got our background here so we've got background type is classic then we've got gradient or even a video so you can do any one of these so if you just click on color or sorry classic you can put in a color so just click on the little color box and you can just select whatever color that you want so super handy and then oh you can also edit the hex code right here so if you have a certain code of color you can put that in here which i highly recommend if you're building a website get one to two hex color codes and make sure it's consistent throughout your entire website a big key indicator of something not being professional is when you've got you know 16 different shades of blue on the same website because you know you didn't put in the same code so you want all of your colors to be exact so you can also do a gradient so if you click on the little gradient button you can then do this kind of fade look to it so i'll just change this other color you know maybe to a darker blue you know you can do something like that i'm just kind of plucking around here and if you change the location of both the first color and the second color you can kind of define how much of a fade it has so if you go all the way towards the middle like that now you've got this nice hard line so i'll show you if you change the angle you can change the angle of the gradient so if i change it like that and then i just kind of pull this location back i can have like kind of a sideways diagonal gradient so feel free to just plunk around in these settings and you know kind of familiarize yourself and then of course if you go to video you can then add a video so you can do a youtube link right here you can define the start and end time as well as the display image so i'm also going to show you how to do an image in the background so that was colors gradients and video but if you go back to classic like that and then you click on image you can then upload an image so just go to upload files and then go to select files and then hopefully you have the follow along images if not you can download those in the description so if you just go click on that link you can download all the same images that i'm using here so i'm just going to click on follow along images folder and i'll just kind of grab one for fun so i'll just grab this main image right here and click open cool and then just click on insert media there we go so now we've got our image in the back obviously it doesn't look too great right now so we need to kind of fix it so underneath the image you can see we've got position so i'm going to change that to center center which is usually the right way to go sometimes maybe you want the top part of the image you can do top center like that but i never recommend doing you know right or left or anything like that just try to usually go with center center or top center so i'm going to do center center and then the attachment i'm going to change to fixed so basically when you're on scroll and you scroll up and down the website the image will go with it if you go to fixed it is then a parallax image you can barely see it because i don't really have a whole lot going on on this website right now here let me uh add a little section right here just so you can see what i'm talking about there we go so that's the parallax image you can see the image is staying put while the rest of the website scrolls up and down in front of it okay so back to my image so then we'll go to repeat and just keep that on default and then size i usually do cover because i want the image to be full screen all the way across so whether the image is this big or that big the image will be responsive and move with it so i highly recommend using cover and if you want if you scroll down you can add a background overlay so if i click on background overlay i can just go to classic and then i'll just select a color so you could do white and as you can see it kind of made the image a little bit more transparent looking basically it's just putting a 50 white so you can see if you go to opacity it's at 0.5 it's adding 50 white on top of our image and also behind the text so i'll change that to black like that and what i'm going to do is change my my text here so if you just click on the little pencil icon for whatever the widget is you can change the properties of that widget so i'll just select that and then go to text color and then i'm going to change that to white just like that cool and then while i'm here i'm also going to duplicate this so if you just right click on that little pencil icon and click on duplicate it will then duplicate that whole widget and i'm going to change this one to elementor so if you just triple click in the title section i'm going to change that like that yeah let's make it all caps like that cool so now i'll go to style and i can also change the color of that but i'm not going to do that right now what i'm going to do is go to typography and i'll drag the size of this up so it's kind of fitting i'll do it like that and i'll change the letter spacing to be all the way up wish that went a little higher 10 seems not very high uh all right so i'll go back to size and i'll just make this a little bigger like that so it kind of fits underneath let's go back to content okay making sure i don't have any spaces in there okay cool so now if you want to change the space between these two widgets here so this is a heading widget and as well as the one that says elementor is another heading widget if you just click on the column over here the little box attached to the column like that you can then edit the widget space inside of the column so you can tell it how close you want these to be so the default is 20. if i go to 1 they're a lot closer and you know the higher up you go the more spaced out they become so i'm just gonna go to one like that okay so now let's go back to our section so we can edit our background and i'm going to go back to layout and then under minimum height i'll just make this a bit bigger you know maybe full screen something like that if you click on this little arrow you can kind of hide this menu so that's looking pretty good i like that let's open that back up cool so you can also add shadows and things like that to text so if you just click on the little pencil icon for the text you can go to text shadow click on that and you can then change how much shadow so it's a little hard to see against this dark background so i'll darken it up so you can see it so if you just click on the little color thing you can drag this up and then i will drag the horizontal amount so there you go you can see it kind of changing so this is left to right and then also the up to down like that so you can also change the blur amount but i'm going to leave that kind of like that and i'll do a 2 on both so i'm going to go in to the pencil icon for the top one as well and do the same thing so text shadow make that nice and dark and then i'll put a and a two just like that okay so now i'm going to show you how to make a button so if you just click on the little rubik's cube looking symbol up here let's drag a new button in here so as you can see we've got a little button widget right here so i'm going to select that and just drop it in so if i hold this over you can see i've got this blue line popping up and the blue line will indicate where you're going to drop that so if i wanted to drop it in between these i could obviously that's not something that you'd want to do because it would look a little funny so i'm going to drop it in underneath just like that now you can see we've got our new button which is left aligned on the screen so if you want to change it to the middle of the screen you just click on the center button like that and now it's straight underneath cool so if you go over to the text right here you can change what it says so i'll just say uh learn more i don't know just kind of an example and then the link if you put in a url here so if you want this button to go to a different page on your website or maybe a completely different page altogether like maybe on youtube or facebook or you know wherever you want this button to take them you can put that url in right here by just pasting it and you can also change the size of the button so right now it says small you can go to extra small you can go to large extra large you know make a giant button if you want to i kind of like just the standard small and you can also add an icon so if you do select icon you can then change it to any icon that you can find in this list or you know i typically tend to go with something simple like you know a little down arrow like that and then you can change the spacing or whether the icon comes before or after so that's after which isn't too bad i'd typically just stick with before and then we'll also change how the button looks so if you just go over to the style tab again if you click on the style tab for any widget you can then change all the design properties so let's go ahead and change the typography so i'll click on the little pencil icon under typography and i'll just change that to the font that i want so i usually recommend having a main font and then a secondary text font so for this website my main font is going to be philosopher which is the actual title right here and then i want muli to be my secondary font so that's m uli they're kind of a good combo so i'll do that you know it's a little bit cleaner looking text and then you can change the size of that text here the weight and so on so you can make it kind of a bold font which isn't too bad i'll stick with that okay and now you can change the text color the background color and you've got normal and then whenever you hover over it so i'll show you both so right now we're under normal we'll change the background color let's just change it to blue you know same deal you can kind of drag around all in here and these two bars on the left or sorry the right over here the one on the left if you drag that up you add much more saturation which is just adding more color or if you drag it down you can take some color away but you know i like to have big bright bold buttons and then this other one on the right here is just the opacity so do you want it to kind of fade into the background like that or do you want it to be completely solid so i'll just kind of drag around i usually try to recommend having something bright like a bright blue or maybe a bright green or bright orange because these colors really stand out the most so this button is usually your call to action it's something like shop now or you know buy this or or learn more about this and it leads them to somewhere where they can buy so this is something that you want to stand out immediately when they load up your website so try to stick with a bright color but that is my personal recommendation all right so we'll close out of that and then you can add a border to it so if you go to border type change that to solid or you can do any one of these really but i like solid and then you change the width so there you can see we've got kind of a white border around it but i'm not a huge border fan at least not for this design sometimes it works out really well but i'm going to take that away so i'll just go back to none uh sorry actually go back to solid and if you go to border radius you can change how circular the button is so that's like a completely circular button which honestly looks kind of cool on this website so i think i'm going to leave that and then you can also add a shadow to that as well so i'll do box shadow just scroll down and i'm going to make this darker like that and i'll do a little bit more horizontal a little bit more vertical like maybe a three and a three yeah i'll do two and a two like that cool so as you can see we have got uh this button very close to our title here which i'm not a huge fan of you know we want some space right here so try to keep space around groups of objects so we would want space around our title and then more space around our button to kind of separate them so what i'll do to change that is just make sure that we're in the edit button section which we are and then go to advanced and you can do this with any widget by the way if you change the padding which it set this little link changes the padding for the top right bottom and the left if you just increase that value that will add some space around whatever that widget is so you know something like a 30 really doesn't look too bad you know you could go crazy with it if you want but i'll just go back to a 30 like that and then also you can see we've got motion effects in here under the advanced tab so if you want these to kind of fade in you can do that so i'll go to motion effects and then i'll just change the animation to like a fade in to save your work make sure that you click on update because if you don't you could lose your work which would not be very fun okay so now that's updated if you wanted you could uh hit the refresh button and then kind of see what that animation would look like or you can just go over to preview changes right here and this will open this up in a new window so there you can see our button just kind of loaded up which is pretty cool or sorry faded in so i'm going to exit out of this and you can do the same for the text as well so i'll just go to the little button right here to edit this widget i'll go to advanced motion effects the animation i'll change to a fade in and you can do any one that you want so if you go in here you can do a zoom in which looks like that you know bouncing all sorts of fun crazy stuff here some of them are super obnoxious like that uh don't recommend that one so i'm gonna go with just a fade in and then you can also change the speed so you've got slow normal and fast or you can put in your own value right here but i kind of like just the normal so i'll do that for this one as well so i'll go to advanced motion effects animation fade in cool so now if i just click on preview changes oh hold on guys there we go okay so now you can see our whole title and our button just faded in so i think that looks pretty professional so i'm just going to click on update and save my work okay now one cool thing i want to show you is to do with the section it's going to be these dividers for each section so i'm going to just go up to the little six dots and then go over to style and then if you scroll all the way down you'll see the shape divider right here so just click on that and then i'm just going to change the type to let's just do mountains so you can see so that's added to the top uh so pretty cool looking shape so if you want you can change it to the bottom by clicking on bottom and then adding mountains so now we've got both so i'll go back to top and i'll get rid of the top one so there you can see we've got mountains on the bottom and just make sure that you're on top or bottom if you're like wondering why it's not working it's probably because you're editing one and not the other so back to bottom and then you can change the width to make them bigger like that you can change the height like that which is pretty cool so just go in these and you can kind of just pick whichever ones you want you know so these are drops you can just kind of play around with all sorts of fun ones curve so i really like these i use them sometimes so feel free to play around in there but for now i'm going to get rid of this so i'll just do none make sure the top is on none and again click on update it's good to get in the habit of updating as often as you can all right so before we move on to actually importing the template that i provided for you i just want to show you a few more widgets before we hop off this screen so if we scroll down we've already got a new section here that i made earlier so if not you can just click on the x that's to delete a section and then if you want to add a new section just click on the little plus symbol that says add new section and then you can select any of the columns that you want so in this case i'll do two just to show you so as you can see we've now got one column here and one column here so i'll just go back to the rubik's cube and i can drag in anything i want so you know we've got images which you can replace right here by clicking on delete and adding your own and if you want to delete anything just right click on the little box for it and click on delete we have got icons we've got all sorts of fun stuff maps even which you just have to put in a uh address what else do we got we've got image galleries progress bars we'll drag that in there so you can change what percentage this goes to by dragging this up pretty cool you can change all the text for it the colors everything we've got social icons even oops drag that in again like that there we go you can change the social icons and the urls as well so like i said there are tons of awesome widgets in here really just throw some in play around with them no matter what if you want to edit what they say you just do that with content if you want to edit what they look like you do that with style and if you need to edit spacing or any other properties like that you just do that in advanced as well as the animations as well or in advanced cool so let's go ahead and add a new template that i added or that i created for you so i'm just going to go up to the little hamburger symbol up here it's like three little lines i'm going to click that and then go to exit to dashboard and it's going to ask me if i want to leave because i haven't saved any changes as you can see well sort of see behind this right here my update is still in full green meaning that i have not clicked update but i'm okay with losing the changes because i'm about to upload a new template anyway so i'm going to click on leave cool so now if you want to add a new elementor template all you have to do is just go over to templates which is right underneath elementor and then just go to add new and then you can just kind of x out of this and then up at the top you'll see import templates so just click on that button right there and then just click on choose file cool so now we'll just go back to desktop and we've got the elementor website create a pro website so if you downloaded this it's probably in your downloads folder or wherever you might have put it but it is a json file so just select that and then click on open and then all you have to do is just click on import now awesome so now you can see we've got our template right here so now if we just go back to our the name of our website and then go to visit site we can then click on edit with elementor and then we can upload that template so for now i'm going to go ahead and get rid of this section by clicking on the x as well as this one okay so to add a template all you have to do is just click on this little folder icon that says add template and then just go up to my templates and then you can see we've got our elementor website creator pro website right here so now just click on insert and then it'll ask you if you want to import all the document settings this is like the images and so on that come with it we'll just say yes okay and this is what happens it kind of breaks so to speak so what we would need to do is just go over to the left and just go to page layout and then change that to elementor full width cool so that's how it's actually supposed to be and of course you're going to change my name to your own name but i'm just going to close this and kind of show you the website so as you can see we've got some animations by the way i put all the images in black and white so that i can show you how to replace those and put your own in there so that's not even me that's just some random guy that i found on a stock photography website so pretty cool website it's got some animations in there and then this blank space right here is where we're going to put our contact form but i will show you how to do that towards the end so let's go ahead and go back to the top and open up our menu okay so first off let's just change the image in the back so i'll just click on the six dots to edit this whole section and then i'll go to style and you can see we've got the image right here so i will just delete that and then i'm going to upload our own image so again if you wanted just a color you can do that here or a gradient or video but i'm going to do an image and then i'll go to upload files by the way this is your media library so this has all of the files that came with the templates that i created for you so if you want to keep any of these you can or you can just delete them actually i don't need to go to upload files though because we've got our main image here already so i'm just going to click on insert media and if you don't have that main image by the way just go to upload files and grab it from the follow along images below so i'm going to insert media and there we go we've now changed the background and this already has a black overlay over top of it i think it's about a forty percent black overlay which i like so now let's go ahead and change the name so if you want you could just select it here or i like to just go over to the title section and change that so obviously my name is my name so i don't need to change it but i did want to show you something that happens if you have a longer name so let's say that your name is i don't know jerry let's just put that for now actually that worked out okay let's do uh matthew there we go so now you can see matthew is long enough name to kind of break this box here even if we change this that just looks super ugly so we're going to go ahead and fix that so the way to do that is just go over to advanced and i've got the margins set up to create this kind of black background on here so you can alter that just by decreasing the right or left values here so this is the right this is the left that's pushing that black box into the middle so what we want to do is decrease that so i'm just going to drag that out kind of drag this one out just bring those values down until it starts to look normal again a little more i just kind of do bit by bit on each side almost there and you want them to be semi-equal so i'll do 180 and 180 like that there we go so that's what you do if you have a longer name but i don't so i'm gonna go back to dale so i'm just going to hit control z there we go control z is your best friend okay and if you wanted your name to fade in then you could just go to motion effects and i've got the fade in set already so we'll just open up a new tab to preview the changes and i can show you so there we go kind of fades in but if you wanted to zoom or something go ahead and change that in the motion effects so now we're going to change this button so as you can see when i hover over it kind of grows and then it's got like a little bit darker background but i left it empty so that we could go ahead and change the color because again you want buttons that are going to stand out so let's just click on the little edit symbol and if you want you can change the text so i have it set to c gallery and then you can see we've got hashtag gallery here underneath the link so normally this is where you would put a url but with hashtag gallery now what happens is if we click on that it goes to my gallery section it just kind of jumps down to it and the way that i set this up was if you do hashtag whatever the word is all you have to do is just go to this section and then go to advanced whatever section you want to jump to that is and then you'll see css id and i have it set to gallery with no hashtag so you just set this as whatever word you want and then if you just go to the button and set it as hashtag that that same word it will just jump down to it which is pretty awesome these are called jump buttons okay so now let's change the color so we'll just go to style and then we'll just go to background color and then i will just put in kind of like a bluish color again okay so our clear was all the way down at the bottom so i'll just drag that up like that i'll just do kind of a blue color like that and then if you go to hover you can then change the background color for the hover so when i hover over it it kind of turns black so i'm just going to change that to kind of like a darker blue uh maybe let's bring that opacity up yeah maybe something like that maybe a little darker good enough yeah that's not too bad cool so i also have a border on here so i'm going to go ahead and actually i'll leave that as solid and then i'll bring the width down so now there's no white border around it but it's still a square so if i want it to be kind of a circular button i'm just going to increase that border radius all the way to around a 50. so something like that it's pretty cool all right cool so moving down we're going to get into this section so if you want to change this background color so as you can see i've got the background color going from blue to kind of like this dark blue with stars in it and it's kind of fading all the way through and then fades back to light if you would like to change this color all you have to do is just click on this section and you do kind of have to do it in pieces so we're on this section first just go over to style and then it's on a gradient so right now this section right here is actually transparent which is why you're able to see the background behind it and then the other part of the gradient is this blue color so you can change that to whatever color that you want like that again just make sure you copy this hex code so that you can duplicate it for all the other sections below but i'm going to go ahead and leave it the way that it was like that and i'm going to scroll down a little more and you can change this text if you want you can change all this text and these are dividers right here so if you just go to the little rubik's cube and then you click on divider and just drag that in that's what that is and that one is obviously a lot thinner than this one so if you wanted to kind of match that style all i did was bring the weight up a little bit to like a three and you can also change the width like that and then the alignment so if you've got a short one you can change the alignment to the middle the right or the left as well as the gap so you can increase how much space that divider has this is why i love elementor i mean you can just move things around with these little sliders and it makes it so easy so i'm going to go ahead and delete that for now because i don't need that so let's go ahead and change this image so i'm just going to go to this box and click on the little edit symbol and then i'm going to go in and delete this and grab a new one so now i'm going to go to upload files and then select files and then go to my follow along images and i'm just going to grab image number one which is right here and then click on open cool and now i'll just click on insert media and there we go that one's replaced so i'll do the same for this one so edit symbol delete upload files select files and you can actually copy two images at the same time so i'll do image one or sorry not image one i'll do image two and image three at the same time so i just did shift and selected both and then i'll just click on open and now that's uploading both of our images so i want image two to be the next one so i'll just select that and then select insert media there we go and then this will be image three so i'll just click on edit delete add a new image image three insert media so pretty simple we've already got a lot of our website set up and it's only been a few minutes okay let's continue moving down so now we've got our about section and here's where you can start to see these little stars coming into play so i'll show you how i get that so let's open this back up and we'll click on this section up here with the six dots to edit the whole section and if we go to style because we want to edit the background so you can see we have a color right here as our background which is that same kind of dark dark blue color but then we also have a background overlay so if you click on background overlay i put this image in here of stars so if you want to change that to you know swirls or paint splatters or you know whatever you can find on the internet you can just drag that in here and then change the opacity so right now it's at a one which is only like a ten percent if we drag this up you know that's now a fifty six percent and it's super bright which is a little obnoxious so that's why less is more with these background overlays so i'm going to go back to a1 and leave that there but that is how to create that pretty sweet okay so let's go ahead and change this image here so you can notice that the text my name and this image are all part of one widget so just select that and this is actually an image box widget so if you just go to the rubik's cube you can find that right here it says image box so that was what i used to create this section so let's go back and edit that so i'm just going to delete this and put in an image of myself so i'm just going to select that go to upload files and then click on select files and then just put an image of yourself so i've got an image of me which you will not find this in your follow along images because this is where you should be putting an image of you so i'm just going to drag this one of me in click open and then just click on insert media and there we go so there's a picture of me you can change the name by just going to title and description and editing that as well as the text so as you can see right here we've just got a bunch of dummy text in here and you can notice if you drag this down there's no break in the text but there is a break right here between this paragraph and this paragraph so the way to do that if you were to just click it in here and hit enter nothing's actually going to happen as you can see so what you need to do is actually click on the text in here let's just say right here and you break it up like that and what that does is add this little tiny code right here that's kind of a open bracket br close bracket and that's just one break so i did it twice so there's two of them but that's how you create that so i'm just going to control z and then scrolling down we've got our little progress bars so if you just click on that to edit you can change the percentage of how much you know you know about a certain topic um i'm not really claiming i know everything about photography but it makes you look a little cooler when you're like yeah i'm super good at you know one skill and then semi good at some others so i just kind of threw in a few here i actually am not that great at illustrator so don't pay attention to this but uh you can change the title of it so just make sure we're editing this the title goes over top so i'll just type in some dummy text and you can see it's coming up over top so i leave that blank and i edit the inner text which is right here so you can kind of type in whatever you want and then again the percentage or you can even show or hide the percentage so that's hidden but i like to show it and then if you go to style and then go to color you can change the color of that bar which is cool but i will control z that and then the title style you can change the text as well so right now i have it set to muli which is my secondary text it's the same as this text right here you can change that to any font family that you want or the color okay let's keep going down making our way so now we're at the gallery so from here this is a kind of tricky one because you want to make sure that all of these images are the exact same size the exact same pixel size so let me show you what i mean so i'll just click on the little edit icon and you can see we've got our six images right here and i'm just going to clear these and it'll say reset gallery it'll say are you sure we're going to say yep and then we'll just go to add images and then so what you want to do is make sure actually this was one of the ones inside of it so as you can see this one is 490 by 380 pixels and so is this one and this one and this one all of the ones that i added to that gallery are all 490 by 380. so if they're not the same size they're going to show up kind of funny looking in the gallery some are going to be bigger than others and it's going to look a little crazy so i'm going to upload some new ones so i want the color versions of these so i'm just going to go to upload files select files i'm going to grab gallery 1 all the way to gallery 6. and i do that by holding shift and then just click on open and now it's going to upload all six of those images cool so now just click on create a new gallery and then you can reorder the images in here so you can kind of drag and drop however you want whichever order you want them to be in but i'm just going to leave them like that and you can also caption them if you want but i don't typically do that and then just click on insert gallery and boom there we go all these images are perfectly laid out here because they're all the exact same size so that is going to be key so i'm just going to click update and save my work since we haven't done that in a little while and then i'm just going to click on preview changes and i can show you what happens when you click on that gallery so we'll just scroll down website's looking pretty good so far and if you just click on an image it kind of brings it up in this little light box and you can kind of just plunk around through these or anyone that's really on your website for that matter can plunk around through those cool so i'm going to x out and you can change how many images are in each column so there's three columns right now you could do two and that'll make them a little bit bigger and it puts three in each or you could do four but that's going to kind of break it so now you can see we're missing two images here so depending on the number of images you're going to want to change these columns so i'm going to go back to three okay going down a little bit more follow me on social so let's edit these actually by the way you can change any one of these sections just by clicking on it and changing it here so you do not need to actually leave these as what i set them as so feel free to change them alright so back down and we'll go to this little widget for the social icons and you can see we've got instagram facebook and twitter so if i just click on instagram that'll open that up and we can change the icon if we want so you can just kind of type in whatever social you want so i can do youtube you know and change it to youtube and there we go just changed but i'm gonna go back to instagram and now let's go ahead and throw a instagram url in here because currently it's blank so i'm gonna go up to instagram and just go to my personal instagram you know if you want to follow me go for it up to you don't really post anything website related on here but feel free to stalk me and i'm just going to copy that url and then paste that into the link right here and now i'm just going to click update and by the way if you click on the little gear icon that says link options you can open it up in a new window or not but i typically like to open it up in a new window because otherwise it'll take them off of your website by opening opening it up in the same window and google analytics and everything likes it when people spend more time on your website so if you want your website to rank a little bit higher on google so more people can find you then keeping people on your website as long as possible is a must but that's just a little seo tip for you i've got more videos on seo which is search engine optimization on my channel if you want to learn that but not going to get too far into that okay so and you can change the colors on all these as well so if you just go to style we're underneath icon right here you can just go to primary color change that but i'm just going to leave it how it was and then if you go to the size you can change the size which is super obnoxious that big so i'm going to keep them smaller again control z i typically put everything in a good spot already but if you want to mess around with them go for it you can add the padding around them so that adds more button and less icon which looks a little weird to me so i'm just going to ctrl z that as well as spacing so you can kind of space them out or keep them close together cool and then you can do a border and then if you go to icon cover uh hover you can change that as well so i could just do kind of like a darker blue whenever i hover over kind of a darker desaturated blue there we go yeah it's pretty cool i'll leave that or maybe you could do pink i don't know screw it let's do orange why not all right update okay moving down we've got the client section so you can change all the text in here so just click on the little edit symbol and this is actually a testimonial widget so you can change what the person says here and i recommend keeping that in quotations because that kind of shows that somebody else is saying it and then you can change the image here and just kind of mess around with it the same you do as any other widget so if you want to change the border here so i've got the pink the blue and the green all you need to do is just go over to the column so there's the widget it's inside of a column which is inside of a section but let's go to the column and then we'll just go to style and then just go to border and you can change the color there or the weight you know if you want but kind of like the thin one so i'm going to leave it as one all right scrolling down we've now got the brands that we've worked with so let's go ahead and change this background since it's still black and white so i'll just click on the little six dots for this section and then i will just go to style delete and let's add a new image just add this one same one insert media there we go and then you can change all of the icons in here if you've got other brands that you've worked with or if you just want to get rid of this whole section you know feel free to get rid of it but i will show you how to change those now so if you just go to edit it's the same thing it's a carousel it works a lot like a gallery so you can just clear these images and then add your own but make sure that they are all the same size or at least close to okay scrolling down even more we've now got our last section which is our contact section so you can change any one of these right here by just clicking on the edit section and this is an icon list so if you want you could do them in line like that so that they're kind of going left to right but that's happening inside this box so it's going to go one two and then put the third one underneath if this box were a full screen it would just be left to right but i like them kind of stacked on top of each other like this so i just click default and then you can change the email here as well as the symbol and then where this goes if somebody were to click on it and you can do that for any one of these i just put in you know random info here none of this is actually accurate so don't call these numbers and then if you go over here we've got our contact form so just click on the little edit button here and then you can see this is an ea wp forms widget so that's essential add-ons wp forms so essential add-ons was that plug-in that we installed in the very beginning that gave us a few extra widgets and tools and wp forms is the plugin that we use to actually create our contact form which is where you would select the form right here but if you click on this nothing happens because we don't actually have one made yet so let's go ahead and do that right now so step number six is to add your contact form so it's always a good idea to have a contact form on your website it doesn't matter if you're a company that's selling product or if you're a freelancer trying to hire out your services or maybe you run a blog and you just want people to be able to write into you with questions it's always a good idea to keep a contact form at the bottom of your website or at least on a page on your website separately so let's go ahead and do that now okay so let's just go over to update and make sure that we've got our work saved and then now let's just go back to this little hamburger symbol to go back to our dashboard and do exit to dashboard okay so from the menu here on the left you'll see wp forms and this is standard with wordpress so this should have been installed already as you installed wordpress and if for some reason it wasn't you can just go over to plugins go to add new and then search for it in the plugins and activate it but it should be there so let's go ahead and click on wp forms and then we'll just go to add new cool so let's go ahead and give our form a name so we'll just say dale's contact form nobody's really going to see this so doesn't really matter and then you can start from scratch if you want to do a blank form or you can start from a simple contact form so i don't see the point in doing extra work if you don't have to so let's go ahead and do create a simple contact form so we've got our name we've got email and then message and if you wanted anything more on top of this or in between you can just select it from over here so we'll just do numbers just to kind of show you so now that just added numbers down below so this could be like a phone number for instance and all you have to do is click and you can just drag that anywhere that you want and if you want to change what it says so maybe you want to say phone number instead of numbers all you have to do is just click on it and that will take you to the field options for this one section here and you can just change it so we'll just change it to phone number and then people can just type in their phone number right there and then you can also make sure that whether these are required or not so you can see the ones that had the little red asterisk are required so if you wanted phone number to be required you could just check that but i don't think a phone number is totally required so then we'll just go back to all fields and you can drag in anything you want you can do multiple choice you know and then these are all the fancy ones that come with the paid version of wp forms but honestly you can get by with pretty much anything with just off of these eight okay so this looks pretty good already so i'm just going to go ahead and click on save just to make sure we don't lose our work and then if you go over to the settings tab right here we're in general and what we can do is change the submit button text underneath general so you can see we've got submit button text it just says submit you could do send if you want and then it'll say submit button processing it'll say sending and then if you go over to confirmation this is the message that pops up whenever they are done hitting send so it'll say thank you for contacting us we'll be in touch with you shortly and that's set to message so you could actually direct them to a different page if you want you could go to a different url and just put in a url to your website or a different page on your website if you go to show page you can select the page down here but i'm just going to do message and you can change this so we can say something like your message has been received we'll be in touch with you shortly cool so now just go over to notifications and this is how you actually get the email sent to your gmail account or whatever you know maybe it's yahoo or whatever email provider that you're using that is done right here so right now it's set to admin email which is the email that you use to sign up for wordpress in the very beginning so if you want it to be something different all you have to do is delete that and put in a new email so you could do you know whatever it is at gmail.com and then always make sure that you actually go to your gmail account and check the spam folder you never know what ends up in the spam folder so if it does just make sure to move it to your inbox so that future messages will go to your inbox as well so in your gmail inbox or yahoo or whatever it is you're using for email this is what's going to pop up as the subject line so it'll just say new entry for this contact form you can change that to whatever you want um and then it'll say from their name and so on and then reply to it'll say field id equals one that's just whatever they put into the email field so they'll actually put their email in and whenever you reply it'll just go straight to their email automatically okay so this is all done let's go ahead and click save and actually put the contact form on our website so now just click on the x cool so now just go over to the website name and go to visit site and then we're just going to do edit with elementor up at the very top by the way i'm going to show you how to change this name here i'll show you how to create a logo as well as put menu buttons up here at the top but that's coming up in the next section okay so click on edit with elementor and then we're just going to scroll all the way to the bottom and just click on this little widget and again this is the ea wp forms widget with co which comes with the essential add-ons so if for some reason it's not here you can just search that within the add-ons and you do that just by clicking on the rubik's cube and searching so it'll say select form we're just going to go to dale's contact form or whatever the contact form is that you created and bada boom bada bing there it is right then and there don't really need to do a whole lot to it so if you wanted you could change you know the font style here uh just by going to style and then just go down to labels and you can change the typography or their color so i'll just do text color you know red whatever not going to do anything crazy i like just a regular old gray which is b7 b7 b7 and then you can change the typography so right now i have it set to muley i'll just show you you go changes just like that but i'm just going to go back and if you wanted to change the submit button text color or sorry button color you can do that just by going to the submit button and then just go down and change the background color so right now it's just at the default which is blue but if you want you can change that just by doing like that so i'll just leave it as kind of a blue but that's how you change it as well as the text color and then you can do the hover color as well so i'll change this to hover and go down to background color and i'll just go to kind of a darker blue like this there we go not too shabby all right and then last but not least before we actually get into the logo making and the menu up at the top and really creating our header for this whole page we're going to edit our footer real quick i know we're kind of working backwards there but that's okay so the footer here i've got terms and conditions and privacy policy typically these are standard for almost any website but you know if you don't want them feel free to delete them and this button back to top if you click it will actually take you all the way back to the top and the way that i explained jump buttons earlier in the tutorial this works the exact same way so this section if we click on it it's labeled if we go to advanced it is labeled as top right here and css id and then this button all the way at the bottom if we click on that has hashtag top and that's how that gets routed all the way to the top so next to it we've got our social symbols which i already showed you how to edit so if you wanted you could just go in and duplicate you know these right here and then just drag them in so that everything is already linked up and you don't have to re-link all those urls again but i am just going to delete that and i recommend keeping everything inside the footer as kind of gray dark colors you don't want these to stand out that much they're just kind of helpful resources for people that end up at the bottom of your page okay so let's go ahead and click update okay so step number seven is to create a header menu so for the header menu we're going to be creating a logo that goes up at the top left and this is going to be done with an online software so you don't need to download anything and it's completely free and then we're also going to be creating a menu that goes on the top right and this is going to be things like services about gallery so on that people can click on and it will take them to different parts of the website so let's go ahead and do that right now okay so in order to create a logo first which is going to replace this little title right here we just need to go create one so let's just go up to a new tab and type in logomaker.com and that's logo maker without the e and then it's going to offer to give you this little tour but we're just going to close out because i can show you how to do it it's pretty simple so first off what we're going to do is grab a little symbol to throw in here so for this website since it's all kind of like night photography based i'm gonna go with kind of like a night owl sort of branding to it so i'm just gonna go grab an owl so all i want to do is just go to the search bar and type in owl and then click enter and boom we've got all sorts of crazy owls you could literally scroll through here just for ages and find so many owls so let's just go ahead and grab one at random usually simple is better so let's just go with this crazy looking dude here and then i will just drag that up a little bit move them off to the side you can do that just by clicking and resizing or if you grab right in the middle you can move it around and then i'm going to click on the text and then i will just type something in here so i'll do night owl and then i'm going to change this by double clicking and just go up to there's the font category and then the font family so if you go to font category you can kind of pick some things you can do fun and funky types of fonts and then over here is where you can select all sorts of fun and funky fonts uh you know whatever you want but i'm gonna go with kind of a similar um font as what i have on my website which i have philosopher and muli so i'm just gonna go back to simple and modern and then i'm going to go down and i'm going to find muli cool so now with this selected i can go over to the little color wheel and i can change the color here on the outside or i can just drag all the way to black right here so i'm going to create a black one and i'm going to drag this up actually let's do let's do night owl photography it's a little better cool so i will drag this up and i'm going to also make this a little bit smaller just kind of click and resize and get things where you want them something like that it's pretty good and if you click and drag you can select both and drag the whole thing around so i like that and as soon as you want to save this you can just click on the little save logo up here at the top right and then it will say you know do you want to buy it it will give you a very high res version but don't want to do that what we want to do is click on no thanks i'll download the low resolution file because the low resolution is more than enough to be uh fitting for this little header section up here we don't need a lot of pixels up here okay so it hit our downloads which is down here so you can just go to your downloads and find that but if you want i've also already supplied these in the follow along images so if you're following along with me you can find them in that folder so let's go ahead and put that logo up here so let's just go click on the little hamburger symbol and then go to exit to dashboard cool now from here just go up to your website and click visit site and then just click on customize cool so now if you just go down to header and then click on logo this is where you can upload that logo so we'll just click select logo and then we'll just go to upload files select files and i'm just going to grab it so i'll just do the black one so you can see it i'll click open and go to select and it's going to ask if you want to crop but i'm just going to click skip cropping but if you want you could actually you know what i've got a little white space over here i'll crop that off so there we go and i'll do crop image and cool so now just give it a minute boom there it is pretty sweet and you can actually change the size so if you do max width you can make it really small make it a lot bigger you know i kind of like small logos so let's just go with like a 200 like that and it's actually i just noticed a different owl than the one that i just showed you how to make but that's okay and you can see we've got this little bar up here that says place your content here if you want to get rid of that that's just a top bar you can add some extra widgets to that through oceanwp but i honestly don't use it so let's just go ahead and get rid of that so just click on the little back button and then back one more time and then go to top bar and then go to general and then just uncheck enable top bar cool so now let's go ahead and create a menu up here that goes in the top right so let's just go click on the back button and then back again and then just go over to menus right here and then we just want to create a new menu so just select create a new menu and just give it a name so i'm just going to call this primary menu or you can do main menu if you want and then where do you want it to go so top bar we got rid of that so you don't want to put it up there what we want is main which is going to be this section over here so just check main and then just click on next okay so now just click on add items to add items to that primary menu and we're going to do custom links so right now you'll see that pages is the one that's open and we've only got these three pages and one of them is a sample page so we're not going to do any of that we're going to do custom links but if you did have pages let's say you had a separate contact page or a separate about me page instead of having one all on your home page you could just add that here and then add that up to your menu but in this case i'm going to do custom links because i want to create jump buttons so first one i'm going to do is about if i can spell that right there we go and then the url i'm going to do hashtag about there we go and then i'm just going to click add to menu and then the next one i'm going to just do gallery and then i'm going to do hashtag gallery and then add to menu and then i'm just going to do contact and then again url let's do hashtag contact like that and then add to menu and then last one we'll just do let's do clients because we had a client section but again you can make these whatever you want uh so now let's just do hashtag clients and then just click on add to menu there we go so now if i just here let me x out of this thing at the bottom and then i'm just going to hide these controls here you can now see we've got about gallery contact and clients but unfortunately if we click on them nothing happens because they're well galleries hooked up that's the only one that actually is hooked up but contact doesn't work neither does clients or about so we need to go back into elementor and actually set where we want these buttons to go to so let's just open this back up and before we do that while i'm here i was just going to show you how to change this header color so we can just go to the back button and then back one more time and then just go down to header and then just go to general and then you can select the background color right here or you can even change the styles right now it's at minimal you could do transparent like that and you can see we've got this little white line here that we need to actually get rid of so we'll do header border bottom just uncheck that so now you can see we've got a transparent header which would obviously work better with a white logo but you can actually go in change this to top menu you know you can try out a bunch of different ones but i'm just going to go back to minimal cool so and again you can change the color so if you go to background color you can just change this to anything that you want but honestly uh bright colored uh headers do not really look that great so i recommend sticking with black or white so let's see what does black look like that's not bad kind of like black let's stick with black so let's go ahead and change this logo by clicking on the little pencil icon and i'm going to remove that and put our white logo in there so i'm just going to go to upload files select files and then grab the white one and then just click select and we'll just skip cropping and there we go now we've got our white logo which honestly looks a lot better and you can also change the hover color so these kind of hover with blue so if you just go back to the back arrow and then just go to menu you can then go all the way down and change the hover color so again we're in the customizing section for the header and we're under menu so just go to link color hover and then change that so you know orange changes to orange but i'm just going to go back to default okay so let's go up and publish our work and then now let's go hook up the rest of these buttons so let's just click on the x and then just go to edit with elementor okay so we've got about so let's just go to our about section and just click on these six dots which is around this section so the way you hook these up is this line right here this line is going to end up at the very top of the screen so you want to grab whatever is going to perfectly line up at the top of the screen like that so let's just grab the six dots oops six dots and then just go to advanced and then the css id we're just going to call that about all right update and then we've also got contact so we'll just go down to the contact section click on the six dots go over to the advanced tab css id we'll call that contact like that update and we've also got our clients so you could do what clients have to say and we'll actually put this as this actual widget so we want this widget to end up at the very top of the screen so we'll just go to this widget go to advanced css id we'll call this clients and then update so now if i open up a preview in a new window all of these buttons that are up at the top should be working so now we've got about which goes for our about we've got contact which goes to our contact it's looking good clients goes to our clients and then obviously the gallery was already working before cool so now you now have a menu with a logo everything's working properly okay so last but not least step number eight is to publish your website so to do this let's just go on back to elementor and we're just going to go up to the little hamburger symbol at the top left go to exit to dashboard and again make sure that you have saved your work with the update button so i'm going to exit the dashboard and then we're just going to go to dashboard and then at the very top you're going to have this little message that says your site is currently displaying a coming soon page once you're ready to launch click here so just go ahead and click here awesome so now you get this little congratulations message down here that says congratulations your site is now live and then you can just click there to view it alright guys so that was how to create a wordpress website using elementor i really hope you enjoyed this tutorial if you did please hit that like button it does a lot of good for me and also if you want more awesome website tips tricks tutorials literally anything website related then please consider subscribing to my channel you will not be sorry on my channel i teach all about how to create professional websites from home and there's always a new tip to learn so feel free to check out the rest of my content alright guys thank you so much for watching again my name is dale mcmanus from create a pro website and i will see you on the next video [Music]

Channel: Create a Pro Website

Views: 1,533,890

Keywords: how to make a wordpress website with elementor, make a wordpress website with elementor, wordpress website elementor, make a website with elementor, elementor page builder, elementor website, elementor wordpress, create a website, make a website, make a website 2019, wordpress website tutorial, make a website tutorial, elementor tutorial, elementor tutorial 2019

Id: 701pwm78Q90

Length: 96min 33sec (5793 seconds)

Published: Sat Jun 15 2019