Hostinger AI Website Builder Tutorial 2026 - Step by Step

Hey, I'm Dan and in this video I'll show you how to create a complete website using the Hostinger AI website builder. Hostinger's newest AI features will get you a professional looking site up and running even faster and easier than before. I'll walk you through the tutorial step by step, and by the end, you'll have built an affordable website using AI. To get an additional discount on any hosting 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 there. By using that link, you should end up on this page where the discount is already applied. Let's get started with the setup by clicking claim deal. The Black Friday deals are currently active when I'm recording this video, so this page might look a bit different for you. Here you'll see the coupon code applied. And if we scroll down, we can compare the business to the premium plan. You can get away with premium, but I would recommend the business plan as it has more of the AI features. The business plan includes tools like the AI image generator, the AI writer, the AI blog generator, and AI SEO tools. I'll click here to choose plan. In your cart, you can see that the 48-month period saves you the most. But if you click here, you can change this. If you click 12 months, you'll still get that free domain for 1 year. Scroll down, verify your coupon code is applied, and click continue. On this page, choose an email address, create a password, and then click register. Then go ahead and fill in your billing address, then click continue. Enter your payment details and when you're ready, click submit payment. Now that you're signed up, let's answer a few of these quick questions. I'll say I'm building my site for myself or my business and click next. I want to create a site. Next. And here, choose the Hostinger website builder. For now, let's use a temporary domain. I'll show you how to set this up later. And that will take us right to Hostinger's AI builder where we'll describe the kind of site we want and we'll let AI draft the first version for us. If you'd rather start from a pre-made template instead of a fully AI generated design, Hostinger also gives you access to plenty of professional templates that you can personalize with AI. The templates can also get you to a good starting point, but we'll focus on the AI builder for this tutorial. You can always go back later and try a template using the skills that I'll teach you. So instead, let's let AI create the site for us. And the first thing you need to do is enter a brand name. I'll use one called Frame and Wander. Then you need to enter a description. This demo website for me will be about my photography, travel, tour business. And you can use tools like ChatGpt to help you create a good detailed description. I'll paste mine in. And you can see that I also specify fonts. I tell Hostinger which kinds of pages I want. And when you're happy with your description, click create website. Down below, you'll see a progress bar as Hostinger prepares your site. Once it loads, you can preview your site on this page. We can scroll down to see what was generated. If we scroll back up, we can see the pages. We can see the mobile view. If we click here, if I go back to desktop view and home, we can change the color palettes here on the right. And if you're not quite happy in the top left, you can click create again. I'll come back down to the description, scroll down, and maybe add a sentence in hopes of making the placeholder images more lively. Then I'll click create website once more. If you want to visit prior versions, click version history up in the left here. You can revert if you wanted to. Once you're happy and you've changed your color palette in the way you would like, go ahead and click continue. Once your first version is ready, we can start customizing the layout. I'll show you how the editor is organized, and then how to edit text, swap out images, and adjust the site to make it your own. On the left hand side, you'll find the main toolbar. Here you can access your elements, pages, styles, and AI tools. Each page is made up of sections. So, you can see this section outlined in blue. If we scroll down, here's another section. I'll scroll back up. And then inside each section, we have individual elements. You'll see things like text, buttons, and images. If you want to edit any of the text on your site, just click on the text element and then click edit text. Then you can highlight the text and type in whatever you want. The floating toolbar will give you access to all sorts of formatting. You can change the style. I'll keep this the original heading one. You can change the font. So, I can change this to robboto bold. You can change the font size. And you have all of your other text formatting options that you would expect. I'll change this back to white. Changing buttons works the same way. So, I can click this button element and click edit button. You can change the text here. Link two is where you select how this button will work. I'll hook this up to a page and then select a page for my website. In the style tab, you have many options for changing how the button looks. This fill color is a little dark, so we could brighten it up. Here, you can change the text font and the size as well. If we scroll down, we have border width. And you can make the corners less or more rounded. If I click off, you can see that's now square. If I click on the button again and click edit button, the last tab here we have is animation. You can select no or cycle through these to see how they would look. I'll exit out. To move something on your page, click the element and drag it into place. In the background, you'll see guides appear and they will help you align everything neatly. Scrolling down to the section below, we have an image here on the right. To replace it, click on it and then choose edit image. Then you can click replace image. In our media library, you can see that we have an AI logo already generated. But to replace this image, you can either go to free images or you can upload a file. Select an image that you want to upload, then click open and come back to your library. Here I'll select it and we can take a look at our image settings. Under style, we can change that corner radius. We can give an overlay opacity. We have tabs for actions. We could open a full screen preview on click if we'd like. We can take a look at shape. And we have a whole bunch of shapes here. And then like buttons, we can add an animation. I'll exit these image settings. If you want to add something new, just click the plus here under elements on the lefth hand toolbar. Then you can drag and drop any of these elements right onto your page. I'll close this and scroll down so we can rearrange this. I'll edit the new element and drop down the font size and we can enter our new text. If we want to make sections smaller or bigger, you want to hover over the bottom edge of the section. When it says section height, you can click and drag to make it shorter or longer. And then to delete any element, just select one and click the trash can. I'll do the same with this element and drag my section up to match. If you ever want to undo anything, you can come up to this button up top and select undo. Redo works the same way. As you start to get comfortable adding elements in from the left and dragging them onto your site, you'll start to notice some of the AI features. For example, if we hover over this text and click this element, we'll see the AI writer here. Click on it to open the options here. We have some quick tools. For example, you can lengthen the text. If you don't like the generation, you can try again. This is still too long for me for the above the fold section here. So, I'll discard. We can come back and try some of the other options. For example, change tone and click here to use it. The image generation is also helpful in this section. This image is the background. To change it, click edit section and then you'll see the background image here. In the section background, you can choose a color. For example, I can choose one of these others that we've used on the site. Or we can choose a video. Like with other media, we can adjust the opacity slider here. And we can replace the video by clicking here. These free videos are provided by pixels. And I'll swap in this one and select item. But if you want to see how to generate an image, close the section settings and then here click generate image. Then go ahead and paste in your prompt. You have up to 700 characters. And once you finish, click create images. Hostinger will generate two images for you to choose from. And if you don't like either of these, you can create again. Once you're happy, select the image and it will fill the background of the section. Close this to exit. and then take some time to review your entire site and swap in the appropriate content, images, and any other elements you'd like to drag in from the left. I'll take some time to update my own homepage. Now, after spending some time customizing my site, you can see that I've changed things like the section backgrounds, the text, the images, and I've even deleted a section. We'll look at the header and footer soon, but before moving on, it's a good idea to check how your site looks on mobile. Click on this button up here to switch to mobile view. Once we've switched to the mobile preview, we'll make a few quick adjustments to spacing and alignment. And we can make sure everything fits and reads well on smaller screens. Anything you adjust in this mobile view only affects the mobile version of your site, so your desktop layout will stay exactly the same. For example, if we move up this section and then we come back to desktop, the size of this section has stayed the same. Then we can come back to mobile view and check out the rest of our site. We might not want this section as wide, for example. We should clean up this section here. And we can continue to review in the mobile preview. Once we're happy, click save up in the top right. You'll notice our website has been autosaving as we've gone, but you can hit this button anytime. Now, let's come back to the desktop view and scroll to the top. Your header at the top of the website and your footer at the bottom of the website are going to show up on each and every page. So, let's make sure they're set up correctly with your logo, links, and any other important elements. Just click on the header section like any other section, and then click edit header. In the header settings, you have layout options, elements, logo, and style tabs. Under the layout tab, this setting controls whether the header becomes sticky. When this is enabled, the header will scroll with you when you navigate down the page. To see this, we need to go to preview. With it enabled, you can see the header stays positioned here. If we go back to the editor and we edit the header again, let's turn off the sticky header, save, and preview again to see that the header scrolls with us as we scroll away from it. I'll go back to the editor once more. Back in the header settings, we also have controls for element spacing, link spacing, and top and bottom spacing. We have a few different options to position the logo and other elements. I like the default. If I scroll back up under elements, we can show or hide the logo with this setting, show the social icons if we'd like, and show an additional button where we can edit that button if we choose to show it. Under the logo tab, we have the option to show the image logo as we have right now. or replace it with a text logo. We could type anything in here. I'll keep the image. And to replace it, just click replace image. I'll click upload files and then select my logo. Then I'll choose it once it's uploaded. Beneath the image upload, you can change the logo width. You can use AI to create a unique logo. This will open up Hostinger's logo creator. And you can see that you need credits to create a logo. Here you can type in your prompt. Select the drop down to click the style. I'll choose minimalistic. And here you have some more settings. As a logo file, I want this black and white. So, I'll click create and Hostinger will start building a few logos. This is a simplistic example and I'll stick with the logo that I already made, but if you buy credits, they're relatively inexpensive. To explore this capability more fully, I'll click cancel and then close this tab. Finally, back in the header settings, if you click style, you have a few more options to change the text font. I'll change this to Robboto. You can make the header transparent or if you keep it as is, you can change the header background color here. The footer works the same way as the header. So if I scroll down and select the footer and click edit section here, you can see some of those options. If you were to have an image in your footer, you can control the position here or you can change the section color here. Under the layout tab, you can make changes to the grid. So if you enable keep grid visible, you can then change the row gaps and row heights and control the snapping. And you can also set an anchor for the section if you create an anchor name here. Now that we've made edits to our header and footer, let me show you how to add or rearrange your pages. I'll show you how to create new pages, rename them, and control what pages show up in your main navigation. In the lefth hand settings, click pages. Under the main navigation section, we can see our current links. To drag them around, we just move them like this. And that will rearrange the menu. To the right of each page, you have a three dot menu with many other options where you can make pages the homepage, change the page URL, rename them, duplicate, things like this. If we hide gallery from navigation, that will drop it into this section, hidden from navigation. The page is still accessible. It's just not in your menu. Click the three dot menu and show a navigation to make the page return. You can toggle on the coming soon mode. And if you toggle that on, a placeholder page will be displayed for your website. To see that, just click on this bar here. And you could edit this page just like any other. I'll turn that off. Click my homepage and then drag that back to the top. That's how you can manage any existing pages. But to add a completely new page, come down to this button and click add page. In the add page UI, you have several different options. You can choose between these popular pages. Selecting a privacy or refund policy or a terms and conditions page might be helpful later. You can also select an online store or a blog or a completely empty page. If you choose this option, you'll need to build the page from scratch section by section just how we've edited existing pages before. The other option you have, and probably the best for most people, is to generate a page. Once you click generate page, you'll have the ability to fill out a page description, similar to how we created our site in the first place. Click here to see examples. Or if you're ready with your prompt, click here and enter it. In my example, perhaps we're trying to recreate a gallery page. I'll enter my prompt and click create page. Then Hostinger will show the page creation process. I'll close this and see how it did. It might not be perfect, but this is typically faster than creating each new section completely from scratch. If I go back to pages, I can then remove this second gallery page if I don't need it. Once you're happy with your pages, Hostinger makes it easy to manage your global design settings. Back in the lefth hand menu, styles is where you can update your color palette, your font pairings, your button styles, and simple animations all in one place. Under the colors tab, you can choose any one of these colors and click it to change wherever this color is used. And under fonts, you could select a new pairing as well. Hostinger will warn you that any changes you've made up until this point will be deleted. So, if you truly want to do this, click keep changes. Under the buttons tab, you can select the styles for your primary and secondary buttons. And in animations, something similar, you can change between fade, slide, scale, and no animation at all. Not every website will need one, but if you want to publish articles or updates, adding a blog with Hostinger is simple. I'll show you how to start a new post and even how to use AI to help write your content. Click AI tools in the lefth hand side to access all the powerful AI tools. Halfway down you'll see AI blog generator. Select that. Here you'll have settings to create a blog post with AI. You can change the tone of voice, the length of the content here, and then you can enter a blog post description. Once you've entered your prompt, click create content. You'll see that Hostinger has created a post header. They've added an image here. And then the rest of the blog post is down below. Obviously, you'll want to review and edit this content. But if you come back to the top in our main menu, the blog is added here. And if you click blog on the left hand side, you can see these generic placeholder posts. This is the one that was just created. So, I'll go back there. And at the top, you have post settings and everything that you would normally associate with a blog post. You can enter a description, change the URL, add authors, and add a post date for when you want to schedule it. Here you can change the image and create your categories. I'll click save. Under status, you can switch that to public and you can preview. If you return to the editor, you can always return to this blog on the lefth hand side and clear out any of these placeholder posts that you don't need for the moment. Just like the AI tools make it easier to produce blog content, if you're selling products or services, Hostinger's built-in store setup makes it easy to list items, set prices, and start taking payments. If you want to create a store for your site, come over to the lefth hand side and click store. Then click add store. Once you do, we'll see a few new things added to the menu. Up here, we see the store and this cart. In the main section, we have our products. If we scroll down, we can see the placeholder images, the product titles, the prices, buttons to add to the bag. And here in this floating menu, you can click manage products. To continue, choose a name for your online store. For my business, maybe that will be a photo print shop. Once you've selected a store name, click continue. Here you can see all the placeholder products below. If you click on any three dot menu, you'll have options to edit, duplicate, or delete. Here I'll click edit. In the top section you can add your media. We have some AI enabled product image tools. You can click here to edit the background. Hostinger will analyze the image and try its best to match the new background with the one you've described with the prompt here. You have plenty of generations. So if you're selling physical products, the AI photooot studio is a great tool. I'll close this in the top right and leave. Down below in the product listing, you can change the title, add a subtitle, add a ribbon to call out things like new arrivals or sales, and then you can add a description. The AI writer comes in handy here as well. It works just like we saw before when we were using it to edit text on our homepage. Below the description, you have your pricing information. And you can add additional information sections. You can add options useful for sizes, colors, different variants that you have. And then down below you have custom fields, categories, related products. When you're happy with how you've edited your product, you can click save. Instead of editing a product in the three dot menu, you can also import products here or add a product with this button. Once you've added your first, you can see that our store setup has a checklist. Click here to access this. It will guide you through the crucial steps you need to getting your store launched, such as setting up your payment method, updating your company info, and reviewing your shipping options. If we go here, for example, you'll be able to connect any payment method that you'd like. You can navigate the checklist by going step by step, or if you exit out, you can always access it again by clicking here. I'll click off and scroll back up. And under the store setup checklist, we have things like orders, our product dropdown, appointments, discounts, analytics, and the rest of the settings. So, even though Hostinger isn't known primarily for its e-commerce capabilities, you can see that they're quite robust here. To leave the store manager, click the X in the top right. You can return any time by revisiting the store icon over in the left. Here you'll see the checklist that we saw before, the other settings pages, and finally, you can manage store with this button. To go back to your website, click edit website in the top right. If you want to hide the store, simply go to pages, go to the three dot menu here, and hide from navigation. To access your product pages, click this arrow and you can see each one individually. I'll go back. If you want to hide the shopping bag icon in your header, click the header, then edit header under the elements tab. The new show shopping cart setting will be enabled once you have a store and you can toggle that here. To delete the store entirely, come over to store then the three dot menu and remove store. You'll be warned that this is permanent and you can click delete. If you'd like visitors to reach out directly, you can add or customize a contact form. I'll show you how to adjust the fields, update your email settings, and fine-tune the layout. Based on your prompt, you may have a contact page like I do already. If not, and you want this feature, you'll need to go to pages and add a page like I've shown you before. If you click add page, you should have some templates here for a quick way to add a contact page. I'll close this since I already have one. And then click here. If you click on this form, you can then edit the form. The form name is important for later. You can leave this as the default or change it to something more memorable. And down below, this is the email that will be attached for notifications. You can view submissions that come through this form with this button, but I'll show you a different way to do that once we look at these other settings. Under fields, you'll see the existing fields on this form. We can rearrange them like this just by dragging and dropping. And you can click the drop down to access the label and the placeholder text. I won't change the field type for this existing field, but you can see the options for each of these field types. Here is the required field toggle. And here you can remove the field. I'll scroll up and collapse the email address field. And here you can add new fields as well. When you add the plus, you can select one of these field types. And I'll choose short answer. Open it up and replace the field label with something more appropriate. I'll scroll down to see that the field type is plain text. And then we can explore some of the other settings up here. For example, this tab lets us change the content of the button. This tab lets us style the form. And the customize elements drop down will allow you to change between stylizing the submit button, the form fields, or the background itself. Finally, you'll also have an animation tab. Once you're happy with your form, you can close this and I'll show you another way to access the submissions like I told you we would do before. In the lefth hand menu, click more, then click form submissions. The subscribe form 2 was on our homepage, but if you come over to contact forms, this is the one that we renamed tutorial form. You have a three dot menu for this where you can download all these submissions or you can view them right here in the hosting UI. We don't have any yet, but this is where they will be collected. We're getting close to finalizing our website, but before publishing, it's worth optimizing your site for Google. Hostinger's SEO assistant helps you set titles, descriptions, and keywords for each page. To look at SEO for your website, click SEO on the lefth hand side here. All your pages will be listed out and mine all have this warning. If we visit the improvements found for homepage, for example, click this arrow. Scroll down and you can see that Hostinger calls out that the meta description should include a focus keyword, photography tours. Following this recommendation, I could add that here. Hostinger will also call out these other SEO tips that will be best practices for getting our site found. If we scroll back up, we can change the title as well. We can add new keywords. I have three of three, so I'll need to remove one. Click the X here. To add a new keyword, just click this button. I'll say landscape photography, and then add. At the very top, you have a toggle to hide the page from search results. And you can use this button to generate new SEO info. When you click that, you can edit your page description for your homepage. Go to the next step. You can select three keywords. And finally, you can review how it looks. Then you can click finish. So using this button is a nice guided way to fill out all this information. Then you can proceed to do this for all of your pages until they're fully optimized. When you're happy with your SEO optimization and your site design overall, it's time to connect your custom domain so visitors can find your site using your own web address. To do so, we can exit this setup and click connect domain up at the top. You'll be reminded that you get a free domain for 1 year and you can click get domain here. Next, you'll need to click here and search for a domain that's available. Ideally, you want to pick something short, memorable, and it's good to use a dot domain if possible. If I just search for frame and wander, the dot will show in the recommended list. I'll select this and then click next. Here, select your country, whether you're creating a personal or company or organization site and then click next step. Then enter your contact details in this form below. Once you've entered your details, scroll down and click finish registration. Before we continue, you'll need to verify your email address within 14 days to keep your website online. To do so, open your email inbox in a new tab and search for an email with the subject verify your email address to use your domain. Open that email and then click verify email. Then you can close this tab and your email inbox. And I'll click continue here. And now your free domain shows up in the top right. And this icon indicates that your site is still processing. This may take up to a day. With everything ready and your domain connected, all that's left to do is to publish your website. In the top right, click go live. And that will open it in a new tab. And we can see that everything looks good. Here, Hostinger will show us that they're optimizing our site while it's publishing. This helps our site pages load smoothly. After a few seconds, Hostinger shows that our website was updated. Here, I'll click the view site button to open my website in a new tab. My custom domain was ready in just a few minutes, so you may not need to wait the full 24 hours. You can review your site one last time and see if you need any major changes before starting to share your custom domain with others. Finally, as a bonus, now that you have your new website, I'll show you how to create an email address that matches your domain. Let's go back to our original tab and then click the drop down here next to website builder. Go ahead and select hosting or dashboard. Anytime you're within the hosting or dashboard, the website you've just created will live under your websit's list. When you need to edit your site, you can use this button right here. But to set up the professional email, visit emails in the lefth hand pane. On the right, you'll have two options. You can start with a free business email, or you can do the business starter email for just 39 cents a month. Upgrading will offer you more storage, more forwarding rules, and more email aliases in addition to advanced protections. But if you're on a budget, you can start here for free. In the select domain field, make sure your custom domain is selected and then you can click confirm. This will show your business starter free trial and you can start with this button here. For the email name, you might enter something sort of generic such as info or contact, but I'll use my first name, more personal, dan@framanwander.com. Then you can enter a new password. Then just click create. For this mailbox, I'll just use the browser. And when you're ready to log in, you can open the login in a new tab. That will bring you to the hosting or webmail site and you can enter the password that you just created. Click login and then you're all set. This is how you'll access your professional email using your custom domain. If you've only been following along so far, remember that using the link in the description will get you an exclusive discount for all the hosting or plans. Congrats on setting up your new site and let me know if you have questions in the comments below. Thanks for watching.