Hostinger Horizons Tutorial 2026 (Step-by-Step for Beginners)

Hey, I'm Caleb, and in this video, I'll teach you exactly how to use Hostinger Horizons step-by-step so you can build and launch your own app or website using AI, all without writing a single line of code. If you want to learn how to go from a blank screen to a fully working, professional-looking app or website with things like a contact form, the ability to accept payments, and a custom domain, I'm going to walk you through all of it. By the end of this video, you'll know how to set up Hostinger Horizons, build your first project from a single prompt, work with the Horizons AI to customize it, add real functionality, and publish it live for the world to see, even if you've never done something like this before. So, with that said, let's go ahead and jump right in. The first step is signing up for Hostinger Horizons. To do that, go to this link on screen right here, or click the first link in the video description. Using that will take you directly to the Horizon setup page and automatically apply an extra discount, so you're getting the lowest price available. And once you go to that link, you'll be brought to this page right here. Click on start now. And that'll bring you down to the plan options. Here, you'll see a few different plans to choose from, and the only real differences between them are how many AI credits you get and which features are unlocked. I personally recommend going with the starter plan. You'll notice that you do have the explorer plan over here, which is cheaper. However, this doesn't include a free domain, it limits you to just one website, you don't get e-commerce features, and you also can't buy additional credits if you run out. With the starter plan, you're going to get 70 credits per month, a free domain, up to 25 websites, and you'll find some other features down here as well. So, overall, I find that the starter plan is a much better starting point for beginners. You'll also see some higher-tier plans here as well. If you find that you need more credits or want access to things like the code editor, you can always upgrade later. For now, I'm going to go with the starter plan. So, here, I'll click on select plan. All right, so now we need to choose our plan period. It'll be set to 12 months by default. However, you can switch this from 12 months to 1 month if you want to, but I would personally recommend going with the 12-month plan. With this, you're getting the best promo pricing, a free domain, free hosting for the year, and you actually get two extra months included for free. So, in total, you're getting 14 months. And don't forget, if you use the first link in the video description, you'll save an additional 10% off. With that done, go down and click on continue. And then here, you'll need to register for a Hostinger account. Go ahead and enter your email address, and create a password. Then click on a register. And then here, you'll need to go through the checkout process. Go ahead and enter your billing address and your payment information, and I'll meet you at the next step. Then here, click on get started. Okay, so this is the screen where we tell Horizons what we want to build. Up here, you can type in your prompt, and this is basically the starting instruction for your project. You'll also notice a couple other options here. You can upload images if you want to give Horizons some visual direction. And if you scroll down the page, there are also pre-made templates for both websites and apps. Templates can be a good shortcut, but I want to start from scratch with a custom prompt so you can see how to guide the build yourself. Now, when you're writing your prompt, the goal is to be clear without making it overly complicated. A simple way to think about it is this: say what you're building, who it's for, the main sections you want, the style you want, and any important features you already know that you need. So, in this example, I'm creating a website for a freelance photographer. I want this to have a polished look, show off my portfolio work, highlight photography sessions, and make it easy for potential clients to reach out or book. So, this is the prompt I'm going to use. Create a modern website for a freelance photographer. Include a hero section with a headline, short intro, and call to action button. Add an about section, a photography services section, a portfolio gallery, client testimonials, a booking or contact section, and a simple footer. Use a clean, minimal style with strong spacing, modern fonts, and a polished color palette. Make the website feel professional, trustworthy, and focused on getting clients to book a session. So, this prompt works well because it gives Horizons a clear direction right away without trying to force every tiny detail into the first prompt. Once this first version is generated, we can always come back later and refine it. So, I'm happy with my prompt that I've created here, and once you've written your prompt, go ahead and click on the purple arrow right here. Okay, and then after submitting your prompt, you're going to see that the Horizons AI begins working on building your website or app. You'll see that it's going to start being built here on the right-hand side, and once it's ready, you'll be able to preview it here as well. It's going to take a few minutes to complete, so I'll fast-forward to whenever it's done. So, your website should load here on the right-hand side, but occasionally, you will run into an error like this where it says that your website or app couldn't load due to an error. If this happens to you, simply on ask to fix. Now, it's going to run through and analyze the errors and fix everything for you. And for whatever reason, if you run into issues and your specific prompt isn't working, it may be too complicated and overwhelming the AI. So, I would go back a couple steps, rewrite your prompt to make it simpler, and you should have more success. It's important to note that Hostinger Horizons is still in ongoing development, so some things won't work perfectly. Now, I'm going to let the AI analyze the errors and fix the website. And now that the Horizons AI has gone through and fixed the errors, I now have a functioning website here on the right-hand side. Here, you'll notice that I have a header with a homepage, about, services, portfolio, contact, and a call to action button here. Then right here at the top of my homepage, I have a nice big hero section with a call to action button as well. And if I scroll through here, I have my featured work, and then I have a simple footer here at the bottom. So, the AI has done a really great job. You'll notice at the top here that we currently are in the preview tab. If you want to edit any of the content here, switch over to the edit content tab. And it's going to highlight page elements that you can easily edit. Like for example, here for the contact section within my footer, I can change out my email address pretty easily. I'll just click on the text, then I'll enter my own email address. Once I'm done changing it, I'll click on save. Then you'll see that text update here. And you'll also notice over here on the left-hand side, after making a change, you can click on the undo button to undo that change. And after making a change, if something within your project completely breaks, you can click on restore to restore back to a previous working version. And you can also use the edit content tab to change out images within your project as well. So, I'm going to go back to the preview tab, then I'll click into my about page. Then I'll go back into the edit content tab, then I'll scroll down here to find this image. And this is simply a placeholder image, so I want to change it out for a photo of me. So, I'll click on it, click on upload new image, then I'll find my custom image here and double-click on it. Then I'll go down and click on save. And you'll see here that the placeholder image is replaced. It's important to note that these changes within the edit content tab don't cost any credits. All the changes I just made were completely free. So, basically, anything that's highlighted with this blue border in the edit content tab is eligible to be changed for free. However, anything you see within your project that isn't highlighted with the blue border will require credits to change. So, now you can go through the rest of your project and change out all of the elements that are highlighted with the blue border and make your project feel custom to you. So, now let's talk about credit-based changes to your project. As you can see here, there's some stuff that can't be edited for free using the edit content tab. So, how do I change this stuff? Well, the first way is by going over here to the left-hand side, and then asking the AI to make the change for you. However, you do have this button down here as well, called the select and edit tool. If you click on this, you can hover over all of the different elements within your project and request changes. So, if you only want to change one specific element within your project, you can use this tool to do that. So, for example here, I'm going to click on the background on my about page. You'll see that it's highlighted here. So, if I click on it, you'll see on the left-hand side that it says element selected. So, here I'm going to say, "Instead of having a plain white background, make this page's background more visually interesting by having a background image of some kind." So, we'll see what the AI comes up with based on this prompt. I'll click on the purple arrow to send the change. And you'll see that it'll begin working on the change here on the right-hand side. And then here on the left, you'll be able to see the progress in real time. And it's important to note that because this change is actually changing the code of the website, it will cost one credit. So, anytime you request a change from the AI that requires changing out the code on your project, it's always going to cost you at least one credit. All right, and now the Horizons AI has changed out the background. I'll scroll through here and see how it looks. Yeah, it made the page look a lot more visually interesting. So, you can use the select and edit tool to change out all of the different elements within your project just like that. Now, let's talk about requesting more general changes from the AI. So, I'll go ahead and turn off the select and edit tool. Then, I'm going to go back to my homepage. So, right now there are two things that I want to do. The first one is changing out the color palette. I'm personally not a fan of this blue color. So, that'll be my first change. And secondly, I want my homepage here to be a bit more visually interesting. Right now, it feels a little bland and there's not a ton of impact here. And here's how you're going to request changes like this. Make sure you don't put them into the same prompt. Requesting multiple changes within the same prompt can sometimes lead you to getting errors. So, I'm going to send these changes as two separate prompts to make sure they're handled independently. So, I'll start here on the left-hand side by asking for my changes and I'll say, "I want this website overall to have a warmer color palette. A brown and orange vibe would be cool." So, this will be my first change here. I'll go ahead and send it. And we'll wait for the Hostinger AI to make those changes. All right. Now, the AI has gone ahead and made those changes. As you can see here, we now have a nice warm color palette. Now, I'll go ahead and send out my next change. Here on the left, I'll say, "I want the homepage to feel higher impact. Right now, it's visually uninteresting. Make it more dynamic >> [snorts] >> by showing off my photography session packages and portfolio in more detail." So, this gives the AI a little bit of feedback here and gives it some things to start working on. So, I'll go ahead and send this prompt here and see what it comes back with. We'll also give this a few minutes to finish up. And now the AI has gone through and made those second batch of changes. Scroll through and see what it's changed out here. So, here I have my photography services and these are displayed a lot more cleanly. And scrolling through here, you'll see that I have my portfolio more clearly displayed. And yeah, overall, I'm really happy with these changes and it's pretty much completely revamped our homepage. And because I submitted my prompts for my color palette in my homepage in two separate prompts, it made sure it didn't come back with any crazy errors. So, for any big changes to your project, I'd recommend always doing it like this. And now you can go through and use this exact process for changing out the rest of the content within your project. For small stuff like text and images, you'll use the edit content button. For specific elements, you'll use the select and edit tool. And then for big changes to your project, you can just ask for changes here. Just make sure you submit them as separate prompts. Okay. Now, with that done, let's talk about adding a contact form to our project and how we can actually store user data. So, here at the top, you can see that I have a contact page. I'll click into this here. And here you'll see that I actually have a contact form already built. The problem here is that it doesn't actually work. In the top right, I'll click into the data tab. And you'll see that it says that my data dashboard will appear here once you ask Horizons to add features that require data collection. This is stuff like user accounts or contact forms. So, I'll switch back over to my preview tab. And I don't actually need Horizons to build out a contact form because it's already here. The only thing I needed to do is add functionality to make sure it actually works and stores the form submissions. So, I'll ask for that exact change here on the left. "I have a contact page with a contact form already built. It needs to be functional and able to store contact form submissions." So, I'll go ahead and send this request here. And here you can see it says that it's going to enable the back-end database so the contact form can store submissions. So, we're already on the right track to get that functioning properly. So, now it's going to take a moment for everything to update. All right. So, now everything should be working properly. Here you can see that it breaks down how it works. The visitor fills out the contact form, the form validates and submits, the data is saved to the database, I'll receive an email notification with the details, and they'll receive a confirmation email. It also says that we can view all of the submissions in the data tab. So, I'll go back to my contact page here. And I'll switch to my data tab to make sure everything looks good. Here you can see that the feature is still in beta. So, I'll click on got it. And then it breaks down that we have two different tabs here in the top left. We have test data and live data. The test data tab allows us to safely test new changes and view data from the preview mode. And then a live data is the data collected from your real published site. So, I'll click on got it. And then here I have a folder that says contact submissions. I'll click into this here. And as you can see, there's nothing here. So, let's go ahead and test this out and make sure it's working. So, I'll switch back over to preview. Then, I'll go ahead and fill out this contact form. Okay. And with the contact form filled out, I'll go down and click on send a message. And to make sure that's working properly, let's switch back over to the data tab. Click into contact submissions. And you'll see that the contact submission appears right here. So, everything appears to be working properly. This is a really helpful feature because Horizons isn't just building the front end of your project, it's also able to handle the back-end. This built-in back-end will be able to support things like storing user accounts, authentication, contact form submissions, and even automated emails if your project needs that later on. All right. So, I'm going to switch back over to the preview tab here. I'll go back to my homepage. Then, I'm going to scroll down to my pricing section here for my photography services. Horizons has the ability to also support payments and e-commerce features, which is a really exciting addition. So, if you're building a project where you want to sell something and accept payments through your website, that's something Horizons can now help you do. So, right here within my homepage, I have this pricing section. It shows the prices, but you can't actually pay for the services. I want to tell the Horizons AI to allow Stripe checkout so that way my website visitors can actually pay for the session. So, I'll go over here on the left-hand side and I'll say this. "Add a new pricing section on my homepage for my photography services. Include three package options. Include pricing, a description of each package, and a button that lets visitors pay online using Stripe. Keep the design clean and professional so it matches the rest of the website." Okay. So, this should get us on the right track. We're asking for Stripe functionality. We're also asking the AI to recreate this section of our homepage. So, I'll go ahead and submit this change here. And we'll let the Horizons AI go ahead and build this out. Okay. So, here's something we haven't seen yet with the Horizons AI. In some cases, it may give you multiple options and ask which one you want. So, right here it's saying I can either choose to have an online store or I can have a custom build. This custom build here will allow us to have a custom pricing section with our exact design, an individual pay now button for each package, and then direct Stripe checkout for each service. To me, this sounds like more what I'm looking for. If you want to build more of an online store, you could go with this option. But, I'm going to go down here and tell the AI that I prefer option two. So, I'll go ahead and send this message. And now it's going to go ahead and build that out for me. All right. Now, the project has been updated, but there's one important thing I want you to know about setting up your Stripe account with your Hostinger Horizons project. Right here, it's going to give you a guide about how to get your Stripe API key. Before your Stripe configuration on your project will work properly, you need to complete this step. First, go to your Stripe dashboard. Then, go down and click on developers. Click on API keys. Then, scroll down here and find your secret key. You'll want to copy this here. Then, go back over to Horizons. Then, paste in the secret key here. I'll go ahead and send this. And now it's going to link your Hostinger Horizons project to your Stripe account. All right. So, now everything should be configured and set up properly. Now that my project has reloaded, I have a new section here on my homepage called photography packages. Below that, you'll see I have three different packages listed and I can scroll down each of them and click on book now. And now this is going to open up the Stripe checkout for my website visitor. Stripe payments and e-commerce features are still being rolled out and worked on within Hostinger Horizons. So, if you want to learn more about this, I'll leave Hostinger's official guides down in the description so you can keep going from there. Okay. Now, let's switch back over to our Horizons tab. Then, I'm going to scroll back up to the top of my page here. And let's switch into mobile view. You can do that by clicking on this phone icon here. And now you're able to see what your project looks like within mobile view. If you find that anything within your project doesn't look quite right on mobile, you can ask the AI here on the left to fix it. By default, Horizons does make sure that everything is responsive on mobile, but it's always worth double-checking. And now with that done, let's go ahead and publish your project. To do this, simply go to the top right and click on the publish button. And this process can take a couple of minutes to complete. And as you can see, my website is now live. It's currently using a temporary domain. If I want to check this out, I can click on view site. And here's what my website looks like now that it's published. However, I do want to take this off of the temporary domain and connect it to a custom domain. So, I'm going to switch back over to Horizons here and click on connect to a custom domain. And since I purchased the yearly plan, I have a one free domain available. So, here I'll type in calebmedicsphotography.com. And as you can see, it's going to be free for the first year. So, I'll click on this. Then go down and click on next. Here I'll select my country, which is the United States. This is a personal domain. Click on next step. Then I'll enter my contact details. With that filled out, I'll go down and click on finish registration. And then Hostinger is going to go ahead and register your domain and then connect it to your project. Awesome. As you can see here, everything has worked properly. One thing I want to mention here is to make sure that you don't forget to verify your email address. Within 2 weeks, you should get an email sent to the email listed right here. And all you have to do is click on a button to verify your domain. So, just be on the lookout for that email coming soon. From here, click on continue. And then you'll see this notice here that says your domain is connected, but it may take some time to go live. And that this process can take up to 24 hours. All right. So, at this point, you've got a fully working website that you built from scratch using AI. And if you haven't purchased your Hostinger Horizons plan yet, make sure you go to this link on screen right here or click the first link in the video description. Using that link will make sure you get the lowest pricing available. And if you have any questions about anything we covered in this video, drop them down in the comments below and I'll do my best to help you out. And if this video was helpful, make sure to leave a like and subscribe for more tutorials just like this one. Thanks for watching and I'll see you in the next video.