Introduction & Overview
Hi, my name is Dan. And in this tutorial, I'll show you how to easily set up your WordPress website using Hostinger. We'll start by signing up with Hostinger and securing the best available price for your WordPress hosting. Next, I'll guide you through setting up your domain and installing WordPress.
Then I'll show you how to get free access to hundreds of professionally designed website templates that are fully customizable and mobile friendly. You'll also learn how to easily customise these templates using Elementor, the most popular visual page builder for WordPress.
Everything we use in this video is free except for the hosting with Hostinger. But if you use the special link in the video description, you'll get an exclusive 10% discount on your hosting plan, a better deal than what you'll find even on hosting your homepage.
Signing Up for Hostinger
Let's select a hosting plan and domain now. So to get your additional 10% off and to get a free domain, click claim deal. Here we can see the hosting our plans. While the business plan does offer a few benefits, you can always upgrade later and everything I show you in this tutorial you can do with the premium plan. So I'll click choose plan.
On this screen, you can select your hosting period. Choosing 48 months saves you the most money by locking in this rate, but 12 months is still a great deal to get started, you still get a free domain. And I'll click continue. Next, register with Hostinger by creating a username and a password. Once you've registered, enter your billing address, followed by your payment information. Then click submit payment.
Navigating to the Dashboard & Verifying Email
Once you've paid, you'll land on the Hostinger onboarding. To save some time, and skip the onboarding sequence for now, let's click on the Hostinger logo here up at the top and go straight to the Hostinger dashboard. Confirm by clicking leave, and now we're on the Hostinger dashboard.
In our to-do items, you can see that we need to verify our email. Let's open our email inbox in a new tab, find the Hostinger email with the subject line, verify your email address, open it, and then click verify email. That will complete the verification step and bring us back to the dashboard so we can now close these other two tabs.
Claiming and Verifying Your Free Domain
Now that we've verified our email, we're officially done setting up hosting. Next, let's choose our free domain. And our domain is simply the name of our website. For your website, it can be anything you like as long as it's still available. Click claim domain here. Ideally, you pick something short, memorable, and a dotcom domain that's still available. I'll go with hwptutorial2 as in hosting a WordPress tutorial, and then click check availability.
When you find something available, click claim domain. Here you may be prompted to enter your contact details to register your domain, and after you do that, it's important to verify your email address. Let's just do that now so that we don't forget. Open your email inbox once more, find the new email with subject line, verify your email address to use your domain, and open that. Then click verify email. Once verified, you can close these two tabs.
Installing WordPress
Now that we have set up our hosting and we have our domain, it's time to instal WordPress. Click the continue button here to get started. Next, we wanna create a website and if prompted, click continue setup. Your website will be for you or your business, and we wanna create a website. Click next. Here, we'll choose to build with WordPress, and then on the next screen you'll create login details for your WordPress account. This is the account that you'll use to manage your website. Click next.
Here, I'm going to choose create blank site. Don't stress if this screen appears slightly different for you or if it prompts you to choose a theme in order to continue. I will show you how to change the theme later. So for now, choose the default theme if you don't see a blank site button. On this screen, we wanna select the domain that we just registered, so I'll pick mine from the dropdown, and then you wanna select the closest data centre to your audience. The default is usually fine here, so I'll leave mine as is. Once that's selected, I'll click instal WordPress, and this will usually only take a few minutes.
Cleaning Up the WordPress Dashboard
Great. Now we've arrived at the WordPress admin dashboard. This is your website's backend, the place you'll come when you wanna make a change, publish a page, or instal something new. You will land here in the Hostinger section, so let's click dashboard, home.
Before we start designing, let's clean up these tiles and messages so that your WP admin dashboard is free of clutter. I'll dismiss the welcome banner, and then I'll open screen options. Here, I'm going to uncheck all of the screen elements. You can always add ones back in later if you'd like. Then I'll collapse my screen options.
Installing the Astra Theme
The next important thing we have to do is instal our theme, which will give our website the basic structure. A theme controls the colours, fonts, and layouts, and we'll instal a popular free theme called Astra. From our dashboard, hover over appearance, and then click themes. Then click add theme. If you don't see it here, you can search in the top right. I'll type in Astra. Then hover over it, and click instal. Once it's done installing, click activate.
Installing the Starter Templates Plugin
Next, I'm going to show you how to get access to hundreds of free website templates that are fully customizable using a plugin. A plugin works like an app for your website. It adds new features, just like apps do on your phone. Click on plugins, then go up to add plugin. Search plugins for starter templates. When you see this one, you can click instal now. Once it's done installing, click activate to open starter templates.
Here, click build with templates. If you don't see Elementor as an option, please check out the video linked in the card in the top right, which will show you how to fix this. And then select Elementor as our page builder.
Choosing and Importing a Website Template
Starter templates lets you build and edit pages using simple drag and drop tools. It gives you many ready-made designs to choose from, and we'll use one that's totally free. Now let's pick a template for your website. A template gives you a complete layout with pages already designed, so what's the difference between a theme and a template? A theme, like Astra, controls the overall look of your entire website, things like fonts, colours, and layout. A template only controls the layout of one specific page like your homepage or about page.
You can still change anything later, but choosing a good template gives us a great starting point. As you scroll, you'll see a few of these that are marked as premium, and if you click on any one of these, you can get a preview. If you aren't sure, click this X to return to the previous page. You can browse by category if you find that helpful, but this one caught my eye earlier, and I'll select that.
If you have a site logo already, you can upload that here, but I'll show you how to do that later if you don't have one yet. And then you can choose a font pair and colour palette here as well. When you're ready, click continue. Instead of selecting features, I'll click skip this step and I'll skip and continue here, and finally check that you understand and click submit and build my website. Your website may take just a few minutes to build.
Exploring the Elementor Page Builder Interface
Once it's finished, click here to visit your website. With your template installed and your site built, you can explore and navigate around, but it's time to use the Elementor page builder to change what's on your website. Elementor is a visual page builder. That means that you can click on something like text or an image and just change it right on the screen. You can close this tab and in the WordPress admin bar, click edit with Elementor.
I'll walk you through each step using Elementor so that you can feel confident editing your site anytime. Each page is structured in two containers. If we hover over these sections, we can see them outlined in magenta, and we have container handles here as well. This structure panel is helpful to quickly select containers on our page. And if you toggle the visibility of containers, that can help you identify them. I'll hide the structure panel for now by using Command+I on our Mac keyboard or Ctrl+I on a Windows keyboard.
Let me scroll down, and to add a new container, hover over an existing container and click on this plus icon. That will show you options to add new content. To move a container, hover over an existing container until it shows the container handle, then drag it into a new position on the page. To remove any container, simply click on the X. Containers hold the elements that make up the content of the page like headings, text, buttons, and images. If I reopen my structure panel using Command+I, we can see the elements nested within the containers here.
How to Edit Content with Elementor
Let's look at how to edit these elements. To edit that text, just select any text on the page and simply change the text. We can also edit the text over here on the left. When we click style and then click edit typography, we can edit the style of this text element and we have lots of control over different settings. This works the same way for our buttons. Click on this button and you can make changes here on the left. I'll change the text to say view destinations, and, of course, you can style your buttons as well. I'll change my button font colour here.
To change an image, simply click on the image, then select choose image on the left and upload your new image here. I'll select a new file and when it's done uploading, select again. In the style tab on the left side, you have many options to make changes to the position and alignment of your image.
Creating and Designing a New Page
To make changes to other pages on our website, click the page dropdown in the top bar and select a different page. Once we're on the new page, we can edit elements in the exact same way.
To add an entirely new page to our website, open a new tab and type in your domain. When you're logged into your WordPress account, you'll be able to see the WP admin bar up here at the top. In the WordPress admin bar, click new, then page. Here, we can rename our page, and then click publish. If we view our page, it's just bare bones for now. To edit this new page, click edit page, then edit with Elementor. Then you can use the drag and drop functionality to build your page by dragging in the widgets found on the left. I can add and then edit a heading. Then I can add another element, and I can drag in an image. And then I can upload a new image there just like we've done before.
To speed things up dramatically, you could also import a template from the template library. Scroll down and click the starter templates icon and then find a page that you'd like to import. If you want, you can search. I'll type outdoor, select one you like, then click import template. After that imports, remove any containers that you don't need, and then you can publish the changes and preview your page if you would like.
Now, this new page cannot yet be found in our navigation menu. To add it, click customise, select menus, and then main menu. We can click add items, and then we can select our new page to add it to the menu, and we can publish once more.
Finally, let's see how we can edit the header and footer. While we're still in this customization section, hover over the pencil icons and click that to edit our header elements. The outer icon will allow us to change the header height. If we click on the inner edit icon, we can change or rearrange the other header elements. To change the logo, for example, click change image and upload a new logo.
And your website footer works in the same way. If we scroll all the way to the bottom, we can click that pencil and that will allow us to edit the footer elements just like we did with the header.
Conclusion and Recap
Now you know how to set up your WordPress site with Hostinger, and you can customise your site content using Elementor. If you haven't been following along already, remember that using the link in the description will get you an additional 10% discount on hosting with Hostinger. Thanks for watching.
