Hostinger AI Website Builder — Full Tutorial for Beginners

What if you can build an entire website, including layout, design, copy, everything, without touching code, paying a developer, or spending weeks figuring out WordPress? Well, that's exactly what we're going to do in today's video. Hi, my name is Eric, and I've been creating websites for brands and businesses for over 10 years now. Today, I'm going to walk you step-by-step through using Hostinger's AI website builder to create a fully functional website using AI. And I don't mean just editing a basic template. We're going to create a fully customized website to your business, and we're going to do it all in four easy steps. In step one, we'll get a web hosting plan from Hostinger. This is what allows your business to stay online 24 hours a day, — and it will also include a suite of AI tools that make building your website easy. And we also have a special code that will give you the biggest discount available. In step two, we will create our website using a prompt. A prompt is a detailed description that gives the AI builder info it needs to generate your website. In step three, we'll edit the page content, website style, and settings, and search engine optimization. And in step four, we'll add a contact form so your customers can easily reach out to you. So, let's get started. I'll drop a link in the description for you below, so you can get your new website domain and hosting, and also get a big discount. Okay, this is Hostinger. Hostinger is one of the best hosting providers on the internet. You can see they have great reviews right here on Trustpilot. So, to get started, click on view plans. This will bring you to the plan options. There's premium website builder and business website builder. I suggest the business website builder plan because you can create way more websites, you get 50 GB of storage instead of just two, you get way more mailboxes, and you get all these features, and it's just a little bit more money. This is a great value, so I'm going to choose the business website builder right here, which also comes with the AI tools that we need. If you don't select the business plan, then unfortunately, you won't have access to all of the AI tools available. So, once you make your selection, click on choose plan. And on this page, it's going to ask you, "How long do you want to purchase your hosting plan for? " You can do 1 month, 12 months, 24 months, or 48 months. I highly suggest you choose at least 12 months, and the reason is because you will get a free domain with your plan. You can see right here, free domain. And I also want to mention you get daily backups with Hostinger, which is a great idea in case something happens to your website, you have peace of mind that you can easily recover it from a backup. Also, very important before we go to the next page, come over here and click on have a coupon code. In this box, you can enter Eric10, and then click apply, and this will give you a further 10% discount, which will give you the absolute best price for your Hostinger plan. Once you do that, you can click continue. On this page, Hostinger is asking you to make an account, so you can enter your email address and password. Once you get to this screen, you can enter in your billing address information, and then click continue. And once you enter in your address, you'll come down here, and you can enter in your card information. Okay, once you come to this page, it's going to ask you what your website is about, what your business does, or what your brand is like, so it can design your website for you. In my case, I'm going to say that I have a property management company managing condo projects in the city of Boston. Now, you'll also notice there is this improved description link right here that appeared. If you click on that, it will build out your description and prompt a little more to make it a little more detailed. I also want to mention that there is a link to pre-made templates. Hostinger gives you some starter templates to use, so if you want to browse through these and start with one of these, and then personalize it from there, you can do that as well. But for this tutorial, we're going to start from a prompt like this. So, once you're happy with your description, click on the arrow right here. Now, Hostinger is creating your new website. It might take a few minutes, so just be patient, and it'll be ready in a second. And just like that, we have our new website. Wow, that was so easy. Now, I know it's not perfect. There's a lot of things that you might want to edit or change, but this is a great start. Like, look at this video here, and you've got button in place, and all like a banner photo. This is already going to give us a great start. This looks super professional. So, when you're ready to edit, click on continue right here. Now, this pop-up comes up, and it's asking to connect your domain. So, you can skip it if you want, but I'm going to connect my domain right now. I'm going to search for the domain that I was looking at earlier, ericsailesson. com. Okay, and I'll click next. Now, it's asking me to register the domain, which is giving my personal info or my company info, so that they know who this domain

