1. What You Need Before Building a Website

Before opening the AI Builder, spend a few minutes planning your website. AI can generate a starting design, but it needs useful information to create pages that match your actual requirements.

Prepare the following items

• Website purpose: Decide whether you need a business website, portfolio, blog, landing page, or online store.
• Brand name: Prepare the name that should appear in your website header and content.
• Website description: Write a short explanation of your business, project, or services.
• Target audience: Identify the people you want to reach.
• Required pages: List pages such as Home, About, Services, Portfolio, Blog, and Contact.
• Images and logo: Collect your logo, product photos, portfolio images, and other relevant visuals.
• Domain name: Decide whether you will connect an existing domain or choose one later.

You also need an active eligible Hostinger hosting plan to create and publish an AI Builder project. Hostinger currently lists Web, Cloud, and Agency hosting as compatible. VPS hosting is not compatible with AI Builder.

2. Choose Between Manual and Agentic Mode

Hostinger AI Builder provides two ways to create and edit a website. The right choice depends on whether you prefer direct visual editing or want AI to make changes through conversation.

If you are creating a standard company website or portfolio, Manual mode is a sensible starting point. If you want users to log in, interact with data, or use custom tools, explore Agentic mode.

3. Create a Website in Hostinger AI Builder

Once your hosting plan and website requirements are ready, you can start the creation process from your Hostinger dashboard.

1. Log in to Hostinger.
   Open the Hostinger dashboard and sign in to your account.
2. Open the Websites section.
   Find the hosting plan where you want to create the website.
3. Click Create site.
   Choose the option to create a new website under your selected plan.
4. Select AI Builder.
   Choose Hostinger AI Builder from the available website creation options.
5. Select Manual or Agentic mode.
   Choose the editing experience that matches your project.
6. Describe your website.
   Enter your website details, requirements, and design preferences in the prompt field.
7. Choose a domain option.
   Connect an available domain or use a temporary domain if you want to decide later.
8. Review the generated result.
   Wait for the website to be generated and inspect the pages, content, and design.

Hostinger also provides suggested prompts for common projects, such as a business website or an appointment website. If you are unsure what to write, these suggestions can help you get started.

4. Write an Effective Prompt for Hostinger AI

The quality of your first prompt affects the usefulness of the generated website. A short, vague description may produce a generic result, while a more specific prompt gives the AI better direction.

What should your prompt include?

• Business or website name.
• Type of website you want to create.
• Target audience and location, if relevant.
• Main products, services, or purpose.
• Pages and sections you need.
• Preferred colors and design style.
• Important actions visitors should take.

You can replace the example company name, services, colors, and pages with your own information. Make sure the final prompt describes a real project rather than asking AI to invent business details.

Improve your prompt with follow-up instructions

If the first result is not exactly what you want, give more specific instructions. For example:

• "Make the homepage more minimal and reduce unnecessary sections."
• "Move the main contact button to the top navigation."
• "Use a more professional layout for the services section."
• "Add a separate page explaining our three main services."
• "Use shorter paragraphs and clearer headings."

5. Add Reference Files, Website Links, or Images

You do not have to rely only on written instructions. Hostinger AI Builder also provides a plus (+) menu in the prompt field that lets you provide reference material to guide the generated website.

Available reference options

• Attach files: Add images, PDFs, or HTML files containing design references or business information.
• Add website link: Provide an existing website as a reference for the new design.
• Add website image example: Upload an image of a website layout that you want the AI to use as inspiration.

Hostinger currently documents support for up to 10 attached files, with a maximum size of 20 MB per file.

When should you use reference files?

• When you already have a logo and brand colors.
• When you have a PDF containing your business details.
• When you want a particular layout or visual style.
• When you have an existing website that can serve as design inspiration.
• When you have an HTML reference that helps explain the structure you want.

Use reference material that you own or are authorized to use. A reference website should guide the design, not be copied in a way that infringes another site's content, branding, or intellectual property.

