How to Create a Website with AI in 2026 - Hostinger Website Builder Tutorial

This website was built entirely with AI tools. And in this video, I'll show you exactly how I did it. We'll use a mix of powerful AI tools to build the entire site from the layout and design to the images and content. And I'll walk you through each step so you can do the same thing. By the end, you'll have your own fully customized AI generated website. First, let's sign up for our website builder. For this video, we're using Hostinger's AI website builder because it's easy to get started and it looks great. Plus, you get a free domain when you sign up. And when you use the link in the description below, you'll get an additional 10% off. Click the link and then click claim deal. You'll be prompted to select a plan. In order to access all the AI features, you'll need to choose the business plan or higher. Up next, you'll be prompted to select the period. You'll need to select at least 12 months in order to get the free domain. But if you're able to commit to a longer time frame, you can get even bigger discounts in addition to the 10% you get from using our link. Go ahead and select a term that works for you and then follow the prompts to continue. Here I'm prompted to register my email address. So I'll go ahead and type it in and then click register. On the next page, go ahead and enter your billing address. Then click continue. Then enter your payment information. Then after you submit your payment, you'll get this confirmation window. Go ahead and click get started or wait until the countdown runs down. Next, run through the onboarding wizard and answer its questions. When asked how you want to build your website, choose Hostinger website builder. When prompted to select a domain, click use temporary domain. We'll add a custom domain at the end. Finally, we get to the fun part where the AI is going to build the website for us. Building a killer website with AI requires an equally killer prompt. I admit, writing about yourself or your business can be really hard. So, instead of writing my own prompt, I'll let another AI tool write the perfect prompt for me. So, in a new tab, let's go to chatgpt.com. Sign in if you have an account or create one for free. Once logged in, make sure you're using the latest model optimized for writing. In this tutorial, I'm using GPT4.5. Next, give Chat GPT your business name and a quick overview of what you do. Tell ChatGpt you'd like it to ask you a few clarifying questions first and then craft a detailed prompt that Hostinger's AI can use to build your website. Hit send when you're ready. ChatGpt will respond with a set of questions. Answer them clearly, then hit send again. Chat GPT will now create a tailored prompt for Hostinger. Review the prompt. Then, if it needs tweaks, you can ask Chat GPT for small edits until it's perfect. Ideally, your prompt should be about 2 to 5 sentences long. When you're satisfied, click the copy icon, switch back to Hostinger, and paste your refined prompt into the description field. Finally, enter your brand name. Hostinger might suggest adding features like an online store, but if you prefer not to include those yet, just uncheck the box. Click create website, and the AI will handle the rest. When it's done, it'll present me with a full website. You can see it's complete with text, images, and it also has a couple of different pages that you can look at. The next thing we need to do is select a color palette on the right side. Toggle through and play with different color palettes to see how they look. You might need to scroll around the page to see how the color palettes impact the other parts of your website. Pick a color palette that works for you. Then click continue. And just like that, we have a complete custom website built by AI in just a few moments. Looks good so far, but how do you turn this AI built site into something that actually reflects your brand? Next, I'll show you how to personalize the style, reorganize the layout, and use AI to create new sections to fit your business perfectly. Let's start by exploring the website editor. In the left navbar, you have tools to add elements, manage pages and navigation, update website styles, access the AI tools, and add a store. At the top, you can switch between desktop view and mobile view, which is helpful to make sure your site looks good on every device. Next, if you click any elements on the page, a floating toolbar will appear with relevant tools for the element selected. If you want to reorganize anything manually, you could always click and drag elements on the page. If you don't like the change you made, you can click undo in the top to roll back to a previous version. Let's customize the site's style. On the left side, select website styles. And then from here, you can update colors, fonts, buttons, and animations. I want to update the fonts that are used. Right now, we're using this outfit and inter font combination, but I want to use Poppins. We'll hit reset and then click X to see the changes. Next, I'll show you how to add and remove pages with AI. On the left side, click on pages and navigation. And here you can see we have a homepage, training page, and testimonials page. I don't really need a full testimonials page, so I'll click the three dots on the right and then click delete. It'll ask, are you sure? So I'll click delete to confirm the action. I want to add an about page to the website. So on the left side I'll click AI tools and then click AI page generator. Here we need a prompt to create the page. So I'll use chat GPT again with the same question and answer method from earlier to get the perfect prompt for Hostinger. Once the AI generates, I'll copy the output, paste it into Hostinger, and click create page. Hostinger will create a page featuring text, images, and a placeholder testimonial based on the prompt we submitted. I think this is looking pretty good, but let's say we wanted to add another section below the gallery. Below the gallery, I can click the add section button and then in the top left, click generate section. Since this is an about page, I want a section that features our trainer. That's pretty straightforward. So, I'll just go ahead and type that prompt in here. And I'll click create section. You know the drill at this point. Hostinger will go ahead and create a new section all ready to go with some placeholder elements. Obviously, this isn't a picture of our real trainer, but we'll swap out images later. The final update we want to make to the site structure is to reorganize our navigation. So, in the left side, I'll click pages and navigation, and I want to slide the about page ahead of the training page. To do that, I'll simply go down next to the about page, drag to move it, and place it above the training page. So now the site structure is dialed in, the layout's clean, the navigation makes sense, and everything is right where it should be, but it still looks kind of generic. Let's fix that. Next, I'll show you how to bring your site to life with a modern logo, beautiful images, and powerful text that speaks directly to your audience. At the top of the site, click the logo and select use AI to create a unique logo. You only get one credit included, so it's worth starting with a solid prompt. I like using chat GPT to brainstorm ideas and write a short punchy prompt I can paste right in. Next, pick a style. Minimalistic works well. And under the gear button, toggle on make logo colorful for more vibrant logos. The logo maker will generate a few options. Once you find one you like, click edit logo to customize the text, adjust the font and colors, and tweak the layout. I usually go with the icon on the left and text on the right. It tends to look clean and professional. When you're happy with it, download your files. You'll get a transparent logo and a favicon, both ready to use on your site. And if you want more control, there's also an option to create a simple text logo. Just know it won't include an icon. If you didn't like the Hostinger logo and you don't want to buy extra credits, another way to create a logo is with chat GPT. Just click create image, paste in the same image prompt with some details about the logo, send and tweak the results, like asking for a horizontal layout with the icon on the left. Once you're happy, download the image and remove the background using Canvas background remover tool. Crop the image, save it, and now you've got a clean, transparent logo ready for your site. Back in Hostinger here, you see we still have the logo dialog open. So now we'll click replace image and then upload files. Here you can choose to use the logo file generated by Hostinger or by chat GPT. In my case, I prefer the chat GPT version with a transparent background. So I'll select that one and then click open. Go ahead and select the uploaded image and you'll see the logo has been added to the website. That said, it's a little small. So back in the header settings dialogue, drag the slider to make the logo a little bit bigger. There. I like the way that looks. When you're done with the logo, click out of the header settings. Let's navigate back to the homepage. Our next priority is to really hook people when they land on the homepage here. So, let's modify this intro section. We'll use AI tools to update the text and add beautiful images. Let's start with the background image. First of all, I don't really like that we have this contact form in front of our image. I want to see the dog toys behind it. So, I'll click on it and then in the top floating toolbar, click the trash can icon to delete it. Great. This looks a lot cleaner. But now, this image here is a stock image that Hostinger pulled in and it's not representative of the toys that we make. Let's click the background section and then click generate image in the floating toolbar. Go ahead and describe the background image that you want for your website. I like the general layout of this image, so let's generate something similar. I'm asked for a product shot of durable, eco-friendly dog toys with lots of negative space on the left side of the image and an array of dog toys on the right side. When you've added your prompt, click create images. Hostinger will process for a few moments and then show you some image options. We can click on them to see how they would look on the page. And I'll be honest, it didn't follow instructions perfectly. These don't look bad, but I'm not totally happy with it. So, I'll click create again. Hostinger created a new batch. And I think this one on the right is kind of interesting. So, I'll click on that to see how it looks. And there you go. Again, you can do the same exact process with chat GPT if you prefer that image generation engine. Back in Chat GPT, we still have our logo up. So, let's click X to close out of it. Then, I'll click create image and I'll paste in the prompt. Again, we'll send it and let ChatGPT process. ChatGpt definitely did the best job of following the instructions. And the image looks really nice. So, I'll go ahead and download this. I'll call it intro image and then go back to the hostinger tab. We'll click the background image, hit edit section, and then click replace image. Upload files and then select the new intro image. Select it in the media library. And now the image has been replaced. We can click the X in the section settings popup to see how it looks. This looks really nice. You can follow the same process for any other images on your page. Just click on the image and click generate image or click edit image to swap it out for something else. Here's another cool thing AI can do. It can actually look at your website and give design suggestions. So, if there's a part of your website you're not loving, just grab a quick screenshot and pop it into chat GPT. Then you can ask for tips on how to improve it and it'll suggest ways to make it look even better. To take a screenshot on a Mac, press commandshift 4, then click and drag over the area you want. On Windows, press Windows keyshifts S. Once you've taken your screenshot, upload it to Chat GPT and ask for some tips on improving it. Chat GPT will give you specific suggestions based on your screenshot, but everyone's results will be a little different. Remember, these ideas are just suggestions. You don't have to use all of them. Just pick the ones you like and think will look good. In my example, chat GPT suggested making the headers bold, adding interesting subheaders, putting clear buttons for actions like shopping for toys, and using nice product images. It also gave me a fun idea for a header for dogs who chew hard and love harder. If you like these kinds of ideas, you can copy and paste them right onto your website. Use the ideas you want and disregard the rest. For me, chat GPT also suggested adding a soft background color like beige or green to make the page look better. So, I'll implement that, too. And ooh, I really like the way that looks. Don't forget for the buttons on your site, you'll want to link them to a destination. To do that, click on the button, click edit button, and then under link to, you can select a page, a web address, or even a specific section on your website. At this point, your site looks great and represents your brand. But before we share it with the world, there are a few important details to finalize. We'll make sure your site looks good on every device, is easy to find on Google, and has a domain name people won't forget. Then you're going live. In the top bar, click the mobile phone icon. Here you'll be able to see how the website looks on mobile. As you scroll through, note any sections that look a little weird. The second section on our site, for example, has some strange spacing in the middle. Go ahead and click the section that looks weird and then click autofix layout. And just like that, the section has been rearranged so that the layout is much tighter and better organized. Go through and check all the sections of your site to see how they look and then click autofix layout to adjust as needed. You can click the hamburger menu at the top right and then open up other pages to do the same thing. If you find any sections where there isn't an autofix layout option available, or you simply want to adjust it by hand, you can click and drag to rearrange the elements in the section for the mobile view without impacting the way it looks on a desktop. When you're done organizing your mobile view, click back to desktop. And you can see here that the layout of the desktop view has not been affected. Now, let's increase your site's chances of being found organically on Google. On the left side, click the three dots for more settings and then click SEO settings. Use the AI SEO assistant by clicking generate new SEO info and you'll get an autogenerated page description. You can add more context if you like, but I'm happy with this, so I'll go ahead and click next step. Next, choose your keywords. I'll add sustainable dog products, remove USAmade dog toys, and select obedience training. Then click next again to preview how your page will look in search results. You can tweak the SEO title and meta description here like I'm removing for millennials and adding eco-friendly. Once it looks good, click finish. And just like that, the SEO for the training page has been updated. Below that, you'll see suggestions for improving your SEO. To fine-tune the SEO title, I'll update the focus keyword to obedience training since this is the training page and not a dog toys page. Next, I'll take a quick screenshot of the suggested improvements, upload the image to chat GPT, and ask it to suggest a new title that meets the listed requirements. It gives several options, so I'll go with one that fits best for this page. Finally, I'll update the page URL to include the full focus word obedience training, not just the word training. You can repeat this process for each page. Just pick a focus keyword that matches the content and build your title, description, and URL around it. Once you've optimized your SEO, it's time to connect your domain. At the top, click connect domain and then get domain. You can see based on the plan we purchased, we have one domain available. In the box below, we can type our desired domain name in to see if it's available. I want chewandtrain.com. You can see here that chewandra.in is the first option that it suggests, which is available. But if we scroll down, we can see that chewandtrain.com is available for free for the first year. So, we'll go ahead and click on that and then click next. Follow the steps to register your domain. You'll need to select if this is being registered to a single person or to a company. Then you'll enter your name, address, and phone number and click finish registration. When it's done, you'll get a notification that the domain was added to your site. In order to keep your services online, you'll need to verify your email address. So, go to your email account, look for the email from Hostinger, and click the verification button. Once you've done that, you'll get a notification that your email address has been verified successfully and you can close the page. Back in Hostinger, click continue. The only thing remaining is to take our site live. So, in the top right, simply click go live. When it's finished, you'll see a notification saying your site is now live. Go ahead and click the view site button to see the finished product. And just like that, you can see chewandtrain.com is live on the internet, built entirely by AI. If you haven't already, go ahead and click the first link in the description below to sign up for Hostinger with our exclusive 10% discount. Congrats, you just let AI design your website. Turns out your website to machines kind of genius.