belongs to. And this is important because if in the future you want to sell your domain, this information needs to be correct. Now, if you already purchased your domain on a previous step, if you already bought your domain, then you may have already done this, and you can just skip ahead. But since I just selected my domain right now, I'm going to go ahead and enter the information here. Okay, and so it says domain added to your site, and it says, "Don't forget to verify your email address within 14 days to keep your services online. " So, that's a really good point. If you did not do it already, you want to make sure you go to these two emails to verify your email address, to register your Hostinger account, and also a separate email that will allow you to verify your domain. Well, that was easy, right? Now that you have your domain and the basic design of your website, we'll jump in and start editing things. Now, this is the Hostinger dashboard, also known as the HPanel. If you come up to the home tab here, you can see that it lists my business website right here, ericsailesson. com. And from here, I can manage the domain, and I can also edit the website. So, I'm going to click on edit the website. Okay, and then our website opens up in the editor view like this. And from here, we can click on all of the different elements to easily edit them. So, for example, if we previously had 140 units instead of 150 units, I could easily click in here, and then just type in 140 plus, and I could change this word to be units, something like that. And I could change this to be, you know, whatever, 20 trusted experts. It's as simple as clicking and editing. Now, let's say I wanted to move something within this page. Like, let's say for example, I wanted to move this title down. You can just click on it like this and drag it down, and you can see in the background, Hostinger gives you this grid, so that you can keep all of your elements nicely aligned. So, for example, I could come down here like this and align it like that, or I could align it back at the top like this. I can also move a photo up and down like this in the grid. And the same thing with titles like this. Now, let's say I wanted to start replacing some of these images. So, these are all stock photos, obviously, and they're not my business photos. So, let me click into this photo right here, and then come up to this change image button. And from here, I can come up to upload files, and I will select my photos from my desktop right here. And I'm just going to select one of these. Okay, and click upload, and now I'll have my photos on the website. And just like that, it replaces it on the website. So, I'll do the same thing right here really quick. Change image, upload files. Okay, this one will load, and then I'll press select. All right, this is easy. You also probably noticed there's a button right at the top of the page, so let's edit that. Let's click get started, and from here, you can click edit button, and it's as easy as just changing this to a specific web address. Like, let's say you wanted to link to another website, you would click on web address, and then you could enter something like google. com, for example, and then just select if you want to open into a new tab, basic link controls like that. Or what I'm going to do is actually link it to another page. I'm going to link it to my contact page, so that when people click this, it will bring them to my contact page, and I'll change the text to contact us. That way, it gives them a little call to action that if they want to work with us, they can click this button to reach out to us right away. There's also an animation option here. This, I think, will make it look a little more high-end, so I'll just have it fade in like that. Okay, I'm happy with the button setting, so I'll close this box. I noticed that there's a little bit of a mix-up here with this text. I don't need this text right here, so I'll just select it, and then delete it with the trash can. And you can click into this text right here, click on edit text, and you can change the font, the styling. You can make your text a link. You can align it however you'd like. You've got all your basic text controls right here. I think it looks pretty good right now, but I'm just going to change this to be something like Boston's trusted condo management experts, or maybe I'll make it Boston's condo management experts. There we go, just like this. And I can come right in here and just bold the Boston's like this, and you can style this however you'd like. If you come down to the bottom of the page, you'll notice that there is already a footer in place, and this looks pretty good, but it might not be perfect. So, make sure you enter your phone number right here, your email address, and you can also enter any other little things like, for example, you can change the date here, and you can go to these social icons and click on edit social icons, and enter in all of your social links. Now, if you don't have one of these accounts, for example, I don't have X, you can just come in here and click delete. And you can also reorder them like this.