6. Customize Your Website in Manual Mode

If you selected Manual mode, you can use the visual editor to refine the generated website. This is where you replace placeholder information, adjust the design, and make the pages match your brand.

Edit text and headings

Review the homepage title, introduction, service descriptions, About section, and contact details. Replace generic AI-generated wording with accurate information about your business.

Change images

Replace placeholder images with relevant photos, product images, project screenshots, or brand visuals. Use high-quality images that support the content rather than adding decorative images everywhere.

Adjust colors and fonts

Choose a consistent color palette and typography. Use a limited set of colors for headings, backgrounds, buttons, and accents. Make sure text remains readable against its background.

Arrange website sections

Review the order of sections on the homepage. A typical business homepage may include:

1. Hero section with a clear headline and call to action.
2. Short introduction about the business.
3. Products or services.
4. Why choose the business.
5. Projects, portfolio, or testimonials.
6. Contact information and final call to action.

Set up navigation

Make sure visitors can find the main pages easily. Keep the navigation menu simple and use clear page names. Check that every menu item and button opens the correct destination.

7. Build a Website with Agentic Mode

Agentic mode is designed for users who want to build or modify a website through AI prompts instead of manually editing each element. It is particularly useful for interactive projects and custom web applications.

Step 1: Start a new Agentic project

Open Hostinger dashboard → Websites, click Create site, select AI Builder, and choose Agentic mode.

Step 2: Describe the application

Explain the purpose of the application and the features you need. For example, you might want a project dashboard with user login, task tracking, and progress summaries.

Step 3: Provide reference material

You can use the plus (+) menu to attach images, PDFs, or HTML files, add an existing website link, or provide a screenshot of a design you want to use as inspiration.

Step 4: Choose a domain

Select a custom domain or choose a temporary domain so you can continue building before deciding on your final domain name.

Step 5: Review the application preview

Agentic mode provides a prompt area and a live preview. Use the preview to interact with the application and check whether its visible elements behave as expected.

Step 6: Refine the application with prompts

Ask the AI to add features, improve the layout, or change existing functionality. Be specific about what should happen when a user clicks a button, submits a form, or opens a page.

Step 7: Test before publishing

Test navigation, forms, authentication, data handling, and other important functions. Do not assume that a feature works correctly just because the AI has generated its interface.

8. Add and Organize Website Pages

A professional website should make it easy for visitors to understand what you offer and how to contact you. After generating the first version, check whether the website includes all the pages your audience needs.

You do not need every page for every project. A one-page portfolio may only need an introduction, work samples, and contact information. An online store will need product and store-related pages.

9. Make Your Website Mobile-Friendly

Many visitors will open your website on a smartphone. A design that looks good on a desktop may become difficult to use on a smaller screen if text, images, buttons, or navigation are not checked.

Mobile optimization checklist

• Check the homepage on a mobile screen.
• Make sure headings fit without awkward line breaks.
• Use readable font sizes and comfortable line spacing.
• Check that buttons are easy to tap.
• Ensure images fit the available screen width.
• Test navigation menus and dropdowns.
• Remove unnecessary large sections.
• Check contact forms and other interactive elements.

Test the actual published website on at least one smartphone, not only the editor preview. This helps you catch layout issues that may not be obvious while building.

10. Connect a Custom Domain to Your Website

A custom domain gives your website a professional address, such as example.com, instead of relying on a temporary project address.

Option 1: Use a domain registered with Hostinger

If your domain is already managed by Hostinger, select it when creating or configuring your website. Follow the dashboard instructions to assign it to the AI Builder project.

Option 2: Connect a domain from another registrar

If your domain is registered elsewhere, you need to point it to Hostinger using the DNS settings provided for your website. Depending on your setup, this may involve changing nameservers or updating specific DNS records.

