How to Make a WordPress Website with Elementor | Step-By-Step Tutorial 2021

are you looking to build your own website and grow your business maybe you're looking to learn how to design websites to make money as a freelancer whatever the case may be elementor is an absolute gem it's an easy to use drag and drop page builder with unlimited creative capabilities i was able to create this professional and flashy website using elementor's free software and i was able to do it in only one hour what's going on guys welcome back to another video on create a pro website my name is levi hagan and i'll be showing you how to build this exact website step by step here at create a pro website we're dedicated to showing you how to build your own website and how to start making money online with our free in-depth tutorials if you're new to the channel check out the rest of our videos to see what i'm talking about we show you how to build complete online stores from start to finish how to make affiliate marketing websites as well as how to make business sites like the one we're going to work on today the website i'm going to be building today is for more of like a gourmet high-end restaurant but you could easily swap out the images and text and make this apply to any other business i'm going to show you how to customize a hero section with a call to action button then i'm going to put in an about section to tell your customers about your company followed by a quote from the owner with a cool video i'm even going to include a photo gallery section which i'm going to use for my menu but you could easily swap out the images for things like projects towards the bottom i'll have a newsletter sign up and a testimonial section and finally a contact i'll even show you how to create a free logo for your business now this video is aimed towards the absolute beginner of web design if you've never created a website before that's okay we're going to make the entire website using elementor so you won't need any previous experience or knowledge of coding during this tutorial you can use the right and left arrow keys to go forward or backwards by 5 seconds i also put timestamps of this video down in the description so you can skip ahead or go back at any time so without any further ado let's go ahead and get started with step number one which is to get a domain name and web hosting we're going to be getting a custom domain name for your website as well as web hosting now a domain name is just the address to your website it's what people will enter into the search bar to find your site so something like yourwebsite.com and web hosting is just renting space on a server somewhere that's connected to the internet so that you can store all of your media and files on the website now there are web hosting companies that have buildings full of these servers and they also offer you 24 7 support in case anything happens 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 i'm going to give you a massive discount for it as well yeah you can get a free website but it comes with a lot of limitations like you don't actually own your domain name it'll be something like yourwebsite.wix.com or dot squarespace.com or whoever's hosting the website it could even be a random string of numbers and letters that you don't even get to choose you also cannot upload new themes in order to customize your website exactly the way you want it you can't upload plugins to increase the 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 for these reasons i personally recommend getting web hosting because it places you in control so in order to get your domain and hosting just click on the very first link down in the description or go to creataprowebsite.com hosting and it'll take you to a page that looks like this now clicking on my affiliate link which i do receive a commission from will give you that massive discount on your web hosting plan this will also save you a lot of money so i definitely recommend it now this is a special co-branded landing page that i have with hostgator and we make it really easy all you have to do is click on this buy now right here and it will take you to the three different plans that hostgator offers right off the bat you can see that they offer three different plans we've got the hatchling plan the baby plan and the business plan and i only recommend the baby in the business plan once your business starts to take off or you decide to start making multiple websites because as you can see it gives you unlimited websites for both of these the hash loom plan is perfect for if this is your first website and you're just trying to get started so this is the one that i'm going to use for the tutorial and the one that i also recommend so i'm going to go ahead and click on buy now all right so this is where we get to try out our very own custom domain name to see if it's available so i'm going to try something like this and then you can click out of the search bar to see if it's available and i forgot to mention right up here is where you would go to this tab if you already have your own domain name and you're just trying to transfer it over all right so once the search bar highlights green just like this you know that your domain is available if it highlights red you just have to try some different variations of it to see what's available it's like picking a new username and as you can see we can choose.com right here or any of the others and it also gives you the same thing the options down below so we've got club site net and a whole bunch of different ones i usually recommend a com because it's the most professional looking and it's also the most common that people are gonna look for when they're looking for your website so i'm gonna go ahead and leave.com now before we get to number two you can see right here domain privacy protection this is actually an important part right here so it's billed annually so it's uh 14.95 per year so it's pretty cheap so it basically protects your personal information from telemarketers and solicitors who are going to try and call you or email you regarding different services that they'd love to sell you on for your website and so it gets pretty annoying when you start getting spammed with phone calls and emails and texts and so i always leave the domain privacy protection on but that is the additional 14.95 and all you have to do if you don't want it is just click the checkbox to turn it off all right so next for two we've got choose a hosting plan and we already did it but this is where you can change from the hatchling to the baby plan or the business plan and you can also change whenever you want but i'm just going to leave it on the hatchling plan and then over here we've got the billing cycle so keep in mind you're doing your domain name for one year so if you want to make the hosting for one year as well you can just click right here and so then they would sync up you can do it for 36 months which obviously you get the biggest discount when you sign up for the longest contract or you can do one month and then you build monthly right here i'm gonna go ahead and stick to one month okay so number three is creating your hostgator account so all you have to do is enter in your email and a password so you're just creating an account with hostgator i'll see you guys in just a second all right so now i'm gonna go ahead and move on to step number four which is entering your billing information and all you have to do is enter in your personal credit card info or you can select paypal so i'll go ahead and see you guys in a second okay so i went ahead and entered in my billing information and i scrolled on down to number four so for the additional services section what i'm gonna do is actually uncheck both of these boxes it's two dollars per month but it's billed annually so i'm going to be taking off 23 here and 23 here the reason i'm unchecking both of these boxes is because i show you how to do this for free on the channel in other videos and i can leave those links down in the description all right so now go ahead and go down to number five and this is where you have to enter in the coupon code now if you went to my affiliate link createaprowebsite.com hosting this would automatically be inserted for you now this is my affiliate coupon code so i receive a commission from it but it's also what's giving you that huge discount on your hosting all right so number six is where we get to review our order details and so you can see that the domain registration for one year went from eighteen dollars all the way down to five dollars and so that's the discount you get with my affiliate link and then we've got the hatchling plan for one month is uh it went from eleven dollars down to eight dollars so that's not too bad and then the hosting add-ons this is the domain privacy protection that's billed annually and as you can see it comes out to 2910 after you know tax and stuff like that so i'm just going to go ahead and agree to the terms of service and stuff and check out now and now hostgator is setting up your account so it'll just take a few minutes i'll see you guys then all right so now hostgator has completed setting up our account and so i'm just going to click on view my dashboard alright so now that we're in our dashboard we can go ahead and move on to step number two which is to install wordpress now hostgator makes installing wordpress really easy there's two ways to do it the first way would be to just go to the domain that you want to right here on your dashboard and click on install wordpress but as you can see i've got multiple domains under this hostgator account so i'm going to go over to the hosting tab right here and as you can see i can make sure that i'm clicking manage on the specific domain name that i want to work on so this is the sebastian's table capw for creativepro website and so i'm going to click on manage and from here i can click on install wordpress right here alright and then i'm just going to click on install now perfect so now we're installing wordpress to our specific domain name and the way you make sure is you look right here to make sure that your actual domain name is here you can click on the down arrow if you have multiple domains but this is the correct one so you want to make sure you choose the correct version of wordpress to install and so as you can see we're doing the newest one which is 572. scroll on down a little bit i've got my site settings so i have the site name and description and so if i were to look up hostgator for instance this is the site title and this is the site description right here so this is actually what we're setting up right now so for the site name i'm gonna say sebastian's table and then for the description perfect just something i made up just for fun okay so now i'm gonna go ahead and go down to the admin account now this is a really important step we've got the admin username and password you're basically creating your own admin account this is really important because you have to remember this every time you want to log in and edit your website so we've got a username password and email so i'm going to go ahead and enter this in right now for my username i'll just say levi and then for my password i will say all right and then i can also go ahead and enter in my admin email perfect so i'm going to go ahead and scroll on down a little bit so the next step is to choose a language which i speak english so i'm just going to leave it on that and then for select plugins advanced options and selecting a theme these are just options that will help you install a little bit faster and move along in your work before you even get to your dashboard but i'm going to show you guys how to do all of this step by step so go ahead and skip all of this and just go down to install now it's going to take a minute for wordpress to install so i'll see you guys then perfect so now you can see that wordpress was installed successfully and it's going to give you something called the administrative url right here so this is a really important url to remember it's pretty simple it's just your actual domain name so sebastian's table capw.com slash wp for wordpress dash admin because you're the admin so i usually just remember it wp-admin and that's what i type into the back just to log in but you can also go ahead and open it up on a new tab and then just bookmark it so now that i've opened it on a new tab let's go ahead and take a look at our website now as you can see it says your connection's not private if it shows you something like this or anything else like this page doesn't exist or any kind of an error it just means that your site needs to propagate first and propagation just means that hostgator has to take the new domain name that you just registered and send it all the way across the world to all servers everywhere and let everyone know that your new domain is registered and that you own it now this can take anywhere from a few minutes to an hour or an entire day so what i usually do is just keep coming back every once in a while and hitting the refresh button like this to see if it finished propagating now once you finally hit refresh and it takes you to a page that looks like this that's when you know you're ready to edit your website so let's go ahead and do that now i'm going to go ahead and type in my admin username and password the one that we created earlier and just like that we are now in our wordpress dashboard so i'm going to go ahead and close out of that and we don't need these tabs anymore either all right so now that we're in wordpress dashboard we can go ahead and move on to step number three which is to install a theme so in order to install a theme we're gonna go over to the left-hand side over here on the main menu and we're gonna go down to appearance hover over it and then click on themes now i'm going to open mine up on a new tab and then from here we can see that the active theme is the 2021 standard or default wordpress theme and so let me go ahead and show you what this looks like if you ever want to preview your website just hover over your website name and you can either click on the name or click on visit site i don't know why they have both but you just click on it like this i'm going to open mine up on a new tab boom so this is what our website looks like so far it's pretty boring just you know green and black text but we're going to be changing this very soon so the first thing we're going to do is change the theme so i'm going to go ahead and click on add new theme and over here in the search bar i'm going to look for something called astra which it's right here perfect and now you can see that astra is another theme and so i'm going to go ahead and click on install now and activate perfect and now you can double check the active theme is astra and it's no longer the 2021 which is over here so now if we preview our website you'll see that it looks completely different and i think it looks much better even though it's far from being done so let's go ahead and close out of that and we can go ahead and close out of this tab as well so now we are back on our wordpress dashboard from here we can go ahead and move on to step number four which is to install plugins so in order to do that we're just going to go over to the plugins tab right here on the left hand side hover over it and then click on add new all right from here we're going to go ahead and add three plugins now you can think of a plugin as just downloadable software that can add functionality to your website you can think of this add plugins tab so where we are right now for the add new tab you can think of this as the app store and then you can think of all of these plugins like apps on your phone so we're going to go ahead and search for three different apps or plugins and so i'm going to search for elementor and this is that easy to use drag and drop page builder that i mentioned earlier in the video so i'm going to go ahead and click on install now and activate and i'm going to repeat that process two more times so i'm going to go back over to the left hand side under plugins go to add new and i'm going to search elementor again and this time i'm going to click on essential add-ons for elementor now this plugin essentially just gives you 40 additional free elements or widgets that you can use within elementor so i'm going to go ahead and click on install now and activate and one more time to the plugins tab click add new this time i'm going to search for astra and we're looking for starter templates right here now starter templates just gives you 300 ready-to-use website templates and so this is going to save us a lot of work so i'm going to go ahead and click install now and activate and now starter templates is going to ask what kind of page builder we're going to use so you've got brizzy beaver builder elementor and gutenberg so i'm going to make sure i select elementor perfect and now you can go ahead and scroll through the starter templates library and look at all of these different websites that you can download if it has the word premium above it that basically means that you have to go to the paid version or the premium version of this app i can go up to the top and i can select different types of websites like a blog website a business website or an ecommerce website and i can also decide whether i only want to display free premium or all templates so let's try free templates and then go down to business websites now these are all free websites that you can use and start editing and customizing right away but enough about that for now let's go ahead and move on to step number five which is to customize your website now in order to customize your website we have to go ahead and actually add a page to your site so let's go ahead and close out of the starter templates tab and we're going to go over to the pages tab and click on it from here you can see we've got two different pages we've got the privacy policy page and a sample page i'm going to go ahead and select both of these pages and go to bulk actions and say move to trash and then click apply so now we're starting with a fresh canvas so i'm going to go up and click on add new on the top corner here and now you're welcomed to the wordpress block editor but we're not going to be using this for very long so i'm going to go ahead and close out of this guy the only thing we're really going to do is click here and type in home page this is the title of the page and so it's appropriate that i just call it what it is which is the home page and then the last thing we're going to do is go over here to the right hand side we can close astro settings and go over to page attributes and i'm going to change the template down to elementor full width which is basically saying that i want elementor to take up the entire width of the page because elementor is separate from astra okay so now i'm going to go ahead and click on publish and publish again to save my work all right so now home page is live so let's go ahead and try editing it with elementor so i'm going to go ahead and click right here on edit with elementor all right everyone welcome to elementor this is that easy to use drag and drop page builder that we mentioned at the beginning of the video now right off the bat you can see that we've got a plus button a folder button and then a couple others right here that's our starter templates so if we click on this guy we can actually get taken straight to that library that i was talking about earlier you can also see right here the folder button which is to add pages from elementor's template library which gives you even more templates that you can use for different websites and you also have the blocks section here which is basically portions of websites so you could show something like an about section or this looks like another about section we can do archive sections and so on and then you can also click the plus button to build something from scratch and that's what we're going to do right now so i'm going to go ahead and select this double right here okay so now just a little overview about the layout of a website under elementor's theme so the way that a website is laid out under elementor is going to be sections which is this blue box right here and you can think of that as the background let me go ahead and make it just a little bit bigger for now perfect so this blue part is the actual background and then we've got columns inside of the section and so these columns are these gray dotted lines right here and then inside of columns we can place widgets and so if i click this plus button i can go ahead and add a video widget for instance just like that and so now we've got a widget which is a video widget inside of the column which i have two columns because you can see this other one right here and those columns are inside of the section now if i were to click on the video tab right here i can click on this blue little pencil icon and this is how i actually edit the video if i want to edit a column i can click on this gray little square right here and now you can see it says edit this column or if i want to edit the background or the section i can click on these six dots right here and now it says edit section when i'm editing anything i've got three different tabs under elementor i've got the layout tab or the content tab for instance if i click on the video you'll see that it says content and that's where i would put in the youtube link or something like that i've got the style tab which is where you can change things like background images colors borders and shape dividers and then i've got the advanced tab which usually we only spend a little bit of time in here for motion effects or for margins and padding and i'll go over those later if you ever want to add a new widget you just go up to this rubik's cube icon in the top corner and now i can look at every single widget that i can use in elementor now if we scroll to the top you'll see the basic widgets here and this is usually what a website consists of is the six widgets right here we usually have buttons videos images text and just more text an intersection i'll explain later but we also have more like dividers i can add a map to my website icons we've got the pro section which these are locked unless you pay for elementor pro version but i'm using the free version right now so i'm just going to go ahead and close up that folder we've got the general tab which has even more widgets that you can use for free and then if you remember in the last step we were installing plugins and one of them was called essential add-ons for elementor these are those additional 40 widgets that i was talking about and so there's a whole lot more so if i wanted to add a heading i would just drag it in and place it underneath the video i can also click and drag this pencil icon and move the widget if i want to put it on top of the video just like that or i can move it into another column just like this now notice that i can't take this widget and place it out here in the section because widgets have to go inside of columns if i were to drag outside and let go it's just going to put it right back elementor also has a really cool right click function where you can right click on something and actually have options rather than it just showing the regular right click for apple or windows so from here i can go ahead and right click on anything like this section or i can right click on the column and edit the column or right click on the video and edit the video i can duplicate the video and it'll add a second one right underneath just like this i can also right click and say delete just like this all right so let's try creating a hero section from scratch so i'm going to go ahead and delete this one right here by clicking on the delete section button i could also click on the add section button and it allows me to add another section either from a folder like a block or a template or from scratch but i'm going to delete this one now from here i'm going to go ahead and click on plus and select the single structure which this is how many columns you're going to insert into your section so i did two and it gave me two columns if i click one it'll give me one column as you can see from here i'm gonna go to the rubik's cube icon and i'm gonna drag in a heading just like this i'm gonna drag in a second heading but instead of clicking over on the rubik's cube icon i'm just going to go ahead and right click and say duplicate i'm going to go back to the rubik's cube icon and drag in a divider underneath and lastly i'll drag in a button as well now from here i'm going to first edit the section by right-clicking anywhere in the blue square as you can see and clicking on edit section or i could click on those six dots right here first i'm going to go back to the height and change it to fit to screen and that's going to make my section fit to the screen right here so i can scroll down and you'll see that it's right there that's the bottom next i'm going to go ahead and add a background image so i'm going to click on the style tab and under the background drop down i can go ahead and select my background type so i'm going to choose classic but i could also choose a gradient a video or a slideshow in the background but i'm going to go ahead and just go classic and under classic i could either select a color like this or i could select an image which is what i'm going to do and then i'm going to click on image right here now i can upload a file or i can go to my media library which is going to be empty at the moment but i can go to upload files and click on select files and then i'm going to go ahead and choose this image right here and then i click insert image perfect so now you can see i've got my image in the background next i'm going to change the position to be center center so it focuses on the center of the image and then i'm going to change the size to cover which will stretch the image perfectly to the edges of my screen and then i'm going to change it to no repeat just in case all right from here i'm going to go ahead and add a background overlay so i'll click on the background overlay drop down choose the classic type and select black as my color from here i can change the opacity so i can make it very dark or completely transparent but i'm going to go with something like 60 just like that next i can go ahead and edit my heading text so this first one i can click here and i can actually start editing straight on the page and then for the second heading i can go ahead and edit here or over here on the left hand side perfect for this top text i can go ahead and go up to the style tab and i can change the text color to be white if i want to just like this now i'm going to center the text go back to the content and click on the alignment center back to the style tab i can change the typography so i can change the size of the text by dragging the slider just like this so i'll make this one kind of small and i can choose a different font just like this and i can transform it to be all uppercase if i want to but it's already an uppercase because i did that on purpose so next i can go ahead and click on the secondary title right here and let's go ahead and capitalize austin now i can go and center the alignment again and then i can go to the style tab change the text color to white the typography i'm going to change as well first let's increase the size dramatically so it's a little bit bigger just like this and then i can go ahead and change the weight if i want to so it could be really thin text but i think i'll leave it at like 300 or something like that transform it to uppercase i can change the style if i want to to italic but i'm going to leave it i can also change the letter spacing so i can spread it out just a little bit more i think that looks pretty good so next i'm going to go down to the divider so i can click on the divider or you can right click and say edit the divider just like this first just so you can see it i'm going to change the color to white so under the style tab change the color i'll go back to the content tab i'm going to center the divider which doesn't look like it does anything right now but as i reduce the width you can see that the actual divider is shrinking if i had it set to left you can see the divider will shrink to the left like this and so i want it centered i'm going to shrink the divider a little bit more so something like this i'm gonna go to the style tab and change the weight up to something like three which will make it a lot thicker and then you can also change the gap which is just the spacing like this and so i think where it was was just fine something like that now lastly i can click on the button and say edit the button i'm going to go ahead and center the button and from here i can change the type which i usually never do but you can change the text so i'm going to say book a table this link right here is where you would actually put the url so if they click on this button where they're going to be taken basically and then we can go ahead and change the size from small medium or large so i'll make it a medium button something like this and i can also change if i want an icon i can go ahead and choose one from the library for instance so let's just pick a random one and then i can actually change the icon spacing as well and i can say if i want it before or after the text so now it'll move the icon to the right hand side but i don't want an icon in the button and the spacing can go back to zero from here i can go over to the style tab and change how the button looks so the typography can change if i want it to and the only thing i'm going to change here is i'm going to transform the text to uppercase and i'm going to thin it out to something like 200 so something like this maybe a little bit thicker i think 300 looks perfect from here i can change the letter spacing as well so i'm going to increase it just a little bit actually i kind of like it closer so i'm going to leave it like this so for the text color i'm going to go ahead and change it to black just like this but you can change it to whatever color you want and then i'm going to change the color to white just like this next what i'm going to do is decrease the border radius if i were to increase the border radius without putting a border it will just curve the edges of the button so for instance first let me go ahead and show you what a border looks like so if i add one you can see that now it's got this black color border all the way around which is the default color but you can make it red if you want to and now i've got a red border i can increase the width like this and then the border radius if i go up you'll see it makes it more curved and if i go back to zero it's very edgy like this but i'm gonna go ahead and remove the border but i will decrease my border radius back to zero so it makes the edges of the button more rectangular like this lastly if you want you could also add a box shadow so you click here and now you can see there's a little bit of a shadow which is hard to see because my background is dark but i could change the color if i wanted to so let's make it bright red like this and increase the opacity now you can see there's like this box shadow around it and then i can go ahead and choose the horizontal and vertical points and so basically it just drags the shadow left or right so i can kind of make it like a left shadow and then down so something like this if you want to but vertical is up and down obviously and then i can change the blur i'm going to keep it down here so you can see what this does the blur will make it more blurry or practically sharp like this and then the spread basically says how big you want the shadow but i'm just going to click on back to default so it resets it to zero perfect so now our background is looking pretty good the last thing i'm going to do on the button is actually change the hover style as well so right now normal means when nothing is over it but if i click on the hover style whenever i hover my mouse over it i can have a different animation which i think always looks more professional so i'm going to leave the text color black so i'm going to choose this and make it black just like that and then i'm going to change the hover color to maybe a light red now i can also change a hover animation but first any time i hover over the button you can see that it hovers to a red color and of course if i wanted to i could change the color to anything so if i wanted to make it more like an orange now it hovers to orange so that's cool and i can also change the hover animation so i can say grow if i want to so anytime i hover over the button it does this growing animation as well you have a lot of different hover animations like pulse grow or you've got one that says bounce in most of these get a little bit cheesy and so i usually only stick to grow or shrink because shrink just does the opposite it makes it a little bit smaller and it doesn't bounce it's just one but i'm going to leave it on grow now if you ever want to save your work all you have to do is go to the bottom corner right here and click on this green update button so now we can go ahead and take a look at what our website's going to look like and the way you do that is click on preview changes right here right next to the update button and it's going to open your website up on a new tab perfect now just like this this is our website so far and as you can see there's nothing below it because we only created one section but at least you have a taste of how easy this can be and then if i were to click on book a table right now it's not going to take me anywhere because we didn't set a link now if we did set a link it would take us somewhere alright so now that you guys have followed along and built a beautiful hero section what we're gonna do next is completely delete it because i'm gonna show you guys how to install a template to save yourself a whole lot of time and effort now if you really like the hero section that you've built you can save it and start building the website down below but i would recommend starting with me on the template so i'm going to go ahead and delete this section right here and you can click on update to save your work but honestly it doesn't matter because we're going to be downloading a new page if you want to get back to your dashboard i already have the tab open but the way you close out of elementor is you click on this hamburger icon right up here and you say exit to wordpress dashboard and this will take you back to the editing page and then you can also just click on this icon right here and now you're back in your wordpress dashboard so next what we're going to do is go down to the appearance tab and then go down to the starter templates which is that extra plugin that i had us download earlier from here we can go ahead and look through all of these templates and pick one if you ever want to look at one all you have to do is click on it and you can scroll through an entire preview of the website and this one has multiple pages so you can see it's got the about page services projects and contact page just like this you can always import the one page that you're on so i'm on the contact page so i can import the contact or i could import the home page just singular or i could import the entire website i'm going to click on the back button though so i'm going to search for one called coffee shop this one right here this is the page that we're going to be downloading and creating our own custom website from so i'm going to go ahead and click on uh import the complete site you could do homepage because there's only one page and it's the exact same thing and now your template's being downloaded so you just have to wait a minute so now our template has successfully been imported and you can click on visit site right here all right and just like that the entire template has been downloaded you can go ahead and scroll through just to take a look at everything i think it looks fantastic it's gonna be so easy to edit and it also comes with a completely customized header navigation as well so i'll be showing you guys how to work with this too so now we could click on edit with elementor and get right into it but first i want to make sure that we delete that other page before we forget so i'm going to go back to my wordpress dashboard we can close out of that guy i'm going to go over to the pages tab and then the home page that we created i'm just going to go ahead and trash it perfect so now we've got our home page ready to go and you can click on edit with elementor anytime you want so i'll go ahead and do it here and just close out of this tab all right so now that we're in elementor i'm gonna go ahead and edit this website section by section so you guys can follow along so let's go ahead and hop into the hero section so the first thing i want to do is click on the six dots to edit the section just like we talked about earlier and i want to go over to the style tab so i can change this background image so i'm going to go ahead and click on the delete button or you can just click on it like this and we can swap it out it doesn't really matter i just want to show you guys that you can do that and i'm going to go ahead and click on upload files so i can select my own files and then i'm going to pick this image right here so i'll click on open it'll take a second to load and then i'll click on insert media perfect so now i've got this giant burger in the background it looks delicious oh my gosh so now i can change the position which it's already center center and this is usually what i use because i want it to focus on the center of the image no repeat and cover so this actually looks good now next i'm going to go down to the background overlay and i'm going to change the color from black to complete black well because it was over here and i actually wanted dark and i think that looks great and i can change the opacity if i want so i can darken it up or lighten it up depending on how you want to do it so i think that looks pretty good so now that we have our background in order i'm going to go ahead and click on my first header right here which is actually a divider because you see this line right here so if i want i can actually take the text out of here and then just drag the width across and you'll see that it's actually a divider line so what i'm going to do is first actually remove the padding that's over here on the side of this column so i'm going to right click and edit the column which is the gray dotted line go to the advanced tab and you'll see that on the right hand side we've added padding so i'm just going to remove it because that was part of the template and now everything gets dragged over so if i were to center this text with padding for instance and then i click on this text and say center you'll see that it doesn't actually center inside of this box because i've got extra padding on the side so if i were to right click and edit this column advanced tab and remove it boom now it's actually centered all right so now let's do the same thing to the divider which is kind of invisible right now but if i move you'll see the dividers right there it's just right on the line so let's click on it perfect first thing i'm going to do so you guys can see it is increase the gap and increase the weight let's do something like 2.5 i think actually let's go something like 1.5 or 2. i think that looks good and then the gap i can actually reduce just by a little bit i'm going to go over to the content tab and add my own text perfect i'm going to center it so now it's in between just like this and then i can also change the position of the text the way i do that is go to the style tab click on the text and i can say instead of being on the right hand side of the divider i want it to be in the center like this and so now i've got dashes on both sides i think that looks great you can also play with the typography if you want to increase the size of the text inside of the divider but i actually kind of like it small like this the only thing i'm going to do is increase the letter spacing a little bit maybe decrease the size actually i kind of like it like that all right so now i'm going to go ahead and edit my title so i'm just going to click on it and actually just edit it straight on the page perfect so sebastian's table right here i can go to the style tab go to typography and transform it to uppercase so it looks much better and i'm also going to change the font family to something like work sans because i like this one a lot so it makes it very straight and then i'm going to go ahead and change the weight down to something like 300. let's try 200 perfect i'm going to increase the letter spacing as well and increase the size and let's go ahead and max it out just like that lastly we'll right click and click on edit the button and i want to make it center so i'm going to move the alignment over to the middle just like this and i actually like the button for the most part but i'm going to change it so that it's actually white before i have to hover on it so let's go ahead and do that but first of all if you ever want to link this button to something which i'm actually going to link it to this contact section down here what i'm going to do is actually leave the hashtag because the hashtag is a placeholder but it also if left in front of a word will take it to that css id and i'll explain the css id later but for now i'm just going to say contact perfect and then what i'm going to do is hook this button up to connect to the contact section down here so if they want to book a table they just have to call scroll it to the top here so while i'm editing the button let's just go ahead and type out book a table and then i think everything else looks good here but i'm actually going to change the button to be a large or let's do a medium instead i'm going to go over to the style tab and let's go ahead and change the typography so i'm going to click on the pencil icon so transform it to uppercase just like this increase the letter spacing just a little bit decrease the weight to something like 400. i think that looks good so i'm going to leave it like that and then we can change the text color to be black and i can change the background color to be white perfect so now we have to change the hover animation when you hover over the button and first of all i actually want the text size to be a little bit smaller so i'm going to shrink it up just a little bit just like this okay so now still under the button tab we're going to go down to the hover color and we will say the text color is going to be white still i say still but just like this it went from black to white and then for the color i'm actually going to change the color so let's go ahead and do an orange color so something like this perfect so hover over the button and it changes it to an orange color and i'll make it fully saturated just like this and the last thing i'm going to do is actually just remove the border just like this perfect so now we went ahead and changed the text and everything i actually think i want the button just a little bit bigger so i'm going to go back to the content tab and make it a large button so now it's a little bit bigger and i think that looks great and also because we put hashtag contact if we click on the button it's actually going to take us straight to the contact section and i might as well explain it now the css id for this section is called contact so let me show you guys how you do that you have to edit the section just like this go to the advanced tab and you'll see right here the css id which i didn't do this but it's called contact and that came with the template so now as long as the css id is contact anywhere like any button that i set to go hashtag contact it will take them to this section just like this and you'll see it add your custom id without the pound key and then any button that you want to send to this id you just put the pound key so all you have to do is go to your button edit it and in the link put a pound key and then contact and then it'll take them straight to that section so for instance if i were to label you know this as the about section i could edit this section go to the advanced and it looks like they already did it so that's cool so all i would have to do under this button is go to the link section and say about just like this and then if i click on it it takes them to this section but i like it taking them to the contact section perfect so now that this hero section is done we can go ahead and click on update to save our work perfect and just like that we've got this super cool looking hero section it also has a parallax effect which is my favorite part that comes with the template but let me show you guys how that's done and then also if they were to click on book a table it takes them straight down to the bottom just like this perfect one last thing well two more things because i want to show you guys how they do the parallax effect but i also want to add some motion effects to this so close out of this tab first of all the parallax effect if we click anywhere in the section and or right click and then click on edit section and then we can go over to the style tab and drop down to attachment and right now it's fixed if i set it to scroll or default and then start scrolling you'll see that the image stays with the scrolling of the screen but if i change it down to fixed that's where you have the parallax effect where it looks like it's kind of in the background like that cool so update one more time to save and then lastly i want to add some motion effects so first of all i want to add motion effects to all three of these now i can add them individually so have this have a motion effect this one and then this one individually or i could just click on the actual column and change it all together so that's what i'm going to do go to the advanced tab and i can go to motion effects and then under motion effects i'm going to go down to fade in and then i'll change the duration to slow and so now as you can see the text kind of fades in like that so let's go ahead and click update and i'll preview it boom just like that my text fades in nice and slow i think that looks pretty professional especially for how this website looks it looks like a fancy restaurant all right so let's go ahead and close out of that tab i think our hero section is done so let's go ahead and move on to the next section which is the about section and so here i'm only going to change a few things so the first thing is i want to make sure that this divider is going to be the same color orange as the rest of the website and so i'm going to go over to the style tab and change the color now there's one thing that i want to show you guys how to do and that's how to set up global colors right here so that instead of having to copy and paste a hex code or drag this divider around i can set the exact same orange color that i put here all the way throughout the rest of the website so before we continue let's do that really fast so the way we do that is we just go ahead and click up here on this little hamburger icon to go into the settings of elementor but first i want to make sure i grab this orange color so i'm going to oops so i'm going to go ahead and click on this button and edit it and i'm just going to copy that color hex code so i'm going to go to the style tab and go to the hover color and so there's my orange i'm going to go in here and copy this and then go into the hamburger icon and go to site settings and then from here i'm just going to go to global colors and now we can change those four colors that come up when i click on that little global icon so i'm gonna go ahead and paste this one here well actually first i'm gonna make this one black i'll make this one white i'll make this one my orange just like that and then we can make this one a light gray so something like this perfect and don't pay attention to these texts right here because you can literally just type whatever you want just like that so now i'm going to go ahead and click on update to save and then i'm going to go ahead and click on the x right here and that will close out of the settings tab and bring me back to my website so now back on the about section i can go ahead and click on this divider and click on the globe right here and now you see my black white orange and gray and so i can just select orange and i'm going to do the same thing by clicking on this header text right here going to the style tab and changing the text color to orange perfect and then also because i live in texas i'm going to change this guy as well perfect so the finest restaurant in austin texas because i live here in austin texas and then this over here is just dummy text and of course you can just click on it and then type out whatever you want right here lastly what we're going to do is put a background image so i'm going to go ahead and click on edit section so i basically just right clicked on the actual remember the background area or you can click on these six dots here i'll go over to the style tab and i can change the background to classic which can either be a color or an image and so i'm going to choose an image go over to upload files and select files and then i'm going to choose this image right here and insert the media perfect so now that's in the background and then i'm also going to go down to the background overlay and choose the classic type and this time i'm going to choose a color and i'm just going to make it white so it's going to lighten up the background just like that so now you can see my text a lot easier but i'm actually going to go even more and make it very very bright so something like this so you can barely see the food in the background because you really want the text to actually pop out one thing else you could do is actually change this about text to be a little bit bigger so i could increase the size if i want to make it a little bit stronger that way it's easier to see all right i think this about section looks pretty good so i'm going to click update to save my work and of course this is where you would actually put the content that you have relating to your business like the about us or about you if it's like a portfolio site so whatever you want to do so next let's move to this testimonial section right here and so this is where you would copy and paste whatever testimonials you have from actual customers but because i don't have an actual customer for this fake business and fake website i'll just go ahead and type out my own perfect so something like that and then i'm also going to go ahead and change the style of the text so i'll go over to the style tab and change the typography and let's see i'm going to choose a different font and i think i'm going to choose the work sands that i chose for the header as well of the hero section something like this we'll resize it so it's a little bit smaller and then i am going to leave it as the default like this you could make it uppercase if you want to but i don't think there's any need for it maybe increase the thickness or the weight so let's try 500 actually i still like 400 okay perfect i think that looks great and then i'm gonna go ahead and just leave ethan hunt which is the owner just saying this now this is just an icon so you can click on it and here's the icon right here and you can actually change the icon to whatever you want and then you can also search so if i said camera i could choose a camera icon or something and then after you choose it you can go to the style tab and you can change the size of it you can rotate it you can change the color things like that but i'm going to leave it the way it is and then next i'm going to change this background image to a really cool video that i found so i'm going to go ahead and right click and edit the section i'll go over to the style tab and under background type i'm going to change it to video and now you can see right here that the video link is where i'm going to paste in my youtube url and so that's where you would open a new tab and go to youtube and you could find out some kind of a video you can also do other links it doesn't have to be a youtube video link it could be anything but they just give the example as youtube and i mean youtube is really easy so i could search something but i've already got one and so it's this really cool cinematic burger video and so i'm gonna go ahead and copy and paste that url right here click enter and then you can choose when you want the video to start and when you want it to end and then also if you want it to play once or keep looping through so i'm going to make sure that i don't check this box i don't want to say yes here because then it's only going to play once and then stop so i want it to keep looping next i'm going to change the start time to 35 and the end time is going to be 52. and so now i've got this really cool cinematic of burgers and lettuce and tomatoes in the background i think it looks pretty professional the last thing i'm going to do is just make sure that the background overlay is dark enough so i'm going to click on the background overlay tab and i'm actually going to increase it to 0.5 maybe 0.6 let's go with 0.6 and then i'm also going to darken it so it looks like right now it's not completely black so i'm just going to drag it down to black or you could click on the global and click black right here and so now it's a little bit darker i think that looks fantastic all right so i think our testimonial section looks pretty good so i'm going to go ahead and click update to save my work so let's move on to the next section which is the menu section now this menu is essentially just a photo gallery and so all you would have to do is replace this easily and make it something like a photo gallery or it could be a project section and you just have images of different projects that you're doing or if you're a photographer you would do different photo shoots that you have or whatever it may be but for this website i'm building a website for a restaurant as a business site and so that's what it's going to be is the menu and so funny thing i'm actually going to have us delete this entire menu because i'm going to show you guys how to use something called a filterable gallery which makes it way better than just scrolling through and finding what you want so let's go ahead and delete everything i'm actually going to keep the top two header texts and i'm just going to delete all of these and so it's going to be a bit of a process i'm just going to right click on this and say delete and just keep going until i delete all of them so right click and delete i'll see you guys in just a hot second okay so now i've deleted everything the next thing i'm going to go do is come over here to the search widget box and if you don't see this you have to click on this rubik's cube icon right up here so for instance if i was editing something you just click on the rubik's cube icon and it takes you here and i'm going to search filter and you'll see filterable gallery right here and so i'm just going to drag that bad boy right underneath my subtitle boom and now we have a filterable gallery and so this is really cool because i've got different objects that i could hover over and it'll give a description so each menu item i don't have to have text underneath they just look like clean images and when someone hovers over for instance if this was a sandwich i could say what's in the sandwich so that'd be pretty cool and then they can click on different filters like this gallery item and there would be multiple like one would be food one would be drinks and then when i click on them different images will appear which is pretty cool so first let's start by editing the header text so i'm going to go ahead and click on our menu i like how it says our menu but i am going to change the style so i'm going to change the text color to orange i'm going to go over to typography and i'm going to try something a little bit more fun so i'm going to go with just another hand and so it makes it look like this and i am going to make it huge so our menu nice and clear just like that perfect and then this would be your subtitle text so you could say our menu and then you can maybe say like breakfast is served from this time to this time blah blah blah blah so i'm going to leave that just the way it is that's dummy text so let's go ahead and edit this next so i'm going to go and edit the filterable gallery you've got items to show and right now it's showing six items if i were to have more than six items it would only show six and then you'd have to click like a next button or something like that personally i always set this to how many actual images i have you can do however many columns you want so right now there are three columns one two and three but if i change it to two for instance you'll only have two columns going to leave it as three you can do different styles like grid or masonry style and so it doesn't look much different to be honest but i mean it's a different style so that's cool and so you can change image height you can do layout and stuff like that so overlay card or search and filter which i'm just going to leave as overlay you can do a hover style and so the hover style is when i have my mouse over it how it does this and so slide up or i could say fade in and then it just fades in instead of sliding up or whatever but i'm going to leave it to slide up you can tell it to either use buttons or none and so that's these buttons right here that pop up and so one of them is lightbox and the other one is the link icon and so for instance if i click on this plus button it's going to open up lightbox so i can look at the image and then i can also click through them which you don't see anything happening right now but i mean trust me it's going through each individual image like this so i'll close out of that guy and so that's what to go somewhere so that's pretty cool but under the general settings you can also change the icon so right now it's that magnifying glass and it looks like a chain link you can click on it and then just choose whatever icon you want so if you want it to be a search bar for instance you just click on that and click on insert but i'm going to leave it just the way it is okay so next what i want to do is start adding images and then i'm also going to make this border be a little bit bigger so it looks like it's in like this hovering white box and so in order to do that let's uh let's actually edit the the box first so i'm going to go to the style tab and under the padding i'm just going to increase it on all sides just like that and so now we've got space all the way around so i'll go up to like 30 i think that looks good and then i'm also going to go to the border radius and curve it so that these edges aren't sharp i want them to be rounded so something like this perfect okay so now that we've done the background let's go ahead and edit each individual image and the way you do that is you go to the content tab right here let's close the settings drop down and we'll go down to the gallery items and this is where we're going to insert each individual image now one thing that i actually forgot that i want to show you first would be the filterable controls and so that's going to be these controls up here so gallery item so close gallery items first we'll insert the images last so that once the images are inserted we can go ahead and click on these and i'll show you what they do but for filterable controls you'll see that gallery item which is right here is able to be edited if you click on it and so i'm going to change this to food and then i'm going to click add item so i get a second one and i'm going to change this to drinks just like that and so now i've got food and i've got drinks and so when you click on food only the food items are going to show up and when you click on drinks only the drinks of course and then all would be all the images it's pretty self-explanatory so now let's go ahead and finally insert all of the individual content so we're going to go ahead and close out a filterable go to gallery items and what you can do is actually delete all of these just by clicking on the x button and let's edit the first one and then we'll click on this which is to duplicate it and so this will save us a little bit of time so for gallery item the control name is basically what filter control which remember we set them up here which filter control do you want this to be under and so i'm working on this image right here and so let's just say i want this to be under the food tab so i would type in food just like this and it can be lowercase because it's it's not paying attention to the case like the capitalization of the letters it's just paying attention to the exact letters here so if you put food for instance if you put drink or drinks just make sure you include or not include the s when we're doing this and so gallery item name it's going to be under food and let's go ahead and title this one just sandwich i guess perfect and then from here scroll on down and you can enter in some of the text which when i hover over it's going to be this dummy text right here so you can put like sandwich and then the description would be you know whatever's in the sandwich you could say like pickles mustard lettuce tomato whatever and then you scroll on down a little bit more and we've got the image so i'm going to click on this guy and then go to upload files select files and then i've got my menu images right here so under food i'll go ahead and insert all of these and then i'll choose my actual sandwich here and click on insert media perfect and so now i've got my first menu item it's called a sandwich you can click on this button here and look at it in all of its splendor and glory and then we can close out of that as well and then they could also click on the link for instance and this would take them wherever you want to go like if you have a sandwich page or something like that i don't know okay so let's go ahead and do a drinks menu item so i'm gonna go back to the content tab right here and then scroll on down to the gallery items and we see my sandwich i'm just gonna go ahead and duplicate it by clicking on this button right here and so now i've got two sandwiches i'm going to click on this first sandwich and i'll change this to drinks and i'll change this to soda and then i'm going to change the image down below select files and then i'm going to go out one folder go to the drinks folder and then just make sure that my soda is selected and click on insert media perfect so now i've got my soda right here and it says soda you can click on this button and then you can actually go through the different images and so there's my sandwich and there's my soda and then if i were to click on food the soda disappears if i click on drinks then the sandwich disappears and then if i click on all they both appear okay and so now what i can do is go back to my gallery items and i can add a whole bunch of items and so i'm not gonna bore you guys with that i'm gonna do it off camera real fast i'll see you guys in just a second welcome back everybody so i went ahead and updated the filterable gallery by adding everything into it and so if we go over to the gallery items just a quick review all i did was make sure that i put a control name so veggies are under food and then i went ahead and named it and then went down to the bottom and added an image that was it and so now you can scroll through and see the sandwich image veggies soda pizza fruity drink and so on and then we can go back up to the general tab and items to show instead of it being the original six just like this i went ahead and changed it to nine perfect so now this is what it looks like and then of course if i click on food all of the drinks disappear and if i click on drinks all the food disappears and then i can go back to the whole menu so i think that's pretty useful so i'll just click on update to save my work perfect so let's move on to the next section and that's going to be our subscribe newsletter so i can just click here and start changing the text if i want to honestly i'm going to leave the title the way it is except i'm just going to change the style so i'm going to go to the style tab and then under typography i'm going to change the font to something like work sans which is what i used at the top perfect i like that i can change the size if i want to so something like this i think that looks good i might increase the weight a little bit let's see so 400 must have been where it was at so 500 looks a little bit better perfect and then i also want to change the background so in order to do that i'm not going to go to the six dots i'm actually going to go to the column right here and click on it or you can right click and say edit column then i'm going to go to the style tab and then under the normal and under classic i can change the actual color right here i'm going to click on my globe and change it to the orange color that we've been using for the entire website and then lastly what i'm going to do is click right here which this is a wp forms widget and so if i click on it it's actually using wp forms which back on our dashboard is our contact form widget which was already downloaded with the template so that's pretty useful and i'll show you guys how to use this in just a hot second but once you click on it you can go over to the form and select which form you want to use and so newsletter signup form has already been created as part of the template that we downloaded so that's really helpful just click on it like this and it's already formatted and ready for you to go perfect and so now we have our own subscribe to newsletter and so this form will go to your admin email so all you have to do is just put in the email and hit subscribe and then you'll start collecting emails so let's move on to the next section which is going to be the testimonial section and so i'm only going to change this a little bit so first i'm actually going to change this to the same orange that we've been using throughout the entire website so just click on the divider go to the style tab and then change it to orange just like this i'm going to change the text style so go to the style tab after clicking on it and go to typography and change it to work sans perfect i like how straight that is all right i'm going to change the background by right clicking and hitting edit section or you can click on the six dots right here and then i'll go over to the style tab and under classic i can change the background and so i'm actually going to go to an image that i have upload files perfect and then i'm just going to click on insert media so now i've got this background and then next go to the background overlay right below background and i'm going to go to the classic tab and then under color i can go ahead and insert a black color and i can increase the opacity if i want to so make it a little bit darker and then i can go back to my heading text which i forgot to change to white and it's already going to open up the style tab because we were just there so i can change it to white perfect and so this is our testimonial section i think it looks fantastic so next let's move on to the it looks like an image carousel which is right here and the contact section so the contact section i'm actually going to leave the way it is i think it's perfectly fine all you need to know is you can actually change all of this text and so if your operating hours aren't monday through thursday and let's say it's monday through friday you just click right here and you can change thursday to friday just like this same thing with this right here you can change the time you can change the phone number just by clicking on it and same with the email and if you want to edit this button you already know how you can click on it or right click and say edit the button like this you can change the text to something like contact us if you want and then you can put in your own link if you want to send them to a specific contact page and then you can also go to the style tab and change its color and then i can go down to the text color and background color i can change the text color to be something like black and then the background color to be white just like this and then if i want to make a hover animation go to the hover i can change the text color to white and the background color to orange so when i hover on it it turns orange and white just like this perfect now let's go ahead and edit this image carousel right here it's pretty simple just right click and say edit the image carousel or you can actually click on the widget which is right here and we'll go over to the four images that are selected under the content tab click on it and we can actually edit the gallery so we can change the order by just dragging and dropping like this and then you can delete by hitting the x and minus button when you hover over it like this i'm going to remove all of them and then say select files and then from here i'm going to go to my image carousel and take all of these and click on open perfect and then again if you want to change the order you just drag and drop so i like this one up at the front maybe this one second and this one third because i really like those images and then maybe a nice picture of a drink just like this so click insert and then boom just like that we've got all of our images inserted into the gallery and then every few seconds it's going to shift through you can actually change that speed so if you want to you can say slides to show is four so you can change it to three if you want now it's going to show three images but i mean obviously these were scaled for four so i'm gonna leave it at four you can tell it how many slides to scroll through and so i'm gonna leave it at one and then you can change image stretch navigation and things like that and so under the additional options now i can change the autoplay speed which is how fast this thing cycles and so just to exaggerate if i were to go down to 1000 instead of 5000 it's basically waiting 1000 milliseconds now and so every one second it's gonna shift versus every five seconds and so i'll go back to 5000 and then the animation speed is just the actual animation of sliding over and so if you change this it'll basically slide faster versus how long it waits to do that slide if that makes sense and then you can change the direction if you want from left to right and so now it's going to shift this way instead of going to the other but i'm going to go back to left perfect so now that we've finished customizing a website i'm going to go ahead and click on update to save my work and there's one more thing that i forgot to show you guys which is how to actually edit the contact form which is right here and so if we go back to the dashboard and remember if you don't have a second tab open like i do you just click on the hamburger icon and say exit to dashboard but we'll go back to the dashboard and you can go down to wp forms i'm going to open it on a new tab from here you'll see all of the contact forms that you have made and if you remember correctly newsletter signup form was one of the forms that we selected it was actually the only form as you can see newsletter signup form and so if i change the name it would appear right here as well so now what i can do is click on edit and i can customize the form to be whatever i want so if i want i can add a numbers box just by dragging and dropping and now i have a place to put like a phone number if i want to click on it i can edit the actual field and then i can change the name to something like phone number i can choose if it's a required field or not and so now it has the asterisk right here and then i can also remove the field just by going over here and clicking on the trash button right here and so you can create your own custom contact form if you want by entering in an email and then name so for instance if i drag this one in here and then a name on top looks like it dragged down here so i'm just going to move it to the top like this now you can kind of see how you can create an actual contact form and then maybe a paragraph text at the very bottom and then say something like message or comment here but i'm going to go ahead and remove all of these just like that so i still have the same your email for the newsletter and then you can click save to save your work close out of that tab and if you made any changes just be sure to refresh the page and then your changes will show up here now the last thing we can do while we're in elementor to customize our website to the fullest extent is add some motion effects so if i scroll all the way to the top i think we already did it up here on the column and you go to the advanced tab and under motion effects yep we added the fade in earlier in the video so let's go ahead and do some motion effects for the rest of the website as well so when i scroll down i like this parallax effect and how this is still inside of this box and so honestly i'm going to leave this the way it is and when i scroll down here i think i want this entire thing to fade in so the same as the hero section i'm going to click on the edit column go to the advanced tab motion effects and then choose fade in next i'll scroll down and i'm going to take the entire column that has all of this inside of it and i'm going to make it fade up so click on edit the column go to the advanced tab motion effects and say fade up perfect scroll through the newsletter i think can stay still and so can all of these if you wanted you could say this column can come in from the left so go over to fade in from the left and then this column you could have fade in from the right and i'll show you guys in just a second what that looks like scroll through i don't think this needs any motion effects whatsoever click on update to save my work and let's preview our changes right here the title fades in professionally so i really like that part we scroll through this title fades in as well the menu slides up from the bottom so that looks good and then both of those come in from left and right i think that looks pretty good and then we have the contact section at the bottom so now that we've finished editing our website and we've added some motion effects we can go ahead and close out of all of these tabs and move on to step number six which is to edit your header and menu so i'm going to go ahead and close out of this tab and my youtube video and elementor and now that we're back in wordpress's dashboard i can go down to appearance hover over it and click on customize and again i'm going to open it on a new tab like i always do and so now we're actually editing this top part right here and as you can see if i hover over anything else none of those blue squares appear so i can only edit these so we're using astro which is the theme to edit the header of the website and then we use elementor to edit the actual meat of the website in between so to edit the header i'm going to go over to the header builder and once we're inside of the header builder it's pretty simple on how we edit it's similar to elementor where we can just drag and drop these different widgets and so right now you've got site identity and logo and so that's the actual logo right here if i were to drag it over here to the left hand side and let go you'll see that it moves it over to this side so this whole thing is a grid that you can move these widgets inside of so what i'm going to do is actually delete the social icons by just clicking on the x button and that removes the social icons i'm going to leave the logo on this side i'm going to leave the button on this side and drag the primary menu up and over to this side perfect so now i've got my menu on the top with a button at the very end and then over here on the left hand side we've got our logo so let's go ahead and edit the logo first there's two ways to get to the logo actually three you can click on this blue icon right here and it'll take you straight to the logo you could click on this widget right here it'll take you to the same place or you can click on site identity and logo over here now that we're inside of the logo we can go ahead and remove this one and insert our own now before we change it we actually have to have a logo to use and so i'm going to show you guys how to create your own logo for free without having to download any software and we're going to do it right now so i'm going to go up to a new tab and search something called logo maker just make sure you forget the e right there and now once you're in logo maker you can go ahead and just click out of that guy and click out of this as well because i'm going to show you how to use it it's pretty simple on the left hand side we've got the basic functions like text and basic shapes and the paint bucket on the right we've got the color wheel all the way around we've got saturation in the center and then we have opacity right here and then on the top you can click right here and search from over a million different graphics so what i'm going to do for my logo is first go back to the canvas and add a circle just like this and then what i'm going to do is go to the styles and choose cutout and drag it out and it's going to cut out the center of the circle and i'll go all the way to 99. make this a little bit bigger by dragging on the corner i can also rotate by using this guy and i can drag it to be taller or wider like this drag it over here and i'm going to change the color to be a dark gray so you could change the color by of course using the wheel but if i want gray or black or white all i have to do is saturation next what i'm going to do is actually duplicate this circle so i'm just going to right click on it and say duplicate i'm going to make this one a little bit bigger go to the styles and actually reduce the cutout by a little bit so it's a little bit thicker and then i'm going to center the two around it just like this now i'm actually going to search for my own graphics so i'm going to search for a fork and i really like this one right here and now i'm going to rotate it 90 degrees perfect now i'm going to search for a knife and i think this one's appropriate i'll shrink it up just a little bit and then rotate it again this time only 45 degrees and move it over here and as you can see it's taller than the fork so i'm actually going to shrink it again all right make it a little bit bigger perfect so now i've got my fork in my knife and lastly i'll search for a napkin and i like this one right here perfect so i've got my napkin just like this and then my fork in my knife and so as you can see over here i've got my layers so right now my napkin if i click on this one it's this guy right here so i can click on here and actually title it napkin so i don't get distracted or confused and i can click on this one which is my knife and then this one should be my fork just like that and then i've got my two circles so right now if i took my fork and my knife i can actually highlight both just by clicking and dragging and now i can move them together if i put them in front right now here let me change the color of the napkin to like red if i try to move both of these guys it'll be behind the napkin and so what i can do is actually drag both of these above the napkin and so now they're in front of the napkin so that's pretty important and so now what i'm going to do is click on my napkin and actually paste the same orange that we have from our website and all i did was i just went back and actually copy and pasted it from elementor and so now i've got my orange right here and what i'm going to do is actually shrink up the napkin just a little bit and get it a little bit farther behind these just like this perfect so i'm going to highlight all three of them and shrink it a little bit and put it on one side and so now i'll go over here to the shapes and actually add my own line right here and i'll take this guy and put him on the top and then i'll drop him down to the bottom perfect so now my logo is almost done lastly all i have to do is add some text and so i'll click on my text option here and type in sebastian's table and so i'm actually going to duplicate this so i'll right click and say duplicate because i want to make one text one color and one text another color and so this is going to be table i'll go to the style tab and increase the letter spacing like this and so then for sebastian what i'm going to do is actually change the font category to something like fancy and cursive and then i'll choose one called pacifica and then lastly what i'm going to do is paste my orange color onto it and i'm going to change table to black i'll shrink one under the other shrink it just a little bit like that drag it underneath sebastian and then i can highlight both and shrink them just a little bit more and drag them into my logo constantly making small changes and i can use my arrow keys to move them around like this perfect and that's my logo so now that i've completed my logo i can go up to the top right corner and click on save logo and then i can choose no thanks download the low resolution file for free because right now it's asking if you want to use the high resolution file for 19 and so i'm just going to say no thanks and when you click on it it's going to download it to your computer now i already have this logo saved on my computer so i'm good to go okay so after you save your work once what i would recommend is also making this into a site icon and so a site icon is just this little guy up here and so what i'm going to do for mine is actually just remove the text so i'm going to click this guy and delete and i'm going to take out the center line as well and then what i'm going to do is just come over here and i'm going to highlight my napkin fork and knife and make them a little bit bigger and put them in the center of the circle perfect and then i'll just click on save and then from here it's no thanks i'll take the low resolution file and now we can go back to the customize tab right here and we can click on change logo and then select files and as you can see i've got all three saved now i also created a light logo it's the exact same logo but with all the dark spots i changed it to white just in case on a dark background if it's a transparent header you can still see the logo and so i highlight all three and open them up and now what i'm going to do is insert my regular logo here it's going to ask if you want to crop and i'm just going to say skip and so you'll see that a dark logo on a transparent header with a dark background is obviously hard to see you can't even see the word table right here and so that's why you have to customize the transparent header completely separate and so you can either click on this link right here or you can go down here to transparent header and then from here you say different logo for transparent header so you say yes and then you select your own image so this is where i'm going to insert the white logo like this perfect so now you've got the light logo here and then if there were multiple pages on this website and one of them didn't have a transparent header it would use the other logo all right so i'm going to click back i'm going to go back to site identity and logo and go to the very bottom and you'll see select a site icon and this is where we actually get to change the icon up here and so i'm going to say select the site icon and i'm going to choose this guy right here and skip the cropping and now you can see that my icon is appearing up on top so i can go ahead and save my work by clicking on publish next let's go ahead and edit our header menu or navigation menu up here and so i can go to the back button right here and again just like we edited the logo there's three ways to get here i can click on the pencil icon click on the primary menu or go to primary menu right here now i can go over to the design tab and i can choose to have a hover animation so as you hover over these they will actually animate and so i'll say zoom in and then i'll click publish to save my work and then if i go over here you'll see that they actually zoom in rather than just stay still so that's pretty cool and then if you actually want to change the menu color so the text color right here you can't do it on this one because this is actually a transparent header so it's different than a regular header so in order to do that we actually have to go back one and go back to the transparent header and click on the design tab and then from here we can actually change the menu color so the text i can change white is going to be the original color and then when you're hovering over it i can paste my orange color so click right here and hit ctrl v because it's still in my clipboard and so now it's the same color as this so when i hover over them they actually hover orange perfect so i can click on the back button and say publish to save my work next i need to edit my actual button right here and so the way i do that is i can click on the pencil this widget or just click on the button right here and i'm going to change this to contact us actually something like hours in contact and then i can change this to hashtag contact and if you remember that anchor just like this is going to take you straight down to the contact section because of the css id which i mentioned earlier and so now if you click on that button it takes me straight down here so that's cool now i can go to the design tab just like this and i can change the color of the button and everything and so what i'm going to do is change the active background color to be our orange and i'm going to change the text color to be white which it already is but i just want to make sure it stays that way and then when i hover over it i want it to invert and so i'm going to change the text color to be orange and the background color to be white so now when you hover over it it kind of inverts like this so that's pretty cool so i'll click on publish to save my work and so now our header is done so the last thing we have to do is actually edit this menu and the way we do that is we click on the back button and click it one more time and we drop down to menus and from here you can see that we've got a primary menu already set up and that was downloaded with the template so we're just going to click on it and edit it if you want to completely delete it and then just create your own you can click here but i'm going to click on primary menu and so from here we can just edit the one that's already created with the template and so if we think about it we actually have the about section which is right here and i believe it's already hooked up because of the template so that's really nice the menu section takes you straight to the menu the testimonial takes you to the testimonial section and then we don't have a gallery and contact and then hours in contact as a duplicate right here so i'm actually going to remove both of these too and so the way you do that is you just go over here click on it and click on remove right at the bottom and one more time and then i'll click publish awesome so now i can go ahead and back out of both of these two and our header is fully functional so you click on any of these and it takes you to different portions of the website if i click on book my table it takes me straight to hours in contact as well as this button right here all right and so lastly what i want to show you guys how to do is to change this footer right here and so the way you do that is just go to the footer builder and you've got html one which is basically short code as a widget you've got the copyright right here and then the social icon right here and so honestly what you could do is the short code right here is actually just using the actual text so it looks like it's an image and so what i'm going to do is actually just delete these two so i'm going to delete this one and then i'm going to delete the social icons and i'll just leave the copy right at the bottom but if you wanted to you could click on this button right here this plus button and you could add a widget and then if you were to click on it you can choose what you want to use and so you could do you know a gallery you could do an image and insert your logo you could do a whole bunch of different things but i'm not going to get into that right now for now i just want to keep it pretty plain and simple so just click on publish to save your work all right so now that we've edited our footer down here and we've edited our header as well as the menu and we put in a button and we've got our logo and a site icon we can go ahead and move on to step number seven which is mobile responsiveness so i'm going to close out of this tab and we don't really need logo maker anymore either so now that we're back on the dashboard i'm going to go ahead and open the website up on a new tab and then click on edit with elementor now mobile responsiveness is just making sure that your website looks good on different devices so if i were to look at this website on a mobile phone versus looking at it on a desktop it would look completely different and so we can actually edit both versions actually all three because you can edit a tablet version as well using elementor now the way you do that is just go to the bottom left corner right here right next to preview changes and you click on responsive mode and it's going to swap it to look like a cell phone screen and so as you can see the header text looks terrible because it compressed differently and so elementor does its best but we actually have to make some changes on our own so we'll be changing that text here we might make the button kind of appear a little bit higher the about section looked pretty good so elementor did a good job of automatically compressing that i might change the size of this text to be a little bit smaller the menu looks good all of the images compress nicely and then they can still click on the food and drinks right here and then for the newsletter i actually think that looks just fine this button might have been compressed a little bit too much and so we could change that in a second and then the testimonials looks great and so does this actual slider and so as you can see if i click on these arrows it's the same images and the contact section so let's get right into it i'm going to click on this guy right here and i'm going to change its size first of all now anything that you do in the mobile version what most things will not actually change the desktop version and the way you know if it's going to change the desktop version or not is you'll see right next to whatever you're about to change this little icon right here and it says mobile that's how you know i'm only editing the mobile version so if i go to the style tab and click on typography you'll see that the size of the text is actually still only regarding the mobile so i can change this to be a little bit more reasonable so something like this i could increase the size more but as you see it starts to kind of compress wrong so i'll move it to something like this and it actually moved the button up just like it should have anyways so we don't even have to move this at all and then if i want to i could change the size of this but i think it looks just fine and just to show you guys if i go back to responsive mode and go back to desktop the size of the text doesn't change on the desktop mode so that's pretty cool so let's scroll on down to this about section looks perfect i mean that's probably the best compression that i've seen and then we scroll down here i'll change this text size as well so click on it style tab typography and the size will just reduce so something like this our menu looks good the little subtitle which you could just insert whatever you want looks good this part we could go ahead and click on it and then under the advanced tab we can actually reduce the margin which will grow this widget if that makes sense so here i'll just do it for you guys if i reduce the size of the margins to 20 you'll see that it made the buttons bigger but now you can actually see the entire text here and it's full width of the screen so that looks good scroll on down a little bit and then the testimonials look great and so does the contact perfect so that's step number seven we've made sure that our website looks good for the mobile version as well as the desktop version so now all we have to do is click on update to save a word all right guys that was my full walkthrough of how to create a website using elementor for those of you who made it this far my hope is that you utilize this material finish customizing the rest of your website and make an amazing business from it i hope you all learned a lot from today's video and enjoyed the content and if you did be sure to leave a like on this video and subscribe to the channel because we're constantly putting out amazing in-depth tutorials just like this one that's all i have for you today thank you so much for watching and i'll see you in the next video you

Channel: Create a Pro Website

Views: 13,604

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

Id: J1QDvg2kcWA

Length: 91min 25sec (5485 seconds)

Published: Thu Aug 05 2021