How to Make a WordPress Website with Elementor in 2024

I'm going to show you how to build a WordPress website with Elementor in just a few easy steps first I'm going to show you how to sign up for web hosting and also how to get your own free.com domain name then I'll show you how to install WordPress to your website which is also for free then we're going to be downloading a website template that's also free and is going to save you time and money after that I'll show you how to customize your website with a free page builder plugin that is the most popular and easy to use then we're going to customize the header and footer of the website and don't worry I'm going to show you how to make a logo for free as well lastly we will make sure your website looks good on all platforms whether it be a phone screen a tablet or a desktop view and then you're done by the end of this video you're going to have a website up and ready to go now I'm going to leave timestamps down in the description of this video so you can jump around to different parts of this tutorial if you think I'm talking too fast or too slow you can just adjust the playback speed of this video to be faster or slower depending on your needs and as always you can use the arrow keys to skip forwards or backwards by seconds at any time let's get started to get started building a website you have to have two things without a doubt you have to have a domain name which is the address to your website and you have to have web hosting which is where your website will be stored and be accessible to the internet now your domain name is what people are going to enter into the search bar to find your website so something like yourwebsite.com and webhosting is just renting space on a server that's connected to the internet so now that you know what they are how do you get them well you can shop for hosting providers all day long and then through your hosting provider you can get your domain name but let me go ahead and share you the trouble and share with you my favorite hosting company out of all of them and that's hostinger hostinger is the web hosting provider that I use for all of my websites and they're really easy to work with they've got great customer service and their tech support is always ready to help you out not to mention their pricing is very affordable now I'm going to go ahead and leave a link down in the description so you can follow along with me or you can go to creat apro website.com hostinger and it'll take you to a page that looks like this now this is where you're going to be able to select which hosting plan you want to use now I always recommend the business plan for just under $4 a month because of all of the wonderful features it has available for you but you can also opt in for the Premium plan if you'd like to save a little bit of money also hostinger is offering 3 months free for a limited time so be sure to take advantage of that deal after you click on add to cart you'll be prompted to choose what period you would like to make your payments and I'm going to select every 12 months and then move on down to enter my billing information notice everything here that you're getting discounted you have your business web hosting package which is discounted around $60 which by the way you're paying for all 12 months up front you also have daily backups of your website included for free which means that your website is saved as a backup daily so just in case something happens to your website you can always throw it back up you get a domain name completely for free which is what we're going to be setting up in just a second you also get domain privacy protection which just protects your personal information from telemarketers and solicitors I'm going to fill out my information and I'll see you guys on the next screen all right so once you're done filling out your billing information you'll be met with this screen right here and they're going to ask do you want to create a website or migrate one and so we're going to create one from scratch for this tutorial so we'll click on Create and then next and after that it's going to ask if you want to build a website with WordPress or if you want to use the hosting or website builder and I've got tutorials on how to use this one if you want but for today's tutorial we're going to be using Wordpress to build our website so I'm going to click on select WordPress and move on after that we get to create our login for our WordPress account and this is also the admin account for your website so you'll be using this to log into your website pretty often so just make sure that you write it down so once you enter in your password we can go ahead and move on and next we get to choose what kind of website we want to build and so you'll see that they have an online store blog online business card portfolio affiliate marketing and other for now I'm just going to click on other so that it's not trying to fill out any templates for me or anything like that and I'll click on next after that it's going to ask if we want to start with some pre-built templates or if we want to look at some standard themes I'm going to show you guys how to download a template a little bit later in the video from WordPress so we're just going to skip the step after that it's going to ask do you want pre-selected plugins for your website and you can have all of these pre-selected plugins installed on your website or we can choose to manually install what we want and so that's what we're going to do and click on next and after that it's asking if you want those four again so I'm just going to uncheck all of them cuz we're going to download the necessary plugins that we need later in the video so once you're done with that we can go ahead and click on next well okay it looks like we have to click on skip after that do you want to generate website content with AI and that would be perfectly fine if we kind of had an idea of what we're doing but I'm going to walk you guys through everything step by step uh so we're going to build everything from scratch ourselves so we're going to skip the AI for now and move on next you get to put in what your domain name is going to be for your website so this is where you get to choose your for your website so for the website I'm building I'm going to pretend like I'm building a gym or like I own a gym and so I need a website for it so I'm calling it my strength gym capw forc creater website.com and so once you click here and press enter and you've confirmed that it's available we can go ahead and click on next to continue after that it's going to ask where is your target audience and so you guys can see your United States and it's Arizona or United States Massachusetts and so they're basically doing CDN settings so basically trying to get your website to load as fast as possible where you target people to show up and so if I'm in Texas I probably want my website to be stored as close as possible to Texas so I'm going to choose Arizona right here so let's go ahead and click on next all right welcome to your website H panel this is basically the backend server side of your website and you'll notice that we're logged into our hosting your account and so this is where you can manage things like your databases and how your website is stored and things like that from here if you want to enter into your WordPress dashboard so that we can start making changes to your website you'll just click on this little admin panel button right here and you'll notice it has the WordPress logo right here and that's because it's going to take us directly to our WordPress dashboard step number two is a WordPress overview with our domain and web hosting out of the way we can now focus on building your website welcome to your WordPress dashboard and WordPress by the way is just a software that you use to build websites it's also the most popular system for building websites in the entire world I think around 43% of all websites on the entire internet use WordPress so trust me you're in good hands now WordPress is a Content management system so it basically just helps you manage all of the content that's on your website like pictures videos blog posts and so on so over here on the left hand side is your menu and this is where you can jump to different parts of your website to manage your assets you can also go to your blog posts right here and you can add or remove media on this tab I'm going to go ahead and just upload all of the pictures I'm going to use right away you can also view all of the pages that are on your website right here and then finally you can view all of the comments that people are leaving on your website right here whether that be on blog posts or products or whatever you have after that block we have all of the settings for your website under the appearance tab you can add themes to change the look of your website then you can go to the plugins Tab and you can see all of the plugins that are installed on your website after that you have users tools and settings luckily we're not really going to be touching any of these settings so we can go ahead and move on to step number three which is installing a complete website template even pro web designers like myself still use website templates to save us time when building websites for clients or for myself so that's what we're going to be doing today I'm going to have you guys download a free website template to save you probably a couple hours worth of your time in building it from scratch from your WordPress dashboard hover your mouse over the plugins Tab and then click on add new from here we can use the search bar in the top right corner to look for a plug-in called starter templates after we have activated it we will now be asked if we want to use the new AI Builder or we just want to browse through their templates which I'm going to just browse through the templates next select Elementor because that's the drag and drop page builder that we're going to be using from here you'll see tons and tons of different templates that are available for you to browse through back up at the top you'll have these categories that you can look through as well I'm just going to use the search bar and type in Hope and select this template right here just a heads up it doesn't really matter which template you use because you're just going to end up swapping out all of the pictures and text and we're going to make it look completely different from the template you're basically just deciding which layout you like the best after you select your template It'll ask you to make some changes to it and customize it just a little bit more you can add your logo right here which I'm going to go ahead and do because I created it off camera and don't worry I'm going to show you how to make this logo that I made right here for free later on in the video next It'll ask you for a font combo Choice and then you can play around with that as well as you can choose a color palette after that just make sure all of the boxes are checked except for this one and then click on submit and build my website and just like that congratulations you've downloaded a complete website template for free let's go ahead and take a look at it navigate back to your WordPress dashboard from here you can click on the website name up here in the top left corner and this will open up your website you'll see that the website template we downloaded is displaying whenever you actually go to your domain name mission accomplished all right now it's time to move on to my overview of Elementor so that you have a basic understanding of how to use it trust me it's very beginner friendly when we downloaded our website template just a moment ago it also installed all of the demo content all of the plugins and all the things that we're going to need in order to have this website up and running so now we can just open up our website inside of Elementor without even having to download it and that's because it's already been done for us now there's two ways you can do this you can just open up your website by clicking on your website name in the top left corner and then you can just click on edit with Elementor up on top or you can go to the pages Tab and hover your mouse over the page that you want to edit and then click on edit with Elementor welcome to Elementor similar to Wordpress Elementor is probably the most popular page builder in existence right now that you can use completely for free it's so good that I still use it as a pro web designer and half the time I don't even need the pro version the free version works just fine that's what we're going to be using today on the left hand side you'll see that your menu is where you can make all of the necessary changes that you need when you're editing your website on the right hand side of your screen is where you'll see the website preview where you can see all of the changes that you make live on your website whenever you click on this little Rubik's Cube icon right here you'll be shown all of the widgets that you can throw onto your website you've got images videos text editors buttons and so much more whenever you click on one of the items in your website that you want to edit you'll see the settings for it show up on the left hand side now you have three different tabs the content tab the style Tab and the advanced tab the content tab is where you're going to make changes to the content so if you're changing a heading text or a text editor widget then you're just going to be adjusting all of the text that appears if you're editing an image then the content tab is where you're literally going to change the picture that's being displayed it's pretty self-explained inventory the style tab is where you can change the stylization of whatever you're editing this is where you can make changes to typography the color the size and so much more lastly you have the advanced tab which is where you have a bunch of advanced options most of the time we're not really even going to touch the advanced tab except for just adding some margins and padding which is basically just adding a little bit of spacing between your widgets now down at the bottom left corner you have the update button which is basically your save button whenever you click on it you're going to update your website with all of the changes that you're making right now whenever you want to add something to your website just click on the Rubik's Cube icon and drag it into place directly over your website if you want to remove it just rightclick on it and then click on delete if you want to change the text on your screen just click on it and then you can type directly on your website I'm telling you Elementor is the best page builder out there and it's so easy to use now that you have a basic understanding of Elementor and where everything is let's go ahead and move on to customizing your website so today I'm going to pretend that I own a gym and so I'm going to be building a site for my business obviously whatever your small business is you're just going to insert pictures of that instead of pictures of a gym we're going to take this boring looking template and we're going to change it into something a little cooler like this let's get started on the hero section first so we're going to be starting with the first section on your website and then we'll just start moving our way down and editing one section at a time and so each section is basically surrounded by this little pink Square as you can see it goes all the way around what is called a section right here here you can barely see it but it's there if I scroll down to this next one you'll see that the pink highlight kind of goes all the way around this little spot right here so you break up your website into sections so if we scroll up to the top this one is always called the hero section because it's the first section that's showing on your website so let's go ahead and start with this one so the first change that I'm going to make is I'm actually going to rightclick just out here in the background and I'm going to say edit container and it's the same thing as hovering my mouse over these six dots right here and you'll see that it says edit container and so what doing is I'm basically editing the background of this section and so when I come over here we've got the content tab which is now the layout tab cuz whenever you edit a container like this you're basically editing the layout not the content because the content is directly for like widgets like this so if I click on this heading widget you'll see I have content and if I click on the button it's content so but you still usually have the same three tabs right here content style and Advance tab so again we're going to say edit the container which is like this whole background area and if if we go over to the style tab we can change the background image so let's go ahead and do that right now I'm going to click on it so I can choose an image and if you haven't already uploaded your files from your computer you just click on this tab right here and you would click on select files and then you can install them from your computer just like this but remember earlier on from our WordPress dashboard inside of media right here and you don't have to follow along I'm just showing you remember when I uploaded them all right here this is my website media library so on my website I have some storage and that's where I put all my pictures and so that's what I'm looking at right here you'll see it says media library you can also go one more tab over to free images and it connects to a website called pixabay and just a heads up if you go to pixabay it's actually a website where you can just get 4.4 million free images and so you can scroll through here and so basically what this tab is is it's connected to this website and so they're basically the same pictures you can use the search bar if you want and get some free images for your website oh that's cool they've got some AI images in here as well anyways that's how you can get some free images but I went ahead and already downloaded all of the pictures that I'm going to use for my gym and then obviously if you guys don't own a gym and you own some other kind of small business you would just put pictures of your business so uh let's go ahead and decide I'm going to use this picture right here for the hero section and then I can come to the bottom right corner and click on select and now as you can see we have changed the background of our website pretty simple now there's actually something a little more special that I want to do to the background rather than just changing the picture and what I want to do is actually make it a slideshow in the background so it's a bit more Dynamic and that's really easy to do if you go over here right above the image you'll see that we have different types of a background we can do classic a gradient like this which is kind of a bad gradient let's do something that's a little bit more prominent for you guys to see change this one to Blue and so as you can see you can make a gradient uh you can do a video which would be a YouTube link and you just put it right here and then we can also do a slideshow and so I'm going to be doing a slideshow so once you choose your slideshow you just basically pick your images right here and it's really easy we go to the media library and I can pick a couple images that I really like so we could do this picture right here and then we could choose this one and maybe this one as well I think those three are good ones and you'll see they have a little check button right next to them so that means that I'm using them and we'll go ahead and create a new gallery and then this is where it's confirming hey these are the three images you chose you can also rearrange them if you want by dragging and dropping them and then we can just go to the bottom right corner and click on insert gallery and so now every 5 Seconds you'll see that the background is going to change but what I also want to do is make it even more Dynamic and I'm going to do the Ken Burns effect right here and so whenever you click on it you'll see that it basically slowly Zooms in which is pretty cool you can also change it to zoom out if you want to but I'm not going to now the next thing that we can do is also change the duration so right now it's every 5 seconds because it's in milliseconds if you see that right there so 5,000 milliseconds is 5 Seconds you can just basically take the the zeros off I'm going to change it to be every 7 Seconds just so that it takes a little bit longer and it's not changing so fast in the background okay so we're off to a good start we've got a really good picture in the background another thing that we can do is actually go over to the background overlay oh well first I want to actually change the background size to be cover which is going to automatically stretch these images to kind of fit the background which they already were but I just wanted to double check so next what we can do is we can decide if we want the position to be Center or not which will just focus on the center of the image but it looks like they're already optimized to kind of fit the Center so we didn't even need that all right so now we can move over to the background overlay and this is where I'm actually going to add a little bit of more of like a dark bluish black color and then you can change the opacity right here to be completely that color or none of the color whatsoever so opaque or transparent and so I'm going to kind of go for something a little bit more of like a in the middle so probably like a 50% like this and that just makes it a lot easier to read your text as opposed to this where it kind of doesn't really bounce off the background it kind of Blends in it's hard to read whenever you start to add an overlay it's a little bit easy easier to read your text and so I might actually even play with the color a little bit and kind of go a little bit less blue and a little bit more on the black side so something like this I think that looks pretty good and that's just personal preference of course okay so I think the background is looking fantastic now let's go ahead and move on to editing the text as well as the button here and I might even actually go in here and change this to be almost like 10 seconds instead of just seven because it feels like it's just changing so fast oh it went down to no that is 10 seconds okay cool I thought it went down to 1,000 but I guess there's an extra zero back here as you can see oh and now I'm changing it hang on there we go so now every 10 seconds it's going to change so it's not as distracting in the background I do want it to be slightly Dynamic but I also don't want to completely distract people where they're focusing on the pictures and they're not paying attention to what I'm actually offering for my business okay so the next thing I'm going to do is we're going to make some changes to this container so we actually need to change the text to be full width so let's go over to the layout tab and this is where editing this container in the background and so I'm basically about to make changes to where I want the items inside of this container to be positioned and so right now I can change my items to be stacked vertically like this or I could choose them to be in a row and so now instead of stacking vertically they stack horizontally which I still think I want them vertically like this I can also have them stack backwards and so now the button is first as you can see and I can have them reversed vertically as well so these are kind of quick rearranging buttons which is kind of nice I want them to sequentially move down and so that's what I'm doing and then I can justify the content right now it's centered if I choose the top it's up on top if I choose the bottom it's on the bottom and you guys get the idea so I'm actually going to come over here to align items and I'm going to change it to the left- hand side and so now inside of the containers it's going to align them to the left and so I also want them on the very edge of my website so let's go ahead and change boxed to full width and so now whenever I choose if I want them in the center or on the side you'll see that they actually move and that's because now the container is not putting them inside of a box in the center it's stretched to the full width okay so all I've been doing right now is just some layout changes so that my text is now going to be thrown over to the left hand side just like this but I also don't want this completely on the edge because if I'm previewing this like this like if I was actually a visitor to the website it looks weird how the text is like snug up against the side I kind of want it to be starting right about here and that's a really easy change to make by the way I'm just clicking on this little arrow key right here and it hides the menu so if I want some space I can go to the advaned tab and I can come over here to padding and for this container if I want on the left hand side to have a little bit of padding I can just click on left and drag my mouse and you'll see that I'm basically controlling how much padding I want you can also enter in an actual value but I find it easier to just drag like this CU you can kind of visually say h right about there I think looks good and who knows I would have guessed 164 but as you can see dragging makes it easier all right so now that I've got my text right here I can go ahead and move on to actually adding some more elements so the first thing I'm going to do is change this to be all caps so let's go over here to the style Tab and we're going to change the typography and we're going to transform the text to be uppercase and so now it's completely uppercase and let's change this to the name of the gym that we're building so I'm going to pretend that my the name of my gym is just strength gym because I couldn't think of anything like a play on words and I was just like you know what we're going to create a business and I'm too lazy to think of something cool so this is what you get okay so now we're going to go back into the little pencil icon to edit the typography which typography is just basically all of your settings for your font so you've got your font font size you've got your font weight so I can go down to make it thin if I want to we're going to go back to default you can do decoration like if you want to underline through line or whatever it's pretty self-explanatory it's just like if you're making changes in Microsoft Word or in notes or something like that I'm going to adjust the letter spacing to increase just a little bit so something like this and I think that looks pretty good okay so I think this looks fantastic as my heading text and you can also see the HTML tag as H1 which is what I wanted so now what we're going to do is duplicate this so I just right click on it and say duplicate right here this saves me the trouble of having to click on the Rubik's Cube icon find the heading and drag it in just like this right so I'm going to delete it so anytime you want to add some more text you can always just duplicate like this which I actually am going to duplicate it twice because I want text on top and on the bottom so now that I have text on the top and on the bottom I'm going to click on the first text and let's make some changes so the first thing I'm going to do is change it to H2 which is instantly going to change how my text looks or not okay that's fine normally in a lot of different templates it would actually change because they have these set to look different if it doesn't that's perfectly fine we'll leave it at H2 and now we're going to go to the style Tab and change what it actually looks like well first of all let's just change the text and remember you can literally type on screen you'll see my cursor is now on screen or you can just type over here inside of the content tab it's basically the same thing okay so power and might is going to be like my little slogan and so we'll go to the style tab now and first of all we're going to reduce the size significantly and then we can also change the weight to be something like 400 so it's a little bit thinner cuz I want it to be kind of like a subtitle but on top and then if we really want to we can also adjust the letter spacing to be a little bit less it's completely up to you guys but I think that looks pretty decent so now actually I'm going to delete this one and I'm actually going to duplicate this guy right here and then I'm going to drag from the pencil icon and move him below there we go all right and now we've made a lot of changes just to be safe I'm going to click on update to save my work and you'll notice that I try to save my work pretty often so that I don't lose any progress just in case if my internet goes out or if I get uh if I accidentally close the tab or something like that you'd be surprised it's just a good habit to get into okay so now we can change this subtitle right here to say something a little different so let's try something like this so do you want to join our community and then let's go ahead and put a new widget right here so I'm going to go over to the Rubik's Cube icon I'm going to search for an icon list and you'll see it show up right here so we'll drag this bad boy in right over the button and so now let me first change the text color under the style tab so that you guys can actually see what's happening so I'm going to go to the text tab right here and and we'll do the color right here and so we can just change it to the white I'm going to click on the default Global colors and I'm going to use my Global color palette and the reason I'm going to do that is so that later on if I ever want to change all of the colors on my website oh it looks like I left an F there somehow there we go so the reason that I'm doing the global color is because if I ever want to change all of the colors of my website at the same time all I have to do is change my Global color palette which is all these colors right here the theme colors and then the entire website coloring is going to change and that's kind of similar IL to when we were under and you don't have to follow me but I just want to show you guys when we were over here looking at starter templates and we chose to look at a template so let's just pick a random one really quickly this one when we were playing around with these color palettes right here as you can see whenever I click on it you see how it completely changes all of the colors of the website at the same time that's because I'm changing the global color palette right here and so if I were to close out of this tab and again you don't have to follow along I just want to show you guys so you understand what we're editing here and if I were to actually customize my current website that I'm editing right now so as you can see the strength gym website that we're editing right now inside of Elementor if I go over to the global colors and don't worry I'm going to show you how to do this later I'm just kind of showing you visually so you understand what we're doing this is my Global color palette right here and that's the same thing as when I click on this Global color palette that's these same colors right here so you'll see light blue dark blue black gray light blue dark blue black gray and so on right and so if I were to change these colors the colors on my website are also going to change so I don't want to do it right well I guess I could let me just show you really quickly I'll copy this color code so I don't lose it if I were to change this to Red for example oh I changed the wrong one so we're actually using this blue color so let me control or command V let's change this color instead copy it and if I were to change it to like red you'll see that now the button changed to red and I didn't even do anything right and so if I scroll on down I'm sure yep there's the red color right here here's the red color right here if I were to change that color instead to Yellow now it's all yellow see how it's yellow and then it's yellow so it's really important to try and use your Global colors as much as possible and I just pasted the same color code so that I didn't lose my color there we go so it's really important to try and use these Global colors as much as you can so that later on if you ever want to change the colors of your website it's super easy you literally just change one color and the entire website changes so that's just my recommendation for you every once in a while I'll be stubborn and I'll actually pick a custom color but it's more important to actually go over here to the global and then use your theme colors so anyways so now change the text let me also change the icon color really quickly so I go to Icon and we'll choose white perfect so now you can see what I'm doing so we'll go back to the content tab so you'll notice that these correspond to these so if I want the check mark to be second I can just drag it and now you'll see it's second place so it's pretty self-explanatory if you click on it you'll see I've got the text right here and here's the icon so it's really easy to make changes to if you want to so now we're going to go ahead and change this up a little bit so let's try the first one to be something like personal training and then we can click to close it we'll go to the second one and we can change this to be something like open classes and then we can change the third one to be membership options or it could say anything I mean it could say like affordable memberships basically I'm giving them three reasons that they might want to join my community hey we've got personal training we have classes that you can sign up for and then we also have affordable memberships and so I just said membership options cuz again this is just an example I'm not trying to be like a perfect website right now I'm just trying to give you guys ideas here right so I think this looks pretty good and so from here what we can do is also change the icon so I can click on person training and we might try something like shaking hands so we might try something like this and so that's personal training like you're getting uh someone working with you and then maybe for open classes I don't know let's try and pick something here we could look through here and try and pick something that looks like membership classes I don't know this looks like a university so we can just say open classes with a university icon probably not the best one but I'm just trying to do this fast for you guys and so then we can also do one for membership options and so maybe we choose like a clipboard where it looks like they're writing down they're information or something I don't know you'd probably want to be a little bit more intentional on what you pick for your membership or for your icons or whatever see if they have like a clipboard yeah they have a clipboard cool membership options done probably not the best icons you guys can pick some better ones for whatever you're doing but you get the idea you can kind of make this look pretty good and then we can go over to the style Tab and I can change the spacing between which is kind of nice which I think is fine at zero or we could just clear it out so it's using default we can go to the icon and change the size to be a little bit bigger and then we can go to the text and also make the text a little bit bigger so it's a little easier to see and then we can actually go back to the list and kind of increase the space now that everything's bigger so that's an idea like that okay cool and now we can click on update to save our work okay so now what we can do is we can also change this button so if we go into Elementor we can make changes to all of the buttons on our website or we can just edit one individually so you'll notice that this button right here looks identical to this button right here which you know these are also the secondary buttons but this is the primary butt button on your website so kind of in the same way of using Global colors you also have a global template for a button so bear with me guys let's go ahead and see if we can change this without having a touch Elementor that way all of the buttons change at the same time but to be honest I don't really think you need to change this button very much actually you know what to save us time especially cuz this tutorial is already going to be long we're not going to do that I think the buttons work just fine the way they are you don't really need to change the look of them right now if you change your Global colors the button color is going to change so there's no reason to try and style it to look any different so I'm going to leave it but the one thing that we can do is if you click on the little icon the little pencil icon right here to edit your button as you can see what we can do is we can change the text right here so instead of get started maybe we want to say sign up and then we could also go over to the style Tab and we could change the typography to be uppercase if we want to so something like this wow that looks really aggressive but we're just going to leave it for now all right so now we can click on update to save our work I think that looks pretty good so for a hero section I think that's looking pretty good for now we can go ahead and move on to the next section if you guys obviously want to change anything to look a little different you can totally do that but this is just how I chose to make my hero section look okay so now if we scroll on down the next thing is the three services that you can offer and so you can choose the layout of your website but I think what I'm going to do is actually come down here and I'm going to take this about section and I'm going to move it up on top and so there's two ways of doing this first is actually I'm not even really going to use this about section I'm actually going to kind of build it from scratch so a you could just delete it and then I could create a new one up on top or if you personally like this about section and you just want to change the picture to be a picture of you and the text to be you know whatever you want to say then what you can do is you can click and drag on the six dots like this and watch this I can scroll up and I can change the order on my website by dragging this on top so now I just switched orders right so if you guys want to let me scroll up here you guys can drag this one to be up above the services right here but personally I'm just going to delete delete this real quick by clicking on that little X icon because I'm going to put my about section up here so I'm going to build it from scratch just like this and I'm going to choose flex boox and I'm going to choose let's see the down perfect and we're ready to go so now that I have my new section here I can actually drag the services section beneath the little testimonial section right here so now this looks a little bit better so the first thing I'm going to do is change the background color cuz I don't want it to be blue I want it to be white so we'll go to the style tab after you click on the six dots right here we'll choose classic and let's choose our theme color which is six right here so now our background color is white and so next what we're going to do is just add a bunch of stuff into our container right here so the first thing you click on the plus button and it's the same thing as clicking on the Rubik's Cube I'm going to drag an image in here and then I can go ahead and add a picture so let's just pick this one I think this is a good about picture it's like about me and I'm looking all tough that's not me obviously that's a picture of some random dude but you know cool all right so now that we have that we can go ahead and click on the Rubik's Cube icon again and let's drag in a heading text right underneath him and then we can drag in another one if we want and then lastly we can go ahead and drag in some text editors actually let's be a little complicated uh drag in a container like this and then inside of this container we can click on the container to make changes and we'll say we want this one to be row horizontal and that way when I put in two text editors well I put one in and then I duplicate they're going to be side by side like this that that's the point okay and then now that we have all of our elements in place I'm going to go up here and add some padding on the top and bottom so I'm going to click on the six dots advaned tab unlink the values together cuz if they're linked together and I add you see how it goes all over the place I don't want that we're going to delete unlink the values together and I'm going to add to the top let's just say about that much so 100 and then we'll do the same to the bottom perfect so now as you can see we have our text spaced out from the bottom we have our picture spaced out from the top okay so now it's time to make some changes let's go ahead and edit the text first and so the first thing that we'll do is we'll change this to say something like about the founder so about the founder and so actually I'm going to delete this bottom one and we'll just duplicate this in a second I'm going to go style tab typography and I'm going to choose to capitalize each word and so now it looks like a title now we're going to duplicate it and I've already duplicated the capitalization which is kind of nice that's why I did that it's just a skip a step and now we can change this to be the sub title and let's just pretend this guy's name is Andre I don't know how old this dude is I'm not trying to say he looks older than he is I just put in a random date I don't even know what age that makes him what is it 2024 right now so whatever but let's just say Andre has been in the fitness industry for uh or since 1986 let's maybe say 96 just so he doesn't look so old my goodness okay so now let's go a and make this look like a subtitle by going and adjusting the style size so we can go ahead and make it look more like a subtitle so something like like this we can change the weight to be something a little bit less bold and we could even increase the letter spacing just a little bit if we really wanted to something like this maybe a little smaller and then what we can do is click on about the founder right here go to the advanced Tab and I'm going to unlink the values together under margin and remove margin from the bottom which is going to drag my subtext up a little bit I think that looks a little bit better for your dummy text right here you guys can put in whatever you want but just to make it look a little bit more full I'm going to put in some text here there we go and then see the width needs to be 50/50 or actually we're going to clear that out well you know what we're going to do so contrl all contrl C contrl all contrl V there we go now it's going to be identical so it fits perfectly okay so we'll click on update to save our work just to make sure that everything is saved and ready to go all right so I think the about section is looking pretty good the one last thing that I don't like is how the image is not big enough to kind of stretch to the edges of the text and so the way you can do that is you just click on the image and then we can change the size to be full there we go now it looks so much better okay so now I think it looks a lot better for the about section I think we're pretty much done so we've got hero section done about section is done and so now we can scroll on down to this little testimonial section right here so for my example I'm not really going to make too many changes to this the only thing that I want to do is just change the background color so we'll go to the style tab click on global and from here I'm going to kind of choose like the darker color like this and so the only thing I'm going to show you guys how to do is how to make changes to this but honestly I wasn't going to make any changes cuz it's just a testimonial so it's not like it actually needs to be anything for you guys anyways but how you would change this obviously if you had someone who left a testimonial for you is the first thing you'd want to do is upload a picture of them and so it's really easy to do you just upload a file from your computer right and so they're just using this picture right here and you would insert it by clicking on select and so that's how you would do it and then you would change the size from something like large you could change it down to thumbnail if you wanted like 150150 so nice and small picture we could click on the text right here and so first thing I'm going to do is just change the text color because you can't even see it so something like that but obviously all this is is you just click right here and you can change their name so if it wasn't Ruth and you had someone named John leave a testimonial for you you would just put JN right here it's pretty self-explanatory and then right here this text again you click on it and you can type in whatever they said so tell your friend whoever's leaving you a testimonial hey send me an email just saying how much you like it and I'll paste it on my website and then you literally just copy and paste from the email and put it right here pretty self-explanatory but I am going to change the text color again cuz we made the dark background so we need light text and lastly same thing for the button just click on the pencil icon we'll go over to the style Tab and we're looking for text color as well as the Border color so text color is black as you can see and Border color is black so let's just change it to White easy peasy lemon squeezy click on update to save your work and now our testimonial section is a little bit more of like a dark theme which is kind of like what we're going with for the website bunch of dark images so I figured I'd make this dark another thing you could do if you really wanted to I don't necessarily think I like this bluish gray so let's see if we have something else I could do ooh the kind of Royal dark blue looks good what other theme colors do I have let's see what's eight Eight's like even darker my goodness nine o I like nine that's the desaturated gray I was looking for I didn't really want to clash light blue with dark blue so I wanted something that's a little bit less colored I think that looks the best yeah perfect so I'm going to go with theme color 9 of course you guys can go over to that customize tab that I just showed you a second ago if you really wanted to kind of customize those colors to be something different you can but I'm just going to leave it the way it is cuz it works so anyways I like how this looks so now we can move on to the next section which is the services section all right so for the services section what I'm going to do is obviously first change the pictures and then also the text so actually let's change let's just go top to bottom we'll change the text first so this text up here could say something like certified certified personal trainer based in Oakland California perfect you want to know how I'm going to fix this cuz it's caps and not caps you guessed it I'm going to be lazy and change the typography to uppercase so I don't have to go and retype all that in lower case or uppercase or whatever you want nice so now that's uppercase and so I'm a certified personal trainer based in Oakland California I I guess my gym is in California now that's cool so next I can change the the uh heading text right here and so we can change this from prob I can help with let's try Services I can offer you and again I'm being super lazy typing everything in lowercase and changing it to whatever transformation I want because later on if I ever decide to change anything I don't have to go over here and make sure I'm capitalizing everything like no all I got to do is just start typing and everything is the same look so that's why I always do that I'm trying to Future proof my own website if that makes sense okay so now I've changed these two we can move on to the pictures again you guys kind of get the idea of how to use Elementor by now I'm sure so we'll click on uh this one right here choose the image and let's just pick something like this one I think looks pretty good so we've got obviously not web design so let's call this uh personal training all right so we've got personal training next we can click on this one and what were the services we provide we've got personal training open classes and membership options so personal training open classes and membership options okay there we go and so for this picture we'll say open classes let's kind of pick a picture that looks like you're in a class I think this one's pretty good so it's a picture of her she looks like she's maybe in one of those you know hit classes or something like that and then lastly we'll change this picture as well and we can choose something like I don't know what would signify open membership let's just do a picture of the gym cool so we've got personal training open classes and membership options and in the future what I would do is have multiple pages on this website obviously today I'm just showing you how to build a onepage website but what I would do is make this a multi-page website and then I would click on this text right here and I would add a link so let's just for example let's obviously pretend it's not YouTube and let's say that whenever they click on personal training it takes them to the personal training page on my website whenever they click on classes it'll take them to a page that talks about classes and then whenever they click on membership it would take them to a page that has like a pricing table and it would show off you know different membership options I have but for example if you add a link like this and then I were to click on update to save my work and this little eyeball right here here next to updates is preview changes and it's going to open your website on a new tab so that you can interact with everything if I go down here and I click on that link it'll take you to that link so for example YouTube so you guys get the idea I'm going to clear that link out and click on update to save but uh you would find you would go and build another page in your website right and then you would link it to this button right here which it's not really a button it's text but you get the idea whenever someone wants personal training they would go to that page classes that page membership options go to that page okay so my services is done for now I'm just showing what I offer and then at the bottom we'll have like a contact form where they can get in contact with me because this is a onepage website so I don't want to get too complicated but in the future you guys would probably want to add more pages and I would definitely recommend that and so I think at the very end of the video I'll probably link to one of my other tutorials and it's a really short one where I tell you how to add pages to your website so anyways now that we're done with the services section we can move on all right so next what we're going to do is add a call to action right here and so what a call to action is basically you're calling the visitor of your website to do something so for example hey sign up now join our community now sign up for classes now sign up for a membership right now so that's a call to action so right here is where you would say something like want to join our community and we'll make that uppercase really quickly uh and we can reduce the size a little bit if we really want to so do you want to join our community let's go to the style tab on this one and just reduce the size a little bit so it looks more like a subtitle there we go so do you want to join our community get in touch today and so there's the button to get in touch and so what we'll do is we'll say edit this background the container way out here or click on the six dots and we'll just pick a picture for the background that's gym related let's do this one because he's like deadlifting and it looks cool and then also what I'm going to do is change the attachment to fixed and so now whenever you scroll it does this really cool Parallax effect check that out so now as they're scrolling through the website it looks like there's like a threedimensional background and it kind of pans up this guy's body doing dead lft so it's like hey do you want to join our strength Community get in touch and they'd click on it and they would take him to the contact form right so that's pretty cool and so then click on update to save our work that's pretty much done you'd want to obviously change this text to say something like if you're interested in joining the membership is really affordable get in touch with us you know say something right there and then now we can go ahead and add a contact Section so let's just add one from scratch again and so again anytime you want to add a section it's really simple you just click on the plus button right there there and it opens up like a little tab right here and you can choose to build one from a template starter templates or you can hit the plus button to build from scratch we'll choose Flex box and we'll do a side by side so I want this one I basically want it to look like this so actually let's click on this one duh might as well have two containers ready to go in the first container click on the plus button and I can add an image uh so let's go ahead and add an image of like this guy and then on the right hand side we can add our contact form so search WP forms in the search bar up on top there we go I don't know why it didn't show up the first time because WP WP but whatever drag in your WP form which is a widget for your contact form and then make sure you select your actual contact form and voila you have a contact form on your website super easy and then next let's go ahead and add like a little heading widget as well so Rubik's Cube icon again drag a heading widget on top and we'll say something like let's sign you up and again I messed up my capitalization cuz I got lazy halfway through so we'll just uppercase it like that kind of similar to how we're doing everything is uppercase or for the most part at least you want to be consistent by the way I'm being lazy because I'm just showing you how to use Elementor but obviously if I was building this for a client if one title is all caps the rest of them have to be all caps so all caps I would have to change this one to be all caps which was a really easy change might as well do it really quickly uppercase and then this one all caps so if one title's all caps then you want them all to be uppercase right so let's come back down here we can change the size of the image so instead of large we could do medium oh God never mind uh and so another way that we could kind of reduce the size is we actually delete the image and instead we can edit the container right here and make the background image the same picture so I can do this and then obviously set it to focus on the center of the picture and then we can set the size to be cover which will stretch the picture I think that looks so much better cuz it's kind of cropped to the bottom of the contact form as opposed to that image which looked way too big okay so now we can also click on the six dots right up here and we can go over to the style let's go to Advan Tab and we can increase padding on the top and bottom so unlink the values together and on the top we can add let's say 100 and then on the bottom 100 perfect we can also even add a little bit of padding in between these two so if I click on this one right here to edit this container advaned Tab and I could just add a little bit of padding on the left side yeah I think that looked a little bit better so there's a little bit of space in between the two and then we can click on update to save our work let me just preview it really quickly because I want to see what it looks like so I can scroll on down yeah I like how much spaces in between there that looks really good okay so we'll close that so I think the contact form is done now let's finally just add some hours of operation and kind of a map pointing to where my gym is and I think that'll be enough contact information for people to be able to get touch if they really wanted to so in order to do that we're going to add another section from scratch this one can just focus on a downward Direction click on the plus button and from here we can look for Google Maps and now we have a Google Maps widget we can throw in here and you see how it's not full width I want it to be like a banner that's full width so let's click on the six dots and instead of box let's change to full width so now it's going to stretch it across which I think looks so much better and then lastly we can actually click on the pencil icon right here to edit our Google Maps and we can change the address to Austin Texas cuz that's where I am right now but you would obviously want to put in the exact address of wherever your business is and that's how people would know where your address is so maybe instead of Austin Texas let's just uh well you know what I don't really want to put in a fake address and go find one so for now I'm just going to have it set to Austin Texas but if you put in the actual address you can have a pin show up so people are like oh okay so like right there I can see is where his gym is that's probably only 10 minutes for me so that's kind of an example right there you can adjust the height of this Banner so all you do is just drag it and so you can make it a lot taller as you can see or a lot shorter so I think about that size looks good and then you can also adjust the zoom so right now it's zoomed out I can kind of zoom in if I want to oops that zooms out okay so let's go more so let's go like 13 and now I'm zoomed in even more to the Austin area right okay I think that looks pretty good so now that we have a map and we're pretending that there's a pin on some address that I actually put in here but I'm just too lazy to go find a fake address now we can add the hours of operation and like our email or contact information and stuff like that okay so in order to do that we can click on the new container button again and this time I'm going to choose four but I actually only want three so I'm going to click on it so that it puts four in there and then I'll just remove one just like that super easy I can also click on my six dots right here and I can justify my content to the center and that'll fix the problem of why it was off center like that so we'll just enter our content like this and now we have perfect three little boxes to put some information and so I'll click on the plus button or the Rubik's Cube whichever one you want and I can add a heading text as well as Let's do an icon list okay so we're going to finish this one and then I'll just duplicate it two more times all right so what we're going to do is change the text first we'll say location and let's change the style to first of all let's Center the text and let's make the side is a lot smaller oops didn't mean to do that clear okay well we're going to have to choose a color now so let's choose theme color three and we'll change the size to be a little bit smaller so something like location like this I think it looks good and then now we can adjust the line items so we could say something like and then this third one I'm just going to remove just by clicking on the x button right there and so now all I got to do is just remove those icons so it looks like I just have text underneath a heading and so the way I'm going to do that is just delete delete the icon pretty simple just like that so now it looks like I've got my address under location and then lastly if I want I can do let's see alignment is going to be Center and so now they kind of Center up underneath my text which looks good okay so now let's just duplicate this two more times so actually what I'm going to do is just duplicate the entire container and delete the one next to it and then duplicate the entire container and delete the one next to it okay there we go so now I've got three and I'm just going to change the text hours and then this one can be something like contact us okay so the hours let's go and change these out uh let's do Monday through Friday let's just put a dash Monday through Friday there we go and then we'll say this is going to be like 5: to 9:00 p.m. wow that's terrible uh let's say 5:00 a.m. to 9:00 p.m. let's go 5 a.m. to 900 p.m. there we go so our hours are Monday through Friday 5: to 9:00 there we go and then for our contact us you can obviously put in your contact information so let's just put in like a fake phone number and I'll put in you know like some kind of a fake email address cool example email.com okay and so now you guys get the idea of what I was trying to do down here so after they come down here they have a get in touch button which could either take them to a landing page or you could just have it linked where if they click on it it just drags them right down here and so now you've got your contact form right here where they can fill out all of their information and they can sign up down below if they were just looking for information cuz they wanted to call you they could just scroll down and they'll be like oh okay so I can contact them at this phone number and they're open right now and this is where they are so you have all of the information that you need other than that I just want to change the background color to be white again I don't know why it keeps using this blue I mean I do know why by the way uh if I go to dashboard and customize you do not have to follow along let me just show you what I mean I know why it's taking this color is if you go over here to the global colors really fast the site background is using this blue color so instead if I really wanted to I could just change it to use the white color super easy actually if you guys want to do that let me just show you really fast so from your WordPress dashboard you go appearance and then you click on customize and it'll open up this page and then from here you would go over to the global Tab and then colors and then under colors is where you have all these colors you can just change the site background to use your white color instead so these are your global colors right here change it to white instead of that blue and so now you'll see that the background is white this is white everything is white so I think it looks good cool so we can close out of that customize Tab and I can go back to Elementor that's why I like opening things on new tabs so that I can just bounce back and forth and so the way that we make sure that this changes you'll notice it's still blue is because just click on update to save and refresh the page perfect so now if we scroll on down perfect you'll see it's using a white background so it looks really good all right I think our website is looking fantastic now we're going to work on the header and the footer and then I'm also going to show you guys how to build a complete logo for free let's get started so now from inside of Elementor we can just close out of this tab or if you don't have another tab with your dashboard open what you do is you click on the hamburger icon right here in the top left corner and then you click on exit and it's going to ask hey you're exiting where do you want to go and you can say your WordPress dashboard and so now you'll be taken back to your WordPress dashboard now I always recommend opening things on new tabs so if you open up your website like this open it on a new tab and that's by right clicking on it and I say open on a new tab or you can middle Mouse button click the reason I do that is so if I'm editing an Elementor over here I can just jump right back into my dashboard if I need to do something so I always like having multiple tabs open anyways now that our website is good to go we want to work on the header and footer so from your WordPress dashboard we'll go over to the appearance Tab and click on customize which again I'm going to move move on a new tab so now what we're going to be editing is this up here which is your header and then we're going to edit down below the footer which is this down here and then also I'm going to show you guys how I made this logo and you guys can make it too completely for free so we'll do that in just a second here so let's go ahead and focus on your navigation menu first right here so normally when you go up to your navigation menu you click on the about page and it would take you to a separate page and this is your about page and then you go to your services page and your contact page right and so right now none of these are custom ized because we only customized the homepage and if I tried to show you guys how to build a complete website with multiple pages and multiple sub pages and all that it would take way too long so today I'm just showing you how to build onepage website which has everything on it right so they have an about section yeah it's right here I have a Services section it's right down here and then I have a contact Section which is down below right so a onepage website is simple and it's easy for beginners if you guys want to you can go and customize each one of these pages and the way that you do that let me refresh the page is you open up your website on a new tab and normally you would click on edit with Elementor right here but this is a perfect example of sometimes your website glitches out a little bit and so you won't see the edit with Elementor ribbon up here and so if you don't see that ribbon up there you can always go over to your pages like I was showing you earlier and you hover over what page you want to edit like the homepage and you can click on edit with Elementor right here so if you want to edit the about page you would just click on edit with Elementor right here and now as you can see see I'll be editing the about page and you guys can do all of the same changes you guys did on the homepage here and then that's the same situation with the contact page as you can see I can make changes to whatever I want so this is where it's up to you guys if you want you can try to edit all of these pages and have them linked up to all of the buttons that you have so all these buttons and stuff like that or you can just make a single page website and that's what this tutorial is going to be so for the sake of this tutorial and for the sake of keeping things simple I'm actually going to delete all these other pages so under the pages tab on my WordPress dashboard I'm going to select the other pages and I'm going to bulk action I'm going to move them to the trash bin and so now all I have is one page now again this is up to you guys if you want to keep things simple cuz you're a beginner and just make a single page website this is what you're going to do follow along with me but if you want to keep all those other Pages you can leave them there and you can go and customize them it's up to you but so for this tutorial we're going to stick to one page so now I can go ahead and close out of this tab refresh my customize page and you'll notice that all those pages disappeared because they're no longer on my website so good now in order to edit this we can either click on the pencil icon right here and you'll see that it's automatically going to take me to the settings on the Le hand side or for y'all's knowledge I'm going to show you how to get there on your own so if you want to edit the header we're going to go to the header Builder and then from here we have the site title and Logo which the logo is right here we have the button which is over here and then we have the primary menu which is right here or it used to be right you also Al have a visual representation down below so you have the logo over here on the left and it's on the left you've got the menu right here on the left hand side of the button but it's on the right hand side of the screen and then you have the button which is on the right hand side of the menu and so for example if I were to move the button to this middle spot now you'll see that the button's in the middle so this is a visual representation of what you're editing up on top so first I'm going to show you guys how to customize this button right here which has a phone number on it if you guys want to leave this as the company phone number for your gym then all you would have to do is click on on the button right here and you can literally change the text right here so it's 202 555 7890 you guys could change this to say something different and then the link is just telephone number and then here's your phone number so just put in your actual phone number right here and then when people click on it it'll try to actually call right so that's how the button works I'm not going to make a change to it cuz I think it's fine I'm just going to show you guys how to add your navigation menu right here but now you know how to change the text if you want to you could also have this link somewhere else so for example you could have this link to a contact page put the URL of your contact page right here and then you could just say the words contact right here and then it'll just say contact and you could click on it and it'll take you to your contact page but as you can see right now it's asking when I click on it do you want to FaceTime this website because there's a phone number behind the button as you can see so it's trying to basically FaceTime this phone number so that's how you guys can put in your own phone number right here if you want anyways let me show you guys how to make changes to your navigation menu you would think that you would click on primary menu but you'll notice that it's not right here you have to configure the menu over here which is going to take you to a completely different place let me show you how to get there so instead of the header Builder we'll go down to menus and then we'll view the main menu and you'll notice that they're all invalid because we don't have those pages anymore so if you click on plus add items you'll see a little X appears and now you can just delete them quickly otherwise you would have to click on it and then click on remove and then you click on the next one and then click on remove so I always like just opening this up and then you just click on the the x button right here so we have the homepage which takes you to the front page of the website now we're going to add custom links that link you to different portions of the website so let me show you what I mean we're going to put an anchor right here called hashtab and then whenever you click on the button up here that says about I want it to drag your screen down to the about section okay so the way that we do that is first we just have to put the title about that's what's going to display and then we actually have to put the URL behind what displays and the URL is going to be hasht about add to menu all right so now you see we have home and out right there so let's go and do the same thing for the next one which is the services section and then we would do hash Services add to menu and then next we're going to do what's the next one contact yeah contact oh it has to be all caps because the rest of more and then we would say hasht contact add the menu click on publish in the top right corner to save your work and publish it live on the internet and you're done now your navigation menu is displaying but when you click on it nothing happens as you can see except for the home button because that's actually linked to a page okay so in order to make that work we have to jump back inside of Elementor so from your WordPress dashboard normally you would just open up your website and then click on edit with Elementor right here oh now it's showing for some reason as you can see sometimes it just glitches out it's whatever I'm going to click on edit with Elementor right here and again that's cuz from the dashboard I click on my website and then you just click on edit with Elementor right here okay so now that you're inside of Elementor again and notice how I have my t open so I can jump back and forth now that you're in Elementor we have to label with an anchor we have to tell the computer that this is your an about section right so the way we do that is just edit with the six dots right here go to the Advance Tab and you're going to add a CSS ID which is basically an anchor and just call this the about just like that so now you'll notice that up in the navigation menu up here on the top we put in hashtag about and that's because that hashtag is going to search your website for an anchor which this is the anchor about so whatever you put in front of the hash tag is what's calling on this CSS ID okay in the most simple way that I can say so now that we have this one as about click on update we'll do that for the rest of them so for the services section click on the six dots Advanced tab Services all lowercase and then lastly contact right here advaned tab CSS ID contact update okay so now if I click on the preview changes button which opens up my website on a new tab now whenever I click on hash about you'll see it drags me to the about section if I click on Services it drags me straight to services and if I click on contact it's going to throw me straight to the contact form pretty neat right I think that looks really cool so now also actually let me show you again so now we're back on Elementor I'm just going to close out of this tab and I'm going to open up my website on a new tab right so now pay attention to the hyperlink while I make my clicks okay you'll notice that when I click on the about button oh interesting it's not doing it what it's going to do is it normally would put like a hashtag about right behind it so if I do this hashtab it's going to take me to that CSS ID and so if I go hash Services it's going to take me straight to the services button it looks like that's a new update where it doesn't actually show what you click on which is kind of cool but what basically this button is doing is when you click on it it's taking you to strength jimc apw.com hasab and then it would take you to the about section that's basically what your browser is doing and that's what the custom link is so I'm just explaining it to you so you have a better understanding of what it's doing and that's why when I type in the the URL you know ashab like this it'll take you straight to the about section so that's what's happening but it looks like it's not even showing that which is kind of cool so now when you click on about it just goes down so used to be it would actually show the hashtag about when you click on it okay so now your navigation menu is done so let's go ahead and focus on the logo so now I'm going to show you guys how to build a logo completely for free and the way you do that is you open a new tab and you go to a website called logo maker but without the e so logo maker like this and so now you can either choose from one of their templates or click on start my design I'm going to actually pick a template save myself some time and the one that I actually chose is this one you'll probably think it looks pretty similar to this one right here so when you click on it now it's really easy because the template did most of the work for me and now I just got to change the icon in the text rather than building it from scratch so the first thing I'm going to do let's close out of that tab is I need to pick the dumbbell so let me walk you through logo maker really quickly top left corner is where you can search from over 3 million Graphics so I'm going to click on back to Canvas the left hand side is where you have basic functions like text triangles pencil Paint Bucket and then on the right hand side is where you can change the color the saturation and everything of whatever object you're editing so the first thing I'm going to do is delete this icon so you click on it and I'm just going to click on delete let's go ahead and add a dumbbell and I can't remember exactly which one I used so this one's kind of of like this and it's got a a flat side so it's kind of similar to this one I think I scrolled through for a while and found one and it's probably really far down and I don't want to try and go find it so for now we're just going to pick one and I think you know what let's just go with this one it's not exactly what I have on mine but it's because I just kept scrolling for a really long time so you get what you get all right so now I'm going to use the corner to drag it and make it a little bit bigger so now it'll kind of stretch across my text like that and that's basically what I did for this one as you can see so now we can change the color of this icon here okay the reason you can't grab your icon is because the square is in front of it click on the clip art right here as you can see and now I've selected it and now I can drag it around right center it up if I come over here I can change the color as you can see I can desaturate it and then I can also change the color right but that's one color you'll notice that mine is a gradient from red to blue and so if you want to do that you can just click on a linear gradient right here and now you'll see that it's two colors right here and so I can drag this over and I'll change this one to like a red color and then I'll change this one to like a blue color it's literally that easy done oops if you accidentally click you can just drag it away and now it's no longer there but that's for like if you want to add a third color so like green and so now it goes red green blue uh but we'll take that out okay so now all we got to do is change the text so let's click on it and we'll type something else there we go so strength gy and so I think that looks good we can kind of increase the size if we really really want to here let's see if we can increase the weight line width letter spacing word spacing fixed no okay so we would have to change the font so I'm going to hit controller command Z wow stuff is really glitching out right now I did not change you to be something like that I just had you as a solid color there we go okay so the way I did that was I just clicked on the Square that's back here it's just a square that's all it is and I just changed it to Black so you can see what we're working on because if it was like white you see how you can't see the text so I just made it black okay so let's goe and change the text again because everything's glitching right now for some reason I think I don't even think I included gy I think I just said strength right yeah it just says strength and then power and might is the slogan so let's change the slogan right here cool and that's how I made my logo it was so easy right and so now finally if I save this it's going to save the black Square behind it so it was nice to have it so I know what I was doing but now I need to delete the square so I'm just going to click on the Square and then hit the delete button I know you can't see it but the text is still here so don't worry but you need to leave it white so that on a dark background you can see the white text so now that my logo's done I'm going to go over to the top right corner and click on Save logo and it's going to load for a second and then if you click on this button it's going to open a new tab and say hey give me your money don't do it you don't have to pay $29 or $60 I'm I just told you it's free and it is this is for the high resolution file so you're getting a large file we're going to download the low resolution file completely for free so skip this button go right here it says download low resolution PNG file and then you just have to accept the terms enter your email and it's going to send it to your email so click on so this is my email create a pro portfolio we're going to hit send email boom completely for free I just downloaded my low resolution file and you'll see it was for free so now we can close out of this tab cuz we don't really need it anymore well actually let me show you guys how to make a favicon as well so this is called a favicon right here same thing with this little Globe icon you'll notice that yours has the default Globe icon cuz we haven't actually created a special one if I were to go to YouTube you'll see that YouTube has its own favicon as well let me show you how to make that right now we're going to delete the text so I'm going to highlight both of my text and just hit delete so now there's just the Dum dumbbell and we're going to save this one one more time so let's click on Save logo download the low resolution file put in my email send all right so now that we're done we can close out of this tab CU we don't need it anymore next what you can do is go over to your email and you'll see that I have two emails from logo maker and this is where I can download my file for free so if I hit download you'll see that I just downloaded my logo and so there it is right there so I can do the same thing one more time and I can download down below here which is the second email this is my fab and so now you see it's the favicon perfect okay close out of your email now we're back on your website so now if you want to add your logo you go over to the header Builder and then you go to site title and logo and so now my logo is already there because remember when we downloaded the template I installed it automatically this is where you're going to finally put it so you would hit change logo and you would upload the file from your computer and so I'm actually going to upload the favicon cuz I don't already have it just so that it's there and ready to go but I'm still going to use my logo so you would click on select you can skip the cropping if you want and so now your logo is going to display done so now if you want your favicon to display just scroll down a little bit and it's at the very bottom right here click on it and now you're going to select your site icon it's going to ask if you want to crop and right now it's making my icon really small so I'm actually am going to see if I can crop can I nope it's not going to let me all right so that's about as big as I get it so I can actually skip cropping and we'll see if it makes it bigger but here's an example of what it's going to look like as you can see so say skip cropping and and boom as you can see the it's a low resolution file so it's really small but you guys get the idea that's how you can upload your own favicon if you want so anyways maybe on logo maker you would just make it bigger and then download it I just downloaded one that was absolutely tiny so that's why it looks really small okay so once you're done with your site logo and your favicon publish it to make it live okay so now we can go ahead and move on to the footer of the website and so the footer we just click on footer Builder right here and it's automatically going to throw us to the very bottom so obviously the first thing we want to do is change the logo and if we look at our visual representation we see that HTML is the logo this right here is the copyright and this right here is a footer menu and so you'll see them over here as well I wanted to explain that because if you're like whoa what's html1 what does that mean why doesn't it just say site title and Logo well it's a little different for the footer so that's why so if you click on HTML 1 you'll see it's a picture so then you just click on the picture and hit remove and now with that gone we can go ahead and click on the plus button button and we can add our own logo and so I'm just going to put the site favicon right here and voila you'll see it'll pop up in the bottom right here perfect so now we've got our logo centered next we can edit the copyright you just click on it as you can see it takes you to the copyright and so now instead of Hope starter design you could say something like strength gy right 2024 strength gym publish and then over here on the left hand side we have our footer menu which is automatically pulling from the navigation menu which is way up on top so this same menu up here is the same menu down below so we actually don't have to make any changes to it cuz now whenever you click on services and contact it all works so uh there's really no reason to change that so now we're actually done that was really fast but the footer was super easy to change you just change the picture and the copyright perfect and whenever you're done just make sure you hit publish and then we can close out of that Tab and go back to the WordPress dashboard our final step to complete this website is double-checking the mobile responsiveness of our site now we just created our website on a desktop view but what happens if you look at this website on your cell phone we just created created it inside of a horizontal rectangle view but a cell phone is more of a vertical rectangle View and what about a tablet which is basically the same as a laptop screen it's a little bit smaller than a desktop view it's not necessarily a vertical rectangle but it's definitely a lot more narrow than it's supposed to be on a desktop view you need to make sure that your website looks good on all modes of viewing in order to do that we can hop back into Elementor so inside of Elementor if we want to change the mobile responsive mode of our website we would go over here to the left hand side and we're going to see the bottom left corner right next to preview changes you'll see responsive mode you're going to click on it and then you'll see a banner appear on the top right up here and so now we have desktop tablet and mobile so if I go from desktop to tablet you'll see that this looks more of like a laptop screen or a tablet and then if I go from tablet to mobile you'll see that now my website looks like I'm viewing it on a mobile screen so for desktop view everything looks good right but if I switch over to tablet view you'll see that my hero section looks crazy and wonky so we're going to have to make some some changes my about section looks perfectly fine I just might want to add some spacing on the sides testimonial looks good and services looks fantastic we might want to adjust the text here contact looks just fine and so does this so let's make those changes now by the way let me click on this this widget right here anytime you're about to make a change to an object on your website you'll notice that right here I've got a little tablet icon right here or if I'm on the desktop view you'll see that it says the desktop view right here anytime you have this icon right here it means that whatever changes you make on this viewing mode will not affect the other viewing modes okay so for example if we're on the tablet View and I make this text super small because this is the subtitle text so if I go to the style Tab and let's just say actually I make it massive like this and then I go back over to desktop view you'll notice it did not change the desktop view and that's because this size has the little icon right next to it that says that this is different for all three modes so if I go back to tablet view you'll see that it's massive so let's go ahead and Shrink that down and make it some subtitle text so something like this strength gym is supposed to be my H1 massive text so we can go to the style tab typography and we can increase the size of this one if we want to and then power and might we kind of want it to be basically the same size as this so if you want you can just right click and say copy and then we can right click and say paste style and you'll see that it's going to copy the same style the sizing basically next we need to shrink these down a little bit cuz they're a little too big for the tablet View so we go to style and we go to Icon and you'll see that the size of the icon is also individual for different viewing modes so we can reduce the size we can go to the text size which is also limited so we'll shrink that down a little bit and then we can go to the list and the space between is also individual from all other viewing modes so we can go ahead and remove the Gap entirely oops let's actually go down to zero perfect okay so everything looks good I could use a little bit more spacing between the bottom and the top text so if I really wanted to I could edit this container the six dots go to the advanced Tab and again the padding is different than the desktop version so on the left I might want a little bit more spacing on the bottom I might want a little bit more as well so something like this and I think that looks pretty good and then on top I've got 70 so maybe I shrink the 70 to about 45 and now it's a little bit more centered so now on a laptop you know everything looks like it's sized correctly scroll on down and we have the about section and so I think what I might do is add just a little bit of padding so if I go to my six dots here Advan tab it's different than the desktop view right so if I adjust the top and bottom it's not going to change the desktop view so let's go ahead and you'll notice the second you try to make a change it instantly flips so let's just delete that really quickly we'll leave the values not linked so let's do this actually looks better when they're all linked on the mobile view or on the laptop view so I think I'm going to leave that and let's just go to 25 perfect I think that looks so much better so now on a laptop you scroll on down and that's what you see so much better we could also adjust the text size right here to be a little bit more of like a subtitle size so again you click on it style tab we can just reduce the size a little bit easy peasy and again if I were to switch to desktop view none of the changes I'm making as you can see is adjusting the desktop view everything still looks good so that's good to know we'll go back to tablet Services looks fantastic we don't need to make changes I'm going to shrink the text down a little bit on this section right here so we'll kind of reduce it a little bit I think it looks so much better and then we'll scroll on down a little bit more contact Section looks good and so does the information of our business now one that I might change is this looks a little bit taller on the tablet View and you'll notice that the height is an individual change so it's not affecting everything else so I might shrink it a little bit just like that so now that I've made my changes to the tablet view I can go ahead and click on update to save my work and then let's move over to the mobile view which looks so much worse actually not that bad so let's go and make changes to our mobile view first of all let's change the text sizes again which again are individual to the mode that you're working on so we'll make this a little bit more of like a 20 I guess this one can be a little bit bigger depending on what look you're going for again this is all personal preference and then I'll just copy this one and paste the style and then we're also going to change it from centered to be a line to the left there we go we could also shrink this down even more and make it one line if we really wanted to so we could do this if we really wanted to you see how I went down just by two and it made it stretch in there so that's pretty cool again it's all just personal preference but if you like how that looks then we're good so now I think the everything else looks perfectly fine in terms of sizing so from here I'm going to scroll on down and go to the about section let's try shrinking the text to see if it makes it look a little bit less congested right here so let's adjust the size a little bit maybe say about the founder all in one line and then we can shrink the size of this subtext as well so something like this and then also on the mobile view this looks a little too close so I can actually adjust that margin that I did if you guys remember on the desktop view we'll go to the advanced Tab and you remember how I added minus 26 well I might be able to go let's go and zero it out real quick unlink the values and on the bottom we'll just remove a little bit less instead of - 26 we'll just say what is it -4 so it's a little bit better and again this is not making any changes to the other versions as you can see okay so the about section looks good testimonial looks good Services looks perfect and we can see that we stacked all three of them so that's good and then we have our call to action which looks a little wonky so let's just adjust the size again something like this think it looks a little bit better scroll on down a little more so it looked like for the contact form it just stacked our image on top of our contact form so first of all we can go ahead and finally adjust remember I added a little bit of space in between these two well now it's showing up on the left and it just kind of has it a skew so I just click on the container right here and under the advaned tab you'll see that the padding is still 29 on the left well now we can just zero that out and you'll see that it kind of fits perfectly now if you want to add a little bit of padding you can so if we want to add a little padding on all sides so that it looks like it's not touching the edges as you can see and then we'll adjust adjust the text right here so we can change the style typography and we can reduce the size a little bit so much better and then if we want to we can just increase the size of this guy right here so if we want we could do minimum height is not going to adjust the other viewing modes so under mobile I could actually adjust the height and still have the picture visible but then on the desktop view it still didn't change how big the picture is as you can see I think that looks a lot better and then finally we have our maps and then all three of our informations uh or little segments right here stacked so I think everything looks good and then we have the footer as well now there's one last final thing that I forgot to tell you about and it has to do with our mobile responsiveness so let's click on update to save our work so our website looks good on all mobile responsive modes uh we've got laptop desktop and mobile but what about our header menu if we go over here to customize one last time we can also do the same thing we've got our mobile responsive modes down here in the bottom left corner of our screen you see this down here so we're on desktop we can go to the tablet View and as you can see our menu Isn't there anymore we have this little toggle button that shows you our menu right and then also the same thing for the mobile we have this little hamburger icon right so the way that you can edit this by the way is you go over to the header Builder and you'll see that we have uh where is it ah the off canvas menu it's right down here in the bottom left corner you'll see that on our off canvas menu you can click on the settings button and you can choose kind of some settings here you can also pick the design I'm not really going to make any changes because it works perfectly fine the way it is for your template so for your website it'll still be colored the same as all of your buttons but you'll see that right here you can add different icons so as well if you really wanted to we could add a widget if we really wanted to just as an example and then inside of this widget just as just as an example you don't have to follow along I could put an image and I could upload our logo and then every time you open up the menu you have our logo down here as well you guys can get kind of creative with what's on your off canvas menu but for now let's keep it simple okay we're not going to add anything all you need to make sure is that your primary menu is also inside of your off canvas right here and that's only for your tablet and your mobile cuz you'll notice when I go to desktop that disappears it's no longer there because you have the full menu so if we go to the laptop screen or the tablet screen you'll see that now we have our menu which let's double check it works if I click on about yep it's going to move me good and contact perfect so it works and you can do the same thing to double check for your mobile view but it's going to so we're good to go so I just wanted to double check that this was linked up because on some templates you download this won't have the primary menu installed and so all you would have to do is just click on it and just add the primary menu from here but it's not here because it's right there so you guys get the idea okay so that is how you can change the mobile responsive mode of your website so we click on publish to save our work and we can jump back into the dashboard now your website looks great but there's only one page to it if you're looking to add more pages to your website check out this video right here where I show you how to in just two easy steps I'll see you guys there

Channel: Create a Pro Website

Views: 10,382

Keywords: elementor wordpress tutorial 2024, free domain, free hosting, wordpress tutorial 2024, build a website, create a website, create a wordpress website, elementor flexbox container tutoriall, how to build a website, how to create a website, how to make a website, how to make a website for free, how to make a website using wordpress, make a website, make a wordpress website, wordpress for beginners, wordpress tutorial, wordpress tutorial for beginners, wordpress website tutorial

Id: 6h9Rqj6Gano

Length: 79min 17sec (4757 seconds)

Published: Mon Apr 22 2024