In here, there are style options if you want to change the icon size, and you can also change the layout if you wanted to make it a vertical menu, and also add an animation if you like that. So, take your time going through the page, editing everything, uploading your photos, and making it look really nice for your brand or business. Now, let's say you wanted to add a page. You can see from the short prompt that we gave at the beginning, it already built out home, services, properties, testimonials, and contact pages. But, let's say we wanted to add a pricing page. Well, we can come over to the pages menu on the left side here, open that up, and go to the bottom and click on add page. Now, it gives you some suggestions on what to add like a blog, an online store, an appointments page. It also gives you some templates, and you can also generate a page with this button right here using AI. And in this case, I'm going to create an FAQ page that answers common questions about how we manage condos. So, I'll just enter in this description. The more info you give it, the better, but I'll just keep it simple for this example. And when you're ready, you can click create page. All right, and just like that, it has created my FAQ page. That makes it really easy now to come in here and just edit these however I want. So, for example, if I know that there's a really common question about like the minimum contract length, I could enter it in here. And just like that, it's easy for me to edit the question, and I would just go through all of these and edit these to be personal to me and my business. Now, I also want to point out that it automatically added the FAQ page to the top menu here, but there's a little problem. The first problem is I don't like how the uh the A and the Q are lowercase. I want these all to be capitalized. And also, I want the FAQ to come before the contact page. So, let's try to fix those things. Let's go over to the pages menu again, and we'll come down to the FAQ. And right here, we will click on rename, and I will just rename this like this. Click save, and then I will drag this to be above the contact page, and you can see those changes were updated right here. Super easy. If it's going to take you some time to edit your page, you can switch this button on so that visitors will see a coming soon page instead of your half-built page. It will just make it a little cleaner and more professional if you're still working on editing your website. Okay, now in the top right, you'll see there are a few buttons. You'll see the save button here, but auto-save is on, so it's saving all of our changes automatically anyway. There's also a preview button, so we can see what the changes will look like before we go live, and then there's the go live button, which will publish our changes to the internet. So, let's press go live and we'll get everything published. Now that our changes are published, it says your website was updated. It shows us the URL, and we can click on view site. Okay, right now it says coming soon because we have coming soon turned on somewhere, but this is what visitors would see right now if they went to our domain, which again, mine is ericsailesson. com. But, let's turn this coming soon page off now. So, we'll come back to the editor, and then we're going to flip off this coming soon page like this, and click update website. Okay, so it says our website was updated. Let's view site again, and this time it loads our home page. This is great. Okay, let's go back to the editor. Now, SEO, or search engine optimization for your website, is very important. Luckily, Hostinger has a built-in SEO tool, so let me show you that. Come over here to the left side and click on the SEO button, and then you can click on any page here. So, I'll click on my home page. Right here, it will show you what your website will look like in search results. And one cool thing about Hostinger is that it will actually make suggestions for you. But, if you don't know too much about SEO, that's totally okay because Hostinger gives you an AI SEO assistant right here. All you have to do is click this link, generate new SEO info. And it's asking you for a short description about your website. Once you have that, click on next step. It's going to ask you for some keywords about your website, so I'll select some right here, and then click next step. Okay, and this is going to show you what your website will look like in Google search results. So, if you want, you can come in here and actually edit these a little bit, but if you're happy, you can click on finish. And go ahead and go through each one of your pages just like the home page, and do the same thing. Now, there are some other cool tools I want to show you that Hostinger gives you. For example, on the left side here, there is the styles menu. So, come in here, and if you have some particular brand colors, you can easily enter them right here. So, for example, let's say I wanted to change this blue to more of a green color, I could come in here like this, and I could either enter in the hex code, or I could just find a color just like this. And when I'm happy with that, I'll click accept. So, you can go in here and update your colors. You can also update

