Introduction: Build a WordPress Site in 10 Minutes
So, you want to build a WordPress website. You open up your laptop, head over to Google, and type in how to build a WordPress website. And you're immediately hit with dozens of tutorials talking about SSLs, web hosting, plugins, themes, and suddenly you're overwhelmed. You're worried that you might break something, or worse, you might pay for something that you don't actually need.
So, here's the truth. Even if you've never made a website before, you can build a beautiful, fully customizable WordPress website in 10 minutes. And the best part? You don't need to know any coding. You can customize it visually with a super easy-to-use drag-and-drop builder. I'm Dale from Create a Pro Website, and in this video, I'm going to show you exactly that. So, let's jump right in.
Step 1: Get Web Hosting with Hostinger
Step number one is to get web hosting. And you might be wondering, what is web hosting? Web hosting is just a server where all of your website files live. This server is connected to the internet and running 24/7, so anyone can access your website at any time. Web hosting is a mandatory part of the process. You need this in order to set up a website. And my favorite hosting service is with Hostinger, because they're super beginner-friendly, and hosting is only three to four dollars a month. And I have a special discount with them that gets you another 10% discount on top of that. So, just go ahead and click on the very first link in the description, and that will take you here to my landing page with Hostinger. And you'll know you're in the right place whenever you see the Create a Pro Website coupon code applied up here, or you can see my face right down here. So, here's where we're going to get our hosting. So, we're going to go ahead and click on start now.
And here's where you choose a plan. And they have a 30-day money-back guarantee, which is awesome. So, my recommendation is to go with the business plan, because you get up to a lot more websites, as well as a lot more storage. But you can do the premium plan as well. This tutorial will work for either plan. But I think the business is the best deal, so I'm going to click on choose plan.
So, here's where you can choose your billing cycle. So, 48 months is going to get you the biggest discount possible, but just keep in mind that you will be paying for this upfront. So, if you do want to go with shorter months, the shortest that I recommend going with is 12 months. And this is because the free domain name that you're getting is going to be for 12 months anyway. So, you might as well have your web hosting line up with that. And 1 month, in my opinion, just really isn't enough time to get customers or clients over to your website. So, I'm going to go with the 12 months. And you don't want to secure your domain name right here. We're going to do that in the next step. And then just make sure that you've got this createaprowebsite coupon code applied here. That's going to get you an extra 10% discount on top of the already existing discount. So, whenever you're ready, just click on continue.
And then just go ahead and fill in your billing details here, and then just click on continue.
And then just fill in your card info. I've already got mine saved, so I'm just going to click on submit payment.
Step 2: One-Click WordPress Installation
Cool. So, from here, we're just going to say create a website. And then just click on next. And from here, we can move on to installing WordPress. And this can be done in just one single click. So, we're just going to select WordPress right here, and then just click next.
And then here you can just create some login details. So, I'm going to change the password to one that I know. And then just go ahead and click next.
Step 3: Claiming Your Free Domain Name
Awesome. So, from here, we can move on to securing a domain name. So, as you can see, we've got one free domain available right here. So, I'm just going to go ahead and type one in. So, I did createaprosite.com, and you can see that it's free for 1 year. So, I'm going to go ahead and select it. And then just click next. And then just go ahead and click register.
And from here, you'll be asked to choose where your target audience is located, but don't overthink this. You can still reach everyone globally. So, I'm going to leave mine as Arizona in the US and then just click next. And just like that, it's installing WordPress and you can even play this little game while you wait. Ah, well, hey, if you beat 260, let me know in the comments.
Step 4: Installing the Astra Theme
Awesome. So, once that finishes up, you'll be brought here and we're actually going to choose neither of these. We're going to say go to WordPress. So, now we can move on to our next step, which is to install a new theme. And the theme that we're going to be installing today is called Astra. It works really well with our visual drag-and-drop page builder. So, to get it, we're just going to go over to appearance and then themes. And then you can just click on the add theme button up here. And then just go over to the search bar and type in Astra. And then you'll see Astra right here. So, what we're going to do is just click on install. And then just click activate.
Awesome. So, the cool thing about Astra is that they've got hundreds of awesome templates that you can start with and it really takes out all of the legwork. And you can customize all these templates however way that you want. So, we're just going to click on start building now right here.
Step 5: Choosing an Elementor Starter Template
And then from here, we're just going to say let's get started. And then you can just click skip on this step. And then we can just say continue. And then from here, we're just going to click on build with templates underneath classic starter templates.
Awesome. So, now a really, really important step. We're just going to click on the back button. I know that we just got here, but we're going to click on the back button and make sure that we select Elementor. Because Elementor is the drag-and-drop page builder that we're going to be using to customize our website. So, we want to make sure that all these templates are built with Elementor. So, if you scroll down, there are hundreds of awesome options in here and if you see any that have this little yellow premium tag, it just means that it's a paid option, but there are tons of amazing free ones in here as well.
So, I'm just going to scroll down until I see one that I like. I'm going to go with this one over here. And from here, you can see a preview of what that site is going to look like if you scroll down. And if you want, you can get started by just changing the fonts and the colors here. But don't worry, you can still customize this later with Elementor. So, I'm just going to select maybe the blue theme. So, then I'll just click on continue. And then just make sure this says Elementor right here, and then just click on continue. Now, I'll just put in my first name here. And then just say submit and build my site.
Step 6: Customizing Your Site with Elementor
Awesome. Congratulations, our new website is ready to go. So, now we can just go ahead and click on view your website. Cool. So, now you can see our new template website has been imported, and you can see our domain name up here. So, now we can move on to my favorite step, which is to customize your website. So, we're going to be customizing our website using Elementor, which has already been installed for us with this template. You can just see the little edit with Elementor button up here. We're going to go ahead and click that.
So, now here we are inside of Elementor, and it's pretty simple. You can see that we've got all of our widgets that we can drag and drop into our website right here. And if we were to click on one of these elements, this window also turns into our editor. And it's so intuitive that you can just click right on the screen and edit from here. Or you can also edit right over here in this little box. So, let's start by changing this text.
Cool. So, you can see that my text is really big now. So, let's go ahead and make it smaller. So, we're just going to click on the style tab up here. And then we'll just click on typography. And then you can change the size right here. So, I'm going to go with something like that. And if you want to change the color of your font, you can just come down here to text color. So, if we want to change the text color, just click here. And then you can just select any color that you want. But, I'm going to go with the standard black.
So, you can see if we scroll down, anything that has a new background is going to be a new section and it's outlined in pink here. And then inside of sections, you have columns, which are these gray dotted boxes. And then inside of columns, you have widgets, which are also outlined in pink and they have a little pencil symbol on them. So, it goes sections and then columns and then widgets inside of the columns. Cool. So, now let's continue editing. So, let's go ahead and change this image here. So, we'll just click on it and then go over to choose image. And then we can just upload files by dragging them in. So, I'm just going to drag this one in. And I just dragged in a PNG image with a transparent background. That way, my face will show up in front of the text. So, I'm just going to click on select. And as you can see, I am absolutely huge. So, let's go ahead and edit that. We're just going to click on the style tab right here. And just by clicking that, it is already edited this image to look a lot better. But if you do want to change it, you can just drag this little width slider. And you can just drag it up however you want. So, now let's go ahead and change our background. So, to do that, we're just going to scroll up until you see the six dots for the section up here. We're just going to click on it. And then we're just going to go over to the style tab. And here you can see that we've got a bunch of different background types. So, with classic, you can do an image or you can do a color. So, you could just select the color here and change it to anything that you want. Or you can do a gradient. So, we can just click on the gradient button right here. And then you can change this to two different colors. So, we could do maybe a darker blue like this. And you can also do a video and a slideshow. So, in this case, I'm actually going to do a video. And you can see here that we can just drop in a YouTube link. So, I'm just going to paste it right here.
Awesome. So, now you can see my background in here. And this is just a royalty-free background that I downloaded and then I just uploaded it to YouTube as an unlisted video. Awesome. So, now let's go ahead and edit our button. So, I'm just going to scroll down and click on it. And then you can just put in a link to wherever you want this button to go here. So, you would just delete the hashtag and then just paste in any URL that you want this button to go to. And we can change the text of the button right here. So, I'm just going to edit that to say work with me. And then lastly, we'll just replace this text here. So, I'm just going to click on it and I'll delete it here and put in some new text. So, I'm going to go ahead and just edit the rest of the website the way that we just did with the hero section.
Okay, so I went ahead and edited the rest of the website. You can see I've got examples of my work here. We've got a why work with me section, my creative workflow, my services, a little about me section, and then if we scroll down we've got some testimonials, and then our contact section. But this contact section is a little too simple. So, let's move on to our next step, which is to create a contact form.
So, we're just going to go up to the plus button here to add an element, and we're just going to type in WP. And you'll see WP Forms right here. We're just going to drag that in. And then from here we'll just select a form, and we're going to say contact form. Cool. And just like that, it added a new contact form for us. So, what we're going to do is go over to advanced, and then we're just going to change the padding. So, we're just going to unlink these values here. And then I'm just going to give about 200 on both the right and the left. And that's going to give us some margins on both sides and it looks a lot better. And then don't forget to click publish to save your work.
Step 8: Customizing the Header, Logo, and Menu
Awesome. So, now we can move on to editing our header menu. So, this will include things like adding a logo as well as editing our navigation menu. So, to do this, we're just going to click on the customize button. And then that will bring us to our theme settings. So, Astra is our theme and that's how we're going to control the header and the footer. So, for this we're going to change our logo. So, you can see that we've got a little pencil icon if we hover over where the old logo is. So, we're just going to click on that. And then you can see that we can remove our other logo and add a new one. So, I'm just going to click on remove and then select a logo.
And then I'll just go over to upload files and I'll just drag one in. And then I'll just click on select. And I'm just going to click on skip cropping. Cool. So, now you can see our logo has been added. And if you want to change the size of it, you can just come over here to logo width and just drag it up or down. I'm going to make it pretty small. So, now the next thing that we can do is edit our navigation menu. So, to do that, we're just going to hover over it and just click on the pencil icon. And then we can just say configure menu from here. And then underneath primary menu, you'll see main menu. We're just going to edit that menu.
So, if you want to add an item to your menu, you can just click on the add items button. And you can see if we close this box, we can add just a custom link that will go to any URL that you want or you can add pages, posts, categories and so on. And if you want to reorder that menu, you just click and drag and you can reorder these however you want. Or you can create sub menu items by just simply clicking and moving this over until it looks like a little stair step. And then if I go ahead and hide these controls, you can see that now we have a little sub menu item, which is really cool. And then I'm just going to click on publish to save my work.
Step 9: Optimizing for Mobile Devices
Awesome. So, now we can move on to our final step which is to edit our website for mobile devices. So, let's go ahead and just click on the X. And then from here, we can just click on edit with Elementor.
Cool. So, now you can see right up here we've got a desktop, a tablet and a mobile symbol. So, let's just go ahead and click on the mobile and here is where you can edit your website for mobile. So, currently the rest of the website is looking pretty good because we used a template. So, it's already pre-built for mobile devices, which is really cool. But, as you can see up at the top, my face is looking pretty scrunched. So, let's go ahead and fix that. So, we're just going to click on the image. And then we'll just go over to the style tab. And you can see that anything that has this little mobile portrait symbol, you can change and it's only going to affect mobile. It won't affect the desktop or tablet. So, I'm going to go over to object fit, which has this little symbol. And I'm just going to change it to cover. Cool. So, now you can see that's looking a lot better. And if I go back to desktop, everything is still looking normal.
Conclusion
Okay. So, that was how to make a WordPress website. And as you can see, it only took us about 10 minutes, especially with Hostinger setup. You can get your web hosting, your domain name, and install WordPress all in one easy place. So, don't forget to click the link in the description to get a discount on your web hosting. If you enjoyed this video, please hit that like button. It really helps my channel grow. And if you want to see more tutorials like this, please consider subscribing to the channel. My name's Dale from CreativeProWebsite, and I will see you on the next one.