1. Open your Hostinger dashboard and locate the website's domain settings.
2. Find the nameserver or DNS records required for the project.
3. Log in to the account where your domain is registered.
4. Update the DNS settings using the exact values Hostinger provides.
5. Save the changes and allow DNS propagation to complete.
6. Return to Hostinger and verify that the domain is connected.

DNS changes can take up to 24 hours to propagate globally. The actual time varies depending on DNS caching and the registrar's configuration.

11. Configure Basic SEO Settings

Before publishing, configure your website's basic SEO information. Search engines need useful page content and clear technical signals to understand what your website offers.

Set page titles

Write a unique title for each important page. Make it descriptive and relevant to the page's actual topic.

Write meta descriptions

Create a concise description explaining what visitors can find on the page. Avoid repeating the same description across every page.

Use descriptive URLs

Choose short, readable URLs that reflect the page topic. Avoid unnecessary characters and random strings.

Add image alt text

Describe meaningful images for visitors who use assistive technology. Do not stuff keywords into alt text or add unnecessary descriptions to purely decorative images.

Use clear headings

Organize each page with a clear main heading and logical subheadings. This improves readability and helps visitors understand the content.

Connect analytics and search tools

Where supported, connect services such as Google Analytics and Google Search Console to monitor traffic and search performance. Verify ownership and follow the setup instructions for each service.

12. Publish Your Website with Hostinger AI

Once your website is ready, you can publish it so visitors can access it online. The exact editor screen differs between Manual and Agentic mode, but both provide a publishing workflow.

Before clicking Publish

• Replace all placeholder text and images.
• Check your business name and contact information.
• Test navigation menus and buttons.
• Submit and test all important forms.
• Check the website on mobile and desktop.
• Confirm the correct domain is assigned.
• Review page titles and meta descriptions.
• Confirm HTTPS is active on your custom domain.

Publish in Agentic mode

1. Open the Hostinger dashboard and go to Websites.
2. Find your AI Builder website and click Edit site.
3. Open the project in the Agentic editor.
4. Wait until the website generation process is complete.
5. Click Publish in the top-right corner.
6. Wait for publishing to finish, then open the live URL.

Publish in Manual mode

Open your website in the Manual editor, review the design and content, and use the Publish option provided in the editor. Follow any prompts shown for domain assignment or publishing confirmation. If you edit the website after it is live, publish the changes again to update the live version.

After publishing, open the website in a private or incognito browser window. This helps you check the public version rather than relying only on the editor preview.

13. Website Launch Checklist

Use this checklist before sharing your new website with customers, visitors, or search engines.

14. Common Mistakes to Avoid

1. Writing a vague AI prompt

A prompt such as "Make me a website" does not explain the audience, pages, services, or design requirements. Give the AI enough information to produce a useful starting point.

2. Publishing placeholder content

AI may generate sample business details, testimonials, images, and descriptions. Replace anything that is not accurate. Never publish fabricated reviews or claims about your company.

3. Ignoring mobile layouts

A website can look good on a desktop and still be difficult to use on a phone. Check headings, images, buttons, forms, and menus on smaller screens.

4. Forgetting domain and email DNS records

Changing nameservers or DNS records without checking existing settings can interrupt email or other services. Record the existing DNS configuration before making changes.

5. Assuming AI-generated features are fully tested

Generated forms, links, logins, dashboards, and other features must be tested. For Agentic projects, check data handling and security before collecting real user information.

6. Ignoring subscription requirements

Some features require separate subscriptions or AI credits. Check hosting compatibility, Agentic mode requirements, and ecommerce costs before committing to a particular project.

7. Forgetting to publish after editing

Changes made inside the editor may not appear on the public website until you publish them. Always check the live version after updating the site.

15. Frequently Asked Questions

Editorial note: This tutorial is based on Hostinger's published setup and support documentation. Dashboard labels and feature availability may change. Check your current Hostinger account and plan details when following the steps.