Building a website used to feel like a project you needed to hire someone for. Not any more.
I have been using Hostinger Website Builder, and in this guide, I am going to walk you through the entire process, step by step, from the moment you log in to the moment your site goes live.
Let’s get into it.
What Is Hostinger Website Builder?
Hostinger Website Builder is an AI-powered, drag-and-drop website builder built directly into your Hostinger account.
You do not need to install anything, you do not need to know how to code, and you do not need a design background. You describe what you want, the AI builds a full website for you, and then you customise it to match your brand.
It is one of the fastest ways to go from nothing to a fully live, professional-looking website.
Step 1: Log In and Navigate to the Builder
When you log into your Hostinger account, you land on the hPanel. This is Hostinger’s main dashboard, and it is where you manage everything, including your websites, domains, emails, and billing.
On the left sidebar, you will see a list of navigation options. Click on Websites. A small dropdown will appear beneath it with two options: Websites list and Migrations. Click Websites list.
You are now on the Websites list page, which shows all the websites connected to your account.
In the top right corner of the page, you will see a purple + Add website button. Click it.
A small dropdown menu appears with four options:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- And Custom PHP/HTML website
You want to click Hostinger Website Builder, which is described as the “AI-powered drag-and-drop website builder.”
Step 2: Describe Your Website to the AI
After selecting Hostinger Website Builder, you are taken to a setup screen with the heading “Let AI create your online presence.”
This is where you tell the AI what kind of website you want to build.
You will see a large text box with the placeholder text “Describe your website or business.” This is your prompt box, and what you type here determines everything the AI generates for you. The more detail you give it, the better your result will be.
Below the text box, you will also notice a row of quick-start suggestion chips. These include options like “Create a business website,” “Create an online store,” “Design a portfolio,” “Launch an appointments website,” “Start a blog,” “Launch a restaurant website,” and “Create a one pager website.”
Clicking any of these fills in a starter prompt that you can then edit and expand.
At the very bottom of the screen, you will see two additional links: Pre-made templates and Link in bio website.
If you prefer to skip the AI and browse existing designs, click Pre-made templates.
If you just need a simple single-page site for your social media profiles, the Link in bio option is worth checking out.
For most people building a real website, though, the AI prompt box is the right place to start.
How to Write a Good AI Prompt
This is the most important part of the whole process. Think of the AI prompt as a brief you are giving to a designer. The more clearly you communicate your vision, the closer the result will be to what you actually want.
Here is the prompt I used for this guide. I was building a website for a creative agency:
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimised for basic SEO.”
Notice how specific that is. It covers the industry, tone, layout style, required pages, homepage structure, and content goals. That level of detail gives the AI a solid foundation to work from.
Once you have typed your description, you will notice an “Improve description” button appears in the top right corner of the text box.
I recommend clicking this before you submit. The AI will expand and refine your prompt, often catching things you did not think to include.
When you are ready, click the purple arrow button (the send icon) at the bottom right corner of the text box to submit your prompt and start generation.
Step 3: Wait for the AI to Build Your Site
After you submit your prompt, Hostinger’s AI gets to work immediately. You will see a full-screen loading animation on a deep purple background with the message “Looking for matching pictures…” and a progress bar showing how far along the process is.
This stage typically takes between 30 and 60 seconds. During this time, the AI is doing quite a lot: generating your page layouts, writing your website copy, selecting matching images from a stock library, building your navigation, and structuring your entire site based on your prompt.
Do not close the tab while it loads. Just wait and let it run.
Step 4: Review What the AI Built
When the AI finishes, you are shown a preview of your new website. This is the result screen, and it is genuinely exciting to see what has been generated.
The left side of the screen shows a live preview of your generated website. The right side shows a panel called “Your idea summary,” which displays a summary of the prompt you submitted and an “Edit idea” button if you want to go back and regenerate with a different or updated prompt.
In my case, the AI named the site “BoldCraft Studio” and generated a homepage with the headline “Crafting Bold Brands That Shine,” a supporting description, and two call-to-action buttons: “Start Now” and “Get Quote.”
The navigation bar included all six pages I asked for: Home, About, Services, Portfolio, Blog, and Contact.
At the top left of the preview screen, you will also see two buttons: Previous versions, which lets you cycle back through alternative designs the AI considered, and Rate site, which lets you give feedback on the result.
At the top right of the preview, you will see desktop and mobile toggle icons. Use these to check how your site looks on a phone before you proceed. It is a good habit to do this early.
If you are happy with the overall direction, click the purple Continue button on the right panel. This takes you into the full editor where the real customisation happens.
If you are not happy with the result, click Edit idea, revise your prompt, and regenerate. You can do this as many times as you need.
Step 5: Get Familiar with the Editor
The editor is where you will spend most of your time. When you first land here, take a moment to understand the layout before you start clicking around.
The editor has two main areas.
- The large central area is your website canvas, where you can see and interact with your site in real time.
- The narrow vertical sidebar on the left is your control panel, and it contains everything you need.
Here is what each item in the sidebar does:
- Setup gives you access to your site’s basic settings, connected domain, and plan information.
- Elements opens the drag-and-drop panel where you can add new content blocks to any page. I will cover this in more detail shortly.
- Pages shows all your pages in one place. You can switch between pages, add new ones, rename existing ones, change their order, or delete any you do not need.
- Styles controls your site’s global design. This is where you set your fonts, colour palette, and button styles. Any changes you make here apply across your entire site, so this is the right place to make sweeping design decisions rather than changing things one section at a time.
- AI tools gives you access to Hostinger’s writing and content AI. You can use it to rewrite sections of copy, generate new text, and more.
- Blog is where you create and manage blog posts if your site has a blog.
- Store is where you set up your online store if you are selling products. Note that eCommerce features require a higher-tier plan.
- SEO opens the built-in SEO manager where you can set meta titles, descriptions, and other search optimisation details for each page.
- More expands into a second menu with additional tools including Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, and Help and Resources.
At the top of the editor, you will also find the main toolbar. From left to right, it contains: a desktop and mobile preview toggle, undo and redo buttons, a Connect domain button, a Preview button, and the green Go live button.
Step 6: Edit Your Content
Now comes the part where you make the site your own. Click anywhere on your website canvas to start editing.
When you hover over any section of the page, you will see a blue label appear at the top left of that section showing what type of element it is, for example “Section” or “Header.” At the same time, a small floating toolbar appears above the section with your editing options.
The section toolbar gives you the following controls from left to right: Edit section opens the section settings panel, where you can change the background image or colour, adjust padding, and modify layout options.
Next to it is Generate image, which opens the AI image generator.
After that, you have a Duplicate icon, a Hide/Show toggle, a Delete icon, Move up and Move down arrows to reorder sections, and a three-dot More options menu.
To edit any text on the page, simply click directly on it and start typing. The text element will become editable, and you will see formatting controls appear. You can change the font size, weight, alignment, and colour directly from these controls.
To change an image, click on it. You will see options to replace it with a photo from your own files, browse Hostinger’s stock image library, or generate a new one with AI.
Work through your homepage first, then use the Pages panel to switch to each additional page and edit those in turn.
Step 7: Use the AI Image Generator
One feature worth pausing on is the AI image generator, because it is genuinely useful if you do not have professional photos of your own.
To access it, hover over any section on your page and click Generate image in the floating section toolbar. A panel will slide in from the right side of the screen.
Inside the panel, you will see an “Image description” text box. Type a description of the image you want to create.
The more specific and visual your description is, the better the output. The panel shows a character limit of 3,000 and a real-time quality indicator that tells you whether your description is strong enough.
For example, when I typed “A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office,” the panel showed “Great description!” with fully filled quality bars.
When you are happy with your description, click the Create images button. The AI will generate a set of images for you to choose from.
One thing to be aware of: the AI image generator requires the Business plan or higher. If you are on the Premium plan, you will see an upgrade prompt at the bottom of the panel.
Step 8: Add New Elements to Any Page
If you want to add a content block that is not already on your page, click Elements in the left sidebar. This opens the “Add elements” panel.
You will see a grid of all available elements, including Text, Button, Affiliate link, Add to bag, Image, Gallery, Video, Shape, Card, Map, Instagram feed, and Contact form. To add any of these to your page, drag it from the panel and drop it onto your canvas wherever you want it to appear.
Once placed, click on the element to access its individual settings and styling options.
This drag-and-drop approach means you are never locked into the layout the AI generated. You can add, remove, and rearrange elements freely.
Step 9: Manage Your Pages
Click Pages in the left sidebar to see all your pages listed in one place. You can click any page name to jump to editing that page.
To add a new page, use the plus button. To rearrange the order pages appear in your navigation, drag them up or down in the list.
If you have pages the AI generated that you do not need, you can delete them from here. Similarly, if you need a page the AI did not include, such as a Testimonials page or a Pricing page, you can add it here and then build it out using the Elements panel.
Step 10: Set Up Your SEO
Before you publish, you need to set up your SEO. This is a step many people skip, and it is a mistake.
Taking 15 minutes to fill in your SEO settings properly can make a real difference to whether people find your site through Google.
Click SEO in the left sidebar to open the SEO panel, titled “Let’s be found on Google (SEO).”
The panel is split into two sections. On the left, you will see a list of all your pages. On the right, you will see the Website overview, which shows your business name and website language. Click Edit to update these if they are not correct.
Below the website information, you will see a section called “Some pages require your attention.”
Each page that needs work is marked with an orange warning icon. Click on any page in the left panel to open its individual SEO settings, where you can write a meta title and meta description for that specific page.
Work through every page on the list. A good meta title is clear, contains your main keyword, and is under 60 characters. A good meta description summarises what the page is about and is under 160 characters. These are the snippets that appear in Google search results, so it is worth spending a few minutes on each one.
Step 11: Connect Your Domain
If you have not yet connected a custom domain to your site, now is the time. Click the Connect domain button in the top toolbar of the editor.
You have two options. If you already own a domain, you can connect it by updating your DNS settings to point to Hostinger’s servers. If you do not yet own a domain, you can purchase one directly from Hostinger on this same screen.
Until you connect a domain, your site will be accessible via a temporary Hostinger subdomain, such as yoursite.builder-preview.com. That is fine for testing purposes, but you want a proper domain before you start sharing your site publicly.
Step 12: Preview Your Site and Go Live
You are almost there. Before hitting publish, click the Preview button in the top right toolbar.
This opens a full-screen preview of exactly how your site will look to visitors. Toggle between the desktop and mobile views using the icons at the top of the preview screen and check that everything looks right on both.
Pay particular attention to how your homepage hero section looks on mobile, how your navigation collapses, and whether any images are being cropped in a way you did not intend.
When you are satisfied with everything, go back to the editor and click the green Go live button in the top right corner. Your site is now published and live on the internet.
Step 13: Explore Integrations
Once your site is live, it is worth exploring the integrations available to you. Go to More > Integrations in the left sidebar.
The Integrations panel lets you connect your website to external tools and services. The current options include Shippo for generating shipping labels and managing order fulfilment, Printful for creating and selling print-on-demand custom products, Hostinger Reach for email marketing and sending newsletters to your subscribers, Google Ads for running paid advertising campaigns, and Custom code if you want to add your own HTML, CSS, or JavaScript to extend your site’s functionality.
To activate any integration, click Get started next to it, follow the connection steps, and then update your site by republishing it.
Tips to Get the Most Out of Hostinger Website Builder
Be generous with your AI prompt. A two-sentence prompt will give you a generic result. A detailed, specific prompt that covers your industry, audience, design preferences, page structure, and tone of voice will give you something much closer to what you actually want. Spend five minutes writing a proper brief and it will save you hours of editing afterward.
Use the Improve description button every time. It is easy to miss, but it is genuinely helpful. The AI often picks up on things you have left vague and turns them into concrete design and content instructions.
Edit your copy carefully. The AI writes decent placeholder copy, but it does not know your business the way you do. Go through every page and rewrite the text to reflect your actual services, your real value, and your genuine voice.
Check the mobile view before you publish. Hostinger automatically makes your site responsive, but images and spacing sometimes need minor adjustments on smaller screens. Always preview on mobile before going live.
Fill in SEO for every single page. Not just the homepage. Every page on your site deserves a proper meta title and description. It takes a few minutes per page and it is one of the most straightforward things you can do to improve your visibility in search results.
Use the Media library to stay organised. Under More > Media library, you can upload and manage all your images in one central place. This makes it much easier to reuse images across multiple pages and keep your site consistent.
Come back and improve over time. Publishing your site is not the end of the process, it is the beginning. Come back regularly to update your content, add new blog posts, and refine your pages as your business evolves.
Hostinger Website Builder removes almost every barrier that used to stand between you and a professional website. The AI does the heavy lifting on design and copy, the editor makes customisation straightforward, and the built-in SEO and integrations tools mean you have everything you need in one place.
Follow the steps in this guide and you can realistically have a live, polished website up and running in under an hour.
