Hostinger Website Builder Tutorial (2026) - Step by Step

Hi, I'm Matt and in this tutorial I'll show you step by step how to create a website using Hostinger's website builder. We'll cover creating your website, customizing your design and content, [music] getting found on search engines, and going live with your own domain and professional email. Everything you need as fast as possible. And I won't skip anything, so even if you've never built a website before, you'll be able to follow along. By the end of this video, you'll walk away with a complete professional website. To get started, we need a Hostinger account. For the absolute best deal, use our special partner link to get an additional 10% off any plan you choose. This coupon even works on top of any existing promotions. Simply use the link on screen or scroll down and click the first link in the description below. When you click that link, you'll land on this page here. The New Year's sale deals are active while I'm recording right now, so this may look different for you. If we click start now, it'll scroll us down the page. And here we can compare the various plans. If we compare the premium plan to the business plan, you'll notice you can get away with the premium for simple websites. But if you plan to use your website for e-commerce to sell products, you'll need the business plan or higher. The business plan also includes tools like the AI image generator, the AI writer, the AI blog generator, and AI SEO tools. These all make building a professional website and marketing super easy and super fast. and you don't get access to those on the premium plan. So, I highly recommend the business plan. This deal lets us host and build a complete professional website for just a few dollars per month. So, I'll go ahead and click choose plan. You'll be routed to your cart. And the only thing you need to decide here is how long to register for. If you click the period dropown, you'll see four options: 1 month, 12 months, 24 months, and 48 months. You need the 12-month plan or higher to get the free domain, but for the absolute best value, I recommend the 48-month plan. That gets you the cheapest cost per month. Here you can see it's $2.69 per month. And if you look at the bottom right of the order summary, the MM10 coupon from clicking our link has already been applied automatically. Pick the term that you want and then when you're ready, click continue. Next, you'll need to register your account. You can register with your Google or GitHub account or enter your email address and password manually. I have chosen my email address. Click register to continue. On the next page, enter your billing address and payment information to complete the transaction. When your transaction is complete, you'll get this confirmation message. You can click the get started button or wait for the countdown to finish. Now that our account is all set up, we get to jump right into creating our website. And we're presented immediately with this onboarding flow. For this question, who is this website for? Pick the most relevant option and then click next. For the question, do you want to create or migrate a website? Click create a website, then click next. For how do you want to build your website? Choose this option, website builder, then click next. You'll be asked what domain name you want to use for this website. You can search for a domain name now, but I'll show you how to do this later in the video. So, for now, click use temporary domain. Now, we get to the fun part where we actually get to start building the website. Hostinger prompts you to describe your website idea or pick a suggested option. Now, if you want to go the classic route and start with a template for your website, you can find that down here by clicking pre-made templates. Here, you can search by category, scroll through, and find a template that serves as a good starting point for your site based on your aesthetic and your business. But for this tutorial, we'll use the AI website builder method. So, I'll click try AI website builder to get back. Back on the AI prompt screen, let's describe our website idea. You want to be really specific here. Talk about what your business does, who it serves, and the vibe you want for your website. The more detail you give, the better your starting point will be. If you're not exactly sure what to say here, you can always chat with an LLM like ChatGpt or Claude to get help. I'm making a website for a tea shop called The Gentle Kettle. So, in my prompt, I've described the tea shop itself, how it's calm, and cozy. It's a place for people to slow down and reconnect, maybe read a book, there's natural wood and warm light. And I've also talked about the brand voice, how it should feel warm, human, and reassuring. Including all these details ensures the AI has everything it needs to build an amazing first draft. Once you've gotten your prompt written up, go ahead and click the send button to start generating your website. It'll take a minute or two to generate the site. Then you'll be presented with the first draft. Wow. Right away, this is a really good starting point for a website. You can see right away that it has a menu with several pages that we can click between. And on the homepage here, as we scroll through, you can see it wrote copy, pulled in tea related images, used the warm color scheme I was hoping to get. And in the upper right, we can click to see the mobile version of the site as well. And as we scroll through, we can see it's already been mobile optimized. So, this is a really great launching off point. If you're not happy with your first generation of the site, in the upper left, there's a create again button you can click to have the AI try again. And you can do this as many times as you want. Whenever you get a website that you're happy with, go to the upper right and click continue. All right, welcome to the website builder. Let's take a quick look around. To the left, we have a sidebar that contains all the tools you'll need to manage your site, including elements, pages, styles, and AI tools. At the top, there's a toolbar with buttons to toggle between the desktop and the mobile view. There's an undo and a redo button. There's a button to preview your site and a button to go live, which we'll use near the end of this video to publish the website. You can edit your site by clicking on any of the elements on the page. When you do that, a floating toolbar will appear that has functions and buttons relevant to that particular element. Feel free to dive in and start editing things right away if you want. Undo is your friend. Again, you can use that at the top or you can do it more quickly with keyboard commands. On a Mac, you can use command- Z to undo. And on Windows, you can use Ctrl +-Z. Let's dive in and begin to customize our website. First, let's look at site styles. To access styles, click the styles button on the left sidebar. Here, you'll see tabs for colors, fonts, buttons, and animations. Changing the settings here changes the settings sitewide. So, this is the fastest way to style your whole website. For example, let's take a look at fonts. And we may need to scroll down here to see a better preview. There we go. Our services. Let's see what happens if we try Jung. We may have to hit reset. And this is a better look for our particular website. You see it changed the font here, but if we scroll up, it changed it throughout the entire page. Starting your site's customization by updating fonts, colors, and buttons as desired is a great way to make sure that your site has the overall look and feel you're after before diving in and working on individual elements. Once you've gotten your site style dialed in, next let's customize the content of our website. Starting with the homepage. To customize your content, first you need to understand how your site is structured. The biggest building blocks of your site are the pages. You can navigate between the pages by clicking the links in the header menu. Each page is divided into sections. Sections are the full width blocks on your page that stack vertically to build the layout of your site. Elements are the individual pieces of content on your page like text, buttons, and images. Elements are the building blocks you place inside sections to create your design. You can reorder sections on a page by clicking the section and then in the floating toolbar clicking the up and down arrows to move them around the page. You can add a new section to the page by hovering between two sections and clicking the add section button. This opens the add new section dialogue. To start from scratch, you can click the add blank section button on the left. You can click the generate section button to describe what you want to AI and have it build it for you. Or if you want to grab a pre-made block, you can scroll down on the left and look at the various categories. Click into a category and then simply click a pre-made template to add it to your site. To delete a section, simply click on it and then click the trash can icon in the floating toolbar. All right, that's sections. Now, let's talk about elements. To add an element to your page, click on the elements button on the left side, find the element type you want to add, and then click and drag it to where you want it on your page. From there, you can drag your element around the page using the columns to help you line it up. You can resize your element using the bars to the left and right of it. And you can delete an element exactly like you delete a section. Make sure it's selected. Then click the trash can icon in the floating toolbar. To edit text, double click it and then type just like you're in a word processor. I recommend going through the site and replacing placeholder copy with your own. And if you need help, you can always use the AI writer. Simply click the AI writer button and then select one of the options. To edit images, click one, then click edit image. Here you can click replace image and then upload a file from your computer or click free images to find stock images. Just type your desired image in the search bar. Click to preview and then add to page. You can also use AI to generate a unique image. Next, let's talk about buttons. To edit a button, simply click on it and click edit button in the floating toolbar. Type in the button text field to change what the button says. In our case, I want the button to link to the menu. So, I'll type our menu and then down here, you could enter the URL you want the button to link to. But for pages on our website, we can click the link to drop down, select page, click the select page dropown, and then select the page we want from the list. In our case, menu. Then you can choose whether or not to open this in a new tab. Now let's talk about backgrounds. Notice that this section background is white. This one has some color. And this one has some color with a gradient. But section backgrounds can also be images or videos. For example, I'd like the background of this hero section at the top of the homepage to be a video of tea being poured. So first we'll need to prep the section. I'll click this image and then click delete in the toolbar. Next, we'll resize this text so it fits better on the page. And next, to actually change the section background, we'll click the section, then click edit section in the toolbar. And here you have your section settings. You have three tabs for background, color, image, and video. You can change your section color by clicking here. And you can even animate the gradient if you'd like. You can click the image tab, and we've already seen how to replace images. It's a pretty similar process. Or you can click video and then click replace video. And then here you can search the video library for free video options. For example, let's search for tea. And let's choose this video of tea being poured. To add it, click select item. And this is looking pretty nice. But the white text on the background is kind of hard to read. Fortunately, this is easy to fix. You can increase the contrast between the background and your foreground elements by dragging the overlay opacity slider until there's a nice balance. Right about there, maybe. Finally, let's quickly talk about integrations. Integrations are third party tools that you can add to your site. Things like Google Maps, booking widgets, and social feeds. If you need something specific that doesn't show up in the elements options, you can do that via integrations. To add an integration, click on the three dot menu for more and then click on integrations. Here you can scroll through and see all the pre-built thirdparty integrations. You can also add your own by using custom code. Now that you know how to customize your site's content, how do you manage the pages? To manage pages and navigation, click pages in the left sidebar. If you want to add a new page to your site, simply click the purple add page button at the bottom. From here, you can generate a page with AI, add an empty page, or add one with a template. For example, let's say we want to add a privacy policy to our site. There's actually a category for that. So, we can click that and simply grab the privacy policy template by clicking on it. With some templates, Hostinger asks for additional information to fill out placeholder elements in the template. Simply add your details and click add page. You'll immediately land on the new page and the page settings dialogue will be open. Here you can give the page a new name or even customize the URL. There are also tabs in the page settings dialogue to add a social image and set a password for the page. Whenever you're done making changes to the page settings, click save. If you look at the header of the website, you can see that the new page was automatically added to the navigation menu and it was put at the end of the list. If you want to reorganize this menu order, you can use the main navigation panel on the left side. Simply click and drag on the six dots to the left of any page name and move it to a new location. You can also make the page a subpage of another page by dragging it to the right in the navigation under another item. Finally, if you don't want this page to show up in your navigation at all, but you want it to still be accessible by the URL, you can drag it all the way to the bottom to this hidden from navigation section. Now, it doesn't show up in the menu up top, but visitors can still access this page if you link to it directly somewhere else on your site. Finally, if you ever need to update your page settings, simply click the three dots to the right of the page name in your pages management panel and then select the most relevant option. If you want to delete your page, simply click the delete button at the bottom of the menu and then click delete. Now that you know how to manage pages and the navigation menu, I'll show you how to edit your header section and add a logo. Simply click the header section at the top of the page and then click edit header. This opens the setter headings dialogue. And here you can see that there are four tabs to manage your header. Layout, elements, logo, and style. Let's start with logo. If you have a logo already, you can click the replace image button to upload your logo file from your computer. If you don't have a logo yet, you can click use AI to create a unique logo. This will open a new tab with the Hostinger AI logo maker. And here you can see at the top there is a prompt field where you add details for what you want for your logo. Next to it there is a category dropown where you can select what type of logo you want. Here it seems to have automatically selected eco-friendly or natural which makes sense for the tea shop. And there's a gear icon where you can toggle the switch to make your logo colorful. Let's add in a prompt for my logo. We'll ask for a logo for the gentle kettle, a cozy tea shop in California. Then click create to generate your logo. It'll take a minute or two to generate your logo, and when it's done, you'll be presented with four icons you can choose from. These icons are the basis of your logo, which you'll add text to. Pick the one you like, hover over it, and click edit logo. This will open the logo customizer. Here you can add your name and a slogan if you have one. And if you scroll down, you can look through the gallery of font recommendations. If there's one you like, you can click it to apply it to your logo. Or if there's a specific font you want to use, you can click the font family dropown and find it in the list. In my case, the website is already using the Jung font. So, I'm going to find that one and select it from the list to match everything else. Next, you can adjust the layout of your logo by clicking the layout tab at the top left. There you can adjust your icon scale, the space between your icon and text, and the position of your icon relative to the text. Personally, I like it when the icon is on the left and the text is on the right. When you're happy with how your logo looks, you can click the download button and then save it to your computer. To see your logo files, open the folder where you saved your logo, unzip the file, and then you've got a favicon and your logo as a PNG. When you're done making your logo, you can close out the Hostinger AI logo maker tab and return to the Hostinger website builder. To add your logo, click back into edit header logo and then replace image and upload the file from your computer. That'll add it to your media library. And from there, you can click select to insert the logo. And now you can see the logo has been swapped out. And if you want to adjust the size of the logo in the header settings under logo, change the logo width slider until your logo is the desired size. Now that we've got our logo swapped out, let's adjust the appearance of the header. Starting with the layout tab. In the layout tab, if you scroll down, you can rearrange the position of the logo, the menu, and other header elements. Personally, I like this first option, so I'll keep that. You can also adjust the spacing of all the elements in the header. Next, if you click the elements tab, you'll see three toggle switches to show and hide various elements. The first one is the logo, which we already have toggled on here. You also have a toggle switch to show social icons, and you can edit the links for your social icons by clicking the edit social icons button. You can also toggle to show a button. This button is useful as a CTA or call to action for the main thing you want visitors to do when they land on your website. For example, I know that most people who come to the Gentle Kettle website are likely looking for the T menu and not social media accounts. So, in my case, I'll toggle off the social icons. And then, what if for our button, we make that our link to our menu instead of including that as a navigation item? To do this, let's go to the left side and click pages. Move the menu down to the hidden from navigation section. Click edit header. Click elements. Click edit button. And then where it says link to page is correct. And then where it says select page, click that dropown and select menu. Next, we'll change the button text to say menu. And now when someone clicks our menu button, it'll take them to the menu page. Finally, let me show you how to update the header style. And I'll return to the homepage for this. In the header settings, if you click the style tab, you have a few options here with a drop down at top. If you click header, it shows you your style options for the header. If you click button, it shows you the style options for the button. Same thing with the social icons. For the header, you can toggle between a transparent header and non-transparent. Right now, ours is not, but here's what it would look like if we toggled it to transparent. You can also change your text font for the menu items, as well as the header text color. So far, our site looks great on desktop, but since more than half of all web traffic is on mobile devices, we need to make sure our site looks good there, too. At a minimum, you should always check mobile before you publish. Let me show you how to optimize the mobile version of your site. To switch to the mobile editor, click the phone icon in the top bar. And here we can scroll through and see how the mobile version of our site looks. Making changes on mobile does not impact the way the desktop version looks and vice versa. You can adjust anything just like you would in the main desktop editor. In fact, there's actually a shortcut for the mobile version here. You can click on any section and click autofix layout in the floating toolbar. And there it'll give you a version that's a little bit tighter for mobile. Sometimes it does goofy things though, so you may want to double check and feel free to undo if it didn't make the changes you want. And you can make changes manually by moving things around. You could adjust the spacing for each section by clicking and dragging on the up and down arrows that appear at the bottom right of any section. Finally, if there's anything that you want to appear in the desktop version, but not the mobile version, or the other way around, you can control the visibility of individual elements and sections. For example, we can click on this section here and then click on the eye icon and then toggle off mobile visibility for this section. Now, if we click into our preview and scroll down the page, that entire section is now no longer visible for our mobile version. Now that you know how to make your website look good, let's make it more functional by adding a web form. Forms allow visitors to send information to you directly through your website. One of the most common types of forms is a contact form. Let me show you how to set one up. First, let's click back to the editor at the upper left and switch to the desktop view. When Hostinger AI generated our website, it created a visit page. And that visit page includes a contact us section. Now, I don't think this is obvious enough. I want people to really be able to see the contact us link when they come to the website. So, let's go ahead and create a standalone contact page. We'll delete this section with a trash can icon. We'll go to pages, click add page, and then go to contact as a category for a template and click the contact as option that includes a web form. This creates a new page which gets automatically added to the navigation menu. And we can click save. We'll close out the pages and navigation section on the left by clicking the X. And here's our web form. Editing a form and hosting your website builder is a lot like editing anything else. Click the element and you get a toolbar. Click edit form and you get a settings menu. In this particular settings menu, you have general fields, button, style, and animation for tabs. Let's start with general settings. First, if you scroll down, you'll see the form name field. Make sure your form has a relevant name for your particular purpose. In our case, contact form works great. Next, the email field. This is the email address where all new form submissions will be sent. So, make sure that you have your desired email address entered. Next, let's check out the fields tab. On this page, you can add a new form field by clicking the drop down and then selecting an input type from the list. You can rearrange the order of the fields by clicking and dragging them with the six dots at the left. A lot like rearranging your page navigation. To edit a field, click the drop- down arrow to the right of its name. Here you can update the field label, which is commonly a question or the type of input you want to receive. Next, you can update the placeholder text. This is what shows up in the gray box before somebody types anything. And you can change the field type. In my case here, I'll change it to phone. You can also toggle whether or not the field is required for submission. And if you no longer need a field, you can simply click remove field to delete it. The bottom of your form has a button. In this case, it says submit. You can change what this button says and looks like by clicking the button tab. From here, you can make updates. And one of the most common updates people make is changing the post form submission behavior. You can make it so that it displays a message after the form is submitted or you can click link to new page to redirect someone to a new page on your site. Commonly a thank you page or a confirmation page of some sort. If you don't have a specific page, I recommend keeping it as show message. Now with this particular template, one small change I recommend making is to the first field. Here you can see it says name and then the second field says last name. This would be much better if it said first name. So, under the fields tab, we'll click name. And under the field label, add first before name. And under placeholder text, add first between your and name. Click the X to close the contact form settings and click save. Now, when somebody submits this form on your website, where does that information go? Let me show you. In the left sidebar, click more and then click form submissions. Here you can see the list of all the forms on your website and then click view to see submissions. You'll also receive the form responses by email, which is why it's important to make sure you have the right email address set in your general form settings. Depending on what you're building, you might also want a blog or online store. I'll cover both. Starting with the blog. A blog helps you share updates, build trust with your audience, and create content that can improve your search rankings. Here's how to add one. To add a blog on the left side, click more and then click blog. Then click start a blog. Right away, this creates a blog page and adds it to the header menu automatically. You can scroll through and see that it's filled with sample posts already. To add a new post, click the add new post button in the blog menu on the left side. A dialogue box will pop up saying that you can create a blog post with AI. You can also, if you prefer to write yourself, click skip. I'll write it myself. But I'll show you how to use the AI. For the first drop down, you can choose your tone of voice, formal, neutral, or casual. I like blogs that are casual, so let's select that. Next, you can select your length of content. It's set by default to 300 to 500 words, but I think aiming for around 1,000 words is great for SEO purposes. Next, we need a description of what our blog post should be about. Let's write a blog post about how to make the perfect cup of loose leaf tea. After typing in your blog post description, click create content. The AI will take a few minutes to generate your blog post. And when it's done, you can scroll through and check out how it turned out. The blog post editor works just like the rest of the website editor. The key thing to know is that blog posts are structured into two main sections. First is your post header section. This includes your title, post date, and other key information about your blog post. The next section is your main body section. This often includes an image at the top and then structured text content below. Blog posts also have a unique settings section called post settings. You can access this by clicking the post settings button in the upper toolbar. This opens the post settings dialogue box which has three main tabs. General, featured image, and categories. Let's start with general. First, you have your post title. This field will be automatically generated and populated if you use the AI post generator. Next, you have the post description, and then you have the post URL. I recommend using the same URL as your title. So, let's copy that over. And if we paste it in, you'll see that the spaces have automatically been replaced by dashes. You could also do a shorter version of your title as the post URL. For example, I could say, "How to brew the perfect cup of tea." And just leave it like that. Next, there's a field for post authors. I'll put my name. And then you can set a post date. You can even backdate this if you want. Finally, you can toggle the switch to schedule the post if you'd like. Back at the top, let's look at the featured image. This section is automatically populated if you use the AI post generator. The featured image is what shows up when you share your blog post on messages and in social media feeds. Finally, you have the categories tab. It's best practice to add categories to your blog posts, especially for when your blog post list grows over time to help keep things organized. For example, we might put this post in a category called helpful guides. When you're done making changes in post settings, click save. When you're ready to finally publish your blog post, you want to change the status from draft up in the top bar to public by simply clicking on it. If we click the preview button, we can see how this blog post will look when it's live. Going back to the editor, here's how your blog post will show up if you look at the blog page itself. And here you can see why it's important to have a highquality featured image for each blog post. It's the first preview that visitors to your site will see when looking at your blog list. Before you launch your blog completely live, I recommend deleting all these placeholder posts. To do that, click blog in your left sidebar and then click the three dots next to each placeholder blog post and click delete. Then click delete again to confirm. You can repeat this process for each post. Now, let's add an online store. If you're selling products, physical or digital, or even services, Hostinger makes it easy to set up a shop right on your site. Let me show you how it works. On the left side, click store, then click add store. This creates a store page and automatically adds it to your header menu. Click the store button on the left side again to manage your store. Let's start by setting up our first product. Click products in the manage store menu. You'll land on the product list page. To add a new product, click the purple button on the right. Then you'll be presented with a list of types of products you can add, including physical product, digital product, service, appointment, and others. Let's set up a physical product. This will open the product details form. Here you can upload images, add a title, description, pricing, product options, categories, and much more. You can fill these out manually, or there's a shortcut. Hostinger AI allows you to upload images of your product and generate all these details automatically. I'll show you how to do this. Simply upload images of your product. The AI will review your images and then fill out all these fields for you. Next, scroll through and check out everything the AI created for you. You may find you need to edit a little bit, but you should be off to a really good start. For sure, you want to make sure that you update the pricing fields. And if you want to track inventory with your site, check on the track quantity button and set how many you have in stock. You may want to add a category to your product and the AI will give you a suggestion for this. In my case here, it's flavored tea. I'll go ahead and accept that by clicking on that tag. Then you can see it automatically adds that category. And here the product shows up in the products list. Next, just like the blog, we'll want to delete placeholders. To do this quickly, click the check box at the very top left of the product list. Uncheck your product and then in the top, click the red delete button. You'll have to hit delete again to confirm. And then all those placeholder products will be removed from your list, leaving just your actual product. To see how your product looks on the actual store, close out of the store manager and then look at your main store page. Here you can see how the product will be displayed. Now that we have a product, we need a way for customers to pay for it. Let's connect a payment method. You can connect a payment method by clicking the button in the top banner if it appears for you. If it doesn't, you can click store on the left sidebar. And in the setup wizard, you may see add a payment method as an option. But if you don't, scroll down to the bottom and click settings. This will open the store manager. When it loads, you can scroll down on the left side and in the settings section, select payments. Here in the payments menu, you have several options, and it depends on where you're located, what options you have here for a US-based account. We have Stripe, PayPal, DLOC, Go, and manual payment as options. You can choose whichever payment method you want, but I recommend using Stripe. So, I'll show you how to connect that. We'll click the purple connect button. To set up Stripe, simply follow the prompts on screen and enter the information requested. You'll need to add your email address, create a password, set up two-factor authentication, save your emergency backup code, and then enter information about your business. If you don't have a business, you can just select individual for your business type. Enter your personal details like name, email address, date of birth, address, phone number, and social security number if you're in the US. Select your industry from the drop down. Add a product description or store description. Add a bank account for payouts. Then add public details for customers. In other words, how do you want your business to show up on bank statements. Provide customer support information. Then opt in to Stripe Tax to collect sales tax. On the final page, review that all your information looks correct. And if it does, click agree and submit. You'll be routed back to the payments page on the store manager. and you should see that Stripe is connected. However, if you see setup not finished, you may have to do some additional verification in your Stripe account. To do this, click manage, then click finish setup up top to go to your Stripe account and follow the prompts that they give you. Now that we've got payment set up, let's set up shipping. Click on shipping in the left side of your store manager under the settings section. The first thing you'll need to do is create a shipping zone. A zone is the region within which you're willing to ship your products. To create a zone, click create zone. Next, you'll need to name your shipping zone. This zone appears for your clients on your site. So, give it a name that makes sense. For example, if you're willing to ship in the United States, type the United States. Then, add countries by clicking the add country button and then select your countries that you're willing to ship to from the list. Make sure to click save. And then below that you'll get shipping options. This is where you set shipping rates. You can add new rates by clicking add option or edit an existing rate by simply clicking on it. Here you can adjust your rate name and the price. By default, this is a flat rate, but you can also calculate rates by clicking conditions and then calculating the rate based on order price or order weight. I recommend keeping this simple to start. You can always adjust this later. There are some other important settings you may need to know about for your store. To change the store currency, click on store details in settings on the left side and then change the currency. You can also change your measurement system between metric and imperial units. To set taxes, click on the taxes category in the settings on the left. And here you can add new tax rules. This is more complicated than I can go into in a website builder tutorial, but if you need to add taxes, here's where you do that. Now that we've built the site, let's make sure people can actually find it. That's where SEO comes in. Search engine optimization. This helps your site show up when someone searches for what you offer. To access the SEO tools, click SEO in the left sidebar. This will show you a list of the pages on your website. Let's start with the homepage. Here you can review your search result preview. This is how your page will show up on Google or other search engines. There are several key parameters that you can adjust to improve your SEO. First, your SEO title. This is this blue title at the top of the search result preview. And you can adjust this manually. Also, your metad description. This is the second part that shows up. It's this black text. The green text in the middle is your URL. Hostinger AI will provide suggestions for things you can do to improve your SEO title and metad description. You can also adjust your focus keyword for each page, which helps to really target your SEO. The easiest way to make adjustments to your SEO is to go to the top and use the AI SEO assistant. Click generate new SEO info. Next, you'll be presented with a series of questions. These questions will help the AI to optimize your site. First, you need to add a page description. This description was pulled in automatically, and it looks good enough for the homepage. So, I'll go ahead and click next step. But if you need to make adjustments to tailor it for your page, I recommend doing that. Here you'll need to select the three keywords that are the most relevant for your site. Auto selected, we have tea house and loose leaf tees in my case. And maybe we want to add peaceful space. Then we'll click next step. Next, we get to review the search engine appearance. Again, this is how your page will appear when it shows up in search engines. You can adjust the SEO title and meta description down here. And pay attention to how it looks up here. This is your first impression. Personally, I'm happy with these updates. So, I'll click finish. And there we go. This page has now been optimized. And you can tell that it's good to go because it has a green check mark on the left side. I recommend going through and doing this for every page of your website. Now, if there's a page that you don't want to show up in the search results, you can toggle the switch next to hide page from search results to make sure that people aren't discovering it accidentally. Next, let's connect your domain. That's the web address people will type to visit your site. In the top toolbar, click connect domain and then click get domain. That'll bring us to this page here, which may look familiar. We skipped over this during the onboarding flow earlier in this video. You have two options here. First, you can claim a domain. You'll get one free if you purchased a 12-month plan or higher, or you can just buy one. Alternatively, you can connect an existing domain if you already own one. Either way, the process is the same. Right here in this spar right here, search the domain you want to connect to your site. In my case, that'll be the gentlekle.com. Here, I can see that it's available. And because I purchased a 12-month plan or higher, it shows up as free for the first year. I'll go ahead and select this, then click next. Next, you'll need to register your domain. Go ahead and enter your information. Then, when you're done, click finish registration. When it's done, you'll get a confirmation saying the domain was added to your site. Now, it also says, don't forget to verify your email address. You need to do this so that you can actually keep using your domain name. Otherwise, they'll freeze it after 14 days. So, go to your inbox, find the email from Hostinger, and verify your email address. When you've done that, you'll get a confirmation saying your email is verified. And if you return to the hosting or tab with your domain added to your site confirmation and click continue, you'll be routed back to the website editor. And if you look at the top right, you'll see that your new domain name is now connected. Now, keep in mind this can take 24 to 48 hours to fully propagate. So, if it doesn't work right away, just be patient. All right, we've built it, customized it, and connected the domain. Now, let's make it official and launch your website. Doing this is simple. Just go to the top right and click go live. The first time you do this, it might take a moment. When it's done, you'll get a confirmation and you can click the button to view your site. And there we go. Your website is now live and on the internet, ready for people to find. Now, back on your website, you're still able to make changes. You can make updates as much as you want. And when you're ready to push those changes to the live site, simply click update website in the upper right. Now, our website is live, but there's one more thing that we want to do. Let's set up a professional business email. Having a professional email that matches your domain, like info@thegentkettle.com, will help your business look more credible. It makes communication with your customers easier. To do this is simple. Click the website builder drop down in the upper left, then click hosting your dashboard. From there, in the left side menu, click emails. Then, under claim your free email, click start free. You'll be prompted to select a domain for your free email. If you've just got the one domain, that's all that will show up. So, you can click confirm. Then, click start free trial. Next, let's set up your mailbox. First, we need to create an email name. The name is the part of your email address that comes before the at@ symbol. In my case, I want info@theentkettle.com. Next, create a password for your email address. Make sure it's secure. And for extra security, save it in a password manager. Then click create. To access your new inbox, click browser and then click login. That will bring you to the login page for your Hostinger mail account. I recommend saving this web page, mail.hostinger.com, so you can log in easily later. Enter your newly created password and click login. Welcome to your new inbox. Now you know how to build a complete website using the hosting or website builder. Don't forget to use the link in the description below when you sign up to get an additional 10% discount for any plan on top of any existing promotions.