your fonts. So, if you have a specific font that you use for your brand or your business, you can enter it right here. I like Poppins, so I'm going to change it to that. And obviously, if I make changes like this, I might have to come in here and resize some of the text. But, it's not too hard. You can also set the default shape for your buttons, and also your animations. If you come over here and click on AI tools, you will see that Hostinger gives you a ton of different AI tools to help you build out your website. For example, I'm not a great writer, so I could use this AI writer tool right here to help me write an about page for my website. Write a one-paragraph about section for my business. The more information you give it, the better it will be, but we'll just use this for an example. All right, you can see it generated me a nice paragraph that I can use for an about section or the about page on my website. There's also an AI blog generator, an image generator, and a logo maker. Let me show you the logo maker. So, when you open up the logo maker, it will look something like this, and you can just type in what kind of logo you want or what your business is like. I'm going to change this to corporate, and I'm going to say I want Beacon Condo Management, and then click create. And if I'm happy with this, I can click download. Okay, I downloaded it to my desktop. Let's go back to the editor, and let's go down to the more section right here with the three dots, and I'll go to general settings. Now here, this is asking for your favicon. This is a small logo image that appears in the browser bar right here. Since we already made a logo, we can just add that right here. Okay, and there's our logo, and we click select. And then here, I'll click save changes. Also, here you can change the link preview image. This is also very important because when someone shares the link of your website on social media or in other places, it will show a preview image, and you can actually decide what that image is. So, let's come in here and click add image, and let's just say we want to upload a new image, and go to photos here, and let's say we want to use this one. Okay, we'll select that. So, now when someone shares our website, it will show this image. Okay, once you're happy with your photo, you can click save changes here. And the other thing I want to show you is that down here, there is a web to agent option. You can turn this on so AI tools like ChatGPT can better understand and interact with your website. And you can also turn this one on to enable llms. txt. Okay, once we do that, I want to show you one more thing before we update. Come up here to the setup button, and then come down here to update your logo. We didn't actually add our logo here yet, and although we created an image using the AI tool, we can enter a text logo right here. So, if my business was called Beacon Condo Management, we could type it in like this, and it will be displayed right here at the top of the page. You could also change the font for your logo, so I could change this specifically to this one, and you can change the font size right here with this slider. Once you're happy with that, let's click update website. And you can see I've opened it here in another window, and it looks really nice. So, let's close this, and we'll go back to the editor here. Now, all of the changes we made so far are specifically for desktop viewing, but if you want to check what it looks like on mobile, you can click on this little icon of a phone right here, and you can also edit things specifically for mobile. So, for example, if you want to center something like this, you can come in here, edit text, and then come over here to align it center like this. Click on this, edit text, make it center. It might look some things like this might look better on mobile if they were a little bit different. All right, just like that. I suggest you go through your whole website page by page, and make these small adjustments for mobile. So, when people look up your website on their phone, which a lot of people these days are looking at websites on their phone, it will look great. It already looks mostly good anyway, so it's just about making a few small tweaks. The last thing I want to show you is how to make a contact form. Because if you have a business or a brand, you probably want to get more clients. And the way those clients are going to reach out to you are through your contact form. So, let's go back to the desktop view, and then we'll go over to pages, and then to the contact page. Once we're here, you'll notice there's a form right here. And if there's no form here, you can actually come up to the elements tab right here, and add whatever element you want into the website. So, for example, if this wasn't here, I'll just delete it. You could come up to elements and then go down to contact form like this and then it will add onto the page and you can just drag this to where you want

it to be on the page. So, I'm going to align it like this. Okay, that looks pretty good. Now, you can edit your form by coming in here and go to fields and you can change whatever fields that you want here. So, for example, if you want there to be no last name field, you could change this to subject like this and then you can reorder the fields like this. You could also make something required. If you want to require something like entering a subject, the switch is right here. Then we can come to the button tab here and I noticed that the button is centered like this. I don't really like this. I like it when the button is on the left side. So, I'm going to click this to move the button to the left side. Here, you can enter a message so that after visitors submit their email to you, they'll be able to see something just to know that their message went through. You can put a thank you or you can maybe say uh we will reply within one business day, something like that. You can also come up here to the style tab and add all of the styling for the form like the text color, the font size, the border color, all things like this. And of course, there's animation as well if you want the form to fade in like that. Okay, once we're happy with that, we can click update. And I want to mention that when someone submits an email to you through your contact form, it will by default go to your Hostinger email address. So, you don't need to set up any other kind of service or tool. The emails will go directly to your Hostinger account's email address. Okay, and there we have it. There's our website. We can come over here to the contact page and you can see the form loads nicely right here. Super easy to get this created and now all of your potential customers can reach out to you very easily. The very last thing I want to mention is that if you have any questions along your website building process, you can ask Cody, Hostinger's AI assistant right here. Just click this button, ask right here and it will open a box like here you can chat in. You can ask it things like, "How can I make a new page on my website? " I have to say that the Cody assistant is one of the only AI assistants that I actually enjoy using. Most of the time when companies use an AI assistant, I absolutely can't stand it, but for whatever reason, the one Hostinger uses is super helpful. And you can see it answered my question very clearly right here, even putting like a little box around what I need to click on. So, if you have any questions along the way of how to do something, just click ask here and type it in the box and I'm sure you're going to get the answer that you need. Thank you guys so much for watching. You should be off to a great start building a website with Hostinger AI. If you guys have any questions or suggestions for the next video, leave them down below and I'll see you in the next one.