Hostinger Website Builder Tutorial 2026 (FOR BEGINNERS)

hi there my name is Simon and in this video I'm going to show you step by step how to create a website using the hostinger website builder I will guide you through every single step of creating your own website and I'll make sure not to skip anything along the way so by the end you'll walk away with a beautiful and professional website for your business or project and I've listed all the steps we're going to cover Down Below in the video description so if you're looking for a specific part feel free to jump ahead but for now let's not waste any time and dive straight into the tutorial all right so the first step is signing up for hostinger if you don't already have a hostinger account I recommend to use the first link Down Below in the video description to sign up for hostinger this is my personal referral link which will enable you to get an additional 10% discount on any hostinger plan so make sure to use that link or go to hostinger.com slmx media10 to lock in your discount so once you're on this page click on start now and then we can choose a plan now I recommend to go with the business plan because you get the best performance and you also get the option to use e-commerce features however if you're on a limited budget you can also go with the Premium plan which is fine for simple websites I'm going to go ahead and choose the business plan then here on the next step we can choose our payment period which by default is set to 48 months this means that we would pay for four years of hosting today and by doing that we will be able to get the best price for four years of Hosting which will save us a lot of money in the long run however if you have a bit of a lower budget you can also go with one of the other plans right here I would go at least with the 12 months option because it will enable you to get a free domain for the first year however if you can I recommend to go with the 48 months option because again this will save you the most amount of money in the long run then also make sure that the coupon code MX media is applied which will save you another 10% on your plan usually it's applied when you use the link Down Below in the video description however if you don't see it just click on ADD coupon code and type in madx media and then let's move on and click on continue then here to create your account either use your Google account or just type in your email and choose a password then click continue here just enter your billing address and click on continue then choose your payment method enter your details and click on submit payment and keep in mind that hostinger offers a 30-day money back guarantee which means that if you cancel your plan within 30 days you get a full refund no questions asked once our account is set up we're going to go through the onboarding process so let's just answer these questions here I'm going to say I'm going to create a website for myself or my business and click on next then I'm going to go with create a website to be able to create a completely new website from scratch and here we're going to choose the hosting or website builder and click on next now here we can already choose a domain name for our website which is basically the address of the website however I recommend to build your website first first and once it's ready to be published then connect your domain name so what we're going to do is click on use temporary domain here at the bottom and I'm going to show you at the end of this tutorial how to connect a custom domain now we can finally start building our website hostinger makes this very easy all we have to do is describe the website we want to create and hostinger will build a custom template for the website we want to create based on our inputs we can then use that template to customize it based on our needs so first let's choose the type of website we want to create in this video I'm going to create a website for a fitness coach so here I'm going to choose business showcase then for the brand name I'm going to say strive Fitness which is the name of the brand then we want to give a brief description of our business describe what our website is for and what it should look like now I recommend to be as specific as possible so that hostinger can get the first version as close to what you're looking for as possible here's the description that I'm going to be using for the fitness coach website I'm going to be building here I'm a fitness coach focusing on helping individuals reach their health and wellness goals through personalized training programs and guidance so this is the business description then what is the website for the website should showcase my coaching Services feature client success stories and offer for seamless booking options so this would be what the website is for and then we describe what the website should look like or what kind of vibe we're going for I'm aiming for an energetic motivating design with large highquality images easy to navigate pages and a modern look that reflects the active and empowering nature of Fitness please use Roboto for headings and lato for paragraphs now if you want to use specific fonts for your headings and paragraphs I recommend to also enter them here in your description because it will be a bit difficult to change the fonts later on because sometimes it leads to misaligned text elements so if you have preferred fonts make sure to enter them into your description now if you have a hard time coming up with a good description just use chat GPT which is what I've done just now then here under personalization settings we can also choose a color pellet or use your own branded colors if you already have them them so I'm just going to set it to surprise me and see what the website will look like so let's click on create a website and here we can see a first preview of what our website currently looks like all of the text the images and also the structure of your website has been created based on the inputs we have given before you can also check how your website currently looks like on mobile phone by clicking on the mobile icon here at the top right and then just scroll through your page to see what it currently looks like now if you're not happy with the current design what you can do is just go back to the AI form by clicking right here and then make your adjustments so either change up the description for your website or you can also go to personalization settings and choose a specific color pallet so that's what I'm going to do I'm going to go to choose pallet and I'm going to use these colors right here and click on create a website again sometimes it makes sense to create a few different website templates to find the one that works the best for you so now we have a bit of a different template with a background video here at the top of the homepage and also a different color scheme now once you're happy with this first draft let's click on edit website at the top right and this takes us into the hosting or website builder where we can start manually customizing our website now currently we have four pages on our website we have the homepage which is the one we can see right now then we have a Services page a testimonial page and a contact page now these Pages might be different for your website because it really depends on what kind of website you're building for example if you're building a website for a restaurant it might make sense to add a reservations page or a menu page however every page on your website is structured in one or multiple sections so here on my homepage we can see the first section right here at the top with the video background and then we see the second section below that and all the sections will have a blue outline once you hover over them when we scroll further down we can see the next section right here and inside of these sections we have different elements which basically makes up the content of our website so we have text elements we have images and we also have buttons like this one right here now to change any of the textt on your website just click on the text element then click on edit text and then just edit the text like this and it works exactly the same way with buttons just click on it click on edit button and then you can change the text right here and you can also add a link where that button should link to so let's link that button to the contact page now to move any elements on your website simply click on the element you want to move hold and then drag it to wherever you want to move that specific element to replace any of the images on your website simply click on the image click on edit image and then replace image right here and then you can upload any image you want to add click on select and now the image has been replaced now to add new elements to your website simply go to the plus icon here on the left and this will show you all of the elements you can add to your website for example let's add a button just click hold and drag the button element onto your page then let's close the elements window right here and to make some space for the button we need to make this section right here a bit larger so let's drag it down like this and now we have space for the button let's click hold and drag it to the position where we want it to be placed then let's click on edit button and change the text and Link it to a page now to add a completely new section to your page simply hover over the section below which you want to place the new one and then click on ADD section right here now we can start with a blank empty section or you can choose one from these templates right here for example let's choose this one and then we can edit this section exactly the same way as we've done before now whenever we want to remove a specific element on our page we can just click on it and then click on the trash icon and it works the same way with a section so we can just click on the section then click the trash icon right here and whenever you mess up like for example moving an element access acally to a weird position you can just click on this undo button here at the top to undo the recent change now whenever you make a change to your page or add something new like a button for example always make sure to go to the mobile view as well right here and make sure it also looks good on the mobile device so sometimes when you add something new you can see that the button or whatever you added is misaligned so here for example I would want to make this section a bit larger like this and then I would probably move this button here to the left side now whatever you change right here will not affect the desktop view so when we go back to the desktop view we can see that the button is still in the correct position and the section has the same size as before this is why you should always make your changes on desktop view first and then switch to mobile and make any necessary adjustments now if you if you have a specific section that just doesn't work on mobile what you can do is just select it here on the mobile view click on the hide show I icon and then disable it for the mobile version and now when people visit your website on mobile this section will not be shown and it works the same on desktop so when we want to hide a specific section like this one right here on the desktop view we can click again on the I icon and this able it for desktop now so far we've only made changes to this homepage but we can also make changes to all of the other pages on our website simply go to that page by clicking on it in the navigation menu up here and then we can make changes the exact same way now if you want to add a new page to your website you want to come over here and click on pages and navigation and then click on ADD page here at the bottom here we can either start with a new empty page or we can choose one of these templates right here I'm going to choose this one for a new about page once we choose our new page it will be automatically added to our main navigation menu up here and we can also see it right here we can also rearrange the order by just clicking holding and dragging it to a new position now if we're still working on this page and our website is already live but we don't want to show this page just just yet we can click on the gear icon here and then we can hide it from navigation and now this page will currently not be visible here in the navigation menu now let's take a look at how to customize the header and footer of the website the header is always shown at the top of your website so to edit this header just click on it and then click on edit header here under layout we can choose from different types of layouts so for example if you want to have the logo in Center choose this layout right here I'm going to actually go back with the original one which was this one and we can also go to elements and then show or hide specific elements so if you want to show your social media icons in your header you can activate them right here or you can also add a button like a call to action button for example then here under logo we can actually add our logo to the header so let's do that by clicking on replace image and then I'm going to upload my logo for this website let's select it and now my logo will be visible right here and I can also change the width by just dragging the slider to the right or to the left and then here in the style tab we can change the design of the header so for example we can change the background color if we want that or we can make the header transparent or we can change the text font or the header text color now we can also switch from header to button to change the button style if we have a button right here or we can also go back to social icons right here and if we have them activated we can first of all enter our social media links right here and then we can change the icon size down here at the bottom but for this website I'm going to disable the social media icons in the header then we have the footer of the website all the way at the bottom of every page on your website and the footer actually works the same way as any section on your page so you can simply click on any element and change the text you can also move around different elements the same way as we've seen before and you can also add any elements to your footer now if you keep your social media icons in a footer just make sure to click edit social icons and actually link your social media profiles right here now if you want to customize any specific color on your website all you have to do is go to website Styles and here under colors you can see all of the colors that are currently used on your website so if for some reason you want to change one of these colors like for example this one right here we can just click on change then select and then we can adjust it right here once we click on select the color will be changed we can also go to fonts and here we can see the current fonts we're using so right now it's Roboto for the headings and and L for the paragraphs if we want to change that we can just click on edit text Styles and then here we can choose another font but be careful when choosing fonts because sometimes when you change the font some text elements become misaligned so in case you change the font right here make sure to go through all of your website pages and make sure that all of your text elements are aligned correctly now let's go back to website Styles and then let's click on buttons here we can change the button style that will be used across your website and under animations we can change how the content will appear once a new site is loaded on your website now let's close this menu and scroll back up and then let's click on the contact page now let's take a look at how to customize this contact form right here to customize this let's click on it and and then click on edit form now here we can change the form name and also the email address where all of the form submissions will be sent to then under fields we can add new Fields like for example we can add a specific short answer and we can also rearrange the order of these fields then under button we can change the button text and also the message that will be shown once the form is submitted or if you you want them to go to a specific page on your website once they submit the form just click on link to page and choose the page right here now whenever somebody visits your site and submits this form you will receive an email confirmation the email looks something like this including your website address the name of the form and all the information this person has entered into the forum now when you want to reply to that person all you have to do is click on reply and then the email they have set will be automatically added to the recipient box right here and you can also go to the three dots right here then click on form submissions click on view list and then you can see an overview of all of the forms that have been submitted now if you want to add a Blog to your website all you have to do is click on the three dots click on blog and then click on start a blog now this will add a new new page to your website called blog and it already has a few sample posts in it to create a new post simply click on add new post and then you can either click on skip I'll write it myself if you want to create the blog post yourself or you can use hosting or AI to create the blog post for you I'm going to use the AI to create a quick blog post once the blog post is created you can click on the header and then on the pen icon to change the post title the description the URL the author and also the post date and you can also schedule your post and you can also change your featured image and the category for this blog post and then for the content you can change the image right here the same way as we've done before and here for the content you can just change it by just clicking into the text and then making your changes like this once your blog post is ready to be published all you have to do is click on the status right here to change it from draft to public once that's done you can go back to the blog page and now your new blog post will be shown in your blog page now you can also add an online store and sell products on your website to do that we're going to go over to the shopping cart icon and click on ADD store this will add a store Page to your website and also add this card icon right here at the top right and as you can see we already have a few sample products now to add your own product you want to go back to the store icon and then click on manage store to set up your store first choose your country and the currency you want to use then click on continue and this takes us into our store dashboard where we can start setting it up by adding our first product so let's click on ADD product right here now there is different types of products we can sell like for example a physical product multiple physical products a digital product or Services I'm going to add a physical product first let's upload our product image and then we can enter more information about our product or we can simply use AI to create some text for us all right so now we have a product title a subtitle a description and down here we can also set our price currently it's set to $30 but let's say we want to sell this for $50 or actually let's say we have a discount price currently for $40 then we can scroll down and look at the other options right here but let's just keep this way and click on Save and now under products we can see our new product right here let's go back to our dashboard and now we want to set up a payment method so people can pay us on our website so let's click on ADD payments and here we can see the different options we can use to take payments on our website I recommend to connect your PayPal and also stripe stripe will allow your visitors to check out using a credit card or any of the other options here like Google pay or Apple pay or if you don't have any of these options you can also choose the manual payment option which will allow your visitors to make a bank transfer directly into your bank account once you have your payments set up let's go back to the dashboard again and then click on update information here enter your company information then click save and then the last step is to set up shipping so let's click on review shipping and here we can set up the shipping Zone where we can ship our product too so for example we can ship to the United States I'm going to just enter United States for this shipping Zone and then here add the United States as the country right here and then click save and now down here we want to check out our shipping options so by default we have a regular shipping option where the rate is set to free now if you want to offer free shipping then that's fine but if you want to charge for shipping then you want to change this rate so here clicking on the three dots we can click on edit and then we can actually charge something for shipping let's say we charge $8 so I'm going to type in $8 and click on ADD then we can also add more shipping options so if you have an express shipping rate you want to charge you can click on ADD option and then add that rate right here now let's go back to shipping and here we can now see the shipping Zone we have just created for the United States now if you also ship your product to other countries you can just create a new shipping Zone by clicking on create Zone and then go through the exact same process again just choose the country you ship to and then choose how much you want to charge to ship to that specific country great now let's click on added website at the top right to get back to the hosting or website builder now before we publish our new website it's important that we optimize it for search engines like Google so that our website can actually be found in the search results so to do that let's first click under three dots on the left and click on general settings here let's click on update under favicon and upload our favon image this is basically just a square version of your logo which will be shown at the top of your browser and you can see what it will look like right here then let's click on Save changes and let's also add a link preview image so let's click update add image and then let's upload this image now optimally this image should be 1200 * 630 pixels let's click on select and save changes next let's click under three dots again and then click on SEO settings here we want to make sure to go through all of our pages and then make sure that there is a SEO title and also a meta description based on the content of this specific page now the easiest way you can do this is just by clicking on generate new SEO info right here and then give a brief summary of what your page is is about then click next step and choose three main keywords that are related to this page and click next step now the hosting R AI has created a SEO title for you and also a meta description now this will determine what this page will look like in the Google search results let's click on finish and scroll down and also take a look at our page URL you want to make sure that this URL is nice and clean So currently it says blog list I'm going to actually change this to just blog and now we just want to go through all of the other pages of our website and then do the exact same thing so now we are pretty much ready to publish our website but before we do that we want to connect our custom branded domain so to do that let's click on connect domain here at the top then type in the domain name you want to use now in my case the do domain is already taken so I'm going to choose one of the other ones right here I'm going to go with the net but if you can always try to go with theom domain once you have your domain let's click on next and then here just enter your contact information to register your new domain and once that's done your domain will be automatically connected to your new website let's go back to the hosting or website builder and up here we can see that our domain is now connected to this website which means that we are finally ready to publish this website and to do that all we have to do is click on go live up here in the top right corner congratulations your new website is now live and we can click on view site which will take us to our new website and the last thing I want to show you is how to set up your professional business email address using your new domain so let's go back to the hosting or website builder and then click on website builder and then website manager then let's click on main menu and here click emails then where it says setup free email service click on setup then choose your domain right here click on confirm and here we're going to start with the free plan so let's click select then choose your professional email address and set a password I'm going to set it to contact at stri Fitness coaching. net and click on create then we can either set up our email using the browser or we can use one of the recommended apps personally I recommend to use Gmail and once you select your app and click on mobile or desktop down here you will see the instructions you need to set up your new email account using this app but I'm going to quickly show you how to access it through your browser so let's switch back to to browser and then click on Webmail now we have to enter our password we have set before and click login now this will take us to our email inbox