How to Create a WordPress Website with Elementor | Step-By-Step For Beginners!

what's going on guys welcome back to create a pro website my name is levi hagan and today i'm going to show you step by step how to create a wordpress website with elementor elementor is an awesome page builder plugin that allows you to drag drop and build your website visually and it's easy to use so here's a preview of the website that i'm going to show you how to make so right off the bat we can see we've got a really cool logo right here along with header buttons in the menu we've got a video in the background of the hero section with a title and some kind of a button here you can click on any of these like if i click on origins it will take you to how it all began which is the origins we've got a post section we've got some initiatives here we've got a career section and you can scroll a little bit farther down to featured news with some fake articles and then a contact section in this video i'll show you how to get your very own custom domain name and web hosting for your website i'll show you how to install wordpress which is a free software we're going to be using to launch your website i'll show you how to install elementor and use it to customize your website exactly how you want i'll even show you how to create a logo for your website completely free without needing to download any software and it can be done in less than five minutes i'll show you how to create a custom navigation menu as well as how to create a working contact form for your website i'll show you how to make your website fully responsive for mobile and tablets as well during this tutorial you can use the right and left arrow keys on your keyboard to go forward or backward by five seconds i also put timestamps of this video down in the description so you can go ahead and skip ahead or go back to any of the steps at any time alright so now that you've seen what we're going to be building let's get started so step number one is to get a domain name and web hosting a domain name is just the address to your website it's what people will type in to get to your site so something like yourwebsite.com and web hosting is basically renting space on a server somewhere that's connected to the internet so that you can store all of your media and files on a website such as text pictures videos themes plugins etc and there are web hosting companies that have buildings full of these servers and they also offer you 24 7 support in case anything were to happen to your website if you want to own your own website and have a custom domain name for it then you have to purchase your own web hosting which i'll show you how to do in this tutorial and give you a massive discount code for it yes you can get a free website but it comes with a lot of limitations like you won't own your domain name it'll be something like yourwebsite.wix.com or squarespace.com or whoever is hosting the website for you or it might even be a random string of words or numbers that you don't even get to choose you also can't upload new themes in order to customize your website exactly how you want it there's usually very limited options you can't upload plugins to increase your functionality of your website you can't monetize your website with ads in order to make money from it and your website could be deleted at any time because you don't technically own it so this is why i recommend web hosting so in order to get it just click on the very first link in the description or go to createaprowebsite.com hosting and this is how you'll get that massive discount i mentioned this will take you to a special co-branded landing page that i have with hostgator.com now create a pro website has dozens and dozens of websites with hostgator because they're fast reliable and affordable and they have 24 7 support in case anything happens to your website now you can see right here that we've got three plans in front of us we've got the hatchling plan the baby plan and the business plan and i only recommend the baby plan and the business plan especially the business plan once your website starts making a lot of money if that's what you're trying to do with it but you can always upgrade later as you gain more traffic so for now let's start with the cheapest plan which is the hatchling plan so i'm going to go ahead and click on buy now and here's where you can register your very own custom domain name so this is where you're going to want to search to see if it's available and if you already have your own domain you'll just go ahead and click on this tab right up here but i'm going to go ahead and create my own so i'm going to go ahead and enter in something like create a pro website elementor.com i'm going to go ahead and click enter it's gonna ask if i really do want the dot com which i do perfect now when the search bar turns green that's when you know that your domain name is available and you can see down below that it's gonna offer a bunch of different options like dot com or dot club or dot site dot net but we're going to go ahead and stick with the dot com because it's the most professional looking and it's also the most common when people search for websites all right that being said let's go ahead and scroll on down all right you're also going to want to make sure that the domain privacy is on so just make sure that this box is checked right here now what domain privacy does is it protects your information like your email and your phone number and that way you don't get called by a bunch of solicitors and telemarketers who try to offer you different services it's quite frustrating and annoying so be sure that the box is checked right here all right moving on we're going to scroll on down to choose a hosting plan and you can see here that you can change your package type but it's already selected on the hatchling plan which we chose earlier so i'm going to leave it there and then on the right hand side we have the billing cycle which is set to 36 months and this is going to give you the biggest discount on your website for the hosting plan but you can also change this to 24 months 12 or down to 1 month now keep in mind you are paying for your domain for one year so if you want you can do the 12 months for the 3.95 it's not the biggest discount but it is the same amount as your domain name i'm gonna go ahead and go with the one month keep in mind you are paying for this upfront so if you go for the 36 months you're paying for all 36 up front so i'm choosing the one month and let's scroll down to create your hostgator account so i'm going to go ahead and enter in my email address and a password and then a backup security pin and you're basically just creating an account with hostgator right now see you guys in a second and then just go ahead and scroll on down to enter your billing info and you can use your own credit card or your paypal account i'm going to go ahead and enter in my credit card information here so i'll see you guys in a moment okay now that we've filled out our billing information let's go ahead and scroll on down to the additional services section right here and what you're going to want to do is actually uncheck the sitelock essentials and the backup your hard work because i've got videos on the channel that show you how to do this for free so we're going to go ahead and remove them all and i've got links those and i'll put them in the description now you can scroll down and you'll see the coupon code right here that says create a pro website and you want to make sure that that's in there because that's going to give you the massive discount that i've been talking about and again this is my affiliate link so i do receive a commission whenever you use it but it also saves you money and it really helps fund these free tutorials that we put out on youtube so it's a win-win for both of us all right now just go ahead and review your order details down here below we've got the domain registration for one year and it goes from 17.99 down to 4.99 we've got the hatchling one month plan which is paid up front and it goes from ten dollars down to seven and then the hosting add-ons which is the domain privacy protection which hides your email and phone number from solicitors and that's the one-time fee of 14 and it comes down to 29 and 10 cents which is not bad for creating your first website so i'm gonna go ahead and scroll down and click on checkout now first we have to agree to the terms of service and privacy policy and now hostgator is setting up your account so we're just going to give it a minute all right now that hostgator has finished creating my account we can go ahead and click right here to view our own dashboard all right now that we are in the dashboard we can go ahead and move on to step number two which is to install wordpress so in order to install wordpress all we have to do is click on the button that says install wordpress which is right here and then we're just going to click install now now you're going to want to first make sure that you're on the newest version of wordpress which we already are and also that wordpress is being installed to our new domain that we just created which is right here and it is so we're gonna go ahead and scroll on down next we've got the site settings and so we can change the site name we're gonna go ahead and change it to something like elementor website and then we'll also change the site description to something like all right and then we'll go ahead and scroll on down a little bit more to the admin account and we're going to change the admin username to my name and then create your own password here and you're going to want to change your admin email to the same email that you logged into hostgator with okay let's go ahead and scroll on down a little bit more now you can choose your own language which i speak english so i'm going to leave it on there and we're going to go ahead and skip the rest of this because i'm going to show you how to select the plugins for the website and also choose your own theme so we're going to skip on down to click install at the bottom now wordpress is installing so we're just going to give it a minute all right from here we can go ahead and start logging into our new website so you can see right here that it shows us our administrative url which is just going to be the domain name that you created dot com slash wp dash admin now this is going to be very important and you're going to want to remember it because this is what you're going to use to log into your website every time you want to edit it so you can either remember it or go ahead and type it into the hyperlink and then just create a bookmark so i'm going to go ahead and open my administrative url in a new tab if you get taken to a page that says your site does not exist or that your connection is not private or anything other than the wordpress sign on page which looks like this then that just means that your website has not propagated yet and what that means is that hostgator now has to send out your new domain name that you just registered across the entire world to let every server know in the world that your new domain is now registered and is live this process can take anywhere from 30 minutes to an hour and sometimes it might only take a few minutes or an entire day so just keep refreshing the page to check the progress once it takes you to a page that looks like this you'll know that it's ready alright so now that we've installed wordpress and our website has finished propagating we can go ahead and move on to step number three which is to activate your new theme so first let's go ahead and log into our wordpress account once you log in it's going to take you to the dashboard for wordpress and while we're here let's go ahead and clean up our dashboard just a little bit by dismissing some of these and toggling the rest there looks a little bit more clean i like that okay so first let's go over and hover over our website name in the top left corner and you'll see when you hover over it it gives you the option to visit your site so let's go ahead and open that on a new tab and take a look now you can see that we have our default wordpress theme here which isn't the best looking so now we're going to go download astro which is a new theme so let's go ahead and close this tab and once we're back on the dashboard go to the left side menu and go down to appearance and then choose on themes so the default theme is 2020 but we're going to go ahead and change it to astra so we're going to go down to add new theme and on the right hand side we'll have a search bar and we're going to type in astra all right and you can see right here we have astra which is a much better looking theme and it works great with elementor so i want to go ahead and click install first and activate after downloading and activating astro we can go back and see that the website looks completely different so top left corner click visit site on a new tab and here we are much different but it's still far from being ready and it's rather plain so let's go ahead and start editing it so let's go ahead and close the tab and now we can move on to step number four which is to install and activate plugins before we move any further what actually is a plugin it's like an app on your phone it's downloadable software that allows your site to do more things so think of the add new plugin option as the app store so let's go to the so called app store right now we'll go to the left hand menu and drop down to plugins and click on add new alright and you can already see that we have a bunch of different plugins or apps if you will down below but we're going to go to the right hand side for the search bar and type in elementor all right now we actually have two of the plugins we're going to download right here so first elementor website builder which is the website builder we're going to be using for this video and then the second one is the essential add-ons for elementor and this gives you a bunch of different options and widgets that we can use within elementor so we're going to go ahead and download both first i'm going to download elementor so click install now and activate okay and then i'm going to go right back to the plugins tab and click on add new and we're going to go get the essential add-ons plug-in so right hand side and type in elementor again which mine is right here so i'm gonna click on it and here it is essential add-ons for elementor click install now and activate all right next up we have step number five which is customizing your website now this is the meat and potatoes of the video and this is where i'm gonna teach you how to use elementor and create a website from scratch then we're gonna download a template that i've already created and we're going to edit it together so first up in order to create a home page we first have to create a page so first let's go to the pages on the left side menu and click on add new and we're going to go ahead and close out of this and this is our first page so i'm going to go up to the title and i'm going to call it home page done now this is an important step you want to go over here to the right hand side let's go ahead and close some of these there we go and we're wanting to go to page attributes now this is an important step you want to change this template setting from default template down to elementor full width perfect now let's go ahead and click on publish and publish again all right now that we've created a home page we need elementor to understand that the home page we just created needs to be set as the default home page sounds a bit confusing but i'll show you how to do it right now so let's go ahead and go back to this top left corner and go back to wordpress so next we're going to go to the top left corner hover over our website name and visit the site on a new tab and so here's the website again i'm going to go up to the top left corner and click on customize now this is the customization tool for wordpress we're not necessarily in elementor just yet but first i want to go down to homepage settings and we're going to change your home page display from your latest post to a static page and then we have to select that static page which is going to be our home page that we created all right and now you can see that we've got a header up top and a footer down below and nothing in between so they're just sandwiched up against each other so this is the part where we get to edit the website and put things in the middle so i'm going to click publish all right now that we've set up our home page it's time for us to finally edit our website in elementor so let's go ahead and go click the x button in the top left corner to go back to the dashboard one more time top left corner let's click on elementor site so now we're going to go over to the left hand side and go down to pages and click on all pages and then we're going to go down to the home page that we created and click on edit and now that we're back in the editor we can see a new button popped up in the top left corner that says edit with elementor and we're just going to go ahead and click on it and elementor is opening up okay and now we're in elementor now this is the part of the video where i want to add a little twist we're going to take a look at one of the most notable users of wordpress and we're going to attempt to make our website look similar as you can see general motors is one of the most notable users of wordpress they use the same software that we're using to edit right now so let's go ahead and take a look at their website they've got a giant header image here with a button some pictures that overlay and grow when you hover over them scroll down a little bit further they've got some posts that you can click on it looks like these are their different types of initiatives they've got a career section down below and a feature news section as well so let's go back to elementor and try it so first of all in elementor you've got different widgets that you can enter into your website and they always have them right here so for instance we've got a text we've got heading we've got an image video buttons and everything that we can put into a website so before we get into actual widgets let's talk about the layout of a website there's a hierarchy that we need to go over and first of all it would be sections and then you have columns inside of sections and then you have widgets inside of those columns so first let's go ahead and create an actual section we're going to click on the red button right here to add a new section and we get to select a structure and so what this means is do you want one column to be in the center two columns that are side by side three columns and so on or if you want to have two columns one is bigger or one is smaller on the left you can do that and you can see that they've got a bunch of different layouts i'm going to go ahead and choose the first one which is just going to have one column and here we are so when you hover your mouse over this blue section here you can see that the square entails the entire section and then when i hover over the gray dotted line this is a column so the blue is a section the gray is a column and then if i wanted to add a widget inside of the column you can click on the six squares up here in the top right corner this is the rubik's cube kind of looking square and it takes us back to the widgets and so for instance i can take an image widget and i can stick it inside of the column by just clicking on it dragging and dropping and now i've got an image which is a widget inside of a column and that column is inside of this section i'm going to go ahead and remove the image now to edit the image you can click on the blue little pencil icon in the corner edit the image just giving a little tutorial so i'm going to say got it i'm going to right click on this and i'm going to delete the image all right so now we're just back to our section with our singular column now to edit a section you just click on the six little dots of the blue box section right here so i'm going to click on it and so you can see on the left hand side that we've got all of our settings that we can do to change and customize this we've got a layout tab a style tab and an advanced tab under the layout tab you can change things like the content width which would be the width of the columns because that's the content of the section you can change the column gaps you can change the height which i'm actually going to change to minimum height and then i get a slider and i can change the size of my section so i'm going to go ahead and make it something like this and you've got column position which right now it's in the middle of my column but i can change it to the top and now it moves up to the top or i can change it to the bottom but i'm going to leave it in the middle you can also choose stretch and it makes it a lot bigger let's go back to middle you can change the vertical align of your column from the top and now everything in there is going to be inside the top of the column but i'm going to leave it to the middle and you've got the overflow which you can hide or you can leave default and so what overflow means is if you were typing text into this column and you got to be too much you can either say default which it would start overflowing the edge and you can still see the text or you can click hide and the text would stop where the column stops all right then you can go to the style tab and we can actually choose a background for the entire section so we can go over to normal and we can choose between a classic color and we can choose a color like this and we can make it whatever color we want or if i hit reset i can choose an image to put in the background as well and we'll do that a little bit later you can also change different background types as well you can choose a gradient a video or a slideshow and we'll get in all of these settings later finally you have the advanced tab which is also pretty important for the margin and padding this is how you're going to move things around and i'll show you later and you've got motion effects which add these cool effects whenever you scroll over these we'll go into those later as well let's try editing this section from scratch so first i'm going to go over to the rubik's cube icon right here in the top right corner of the menu and this will show me all of the widgets that we can enter and so first i'm going to enter in a title heading right into the middle and now that we have a title you can edit it in two ways you can either click right on the website and you can highlight and change your text or you can go over to this left corner over here and you can actually type in your own text here which i'm gonna do all right now i'm going to go over to the style tab and i can change the text color i'm going to change it to white which you can't see right now so i'm actually going to change it to black first just to show you the different text options you can do the typography which is how you actually change the font style the spacing and everything so that's pretty important we'll click on the little pencil icon and you can change the family which is your font style and you can change from tons and tons of different fonts i'm going to leave it as this you can go to the size and you can drag the slider and change the different size of your title something like that you can change the weight and the weight is going to be how thick the letters are so if you go down to 200 they look very thin 100 would be even thinner you can go all the way down to 900 but i like 600 you can transform the text so you can make it all uppercase or you can capitalize each first letter which i like actually i'm going to change it to uppercase elementor website you can change the style which would be normal italic i'm going to say normal actually i'm going to change it back to default and then you have decoration which is your underline over line which is on top or you've got your line through i'm gonna leave it regular you can change the line height which just moves the box around and the line spacing which actually makes them spread out just a little bit more i actually kind of like that so i'm gonna leave it just like that all right so that's typography you can add a text shadow by clicking on the little icon box you can choose the shadow color so for instance let's make this a bright red shadow just so it's easy to see you can change the opacity right here so you can make it all the way up or almost invisible so let's change it to something like all the way up just so you can see what i'm about to do oh click right there alright and then you can change the blur which makes it even more blurry or you can make it practically clear as day so you can read it which i like a little bit of blur you can change the horizontal position so you can drag it over from one side to the other and then you can change the vertical position so you can drag it up and down and just so you know if you change the blur down to zero it's practically the same text so something like that but for now i'm just going to go ahead and clear it all right and you can also change the blend mode but we'll do that another time next i'm going to go back to content and i'm going to actually change the alignment of my text to be in the center and i think that looks pretty good so let's go ahead and move on to editing the section i'm going to go back to these six dots right here in the top over on the left hand side we're going to go over to style and let's add a background to this section so under background you can see that you can change the images and i can choose classic gradient video or slideshow right now it's on slideshow i'm going to change it back to classic for just one image so you can go over to upload files and select your files and i'm going to choose this image so click open and it'll upload the file to your website and it's ready to go so just click insert media in the bottom right and now you've got your image in the background of the section so let's make it a little bit more presentable so first i'm going to go over to position and change it to center center and as you can see it takes the center of the image now you can change it to center right and it'll move over to the right or left or top or bottom however you want it but i personally like center center and then i'm going to move down to size and i'm going to change it to cover and that's going to stretch the image to just be one type not multiple tiles and it'll stretch the image to the background of my section the last thing i want to show you is the attachment if you change it to fixed it'll add this cool parallax effect where as i scroll down the image stays in place so if i were to add another section here real quick just to show you guys i'm going to delete this right afterwards but let's just make this one pretty big just like that changing the height okay and so now if i were to look at this section i'm going to go ahead and click those six dots if i were to scroll down you can see that it actually stays in place rather than if i click on the attachment and say default it stays where it is see the difference so i'm going to leave it as default for now let me go ahead and delete this section by just clicking the x down here and the section is gone all right so back editing the background here now i can close background and i can go down to background overlay and i'm gonna go to classic and i'm going to add a little bit of a darker overlay to the image by choosing the color and changing it to a black overlay just like this now i can change the opacity here but i can also change the opacity right here and so i want just a little bit darker just like that yeah that looks good alright so let's go ahead and edit the title again so i'm going to hover over the title and go over to the blue icon to edit it i'm going to go over to style and i'm going to change the text color back to white and now it's easy to see let's go ahead and enter a subtitle as well so i'm going to go back to the rubik's cube little icon in the top corner of my menu i'm going to go down to text editor and i'm just going to drag it and place it right underneath now you can see that that blue line hover appears whenever i have my icon here i can also place it above or below so i'm going to place it below perfect and now i've got my subtitle right down here that we can edit as well so click on the blue icon and now we can change the text to something like create a pro website with elementor all right and then i want to go up to style i'm going to change the alignment to center and so you can see it's right here in the center now so i'm going to change the text color to white and then the typography let's edit as well i like the font just the way it is you can change the size if you want let's make it a little bit smaller something like that we can go to the weight let's do 200 so if i make it 200 i'm actually gonna make it just a smidge bigger and then i'm going to transform it into uppercase as well create a pro website with elementor and then i'm going to change the letter spacing just like that cool i think it looks good just like that alright so now let's try adding a button but first i want to make my section just a little bit taller so i'm going to go click on the six dots to edit my section again and i'm going to go to layout and for minimum height i'm going to make it just a little bit bigger something like that all right so now let's click on the rubik's cube in the top right corner and add our button so i'm going to click and drag on the button and place it right underneath the subtitle and so now we've got our button here so you can edit the button text by clicking on it or you can go over to the content and click on the text part right here and change it so let's try create now now you can change the type but i usually don't i like to edit the button myself so we can change the size from small medium large or extra large but i like small we can change the alignment to center so now it's right underneath our title we can actually add an icon into the button and so we can pick from a ton of different icons so let's just for instance choose the right arrow and click insert and so right now it's on the left side of the text but you can also change it to the right side by saying instead of before you can change it to after the text and now it's on the right side you can change the icon spacing to make it farther away or really close but for now i'm actually just going to remove the icon perfect so let's go over to the style tab and for the button you can change the typography and so you can edit the text of the button to be a different font however you want but i've already shown you how to do that i'm going to leave it the way it is you can add a text shadow as well which would be on the text not the actual button if you want to add a box shadow that would be an actual shadow behind the button and so for instance if i were to choose red at full opacity you can see that now i've got a shadow around my button but i'm also going to remove that you can change the text color of your button to be a different text color like red but i actually like the white and you can change the background color which is the actual button color so let's change it to something like a blue something like that i like that alright now if you like a button to look square like this that's totally fine but personally i like to have a little bit more of a rounded edge on my button and so the way you can do that is actually go over to the border radius and you can just increase it by a little bit now if you look at the button it changes it into a circle which is kind of nice and i'm actually going to reduce just a little bit actually i kind of like it at 22. there we go and so now i've got a nice looking circle button right here now the final thing you can do to customize your button and make it look interactive when they hover over it is to actually go to the hover settings and now anything you change in the hover setting will be different from the normal setting and anytime they hover over your button this will happen so you can change the text color or the background color so i'm actually going to change the background color but first i'm going to pull the same blue that i used for the background color and i'm going to copy the hex code by hitting command or control c and then i'm going to go over to the hover setting and set that as the same background so control or command v and so now i've got the same color and then i'm just going to make it a little bit more on the white side just like this a little bit more desaturated kind of a lot more but all right and so now anytime you hover over the button it changes to that different color that i set as you can see you can also change the text color to be if you want black and so when you hover over it changes to a black text but i actually like leaving it white next you can change your hover animation which is really important i personally like to use grow but you can use different ones as well for instance you can use pulse and so when they hover it'll bounce like that which i think is a little bit cheesy so personally i stick to grow but you can also use shrink a little bit smaller which that one's not too bad but this is my favorite and you can see it just grows a little bit just like that and i think that looks great so now that we've added a title a subtitle and a button let's go ahead and save our work and the way you do that is you go to the bottom left-hand corner and you click on this green update button right here and that updates your website and saves your work and i like to get into a habit of updating my work often so that i don't have to come back and accidentally lose any progress alright now the last thing i want to go over before we download a template is to go over motion effects so let's go ahead and edit the section by clicking on the six dots in the top corner we're going to go over to advanced and scroll down to motion effects now motion effects if you click right now it's on default but if you change it to something like fade up the whole section will fade up from the bottom or you can choose a different one like fade down it'll fade from the top or right or left you can choose one like zoom or rotate which rotate might be a little cheesy yep there it is you can also do another one that i like to use which is the sliding function this one isn't too bad so if you slide in from the left or slide in from the right but for now i'm just going to say fade up from the bottom just like that you can also change the duration of the fade and so you can make it slow or you can make it fast just like that i actually like fast for my home page i think it should be up and running when they open the website pretty quickly but you can also change with an animation delay and so if you change it by milliseconds and this is a delay where the website will wait this amount of time until the motion actually takes effect so if i say milliseconds it will wait this long and then bring it up which is important for when you want to change your motion effects to do different things like let's say you've got three different sections and you want them to come up one two and three so you can change the delay on some of them which is important but i'm going to go ahead and go back down to zero there and i'm going to click update to save my work while we're on the section we can also change shape dividers so if we go over to the style tab and we go down to shape divider we can enter in some kind of a shape down here that divides these two sections and so for instance if i choose the bottom because the bottom is down here of the section that i'm editing i can change the type from none to a whole bunch of them so for instance if i do tilt it'll add a tilt and i can change the color here something like this and then you can change the height of the tilt you can flip it from one side to the other and then if you for some reason have like a button or some other widget that's down here you can change this shape divider to be in the front and if you click yes then that button would be pushed behind the shape divider and you wouldn't be able to see it anymore and that's how you change it so i'm going to click update to save my work actually i'm going to remove it and click save now that's about all the editing that i want to do from scratch so we're about to download the template that i created for you all and we're going to edit it together but first i want to show you one other thing that elementor provides if you scroll on down here and you are going to add a new section you also have the option to click on this gray folder here to add a template so if you click on it elementor library has tons and tons of different templates for your page you can choose a home page you can choose landing pages a product page it doesn't really matter and they've got tons and tons of them and they're really cool you can always click on one to preview it so this is what this page looks like and you can actually download this and edit it looks pretty sweet and all you would have to do is click on the insert button right here and it would straight download it to your website i'm going to click back to library though one other option that elementor provides is you also have blocks so you have pages and this shows you the entire page but if you want you can actually download just a specific block which would be just this white section right here for instance so if i go back to library and click on blocks these are smaller pieces of the website that you can enter in and not change up the entire page things like this little facts section they've got contact sections down below frequently asked questions things like that so that's pretty cool now that being said let's actually download a template for our own i'm going to go ahead and close out of this go up to the top here and i'm going to delete all of our hard work right here by clicking the delete section button which is right next to the edit section and you can also click this one which is add section and it will add a section above it i'm gonna click delete and now we're starting from scratch again so i'm gonna click on the gray folder to add a new section from a template and then i'm gonna go over to this import template section right here i'm going to click select file and open up the template and click open all right and so now we've got the create a pro website elementor from levi template and we'll just click on insert and yes and so now the template is downloading into your elementor so we'll be able to edit it together i'll place a link for that downloadable template in the description down below as well as the images so that you can follow along alright so now this is the template and we've got a gray background so let's go ahead and first edit this first section so hit the top six dots up above and go over to the left side menu we can go to the style tab and right now the background type is set already to classic so now we can just pick an image and i'm going to use the same image that we used before so this car right here and click on insert media all right and it looks like i've already got it set to center center and to cover so that's good but i also want to add a bit of an overlay so i'm going to click on background overlay and it looks like it's already set for black so that's good i'm just going to change the opacity to be a little bit darker just like that all right i think that looks good so i'm going to click update to save my work and so now we've got our title section here with a button that we can hook up it also already has that hover animation for grow and a different color so that looks good so let's go ahead and scroll on down to the next section and it looks like we've already got the how it all began this is like an origin section so we've got the images that grow and the way that you get them to grow is you can click on the blue icon here to edit the image you can go over to the style tab and you can go down to hover and when you're on the hover setting you can choose your hover animation which it's set to grow already just like that and so then it hovers and grows we can also edit this one by clicking on the blue icon here and we can choose the images so let's go ahead and insert two images now go to upload files and select files and let's choose the typewriter and then insert media so there's our typewriter image let's go ahead and insert another image up here so click on the blue icon under content we'll go to the image and we'll click on upload files and i'm going to take this one and insert media all right so we've got this rich car picture in the background we've got the typewriter over here looks like we're good to go one more thing i want to bring up in this section is we've got a little anchor right here and that's actually a widget that's called a menu anchor and so the way that that works is you can go over to the rubik's cube section right over here and in the search bar on top you can type in anchor and so here's the menu anchor you can click and drag it to wherever you want you can place it above or below but for now i'm going to leave it off so you can go over to this menu anchor and you can click on it and we can actually edit it and you'll see that on this left side menu under anchor it shows you the id of the menu anchor now this is important it says blog because i clicked on the blog menu anchor down here in the next section and so you can title this whatever you want and you've just put an anchor on your website where you can set a button to go to the specific blog section right here and it will take you to the appropriate section so let's try that right now let's scroll up to the top and we've got a button that's not hooked up yet i'm going to go ahead and click on the edit icon right here and under the link section this hashtag is very important if you don't have the hashtag it'll ask you for a hyperlink in case you want to have this button take them to a different page but i want them to go to a menu anchor so i'm going to insert the hashtag and i'm going to enter in blog which is the id for the other menu anchor let's go ahead and click update to save the work now let's click on the preview icon which is right next to the update button it's going to open up our website on a new tab and now we get to preview so i'm going to go ahead and click on my button enter text and it's going to drop me down to the post section right here which there's no posts at this time so it works so let's go ahead and close the tab now i'm going to go ahead and remove the blog id right here because i actually don't want this button to go to the blog but you can have it go wherever you want and click update alright so i think the origin section is complete and if you actually click on the menu icon here this anchor is set to the word origins which is the actual name of this section so it looks like we're good to go there and so we'll set up a button to go to it later let's go ahead and scroll down and now we've got the post section so i already have a widget in this column you click on the blue icon right here and it's a post grid and so this post grid displays any posts that we have saved in our wordpress account so in order to display them we first have to create them so let's go ahead and do that right now just want to make sure that you're already updated so we don't lose any work but i already am so i'm going to go back to the dashboard and then you'll go to the left hand menu over here and click on posts and add new now i'm going to go up to the title and type in post number one and then i'm actually going to go over to a new tab and just search dummy text and i'm going to pull up just the most common dummy text right here i'm gonna go back to my post and paste it in just like that all right and so we've got a fake blog post right here i'm gonna go over to the top corner and hit publish and publish again and we're done so now i'm gonna go ahead and create three more posts so that i have four so i'll see you guys in just a minute all right guys welcome back i went ahead and created all four posts right here and what i'm gonna do is also trash the hello world post which comes automatically with elementor so i'm just gonna remove it like that perfect so now i've got all four posts so i'm going to go back to elementor where we were editing the post section right here i'm going to go all the way over and edit it with the blue icon opens up the menu for the post grid i'm going to go to the source i'm going to change it to posts just like that and automatically it shows me all four of the posts that i just created right here and so you can change the amount of posts per page you can offset them order them by you know different ways but right now i like the way how it shows one two three and four and then of course depending on your website you can actually create real posts but these are just placeholders for me and then again you can see the little menu anchor icon right here if you click on it i went ahead and put another id and this would be for the blog section and so that's what this is it's a blog section all right another thing that you can do for the post section you can click on edit you can go to the style tab you can change the selected style from three different options you've got default which looks like this and it shows like the little picture icon in case whoever made the post actually has like a picture an account but because they're fake and i don't have any account pictures i chose number two but you can also check out number three which does it a different way just like that personally i like number two you can change the post background color which mine is white but you can make them whatever color you want you can also make them transparent by choosing your opacity and changing it and as you can see it's a light gray background so that's why they changed a little bit light gray but i like white and then we can change the spacing between the items and so if i increase this from 35 it creates more space in between them but i'll go back to 35 just like that you've got the border type and you can change if you want like solid or something like that and you can actually change the width and see now they've got borders but i'm going to change it back to none you can do a bunch of different ones and then you can change the border radius which just like a button if you don't already have a border and you increase the border radius but that border is non-existent it's just going to curve the edges and so for instance if i go back down to zero you can see that they're rectangular now and so i liked a little bit of a curve on my post widgets you can also add a box shadow which you can see that i already have it here and so it's the exact same as when i was showing you the text shadow before you can change its position horizontal and vertical you can make it more blurry or not and you can change the spread which is kind of like blur but it just widens that out a little bit as you can see or shrinks it and so i'm just going to hit command z to undo just like that and we're good and you've got a whole bunch of different options that you can change down here for style but i'm not going to go into them right now but i recommend you can go back and play with them later so i'm going to click update to save my work all right now that we've edited our posts section let's go ahead and move on down to the it looks like the initiatives or categories section right here and so it looks like in this section i created four individual columns right here and so if i were to add a section you can see just like this i can select add new and i can choose the exact same layout that i have right here and it will make four individual columns as you can see and then i just changed the height to be this high so let me just go ahead and close that out and so from here i can just go ahead and edit the column and insert an image into the background so i can go to style and change the image background go to upload files and remember these are going to be down in the description below so i'm going to choose this one first actually i'm going to go ahead and upload all four at the same time and so you can choose and this one right here just by hitting command or control and clicking on whichever ones you want to add at the same time and click open and it'll upload all three and so i've got a total of four and so i'm going to choose this one first insert media and there's the first one now let me go ahead and insert the second one go to the style tab click on image and insert this one and then i'm going to click on this column to edit it go to style image and click on the tires and insert media and then i'm going to click on the fourth section click on the column go to style click on the image and insert the final image and you can see that i have them in the vertical orientation for these images that way it fits better and there we go then i've got my four images and it looks like there's already a background overlay that comes with the template that i created but let's go ahead and change that right now just to play around with it so while we're in the background tab we'll actually close it and go down one to the background overlay and as you can see the color is already a bit more of like a brown color i mixed red and looks like some more dark black here to make it more of a brown overlay just because i thought it'd look better with the dirt and the whole eco-friendly look and so you can choose that based on the images so i think these two i have a bit of a blue overlay and then this one i chose a little bit more of a dark red overlay because it kind of matched the car and so you can change the opacity here oh looks like i'm editing the right side now but as you can see it gets darker or lighter and so i'm going to go right back to 50 percent just like that and that's how you change the opacity of the background there and if you click on the edit column button again you can go to the center center position and you can change it to however you want just like we did earlier and change the attachment as well if you want it to be fixed so just like that as i scroll but i don't like how that looks i like all four of them to be right next to each other just like that all right so let's click update to save our work all right now that this section is done and of course you can enter in your own titles here for different initiatives or different sections let's go ahead and move on to the next one so it looks like we have a giant image in the background so let's go ahead and take care of that right now by editing the section with these six dots up here and go over to style and for the normal background we're going to choose the image and go to files and select files and i have it right here and click open all right and click insert media now for this one as you can tell as i scroll it stays in place and so that's obviously on the fixed attachment and i've got it center center and on cover size like we were talking about earlier when you're inserting images so it looks nice and then here we can also click to edit this title you can either triple click on the actual screen and edit it here or you can click over here into the content section and edit but i'm going to edit right on the site change it to something like then we can also edit the button by hovering over and clicking on the blue icon pencil and for the button text which again you can also edit right on the button you can click here as well and edit perfect and then again right here in the link section you can click here and you can insert your own menu anchor id or if you remove the hashtag you can insert a hyperlink to a completely different page and take them off of this one but for now i'm just going to leave the button blank but i'm going to leave the hashtag there so it's just an empty placeholder all right i think it looks good and the hover animation is there and you guys remember how to edit the hover animation so now i'm going to go ahead and click on update to save my work for this section by the way i'm not entirely sure if i went over it before but you can actually edit to have this little overlay of a background by clicking on the section excuse me the column and you can go to style and for this one i went to the normal background and i just selected a color and so it's just a gray color right over here but you can make it whatever color you want there we go i'm going to go back to the gray and you can also change the opacity and that's how i made it kind of clear just like that all right all right let's go ahead and move on down to the next section and it looks like this is the featured news so from here the title looks good i want to go ahead and put the logo for our website right here so let's go ahead and create a logo right now we're going to open a new tab and type in logo maker but without the e dot com and click enter and i'm going to click on create new design now it's going to give you just this little instruction video but we're going to close out of it because i'm going to show you how to use it and close out of that as well all right so this is one of the best free logo makers that i've seen out there you can go ahead and search in this top left corner from a million different icons and so if i enter in something like instagram for instance i'll get a ton of instagram logos or if i want i could type in something like camera that's a little bit more generic and i'll get a bunch of camera icons and there's tons and tons of icons that i can use but for now i'm just going to go back to canvas all right but because our website is car themed if you look through i'm going to go ahead and choose a logo that looks like an engine so i'm going to go up here and type in engine and get to choose one from here but i actually already chose one earlier so i'm just going to paste the number and this is it all right so we can drag and move the logo wherever we want it and you can click on these three dots and actually have a few more settings to it like sending it to the back or to the front or something like that but for now i like the way it is you can look over here on the left hand side and you've got some basic functions like you can enter in text random shapes or use the paint bucket to fill in spaces so i'm going to use text i click here and it's automatically going to give me some text to edit and so i'm going to name it something like all right something like that create a pro website elementor and so if you click on this icon right here you can actually edit the text a little bit more like you can change bold underline everything like that so i think i'm going to change the letter spacing to be a little bit farther out just like that i think i want them to the side let's make this a little bit bigger drag it over i think that looks good and you can also click and highlight the text and you can come up here to the top and you can choose a category for your text so you can do scary and dark pixel monospace handwriting fun and funky but personally i like all of the fonts that are in simple and modern and then you can click on the actual font family and then you can actually choose your font but i'm okay with the one that's on there right now so i'm going to leave it but let's go back to editing the text and then i'm just going to bold it just like that now i'm going to change the color of my text to match the actual icon and there we go i think it looks good so let's go ahead and go to the top right corner and you can click on the save logo now it's going to ask if you want to pay 19 for the high resolution file right up here but honestly i'm just going to say no thanks download low resolution file because what we're using it for does not need to be big and it's going to download right now looks like we're good to go now i'm going to go ahead and move this into our website so i'm going to go back to elementor and i'm going to go click on the image right here i'm going to choose the image upload files and select files and then we're going to go ahead and choose the logo right here and click open perfect and so i'm just going to hit insert media and there's my logo i think it looks good i'm going to go ahead and change the size just a little bit so i'm going to go to style and then i'm going to drop down to the width and the height but really you can just drag the width and change the size so i'm just going to drag it down just a little bit right there i think it looks good all right and now we can insert an image right here for the featured news so we can click on the blue icon to edit go over to choose image upload files and select the file and select the business image right here and click open and insert media perfect so now we've got our image right here and it's looking good and then we've got our fake articles on the side as well as our logo for the website and so the way that i made these fake articles was i just entered in a title text right here and then i duplicated it and created another title text right here but then i just changed the weight of the text which you remember how to change the typography and then i just change it to subtitle that's what it says now this right here is a divider widget and so i'll show you how to do that one right now you go over to the rubik's cube icon and you select divider and you can drag it over here i'll just put it right underneath it and so it inserts a line divider like this and so you can edit it on the side by clicking on style and you can change it to dotted double dashed or curly or anything like this or zigzag for crying out loud but i like solid because it looks the most professional all right and then you can change the width which is how long the line is and so i'm going to drop it all the way down to i think it was 17 was the other one yep exactly on the dot and then you can change the alignment as well to center or right but i'm going to leave it on left and then we can go to the style tab and so under the style tab you can see you can change the color right here and you can select something like red if you want and it'll show up as a red line but i'm going to undo it by hitting ctrl or command z and then you can go over to the weight and you can click and drag it and it'll make it a lot thicker of a line just like that but i'm going to drop it back down to like a 2 something close like that and then you can change the gap which is just how much space the divider actually provides but i'm going to go ahead and just command z as well and undo all right and so that's how it works i'm going to go ahead and delete this divider by right clicking on the blue icon and hitting delete and it's gone and so that's how i put together these articles and then this right here is just a text paragraph but you just do the text editor right here and you just click and drag and place it there and then you can edit your text i'm going to remove that as well all right and so finally i'm going to show you how to edit these progress bars right down here and so if you click on one of them by hitting a little icon here you can edit the progress bar but i'm going to show you how to make one again from scratch so go to rubik's cube and in the search bar just type in progress and you'll see it pop up right here so you can click and drag from the progress bar and place it so i'm going to just put it right below at the very bottom there we go and so this is what it looks like when you first place it in and so you can actually change this text so i'm going to click on the blue icon to edit it and you can see you've got a title which is my skill and that's right here and then you've got the inner text which is web designer which is right there so i like to just delete the title and it removes that top line and makes it just a progress bar and so i like that so now i'm going to go back over to web designer and change it to something like stock prices and then from here you can change the percentage by dragging this line right here and so i can make it 30 let's go ahead and make it like 40 or 50 or something like that there we go 49 and then you can change the type which is just kind of settings for like presets but i never really touch those and you can change the title which we already removed so you can go back to style and this is where you can change the color to something like pink or something but i'm going to command z that and then you can change the background color as well you can change the height and make it tall you can change the border radius and make it round but i'm going to undo both of those and then you can change the inner text as well which is your stock price's title and so you can change the color of the text and also the typography but we went over that earlier so i'm not going to change it all right and i'm going to leave that one there so close the progress bar and let's just click update to save our work all right and so now that we have finished this featured news section with our articles on the side the progress bars and the image and then our logos in the top corner here let's go ahead and move on to step number six which is to create a contact form so let's go ahead and click on the red add section button and let's try two columns but i want one to be bigger and one to be smaller just like this and so for this first column i want to enter in a map widget so let's go to the icon up here and we can search map or just click on google maps right here and drag it over into the first one and it automatically enters in our own map now from here we can click on the blue icon to edit the map and we can change the address triple click and change it to austin which is where i am and so it's going to show austin right here and then we can also change the zoom which i'm going to zoom out just by one so it shows the surrounding area of austin as well so just like that and then you can change the height of the map as well to be different sizes so i'm going to undo that one i think that looks good so now over here we can change this to be the title section with some multiple icons and so i'm going to go ahead and go to the rubik's cube again i'm going to click on title so now we can change the text right here by triple clicking and change it to contact us and let's change the style to be black font just like that i like the typography the way it is but i'm actually just going to change the weight down a little bit to like 300 actually 200 just like that and so let's go back to the rubik's cube section right here and let's enter in an intersection so what this widget does is it inserts into this column an actual section like this blue six dot thing here and so i'm going to click and drag and place it inside the column with contact us right below and so now inside of this column i can insert two more columns like sub columns and so i like using these sometimes so then i'm going to go back to the rubik's cube and choose an icon list click and drag it and i'll show you how to edit all of these pretty soon i just want to go ahead and get them all on paper first all right let's go ahead and add a divider right underneath the icon list and then i want to add another icon list [Music] right underneath the divider just like that and then i'm going to change the divider by clicking on the edit icon right here going over to the width and changing it to something smaller something like that i like solid so i'm going to leave it there and i also like it on the left so we'll go to style change the weight to be a little bit thicker something like three so it's very defined i like that and then we'll go over to the gap and reduce it just like that i like that okay and then in this final column right here let's go over to the rubik's cube one more time and we're going to search for something called a wp form which is a widget that actually uses a form plugin and i'll show you how to get that in just a second so let's click and drag and place it right here and it's going to be blank right now so just a placeholder and so we'll get to this in just a second all right so first let's edit this icon list by clicking on the blue icon and over here it's very easy you can just click on each one of these icon list items and you can change the icon and the text and the link so each one of these icons is essentially the same thing as a button which was way up here at the top of the website just like this button here so you can change the button style the text and where it goes same thing with these down here so first i want this one to be something like facebook and let's change the icon to the facebook logo so you click on the icon right there and we can search facebook and i like this one so i'm going to select it and click insert so there's my facebook logo now i'm going to click the second one by going closing this one and going here and i can take the text and change this one to let's say instagram now i can click on the icon and choose the instagram icon insert all right and let's do the third one which is going to be twitter and click on the icon and let's search for twitter and take that logo i like that one and insert all right so now we've got facebook instagram and twitter and so next what we get to do is we can change the hover animation as well so let's close that one up here now you can always add items to the list but i actually kind of liked separating them three and three because this is going to be social media and this is going to be personal information so let's actually do that one now so we'll go to this one and say phone number first and so this would be something like five one two because i'm in this area code and then five five five five five five five change the icon to something that's a phone number i like this one and click insert and then we'll do the same thing for these two but one's going to be email and one can be like your address and so let's change this to this is a fake email at email.com let's change the logo to an email logo so i'm going to search an envelope and then we're going to select the envelope icon and insert and one more we're gonna click on the third one and say one two three four five street street austin texas just like that i've got to make that a capital all right and then choose this icon let's search map and i'm going to put this icon in just like that and so now we've got social media on top and then personal information on the bottom and so let's go ahead and edit this icon list one more time and now i'm actually going to add a hover animation to each one so let's go to style and click on icon first and so this is the icon color for facebook instagram and twitter and so you can actually change this to whatever you want let's say if we wanted them green we can change them all through green but i'm going to undo command z or control z i like the blue and while we're in the icon list we can change the hover animation color so if it's that color i'm actually going to copy this hex code with controller command c and then i'm gonna go to hover controller command v and then i'm gonna change it to just be a little bit brighter and more white just like that and so now when you hover over these icons as you can see they turn a little bit lighter of blue i like that and so you can change the icon size and make them huge but i'm going to control z that as well and then you can change the alignment which i'm not going to do now we're going to do the exact same thing but for the text so close icon go to text the text color is gray but i'm going to take the exact same color that i put as the hover animation for the icon which we already have on our clipboard and i'm going to put it under the hover animation for the text controller command v again and it's that blue but a little bit brighter and more saturated like that and so now when i hover over the text it changes color just like the hover animation which actually i realize isn't the same it wasn't the same so let's go back to the icon and just copy this color right here because we changed it so controller command c and go back to the text and control or command v just like that so now it hovers as the same color like their hyperlinks which is nice and then of course if you go back to content this is where you can actually click here and place a hyperlink to your actual facebook page to your instagram page and to your twitter page as well but i'm not going to do that right now so let's go ahead and click on update to save our work and now we're going to edit this bottom part here so click on the blue icon and i want to do the exact same hover animations but for these and so we're going to go to style and we'll go to the color for the icons first and we'll copy this and paste it into the hover animation and change it to be just a little bit brighter and wider and now i'm actually going to copy this color as well so command or ctrl c and then we'll go down to the text and we'll paste it in as the hover animation color for the text so ctrl or command v and click update to save our work perfect now let's go look and everything hovers just the right way just like these i like it all right so now it's time to edit the wp form section and so putting the widget here is the first step but now we actually have to go back to our dashboard and download a plugin and i'm going to show you how to do that right now so we'll go back to posts we're going to go down to plugins on the left hand side and click on add new and the last plugin we're looking for in the search bar over here on the right is called wp form and it looks like this right here it looks like i already have it installed but you would click install and then activate and so then we go over to wp forms and we're going to actually add a new form so click on add new right here all right so now we're in the form builder for wp forms and so you can create a blank form but why do all that work when we can just use a simple contact form that someone already created and we can just edit it to be our own so we'll click on create a simple contact form and from here we have our simple contact form and it looks pretty good you can always click and drag on one of these fields and move it to a different spot just like this and place it on top but i actually like email being second i think that name should be first you can also go to the add fields tab which it looks like we already are on and you can click and drag just like elementor any of these and put them into your field as well and so i'm going to choose numbers click and drag it over and i'm going to place it right under email and so now we've got a numbers field but i want to click and edit it so i'm going to click on numbers and now i can actually edit the field options right here so i'm going to change the name to phone number phone number i like that better and you can add a description as well but i'm going to leave it it's pretty self-explanatory just put your phone number in here and then we'll go to the top right corner and click on save all right so now that we've saved our form let's go over to the left hand side and go to settings and so here we have general notifications and confirmations and these are the three that we're going to be editing so let's go to general first and you can actually change the form name so i'm going to change it to primary contact form and then you can add a description and all of these things but i'm not going to you can add a submit button text and so right now it says submit but i'm going to change it to send and then you've got a submit button processing text which would be sending and so that matches which i really like all right and then you've got a button css class but i'm going to avoid all of these right here so let's go ahead and click save next we can go over to the notifications tab under settings and so this is how you the admin are going to get notifications anytime someone sends you a message and so this is the format that the email is going to come to you as so it says send to email address and so it's got this code right here that says admin email and so right now it's programmed to send each email that the customer sends to the admin email in your wordpress account and so when we were setting it up you use the same email as your hostgator and so hopefully it's the email that you want but if not you can type in your own email here in case you have like a secondary work email or something you can change the email subject so right now it just says new entry simple contact form and so if i were to open up my gmail right now that's what would pop up right here so it would say what does it say new entry simple contact form so it would say right here new entry simple contact form right here and so we can go back to w form builder and we can change this to whatever we want but honestly i'm just going to leave it like that we can change it from name and so this will be the name that it comes from so you can change this from you know elementor website you can change it to my website or the company name that you're doing this for whatever you want and then you've got the from email you can have a reply to message and so just like that but it takes from all fields so i'm going to leave it so let's go over to confirmations and then under confirmations this is the message that the customer gets whenever they send you an email or a message through this whole form and so you can change it from a message to show a page or go to a url like they redirect to a different page and so this is just what displays so you can either just have your website display a message saying thank you for contacting us or you can show a page that's like a confirmation page or you can go to a url and send them to a different website however you want to do it but i'm just going to leave it as a message and click save all right so we have thoroughly edited our wp form so i'm just going to go ahead and close out in the top right corner and it should take us back to our wordpress dashboard but right now we're just on the wp form section so now i'm going to go back to my website and so now we're back on elementor and i'm going to go over to edit this actual wp forms widget and so we're going to click on the blue icon here and so now we've got wp forms and you can select what form and so we're just going to choose the primary contact form that we just created and boom just like that our primary contact form is right here so let's go ahead and format this to just be as tall as this so it looks very uniform so first we'll go ahead and edit this column and let's say vertical align to the middle and so now it's in the middle of this column we can change the divider space to be a little bit bigger so let's go to style the gap can be a little bit wider we can edit this one go to the layout let's see can we change the width a little bit more yep space between a little bit wider let's make the icon and text just a little bit bigger just like that and let's remember that it's at 16. so now we're going to do the same thing we're going to edit these change the style make the space between a little bit more just like the top the icon size a little bit bigger and the text up to 16 oops typography just like that and now let's edit our map widget so let's make the height tall enough just like that and i think it looks good actually i'm just going to take this one and move it on top of the map just like that all right so those two are tall so let's add some spacing between these two so i'm going to go to the column and go to advanced and so now you've got margin and padding so padding is to add space inside of the square and margin is to add space outside or inside of the square so now i'm going to add from the margin i'm going to unlink the values and i'm going to add some to the top and bring it down a little bit just a little bit so we made it 43 so let's do something similar to the contact form column just like this we'll go to advanced unlink and let's add a little space at the top it looks like it's editing this one as well and so when it comes to margins and padding you always have to play with it just a little bit so we'll bring this down a little bit just like that now i also don't want my contact form to display the title name so i'm going to go edit here and for custom title inscription for title we're just going to hit tone show just like that all right and so this is the contact us section so let's go ahead and hit update to save our work all right so now that we've finished the contact section we can go ahead and now move on to step number seven which is create a header menu so scrolling up to the top of the website we're going to be editing this header menu right here and changing these buttons as well and then also inserting our logo on top so let's go ahead and do that right now we're going to go over to the dashboard tab and we're going to hover over our website name and click on visit site and then we're going to open our website and we're going to click on customize okay so first let's go down to the header menu section right here and go to site identity and this is where we can first enter a logo for our website to appear right here so let's click on select logo and choose the actual logo we already made and then it'll give you an option to crop which i am going to just remove as much white space as possible you don't have to do this if you don't want to just like that perfect and then just click crop image and so now we've got our logo on the website but we need to remove the site title so i'm going to go over to the corner and say display site title and uncheck the box and so that removed it now we can go down to the site icon which is what this looks like right here hostgator has their little gator as their site icon so we're going to change that for our website as well so we can choose select site icon but first we actually have to make the site icon so let's go back to the logo maker and exit out and we're just going to take this part and delete it real quick so just say delete and click save and no thanks i'll take the low resolution file and it's going to save it right here but i'm also going to control z and put it back just because we're going to need this a little bit later so i'll leave that there and now i'm going to go back to my website and for the site icon i'm going to upload a file and take the logo that i just cut which is right here and open it up and make sure it's as close to a square as possible because that's what's going to work the best for the site icon and so just hit select it's going to ask if you want to crop it a little bit and so i you can move it around so i'm just going to make sure that it's centered which it looks like it is right there and then you just hit crop image and so you can see it's actually going to pop up as a logo right there on the tab so that's kind of cool crop image all right and we're done and then you can see up on top our logo is there so that's pretty cool all right and then one last change i'm going to go back to the header menu section i'm going to go to primary header and i'm going to change the width to full width and so that way instead of scrunching it over it's going to throw it all the way to the sides which i personally like just a little bit better and so go back and now we can click on publish to save our work so far so now we can actually create our menu so we're going to go back one and we're going to drop down to the menu section and click on create new menu let's call this primary menu and then for menu location we want this to appear in the primary menu not the footer menu and we'll click next and now we get to add items to the menu so we'll click on add items and we can add custom links posts categories tags formats things like that so i'm actually going to take the custom links section and instead of pages we're going to actually enter in urls so for the link text this is what the actual button is going to say so from here i'm going to enter in something like origins and then for the url remember when i said you can set these buttons up with a hashtag to the menu anchor down below that's what we're going to do right here so we're going to say hashtag and then what the menu anchor id is which for this one it's going to be origins and we'll click add to menu so then we're going to make another one and we're going to enter in a text called blog and for the url we're going to put hashtag blog add to menu and then for the link text we're going to type in initiatives again and then we're going to click up top and say initiatives and add to menu and so then we're going to click on link text again and type in careers and the url is going to be hashtag careers add to menu we're going to add one that says featured news and the url is just going to be hashtag news add to menu and finally the last one is going to be contact and then the url is going to be hashtag contact and click add to menu let's go ahead and click publish to save our work and as you can see our menu options are actually appearing up top right here so let's make sure that all of our buttons are coded correctly to go to different spots on our website so if i click on the origins button it should take me straight to the origins menu anchor and place the menu anchor at the top of my screen perfect so let's try the blog it takes me straight to the blog menu anchor so that's good now initiatives is where it gets interesting here we go i'm going to click on it now it does take me to the correct place for the initiatives like where we can put our different categories here but i want to show you guys something new so if you go to edit this section and you click on the blue six dots right here alright and then after clicking the six dots we go over to the advanced button and drop down to the css id now the css id you can think of it as a menu anchor built into the section and so when i type in initiatives that makes this section its own anchor and it's called initiatives that's the anchor id right there it's the same thing as actually putting in an anchor at the very top and saying blog so i wanted to show you both i personally like using this one as long as it works now if i were to put this section as the background it might not put it correctly to the top so that's why i put this anchor right here but when it comes to this section and there's just a straight line i went ahead and made the actual section the anchor and so again you just click on the six dots you make sure you're on the advanced tab and go down to css id right here and you can type in whatever you want and so if you go back up to the button remember we put this button as hashtag initiatives so now if we click on careers it should take me to the careers section and again if i click on the six dots and go over to advanced you'll see the css id is careers so we're good there if i click featured news it takes me to the news section so that's good and finally the contact button does not go anywhere because this is the one that we created from scratch at the very bottom so let's go ahead and insert that right now we'll go to the six dots we'll click on advanced we'll go to css id and we'll type in contact just like that let's click update to save the work and we'll go back up to the top and click on contact and it should take us to the bottom perfect just like that all right so now that we have a functioning header menu with buttons that go to different spots on our website we can now move on to step number eight which is to edit for mobile and tablet and in order to do this we're going to go down right next to the update button and the preview changes button right here we have a responsive mode if you click on this we can choose between desktop tablet and mobile so let's go ahead and click on mobile now what this does is it compresses our website down into the size that it would be for a phone screen if someone was looking at your website on their mobile phone and so you can see that the title looks fine but if you scroll down this whole origin section looks a little bit wonky you know with pictures all over the place now the post section looks okay but then we've got the category section which looks good and then careers i think that looks fine featured news with the different articles i think that looks okay as well and then we've got our contact section which it looks like it just breaks up those three columns into vertical columns now which i think looks fine so we really only need to edit this section up here with these pictures all over the place so let's go ahead and do that now so first i'm going to go over to this origin section right here i'm going to hover over and click on the blue edit icon go over to the advanced tab which it looks like it's already open and i'm just going to play with the margins to see if i can move this to be a banner over the entire screen so i'm just going to go over to margin and i'm going to subtract just a little bit which it looked like it already centered it right there so let's just make it a little bit bigger just like that and so i like this first part right here so let's go ahead and do the same thing with this image right here i'm going to click on the blue icon to edit this picture and it looks like we're already in the advanced tab so we're going to go to margin and click on the down arrow so it already centered it that's pretty nice let's go ahead and shrink the margins to increase the size of the picture just like that i think it looks good and so we've got this title section saying you know how it all began we've got the origins with pictures and things like that i think it looks good and then looking through the rest of the website i actually think that we are good to go for the mobile version yep i think it looks great so let's go ahead and click on update to save our work now anything you do in this mobile responsive mode remember if you click on the responsive mode we're in the mobile version right now anything you do in this mobile responsive mode does not change the desktop mode so that's why we're able to make changes to this section but if we go back to the responsive mode and go to desktop everything is still the same so that's kind of cool all right guys now that's about it if we go ahead and scroll up to the top i want to show you one last thing i want to put a video into the background of our header so if we go up to the six dots right here and click to edit the section we can go over to the style tab drop down to the image and instead of placing an image here i'm going to go over to the video section and this is where you can actually insert a video link so i'm going to go over to youtube and copy a link right now and in the video link section right here we're going to hit command or control v and paste the video link in there and now you can choose a start time and an end time for the video so right now i've got it set for 28 to 76 but it's just this really cool b-roll of this guy driving a mustang so i think it looks great so i'm going to go down to the bottom left and click on update to save my work all right guys and just like that we've got a video in the background and i think it looks great so let's go ahead and preview our website so i'm going to go down right next to the update button and click on preview changes and here we go so we've got our header menu here as well as our logo up top we've got our video looks good i'm going to scroll down to the how it all began section and we've got origins as well as you know some pictures here we've got the posts career section articles and a contact section as well i think it looks great and just for fun let's actually take a look at the general motors website as well so they've got this hero section with their title and a button and so do we but i like the video in the background because i think it looks a little cooler and if we scroll down to the how it all began we've got an origin section with some pictures that grow when you hover over them and so do they they've got a little blog section same we've got initiatives and a career section down below and then they've got news and so do we so i think it looks pretty good all right everyone that's all i've got for you today but looking back on everything we went over in today's video it's important to remember everything that we learned you now know how to get web hosting how to download install and operate wordpress how to change your header menu and created a logo together how to design using elementor and finally how to make your site mobile friendly in anticipation for more than half of your future traffic i've got to say i'm genuinely excited to see where you all go from here and how you're going to take your websites to the next level be sure to tell me about it in the comments section below i'm looking forward to hearing from you before you go i would really appreciate it if you drop a like on today's video in addition be sure to subscribe to the channel because we're constantly putting out in-depth tutorials just like this one and feel free to check out create a pro website on instagram and tick tock for more quick tips web design inspiration and behind the scenes fun my name is levi hagan with create a pro website wishing you the best keep creating my [Music] friends [Music] you

Channel: Create a Pro Website

Views: 16,370

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 2020, wordpress website tutorial, make a website tutorial, elementor tutorial, elementor tutorial 2020, elementor wordpress tutorial

Id: C24dZqhVOAw

Length: 93min 15sec (5595 seconds)

Published: Mon Nov 23 2020