HostGator WordPress Tutorial 2026 - Step by Step

Hey, I'm Caleb and today I'll show you step by step how to build your WordPress website using HostGator hosting. We'll start by setting up your hosting and grabbing your free domain and I'll make sure you know how to get the lowest price available. Then we'll install WordPress and add a free plugin that gives us access to hundreds of professional website templates. From there, we'll customize your website's design using Elementor, a beginnerfriendly drag and drop website builder. And finally, we'll publish the site so it's live and ready to go. So, how do we get started? Well, the first step is to sign up for HostGator hosting. To get the best available deal, go to the link right here at the bottom of the screen or just scroll down to the video description and click on the first link you find there. That's our special partner link. It'll make sure you're getting the best available deal when you sign up. Once you go to that link, you'll be brought to this page right here. And the first thing we'll do is click on get started. And it's going to bring you down to the plan options. Here you'll see you have four different options to choose from. You have the hatchling plan, baby plan, and the business and pro plans. The Hatchling plan is great if you just need something simple for a single website. The baby plan is the plan that I recommend the most. It gives you more flexibility and even lets you create multiple websites if you want to. The business and pro plans are designed for bigger projects or growing businesses that need lots of extra features. And if you want to see everything broken down for each plan, you can scroll down here to get the full details. All plans do include a free domain, free SSL, and a 30-day money back guarantee. For this tutorial, I'll be going with the baby plan. So, I'll go down and click on choose plan. As I mentioned earlier, you'll get a free domain with any plan that you choose. You can also use an existing domain if you already have one, or you can register a new one here. There's also an option for private registration, which I definitely recommend turning on. It keeps your personal contact information hidden from the public and it will help reduce spam on your website. For this video, I'll be registering a new domain. So, I'll click into this box here and I'll type in hostgatorwptutorial.com. Once you've typed in your domain, go over here and click on search for domain. And if that domain is available, it will automatically be added into your cart for free. Now, let's go ahead and review our cart. At the top, you'll see your hosting plan and your billing term. It's set to 3 years by default, but you can also switch this to monthly or one year. As you can see, the cost for a monthly plan is significantly higher, so I would recommend going with 1 year or 3 years. For this video, I'll go ahead with the one-year plan. Next, we have our data center. HostGator will automatically pick the one closest to you for the best performance. So, I'll just leave this as default. Below that, you'll see your free domain and then your domain privacy and protection. You also have a professional email free trial. And down below, you also have some additional add-ons. These are completely optional and you can add any of these if you'd like to. After you've reviewed your cart and you're happy with your purchase, go to the right hand side and click on continue to check out. And here you'll need to enter your billing information and payment information. I've gone ahead and entered in my payment information and billing address. So, I'll go to the right hand side here and click on submit payment. And once that's done, you'll be brought to this success page here. You'll also get a confirmation email with all of your order information and login details. So, be on the lookout for that. From here, just click on log to account and you'll be automatically signed in to the HostGator account that you just created. So, I'll click on log into account here and you'll get this pop-up message here. It should say that your WordPress website is ready. So to get started installing WordPress, click on log to WordPress. And here we'll have the option to either migrate an existing WordPress website or we can start a new one. That's the option I'll go with. So I'll click on start setup. Next, HostGator will ask us a few onboarding questions. For my experience with WordPress, I'll just click on never used it and continue setup. Here you can specify what kind of website you're creating. I'll choose a personal website and click on continue setup. It may ask you to specify what kind of website it is. So I'll choose creative portfolio and continue setup again. Now we'll set up our basic website details. Let's start with the site title at the top. This will be shown to your website visitors and it'll also appear in search engine and social media posts. I'll title my website WordPress tutorial website. And then we have our site description here. Just give a short summary of who you are or what your website is all about. I'll put creating WordPress tutorials. And down below you also have the option to link your social media. There are some additional options you can go through here for the onboarding. But with the basic info filled out, I'm going to exit the onboarding early. That way, we can set up everything else manually. So, go to the top left and click on exit to WordPress and click on exit again. And then we'll arrive to our main WordPress dashboard. At the top, you'll see that we're currently in the HostGator tab. This section lets you manage things like your hosting settings and resources that are specific to your HostGator plan. For now though, we're going to switch over to the primary WordPress dashboard, which is here on the lefth hand side. So, let's click into this here. And this is where you'll control everything that actually runs your website. And right now, you'll see that there is a lot on the screen. To clean this up, go to the top right and click on screen options. And then we'll just go ahead and uncheck everything. And don't worry, you can always turn these screen elements back on later if you do need them. I'll go back to the top right here and close out of the screen options. Now everything is looking nice and clean. Now with that done, let's move on to installing our website's theme. A theme controls the overall look and layout of your website. Things like the structure, style, and design. To install your theme, start by going to the lefth hand side here and clicking on the appearance tab. For this tutorial, we'll install the Astro theme. It's one of the most popular and beginnerfriendly WordPress themes, and it works great for just about any type of website. to install it. Let's go down here and click on add theme. Then go to the top right here and search for Astra. You'll see it here. Let's click on install and then activate. We'll go ahead and close out of this popup here. And we have now installed and activated the Astra theme. Next, we'll install a free plugin that gives us access to hundreds of professional website templates. These templates make it really easy to customize your website and get it looking exactly how you want. To start, let's go to the plugins tab here on the left and click into it. You'll notice that there's already quite a few plugins here that are installed for you. And this will vary depending on which plan you chose. When I create a new website, I like to start with a clean slate of plugins. So, I'll check this box here in the top left. Then go to bulk actions, click on deactivate and apply. And that's going to deactivate all of the plugins here. We'll also want to remove these pre-installed plugins. We can do this by clicking on the check box again, going to bulk actions, clicking on delete, and apply. And all of these plugins will now be deleted. Now, let's go ahead and install the plugin that will give us access to those free templates. Go back to the left here and click on add plugin. Then go to the top right and search for starter templates. This is the plugin you're looking for here. So click on install now and then activate. After activating starter templates, you'll be brought right into the onboarding screen. The first thing we'll do here is choose our page builder. Go to the top right here. Click into it and you'll see options for the WordPress block editor and Elementor. In some cases, Elementor may not appear here. And if that's happening for you, let me show you how to fix it. Start by going to the bottom and clicking on exit to dashboard. Then go to settings here in the bottom left on this page. Scroll all the way down to the bottom and you'll see this option here. This option will disable Elementor from showing up. And in some cases, it may be ticked on for you automatically. So, make sure that this is unchecked. Then, click on save changes. Now, let's go ahead and head back to starter templates. Let's go back to plugins here on the left. And under starter templates, click on get started. Go back to the top right and click on your page builder. And we'll select Elementor. And now we have a gallery of different templates to choose from. These templates will give us a huge jump start on designing our website. You can scroll through the homepage here and find a template that you like. Or you can use these category drop downs here at the top to find a specific template that you're looking for. You'll also notice that some templates have this premium tag. That indicates that this template is not free. But if you see any template without that premium tag, it's completely free to use. So go ahead and find a template that you like. I'll be going with the outdoor adventure template here. So I'll click on it to select it. And then we have some initial customization options here on the lefth hand side. First, you can upload your website logo. And if you don't have one yet, then don't worry. You can always add it later on. Next, you can choose a font pairing. You can select different fonts to see how they look. And I think I'll go with this font here. And then you can customize your color palette. I think I'll go with this option here. And once you're done making changes, click on continue. Next, you'll see this page that asks if you want any extra features. You can select anything that you want here or scroll down and click on skip this step. Then you'll see this confirmation page appear. You can choose if you want to enter your personal information. If not, just scroll down, click on I understand. Let's go. Then click on submit and build my website. Now, this is going to install everything for your website. And it can take a few moments to complete. Once it's done, you'll get this cool confetti animation here. To view your website, click on view your website. And here it is. The outdoor adventure template is fully loaded onto our website. You can see that everything here already looks really clean and professional. And this will give us a great starting point to customize our website and get it to look exactly how you want. To customize your website pages, go to the top and click on edit with Elementor. Before we start editing, let's take a look at how this page is structured. In Elementor, there are two main building blocks. You have containers and elements. Containers are the larger sections that hold everything together. And inside containers, you have elements, things like text, buttons, or images. To get a better look at what I mean, we can use the structure panel here. Click on the drop- down arrow next to the container to expand it. Do that once again. And now we can see everything that's inside of it. As you can see here, I have four elements inside of my container. And I can use the eyeball button here and click on it. And that's going to hide that element. I can turn it back on by clicking on the eyeball button again. And I can even hide the entire container. And you can also easily reorder your containers and elements simply by dragging and moving them underneath another element. To clear things up, let's go to the top right and close out of the structure panel. And if you ever need access to the structure panel again, just go to the top left and click on this icon here. Now, let's begin customizing our website. We'll begin by changing out some text. To edit text, just click directly on the text you want to change. You can then highlight the text here and then you can type and change out the text to say whatever you want it to. You can also edit the text here on the left hand side. And if you click into style, you have some options for how the text is going to look. You can also edit buttons in the same way. Let's click on this button here. Then on the left, we can change what the button is going to say. We'll highlight the text and I'll make it say click here. You can also change where the button will link to after a website visitor clicks on it. Let's say after somebody clicks on this button, I want them to be brought to my contact page. I can do that by highlighting the field here and typing in contact. My contact page will appear here and I'll click on it to select it. Changing out images is also super simple. Let's scroll down to a section on our website that includes some images. and we have one right here. To change the image, let's click on it. We'll highlight the image. Click on choose image. Here you'll have the option to upload an image from your device. You can click on media library at the top. This will open all of the images that exist on your website currently. Or you can click on search images. And here you'll have access to a stock image library. For example, I can type in nature. I like this image here. So I'll click on insert. And there we go. That image has now been updated on the page. We can also add in new containers and elements to our pages very easily. To add in a new container, let's scroll up and we'll find this pink popup here. Go ahead and click on this plus icon. That's going to add in a new container. You can click on the plus icon again. And here you'll be able to choose what layout you want. I'll go ahead and select the grid. I'll choose my structure. Now, let's add in a new element. go to the top left and click on this plus icon. And here we can see all of the different elements that we can add. We can add in text, an image, or a video, for example. I'll go ahead and drag in some text and drop it here. And later on, if you decide you don't want this container, you can easily delete it by clicking on the X icon. Now, we've looked at creating new containers and elements, but we can also create brand new pages. At the top, click on the drop down next to your current page name. In this case, it says home. We'll click into this, then go to the bottom and click on add new page. Make sure we save our progress by clicking on save and leave. And just like before, we could create a container and add in new elements from scratch. But if we click on this starter templates plugin here, we'll have access to a bunch of different pre-made page layouts. So, let's click on the starter templates plugin here. I'll find another template I like, like the planet Earth template, and then I'll use the about page. Nice. And now we have a super clean about us page. And we can edit all of the content within the page. Just like before, we'll also need to give this page a name. So, let's go to the top and hit this gear icon here. And on the left, we'll change this page to say who are we. And I'm also noticing that we have this page title here. So, who are we is appearing up here at the top and then also here on the main page. To hide your page title at the top, go back to the left and go all the way to the bottom. Then click on hide title. And now that title has been removed. And the last thing we want to do is make this page public. Right now you'll see that it's set to draft. To publish it, just go to the top right and click on publish. And there we go. Our page is now live. to preview our changes. Let's go back to the top right here and click on this eyeball button. And it's going to open up our website in a new tab and we can see our brand new page. One thing you may notice is that we created this brand new who are we page, but it isn't actually appearing in our main menu navigation. Let's go ahead and fix this. Start by going to the top left and clicking on customize. Then go down and click on menus. And we'll choose our main menu here. Let's go down and click on add items. We'll find the who are we page and we'll click on the plus icon to add it to our main menu. We can also reorder and remove pages here as well. Like for example, I don't need the about page anymore. So, I'll click on the X icon next to it to remove it. And then I can take the who are we page and drag it up to the top. I'm happy with this. So, I'll go to the top and click on publish. And as you can see, the menu has been updated. And now that page is part of your site's navigation. Now, let's take a look at how to update our header and footer. Your header is this section at the top of your website. To edit it, just simply hover over it until it highlights. Then, click on the pencil icon in the top left. And this will open up your header settings. You have some options here for design on the lefth hand side. And then you have your header layout here at the bottom. You'll see it split into three different sections. And you can add in new elements to your header by clicking on the plus icon. You can also reorder the existing content within your header. You can do this simply by dragging an element and moving it into a new position. I moved my menu over to the right and you'll see that change reflect here in the header in real time. And we should also change out the logo in our header as well. Let's click on the back button. Then click into site title and logo. Then click on change logo. Select your logo here. Then go to the bottom right and click on select. And here if your logo is like mine, I would recommend cropping the logo. Right now there's a lot of negative space on the bottom and top of the logo. And that can make our header look unusually large. So I'll take the slider at the top and bring it just above my logo. And I'll do the exact same thing for the bottom slider. Now go back to the bottom right and click on crop image. And you'll see that my logo is now uploaded here. To change the size of your logo, go down to logo width and use the slider to make it bigger or smaller. And finally, let's learn how to update our website's footer. Start by going to the back button at the top. Click on it once again and go down and find footer. Click into this here. and that's going to scroll all the way down to the bottom of your website. You'll have some options for the design of your footer here on the left. And your footer layout is basically the exact same as your header. You can reorder, add, and remove content here simply by dragging and moving it into a new position to finalize and publish all of the changes on my website that I've made so far. Let's go back up to the top here and click on publish. Now, all of our changes have been saved. And don't forget that when you're signing up for hosting with HostGator to go to the first link in this video's description to make sure you're getting the best available deal. Thanks for watching this video. I really hope it helped you out and I'll see you in the next