{"id":8790,"date":"2026-03-17T02:49:56","date_gmt":"2026-03-17T02:49:56","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=8790"},"modified":"2026-05-08T13:03:28","modified_gmt":"2026-05-08T13:03:28","slug":"how-to-use-hostinger-ai-website-builder-for-wordpress","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/how-to-use-hostinger-ai-website-builder-for-wordpress\/","title":{"rendered":"How to Use Hostinger AI Website Builder for WordPress"},"content":{"rendered":"

With the Hostinger AI Website Builder for WordPress, you can launch a fully functional, customized website in minutes. This tool uses a conversational interface to understand your brand and automatically configures your theme, colors, and content.<\/span><\/p>

Step 1 — Choose the AI Generation Flow<\/b><\/h2>

When adding a new WordPress website to your hosting plan, the AI Website Builder launches automatically. You’ll be taken directly to the setup where you can describe your site idea and choose your editor.<\/p>

Step 2 — Provide Your Website Idea<\/b><\/h2>

Once the AI flow is active, you need to define the purpose of your site:<\/span><\/p>

    \n
  1. Describe your idea:<\/b> Enter a description of what you want your website to be (e.g., “A bakery website selling different types of bread”).<\/span><\/li>\n
  2. Enhance with AI (Optional):<\/b> Click the <\/span>Enhance with AI<\/b> button to automatically expand your prompt into a more detailed description for higher-quality results.<\/span><\/li>\n
  3. Choose your Editor:<\/b> Select <\/span>Gutenberg<\/b> or <\/span>Elementor<\/b> as your preferred page builder from the dropdown menu.<\/span><\/li>\n
  4. Set Language and Location:<\/strong> Select your Site language<\/strong> — all WordPress-supported languages are available for the generated site. Store location<\/strong> (only needed for online stores) is now automatically detected from your billing country, though you can still change it manually.<\/li>\n
  5. Submit:<\/b> Click the arrow icon to proceed.<\/span><\/li>\n<\/ol>

    \"Website<\/p>

    Step 3 — Chat with Kodee (AI Assistant)<\/b><\/h2>

    A conversational interface will open to collect your brand requirements.<\/span><\/p>

      \n
    1. Confirm Brand Name:<\/b> Kodee will ask for your brand name. Type it in the chat box and send.<\/span><\/li>\n
    2. Wait for Generation:<\/b> The AI will begin enabling plugins and generating your site structure, colors, and content. You can track the progress on the “Give us a minute” screen.<\/span><\/li>\n<\/ol>

      \"Kodee<\/p>

      Store location:<\/b> If you are building an online store, the WooCommerce store location is automatically detected from your billing country — no manual selection required.<\/div>
      <\/div>
      \n

      Step 3b — Review Page Structure (optional)<\/strong><\/h2>\n

      Before generation begins, Kodee presents the AI-suggested page list for your review.<\/p>\n

      You can:<\/p>\n

        \n
      • Add<\/strong> pages you need<\/li>\n
      • Remove<\/strong> pages you don’t want<\/li>\n
      • Rename<\/strong> any page<\/li>\n
      • Reorder<\/strong> pages to match your preferred structure<\/li>\n<\/ul>\n

        Once satisfied with the page list, confirm to proceed with generation. This step reduces the need to restructure the site after it is built.<\/p>\n<\/div>

        Step 4 — Customize Your Style<\/b><\/h2>

        Once the initial site preview loads, you can fine-tune your visual identity:<\/span><\/p>

          \n
        • Color Palettes:<\/b> Choose from several AI-generated color schemes. Selecting a palette applies it globally across your theme to ensure visual uniformity.<\/span><\/li>\n
        • Custom Colors:<\/b> If you have specific brand colors, check the <\/span>Your own color palette<\/b> box to use a hex code color picker for light, dark, and accent colors.<\/span><\/li>\n<\/ul>

          \"Baking<\/p>

            \n
          • Logo Upload:<\/b> Switch to the <\/span>Logo<\/b> tab in the customization panel to upload your brand logo (PNG, JPG, max 5MB). This is automatically injected into your WordPress site title and header.<\/span><\/li>\n<\/ul>

            \"Baking<\/p>

              \n
            • Font Pairing:<\/strong> The AI suggests font combinations tailored to your website type. You can also select your own fonts manually during the building process.<\/li>\n<\/ul>

              Step 5 — Preview and Finish<\/b><\/h2>

              Before finalizing, ensure the site looks great on all screens:<\/p>

                \n
              1. Viewport Toggle:<\/strong> Use the viewport icons at the top-left of the preview window to switch between Desktop<\/strong>, Tablet<\/strong>, and Mobile<\/strong> views — so you can check responsiveness across all three breakpoints.
                \n\"Baking<\/span><\/li>\n
              2. Zoom In\/Out:<\/strong> Use the zoom controls in the preview to get a closer look at specific sections or a full-page overview of how your site looks.<\/li>\n
              3. Finalize:<\/strong> If you are happy with the preview, click Finish customization<\/strong>.<\/li>\n
              4. Setup WordPress:<\/strong> Click Setup in WP admin<\/strong> to be redirected to your WordPress dashboard, where your new site is ready for management.<\/li>\n<\/ol>
                Note:<\/strong> If you want to try a different approach, you can click Customize again<\/strong> to restart the AI generation process with new parameters. Existing content will be overwritten if you proceed with a new generation.<\/div>
                <\/div>
                The AI Website Builder for WordPress is actively updated. Here’s what’s been added since launch:<\/div>
                \n
                  \n
                • AI-powered font pairing<\/strong> — the AI suggests font combinations tailored to your site type; you can also pick fonts manually.<\/li>\n
                • Zoom in preview<\/strong> — zoom in and out of the site preview for a detailed or full-page view.<\/li>\n
                • Tablet preview<\/strong> — tablet size is now available alongside desktop and mobile in the preview.<\/li>\n
                • New Elementor sections<\/strong> — new pre-built sections available: hero for online stores (×6), hero for portfolio (×5), services (×2), projects (×1), contact us (×1), product categories (×3), and newsletter subscription (×1).<\/li>\n<\/ul>\n

                  Improvements<\/strong><\/p>\n

                    \n
                  • Mobile-optimized builder UI<\/strong> — the builder works smoothly from a mobile device.<\/li>\n
                  • Auto-detection of store location<\/strong> — your WooCommerce store location is automatically detected from your billing country, reducing setup friction.<\/li>\n
                  • Expanded language support<\/strong> — all WordPress-supported languages are now available for generated sites, not just those supported in hPanel.<\/li>\n
                  • Localized date\/time format<\/strong> — generated sites automatically apply the correct date and time format based on your selected locale.<\/li>\n
                  • Smarter image & video selection<\/strong> — improved media selection logic with better contextual awareness for more relevant visuals per site.<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                    Create a new WordPress website with Hostinger AI-powered tools<\/p>\n","protected":false},"author":594,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[179],"tags":[],"class_list":["post-8790","post","type-post","status-publish","format-standard","hentry","category-wordpress-management"],"hreflangs":[],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/594"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=8790"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8790\/revisions"}],"predecessor-version":[{"id":10379,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8790\/revisions\/10379"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=8790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=8790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=8790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}