Hostinger Website Builder Tutorial 2026 (Step-by-Step)

Hey, I'm Caleb and in this video I'll show you step by step how to create a website using the Hostinger website builder. I'll guide you through every single step of the process. So just follow along and by the end of this video you'll walk away with a complete professional website for your business or project that's ready to be published. So let's go ahead and get started with the first step and that's signing up for Hostinger. to get an additional discount on any Hostinger or plan. Make sure to sign up using the link right here at the bottom of the screen or just scroll down to the video description and click on the first link that you find down there. By using that link, you should end up on this page right here where the discount is already applied. From here, click on the purple start now button. And as you can see, the coupon code has already been applied. Then you'll see three different plan options. I recommend going with the business plan for the best possible performance, but if you're on a budget, the premium plan also works. And you can always upgrade later on if you need to. For this video, I'll be choosing the business plan. So, I'll click on choose plan. And next, you'll choose your hosting plan period. Up here, you can choose between 48 months, 24 months, 12 months, or 1 month. I recommend going with 48 months for the best long-term savings. However, if you're on a tighter budget, you can choose one of the shorter options. At a minimum, I suggest going with the 12-month period because that will include a free domain. For this video, I'll be going with the 48 months. Then I'll go down and make sure that the 10% off coupon is applied. And then I'll scroll down and click on continue. On this screen here, you'll need to register for a Hostinger account. Start by entering your email address here and then typing in a password. Once you're ready, click on register. From here, go ahead and enter your billing address and payment information. And now that I have all of my information filled out, I'll click on submit payment. And there we go. Our hostinger account is now ready to go and we can get started. And now, before we get started building our website, we have to answer a few questions. We'll start with this first one here. You can choose if you're creating the website for someone else or yourself or your business. I'll go with this option here. Then go to the bottom right and click on next. Here we'll be creating a new website. So I'll click on create a website and hit next again. And then we'll choose the Hostinger website builder. Select this here and click next again. And here you're able to enter your domain name. And if you chose a 12-month plan or higher, then you'll have access to a free domain, as you can see here at the top. For this video, I'll just be using a temporary domain. So, I'll go to the bottom right and click on use temporary domain. With this option, I'll be able to connect my custom domain later on. And here you're able to choose if you want to let the Hostinger AI create a website for you. At the bottom, you also have access to pre-made templates or a link in bio website. For this video, I'll be going with the Hostinger AI. Let's start by entering our brand name. I'll be going with Oak and Ember Coffee. And next, you'll need to enter your description. I'll go ahead and paste mine in here. Scroll up to the top. Let me break down my description here so that way you know exactly what you should write for your website. It's best to be as descriptive as possible. So, I started by adding a short business overview. I said that I own a neighborhood coffee shop called Oak and Ember Coffee. I said that we serve coffee, drinks, and pastries. I then added three things about my business that make us unique. Then, scrolling down here, I then wrote out exactly what I want my website to do and how it should look. I said that the website should showcase our menu, display our hours and location, and make it easy to place an order for pickup. I said that I want a warm, modern design with large product photos, clean sections, and clear call to action buttons like view menu and order now. I also wrote out the color palette and fonts that I want to use as well. This is just an example for a coffee shop, but the same approach works no matter what kind of business you're creating a website for. Think about what makes your brand unique, what goals you want your website to accomplish, and the kind of design style that represents you best. The clearer you are here, the closer the AI will get to generating a first draft that you can actually use. So, once you've written out your description, go down here and click on create a website. Once you do that, this can take a few minutes to generate your website. So, I'll fast forward and meet you at the next step. And there we go. The Hostinger AI has now created a website for us. And everything you're looking at here is just placeholder text, images, and video. But if you're not happy with the website that was generated for you, you can easily go to the top left and click on the create again button to regenerate your website. And you can repeat that until you're satisfied. For this tutorial, I think I'm happy with the result. So, I'll stick with this version. Now, let's move on and break down exactly what we're looking at and look at the structure of our website. At the top, we have our header, and that's going to contain our logo and our menu here, as well as our pages that were created for us. It's important to note that depending on what kind of website you generated, these pages will probably be different. For our website, we have a homepage, a menu page, an order page, and an about page. And right now, we're clicked into the homepage. Let's scroll through here. And as you can see, we have a section. This first section has a heading that says, "Welcome to Oak and Ember. It has an image of a coffee shop." And then some paragraph text describing our business. This piece of our website is a section. And all these different pieces are different elements that are within it. And I'll teach you how to customize the sections on your website like this in just a few moments. And scrolling down here, we have other sections like our services. We have a section for reviews. Here at the bottom, we have a section for our newsletter. And at the very bottom of our website, it ends with our footer. And this will pretty much be the exact same structure you'll see for any website that you create. You'll find a bunch of different sections made up of different elements. And everything is fully editable. On the right hand side, you can change out your color palette if you want to. And to move on and begin customizing your website, go to the top right and click on continue. Perfect. Now, let's get started customizing our website. Right now, this section at the top has this large looping video, which I think looks really nice, but it does feel a little bit distracting, and I think I'd prefer to use a still image instead. You can easily change out the image or video here by clicking into the section, and then going to the top right and clicking on edit section. And here, I'll change it from video to Then I'll click on replace image. And then I'll drag and drop in a saved image from my device. Give that a moment to upload. I'll then select the image and you'll see that upload here. Nice. I think that looks a lot better and it's way less distracting than the looping video. We're also able to easily change out the text on our website. To do that, hover your mouse over the text that you want to change and click into it. Click on edit text. you're able to easily highlight and change out all the text that you want. I'll change this to say fresh coffee every day. And below that, we have a button that says order now. To change this, simply click on it. Click on edit button. And you can change out the button text here. Instead of order now, I want this to say place your order. And we can also change out where this button links to after your website visitor clicks on it. For example, here I want to change it to a specific page. So I'll click on page. And for the page, I'll choose the order page. Perfect. Now, I think everything up here at the top is looking really good. You can also easily reposition all of the different elements on your website. For example, here if I wanted to make the place your order button appear closer to the center of the page, I'll hold down leftclick on the button and then I can drag and drop it wherever I want. You can also do this for text as well, but I think I liked it where it was before. So to quickly undo a change, go to the top and press this undo button here. If I click on it, it's going to undo both of those changes. This is really awesome and it gives you complete creative freedom over everything on your website. Now, let's look at adding new elements to your website. Up in the top left, you'll click on this plus icon that says elements. Go ahead and click on it here. And here you can add in all sorts of different elements. We have text, buttons, images, videos, and if you want to add an element to your website, just simply drag and drop in the element that you want. You can reposition it just like the other elements. And if you decide that you don't want it later on, you can actually delete the element by going to the trash can icon here and then clicking on it. You can also add entirely new sections to your website. If I scroll down here, in between this section and the top section, you'll see this blue add section button in between them. If I click on it here, we have a bunch of different sections that we can add. You can generate a section using AI. You can add in a blank section, a blog, an online store, and then here you'll see a wide variety of different templates. Depending on what kind of website you're creating, I would definitely scroll through here and see which type of section is going to work best for you. For my site, I'm happy with the sections that I already have. So, I'll go ahead and move on. I'll go to the top right here and close out of this. Then, I'll scroll back up to the top. Another really useful feature here is the ability to preview your website on a mobile device. To do this, go to the top and click on the phone icon. And this is going to switch it to mobile view. And here, for example, if I drag the order button into a new position on mobile and switch it back to desktop, that change is only going to affect the mobile version of the website. That's why the best approach is to edit your website in the desktop view first to get everything looking the way you want, and then you're able to go into the mobile view and make small adjustments if anything looks off. And if a button or a section just doesn't look right on mobile, you're able to click on the eyeball button here to just hide the entire section. And you're easily able to change out the visibility here if you want it to only be seen on mobile or desktop. I think everything is looking good here. So, I'll switch it back to desktop view. Now, let's scroll up to the top and let's talk about adding, deleting, and reordering pages. As a reminder, our pages are here in the top right. The pages that were created for us are our homepage, our menu page, order and about. To change these pages, you can go to the lefth hand side and click on pages. And from here, you can manage all of your pages. If you want to open up their options, go to the right hand side and click on these three dots. And since this is our homepage, we have a limited amount of settings we can choose from. But if I open up the menu page for example, if I wanted to, I could make this my homepage. I could hide it from navigation and I can even delete the page entirely. You can also reorder these pages in your main menu. So if I wanted the order page to appear before the menu page, I could go to the left hand side here and drag it and move it above the menu page. And then in the top right, you'll see that change reflect. And you can also add a new page. To do that, go to the bottom left and click on add page. And this looks very similar to adding a new section. You have all the same options here. You can generate a page from AI, create a new empty page, and you have all the different templates available here. So whether you're reordering, deleting, or adding new pages, you have full control over how your site's navigation is organized. Let's go ahead and close out of this here. Now, let's customize our header. At the top of your website, you'll see your header here. Go ahead and click on it and then click on edit header. Here, you'll see a few different tabs. Let's start with the layout tab. This is where you can choose how your header is going to look. Right now, it's set to this first option here, where my logo is on the left, my main menu is on the right, and if I add a store functionality later on, that will be on the right hand side as well. To change it up, you can click on a new layout and you'll see that change reflect here at the top. I think I'm okay with the first one it chose for us. So, I'll click on that. Then, let's move on to the elements tab. Here you can toggle things like your logo, social icons, and buttons. And you can edit all of them here on the lefth hand side. Next up is the logo tab. We'll upload our logo in just a moment. So, I'll leave this alone for now. And lastly, let's check out the style tab. Here you can change out a few different design elements like your header background color, whether you want it to be transparent, and you can also change out your text font and header text color. I'm okay with everything for now. So, let's go ahead and upload our logo. I'll go back to logo at the top and click on replace image. Let's go ahead and drag and drop in my logo. And if you don't have a logo, you can easily create one for your website by using a website like Canva. Now that my logo has been uploaded, I'll select it here. That will be uploaded to my website. With that done, let's scroll down to the very bottom of our website and look at editing our footer. To customize your footer, just click into it and then click on edit section. Here we have some more tabs. We'll start with the background tab. You can choose if you want a color, image, or video here. You can also change the section color and position. Then we have the layout tab. Here you're able to change a few of the visual layout options. You probably won't need to worry about this tab or the anchor tab. Though to edit the actual content within your footer, you'll close out of this. And you can edit all of the text and elements within your footer just like any other section on your website. Like for example here, these social media icons. If you don't want these, just click on the element and you can click on the trash can icon to get rid of them. You can also change out all the placeholder text like the phone number and email here. And you can also add in new elements. And you can do that by going to the top left and adding in new elements like we looked at earlier. And if you'd like to hide your footer while you're working on your website, you can do that by clicking on the eyeball button here. I think my header and footer look pretty good for now. So, let's move on to the next step. If you want to change up the style and look of your website, go to the lefth hand side here and click on styles. Once again, we'll have a few different tabs to look at. And we'll start with the colors tab. Here you'll see all of the colors on your website that are currently in use. And they're sorted by how often they appear. At the top here, we have this white color that's used 51 times. If you want to swap out this color, just click on change and you're able to select a new color and it will update that across your entire site at once. This is perfect for quickly adjusting your color palette. Next, let's look at fonts. Here you can see the fonts that I currently have in use. And if I want to change out these fonts, I can click on edit text styles. I can change out the fonts that are used for my headings and paragraphs. Let's go back here and click into buttons. Here you're able to change out the button style for your entire website. You have three options. You have this rounded button style, this square rounded button style, and this fully square. And to change out the buttons, simply just click on a new style. Lastly, let's check out animations. This lets you control how elements will appear on your website when a page loads in. You can keep it simple with no animation. You can also go with a fade, slide, or a scale. When selecting a new animation, you can use the preview mode to see how those animations are going to look on your website. So, that's how you can quickly change up the style of your website. Next, let's talk about forms. On many websites, you'll find a form on the contact page, but depending on the kind of website that you're building, it might be somewhere else. In our case, our main form is going to be on our order page. So, using the navigation in the top right, I'll click on the order page. And here you can see the form where visitors can fill in their name, email, and message to place an order or to get in touch. To customize this form, just click on it and click on edit form. Then on the right hand side, you have the form a name, the email where the submissions will be sent to. This will be the same email that you use to sign up for Hostinger. So if you want to change that, go ahead and change it here. Next, let's check out the fields tab. Here you're able to add, remove, or reorder fields. Right now we have fields for your name, email address, and message. But if you wanted to add a new form field, just go to the top here, and then you have a few different options to choose from. And then under the button tab, you can change out the button text. Right now, it says send message, but I could highlight this and change it to say place your order. And you also have options for style and animation similar to other sections. So when someone submits this form, their entry will go straight to your email inbox and you can reply to them directly from there. You can also view all of your form submissions inside the website builder. To do this, let's go to the bottom left here and click on the three dots, then click on form submissions. And here you'll see a list of every entry that comes through your forms. Let's go ahead and close out of this here. If you want a fun way to interact with your website visitors to share updates or post news, you could add a blog to your website as well. To add a blog, let's go back to the more button here in the bottom left. Then click on and click start a blog. And this is going to create a brand new page for your website. And you'll see that it's automatically added to your navigation in the top right. From here, you're able to manage all of your posts in one place. You'll see your drafts, scheduled posts, and published posts. To create a new post, just go down and click on add new post. You can choose to create a blog post with AI. And you can also write it yourself by clicking on skip. I'll write it myself. And this will add a new blog post to your blog page. You'll see it appear here on the lefth hand side. And to edit the blog post itself, you can click on the three dots here. You can edit the post itself. And if you want to publish it and make it go live, just click on the publish button here. That's going to set it from draft to public. If you're wanting to sell products or services directly through your website, you can do that using the Hostinger website builder as well. And Hostinger makes it super simple. On the lefth hand side, let's click on the store icon here. Then click on add store. In the top right, you're going to see that we now have a little shopping bag icon. And we also have a new store tab. And here we have our store page. It also has some sample products already created for us. From here, let's go back to the lefth hand side and click on the store icon again to get our store fully set up. Let's go to the bottom left and click on manage store. Let's start by selecting our store name. This will be oak and ember. Then I'll click on continue. We'll close out of this here. And let's start by adding in our first product. Click on add product. And you'll see a list of different types of products that you can sell. For now, I'll start simple by adding in a physical product. Okay, let's start by uploading our product photo. If you have an existing product photo, you can upload it here and then generate product details using AI. I'll go with the manual approach though and upload my own images and write out everything myself. Let's first upload our product image by dragging and dropping it in. Wait for that to upload. And there we have our product image. Next, let's give our product a title. I'll name this Oak and Ember espresso coffee beans. You can add a subtitle if you want to. And you can also add in a ribbon. You can use this feature to make your product stand out. Like for example here I could say new arrival and that little piece of text is going to show up next to my product when my website visitors check it out and it's going to make it stand out a little bit more. Now let's enter our description. You can use the AI writer feature here to help you or you can write it yourself. I have a pre-made description here that I'll just copy and paste in. Then let's scroll down and set our pricing. I'll set this to $19.99. You can choose to add a discount price if you want. And these other options are for tracking inventory and quantity. There's some other miscellaneous settings down here that are mostly for metadata. I'll leave these alone for now, and I'll save and publish the product by going to the bottom right and clicking on save. And as you can see here, my product is now available. I'm also going to go ahead and remove all of these example products by scrolling up to the top and clicking on this check box here. And then I'll uncheck my product and click delete for the rest of them. Click on delete again. And now we're left with the single product that I just created. Now let's go ahead and finish setting up our store. Go to the lefth hand side and click on settings. Then click on payments. Here you're able to connect different payment providers so that way your customers can actually check out. The most popular options are PayPal and Stripe, but you can also enable manual methods like bank transfer or cash on delivery if that makes sense for your business. Next, click on shipping. This is where you can set up your shipping and delivery options. You can create different shipping zones by clicking on create zone. For example, here you could do local delivery, nationwide, or international. I plan on selling in the US, so I'll name this free US shipping. And for my country, I'll click add country. I'll scroll down until I find the United States. Here I'll select it. Click save. And now I have free shipping to the United States. Next, go back to the lefth hand side and click on taxes. Click on add tax rules. And here you can set up your sales tax based on your country and region. I would do some research here and potentially consult a tax professional to make sure that everything is running smoothly. And this will vary greatly depending on your region and what types of products that you're selling. And finally, let's add in our company information. You can click on this here on the left. You're able to fill in your company name and upload your logo. You can also add in your contact and address. This is important because it will appear on your customers invoices and receipts. So, make sure to include your business name, address, and your contact information here. And once you have all of these different settings filled out, your store will be ready to accept payments, handle shipping, and send out your products. To finalize it, let's go to the bottom right and click on save. And once you've followed all of these steps and added your product to your store, this is what your store page is going to look like once everything is done. And this is what your product page will look like. As you can see, you're able to easily add the item to your cart and then you can check out. It's super easy to set up and works really well for your website visitors. Now that we're done with creating our store, let's go to the top right to go back to the website builder. Next, let's check out our general settings and set up our SEO so that way our site can be found on Google. First, let's go back to the left and go down to more. Click on general settings. And first, you're able to upload your favicon. If I open this here, uploading an image here will set up a small icon in your website visitors browser tab. And you can upload your favicon by clicking on add image and then dragging and dropping that image in. I'll select it here. You'll see that my small favicon will appear here. Click on save changes. Then we'll look at the link preview image. The recommended size for this is 1200x 630 pixels. And this is what a link preview image is going to look like. For example, here this is hostingers. And you can add a link preview image just like we did for the favicon. Next, we'll look at our SEO settings. You can click on the SEO tab here on the left. And then you can open any of your pages here on the left. Let's start with our homepage. One thing that's super helpful is you can also use the AI SEO assistant to generate SEO info for each of your pages. This will generate a title, metadescription, and keywords for each page on your website. Here, I'll click on generate new SEO info. You can enter a page description. I'll leave this how it is. Then click on next step. We'll select an additional keyword. Then click on next step again. And here's how everything is going to look. If you want to adjust anything here, you can absolutely do so. I'll go to the bottom right and click on finish. and you'll see that the SEO for this page has now been set up. Just repeat this process for each of your pages and you'll be good to go. Now, let's connect a custom domain for our website. You can do that by going to the top right and hovering over connect domain. If you signed up for a 12-month plan or longer, you should have the option to claim a free domain here. Click on get domain and you want to type in your domain name here. I'd recommend going for something that ends in.com. For example, here I'll go for oakmberc.com. And as you can see, that is available and free for one year. So I'll click on this. Then go to the bottom right and click on next. Go ahead and fill out your personal information here and click on next step. And then you'll fill out your contact details here. Go to the bottom and click on finish registration. This will register your domain and connect it to your website automatically for you. So just give it a moment to load. And the domain has now been added to our website. Click on continue. And now in the top right you'll see it says oakbercop.com. So now everything is connected and ready to go. Make sure you keep an eye on your email inbox. There should be an email coming through soon that will verify your registration of your domain. That can take anywhere from a few minutes to a few hours to show up. But once it does, just follow the steps in that email. And you'll be able to verify your domain to make sure that everything continues to run. And now our website is ready to go live. To publish your website, go to the top right and click on go live. It's going to publish all of the changes that we've made. This can take a few moments to complete. And there we go. Our website is now online and we're able to click on view site to visit it on a desktop device or we can view it on mobile as well. Now, our website is alive, but there is one more thing that we want to do. Let's set up a professional business email. Having a professional email that matches your domain, like info@ oakber.com, will help your business look more credible and makes communication with your customers easier. To set this up, let's click on the X in the top right. Then go to the top left and click on website builder and click on Hostinger dashboard. From here, click on emails and under claim your free email, go down and click on start free. For the domain, make sure it's the same one that you want to use. In my case, it's oakber.com. From here, I'll click on confirm. Click on start free trial. For the email name, I'll enter info and that will be info@ oakber.com. Go ahead and enter a password and click on create. Then you can choose if you want to log in and use your email with a browser or one of Hostinger's recommended apps. This choice is totally up to you. And if you want to create additional emails, just click on create another mailbox. And with that done, your website is now live and ready to go. And make sure you don't forget to use the link at the top of this video's description to get an additional 10% off your Hostinger plan. Thanks for watching this video.