Hostinger Website Builder Tutorial 2026 - Step by Step

if you're looking to build your first website using hos singer but you don't know where or how to start then you've clicked on the Right video this hostinger website builder tutorial is a complete guide through all the necessary steps to build a professional website from scratch even if you have zero experience building websites the first step is signing up for hostinger in the description of this video you'll find a special sign up link that gives you an additional 10% discount on your hosting or plan simply click that link or go to hostinger.com slmx media1 to lck in your discount to get started we'll first have to choose a plan I recommend to go with the business plan for the best performance and access to e-commerce features but if you're on a tighter budget the Premium plan will work just fine for simpler websites after signing up we'll go through the onboarding process on the second page click create a website to start a completely new website from scratch on the third page make sure to choose the hostinger website builder next we can pick a domain name which is basically the address of our website but before choosing a domain I recommend building the website first and then connecting the domain once everything is ready to be published so for now we're going to skip this part by clicking on use temporary domain I'll show you how to choose and connect your domain at the end of this video now we can finally start building the website hostinger makes this super easy first we'll choose the type of website we want to build then we'll enter our brand name and here we describe what our website is for and how we want it to look I recommend being as specific as possible so that the hosting or AI can create a first version that closely matches what you're looking for I've tested a lot of different prompts and here's the template that works the best for me so start with a short description of your brand or business then describe the main goal of your website for example I'm creating a website for a Sur photographer looking to get bookings through this website and finally describe the style you're going for if you want to use any specific fonts for your headings and paragraphs make sure to add them to the description as well as it would be more difficult to change them later on and under personalization settings you can also add add your brand colors or you can choose a color palette that you like but don't worry we can always change our colors later on then just click create a website hosting or AI will now build the first draft of your website based on the info we have just entered when that's done you'll see a preview of the new website the text images and videos you see act as placeholders and in The Next Step I'm going to show you how to replace those with your own content but if you if you like what's already here you can also keep it as it is to check how your website looks on a mobile phone click on the mobile phone icon at the top right if you're not happy with the overall design or structure you can always go back and create a new draft just click on back to AI form in the top left then adjust the description and click on create a website again it can be helpful to recreate the website a few times to find the version that works the best for you once you're happy with the first draft click on edit site at the top right this will take you into the hosting or website builder where we can start customizing the design of the website manually now every page on your website is made up of one or multiple sections so for example here on the homepage we have the first section right here then below that we have the next section and below that we have another section right here inside of these sections we have different elements that make up the content of your website most of these elements are images text and buttons to edit any text just click on the text element you want to change then click on addit text and make your adjustments you can also use the menu bar up here to customize the style of the text and the same goes for the buttons just click on the button you want to to edit then click edit button and here you can change the text of the button and where that button should link to to move any of the elements on your page simply click hold and drag it to a new position now to change any of the images on your website simply click on the image you want to replace then click on edit image replace image and then upload the image you want to add and then select it here if you want to add a new element to your page go to the left side and click on the plus icon and here you can see an overview of all the different elements you can add for example let's add a button just click hold and drag it onto your page then we can edit this button and make sure it's nicely aligned to the rest of the text if you want to add a completely new section to your page all you have to do is hover over the section below which you want to place the new one then click on ADD section here we can either start with a completely blank section or we can choose one of these templates I'm going to use this template right here so I'm just going to click on it and it will automatically appear on my page to remove any element from your page just select it and then click on the trash icon it works the same way for a section just select it and then click on the trash icon up here and whenever you make a mistake you can just click on the undo button up here to reverse the last change so now you know exactly how to customize the content on your website just remember to always check the mobile view whenever you make changes to your website sometimes changed or new elements can be misaligned on the mobile version so you want to make sure to realign those elements to the correct position on the mobile view so everything looks perfect on every screen size the adjust Ms you make here on the mobile view will not affect the desktop view so you always want to make the changes on the desktop view first and then go to the mobile view and fix any misaligned elements if you want to hide a specific section on mobile devices you can just select that section here click on the I icon and then turn it off for mobile or if you want to hide specific sections on the desktop view you can just go to that section on desktop view click on the I icon and then hide it on desktop now to edit any of the other pages on your website simply navigate to that page by clicking on it in the navigation menu up here and then you can make changes the same way as we've done before now to add a new page to your website simply go to the left side and click on pages and navigation and then click on ADD page you can either start with a new empty page or you can choose one from the templates here I'm going to choose this one the the new page will be automatically added to your navigation menu which you can see up here and also right here on the left to rearrange the order of this menu just click hold and drag it to a new position now let's look at how to customize the header and footer of your website the header is always visible here at the top of every page to edit the header just click on it and then click on edit header and here in the first tab we can change the layout of our header and under elements we can enable or disable specific elements that will be displayed in the header and in logo we can add our own logo and in the style tab we can play around with the style of the header so for example we could change the background color then we have our website footer which will always be shown all the way at the bottom of every page on our website the footer works just the same way as a simple section so you can simply click on any element and make changes to it now if you want to hide the footer on a specific page then go to that page first by clicking on it on the navigation menu then scroll back down to the footer select it click on the I icon and then click on hide on this page now whenever you want to change the colors of a specific part of your website you can just go to websites Styles here on the left and then under colors you can see all the colors that are currently used on your website to change them just click on the color you want to change and then you can change it right here to change the fonts across our website we can just go to fonts and then here click on edit text styles to change the font for our headings and paragraphs however be careful when changing your fonts because often times it will lead to misalign text elements so in case you change your font make sure to go to all of your different pages and look at all of your content to make sure they are still aligned nicely on your page now when we go back to website Styles and click on the button tab here we can choose the button style we want to use for our website then under animations we can choose how our content will appear when a new page is loaded now let's close the website Styles menu and head over to our contact page here let's take a look at how to customize our contact form first click on the contact element then click on addit form here you can change the form name and the email address where all the form submissions will be sent to under fields we can add new fields to our form or we can remove existing fields and we can also rearrange the order of these fields then under button we can change the button text and we can change the text that will be shown once the form has been submitted now when somebody goes to your website and sends you a message using this form then you will receive an email the email will look something like this where you can see your website the name of the contact form and all the information that was entered into the form now when you want to reply to that person all you have to do is click on reply and the email address they have entered will be a automatically added to the recipient box for your email inside of your website builder you can also go to the three dots then go to form submissions click on view list and here you'll see a list of all of the form submissions you received now if you want to add a Blog to your website go to the three dots again and click on Blog then click on start a blog this will automatically add a Blog Page to your website in including four sample posts to create a new blog post click on add new post here you can either use AI to write the blog post for you or you can click on skip I'll write it myself I'm going to use the AI feature to write a quick blog post so here we have our first blog post and once it's ready to be published we can just change the status from draft to public and this will make the blog post visible on your blog page we can also add an eCommerce Store to our website just click on the shopping cart icon and then select add store this will create a new store page with a few sample products already in place to add your own products click on the shopping cart icon again and click on manage store here set up your store country and currency and then you'll be taken to the dashboard where you can add your products set up your payments add your company information and set up shipping let's go back to the editor by clicking on edit website now before publishing it's important to go through all the SEO settings and optimize your site for Google search so people can actually find it to do that let's go to the three dots again and click on on general settings here let's first upload a square version of your logo as the favicon this logo will then be visible at the top of the browser right here let's save our changes and next let's also add a link preview image which optimally should be 1200 * 630 pixels then let's save the changes and and close this window then go to the three dots again and click on SEO settings and here we want to go to a page we have added to our website like for example the about page and then click on generate new SEO info here briefly describe the content of your page and click on Next Step then choose three main keywords related to that page and click on Next Step again and then click finish now hosting a I has added an SEO title and also a meta description for your page this will determine how your page will show up in the Google search results now also go through all of your other pages and make sure to add an SEO title and a meta description using the same method we have used before now the final step before publishing your website is to add your custom domain to do that let's click on connect domain at the top then type in the domain you want to use for your website I recommend to keep it short easy to remember and if possible go for a doom domain then hit next and here just follow the prompts to complete the domain registration your new domain will then be automatically connected to your website let's go back to the website builder now to publish your website all you have to do is click on go live at the top right and now your website is published now we can also set up a professional business email using our new domain to do that let's go to website builder at the top left and click on website manager then let's go to main menu and then go to emails here next to setup free email service let's click on setup choose our domain then here let's go with the free plan then choose the email address you want to create and enter a password click create and then we can either use our new email account in the browser or we can use one of the recommended apps personally I recommend to use Gmail and to set up your new email account on Gmail you can find the instructions on how to set it up down here if you're looking for a more detailed and in-depth video on how to create your website using the hosting or website builder then watch this video right here I'll see you there