Раніше створення вебсайту здавалося проєктом, для якого потрібно наймати фахівця. Тепер це не так.
Я користуюся Hostinger Website Builder, і в цьому посібнику проведу вас крок за кроком від моменту входу до облікового запису до моменту публікації сайту.
Почнемо.
Що таке Hostinger Website Builder?
Hostinger Website Builder — це AI-ускорювач із перетягуванням елементів, вбудований безпосередньо у ваш акаунт Hostinger.
Вам не потрібно нічого встановлювати, знати кодування чи мати дизайнерські навички. Ви описуєте, що хочете, штучний інтелект створює сайт, а потім ви налаштовуєте його під свій бренд.
Це один із найшвидших способів отримати повноцінний професійний сайт з нуля.
Крок 1: Увійдіть і перейдіть до конструктора
Після входу в акаунт Hostinger ви потрапляєте в hPanel — головну панель керування, де ви управляєте сайтами, доменами, поштою та платежами.
У лівому боковому меню знайдіть пункт Websites. Під ним відкривається список з двома опціями: Websites list і Migrations. Виберіть Websites list.
Ви на сторінці списку сайтів — тут відображаються всі прив’язані до акаунту сайти.
У правому верхньому куті натисніть пурпурову кнопку + Add website.
З’явиться маленьке меню з чотирма варіантами:
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
Натисніть Hostinger Website Builder — AI-конструктор із перетягуванням елементів.
Крок 2: Опишіть ваш сайт AI
Після вибору Hostinger Website Builder вас перенаправить на екран налаштувань із заголовком «Let AI create your online presence». Тут ви кажете штучному інтелекту, який сайт хочете створити.
Велике текстове поле з підказкою «Describe your website or business» — це ваш промпт. Чим детальніше ви опишете, тим кращий результат отримаєте.
Під полем є кнопки швидкого старту: «Create a business website», «Create an online store», «Design a portfolio», «Launch an appointments website», «Start a blog», «Launch a restaurant website», «Create a one pager website». Клікніть будь-яку, щоб отримати стартовий текст і відредагувати його.
Внизу екрана є ще два посилання: Pre-made templates і Link in bio website. Якщо хочете обійти AI і вибрати готовий дизайн, натисніть Pre-made templates.
Якщо потрібна проста односторінка для соцмереж, перевірте «Link in bio». Але для серйозного сайту краще використовувати AI-промпт.
Як написати хороший AI-промпт
Промпт — це ваш бриф для дизайнера. Чітко сформулюйте, що хочете.
Ось промпт, який я використав для цього посібника (креативне агентство):
«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 optimized for basic SEO.»
Промпт охоплює галузь, стиль, структуру сторінок і цілі контенту — це дає AI чітке завдання.
Коли введете опис, натисніть кнопку Improve description угорі праворуч у текстовому полі. AI доповнить і вдосконалить ваш промпт.
Готові? Натисніть пурпурну кнопку зі стрілкою внизу праворуч, щоб розпочати генерацію.
Крок 3: Дочекайтеся, поки AI створить ваш сайт
Після відправки промпта AI починає роботу. Ви побачите анімацію на фіолетовому фоні з повідомленням «Looking for matching pictures…» і progress bar.
Це займає близько 30–60 секунд: AI генерує макети, копію, підбирає зображення зі стоку, структурує сайт.
Не закривайте вкладку, чекайте завершення.
Крок 4: Оцініть результат AI
Коли AI завершить, ви побачите попередній перегляд сайту.
Зліва — live preview, справа — панель «Your idea summary» із вашим промптом і кнопкою Edit idea для регенерації.
У моєму прикладі AI назвав сайт «BoldCraft Studio» з заголовком «Crafting Bold Brands That Shine», описом і кнопками «Start Now» та «Get Quote».
Навігація включала шість сторінок: Home, About, Services, Portfolio, Blog, Contact.
Угорі ліворуч є Previous versions (альтернативні дизайни) і Rate site (зворотний зв’язок).
Вгорі праворуч — іконки desktop і mobile для перевірки адаптивності.
Якщо результат влаштовує, натисніть пурпурну кнопку Continue, щоб перейти в редактор. Якщо ні, натисніть Edit idea і оновіть промпт.
Крок 5: Ознайомтеся з редактором
Редактор — головне місце редагування. Відразу зверніть увагу на інтерфейс.
Редактор має дві зони:
- Велика центральна — canvas сайту з live-прев’ю.
- Вертикальна бокова панель зліва — панель керування.
Ось пункти в боковій панелі:
- Setup — базові налаштування сайту, домен, план.
- Elements — перетягування блоків контенту на сторінку.
- Pages — список сторінок: перемикання, додавання, перейменування, видалення.
- Styles — глобальний дизайн: шрифти, кольори, стиль кнопок. Зміни застосовуються на весь сайт.
- AI tools — інструменти AI для написання та редагування тексту.
- Blog — створення й управління блогом (якщо є).
- Store — налаштування онлайн-магазину (потрібен Business-план).
- SEO — вбудований менеджер SEO: мета-тайтли, описи для кожної сторінки.
- More — додаткові інструменти: Appointments, General settings, Integrations, Form submissions, Analytics, Media library, Multi-language support, Manage backups, Export content to WordPress, Help and Resources.
У верхньому меню редактора зліва направо: перемикач desktop/mobile preview, undo/redo, Connect domain, Preview і зелена кнопка Go live.
Крок 6: Редагуйте вміст
Тепер настав час зробити сайт унікальним. Клікніть будь-де на canvas, щоб почати редагування.
При наведенні на секцію з’являється синя мітка («Section», «Header» тощо) і плаваюча панель інструментів.
Панель секції містить (зліва направо): Edit section (налаштування фону, відступів тощо), Generate image (AI-генератор зображень), дублікат, приховати/показати, видалити, перемістити вгору/вниз, меню «ще».
Щоб редагувати текст, клікніть на нього і почніть друкувати. З’являться панелі форматування шрифту, розміру, кольору тощо.
Щоб замінити зображення, клікніть на нього й оберіть завантаження з файлів, стоку Hostinger або AI-генерацію.
Спочатку опрацюйте головну сторінку, потім перемикайтеся через панель Pages і редагуйте інші.
Крок 7: Використовуйте AI-генератор зображень
AI-генератор зображень корисний, якщо у вас немає власних фото.
Наведіть курсор на секцію й натисніть Generate image. З’явиться панель з описом зображення.
Введіть детальний опис (до 3000 символів). Панель показує індикатор якості опису.
Наприклад: «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» — якість «Great description!»
Натисніть Create images. AI згенерує набір зображень.
Увага: генератор доступний лише на Business-плані. На Premium з’явиться пропозиція оновлення.
Крок 8: Додайте нові елементи на сторінку
Щоб додати блок, натисніть Elements у лівій панелі. Відкриється панель «Add elements».
Вибачте елемент (Text, Button, Image, Gallery, Video, Shape, Card, Map, Instagram feed, Contact form тощо) і перетягніть на canvas.
Після додавання натисніть на елемент, щоб налаштувати його стиль і параметри.
Крок 9: Керуйте сторінками
Натисніть Pages, щоб побачити всі сторінки. Клікніть ім’я сторінки для редагування.
Щоб додати сторінку, натисніть плюс; щоб змінити порядок у навігації, перетягніть сторінку в списку.
Якщо не потрібна сторінка — видаліть, якщо потрібна нова (Testimonials, Pricing тощо) — додайте й збудуйте через Elements.
Крок 10: Налаштуйте SEO
Не пропускайте SEO. 15 хвилин на SEO можуть істотно вплинути на пошуковий трафік.
Натисніть SEO у лівій панелі — відкриється «Let’s be found on Google (SEO)».
Зліва — список сторінок, справа — Website overview з назвою бізнесу та мовою сайту. Натисніть Edit, щоб оновити.
Нижче — «Some pages require your attention». Сторінки з помилками мають помаранчеву іконку. Клікніть сторінку для введення meta-title (до 60 символів з ключовим словом) і meta-description (до 160 символів).
Крок 11: Підключіть домен
Якщо ви ще не підключили домен, натисніть кнопку Connect domain у верхньому меню редактора.
Можна підключити наявний домен через DNS або купити новий прямо в Hostinger.
Поки домен не підключено, сайт доступний за тимчасовим субдоменом (yoursite.builder-preview.com). Для публічного запуску потрібен власний домен.
Крок 12: Перегляньте і публікуйте сайт
Майже готово. Натисніть Preview у правому верхньому куті.
Відкриється повноекранний перегляд сайту. Перемикайте між desktop і mobile, перевіряйте, чи все відображається коректно.
Особливо зверніть увагу на мобільний вигляд головного героя та навігацію.
Коли все готово, поверніться в редактор і натисніть зелену кнопку Go live. Ваш сайт опубліковано.
Крок 13: Дослідіть інтеграції
Після публікації варто підключити інтеграції. Перейдіть у More > Integrations у лівій панелі.
У панелі Integrations можна підключити Shippo (етикетки, виконання замовлень), Printful (пейзодрук), Hostinger Reach (email-маркетинг), Google Ads, Custom code (власний HTML/CSS/JS).
Щоб активувати інтеграцію, натисніть Get started поруч із обраною, виконайте кроки і знову опублікуйте сайт.
Поради для ефективної роботи з Hostinger Website Builder
Будьте щедрі з AI-промптом. Двох речень замало. Детальний бриф заощадить години редагування.
Використовуйте кнопку Improve description щоразу. AI доповнить ваш опис і виправить нечіткі моменти.
Уважно редагуйте копірайт. AI створює пристойні шаблонні тексти, але він не знає ваш бізнес. Перепишіть контент згідно з вашими послугами й стилем.
Перевіряйте мобільний вигляд перед публікацією. Автоматична адаптація є, але іноді потрібні коригування відступів і зображень.
Налаштуйте SEO для кожної сторінки. Не лише для головної. Meta-title і description по всіх сторінках підвищують видимість у пошуку.
Використовуйте Media library для організації зображень. У розділі More > Media library завантажуйте й керуйте всіма фото в одному місці.
Покращуйте сайт з часом. Публікація — лише початок. Регулярно оновлюйте контент, додавайте нові пости, корегуйте сторінки відповідно до розвитку бізнесу.
Hostinger Website Builder усуває майже всі перешкоди між вами та професійним сайтом. AI бере на себе дизайн і копірайт, редактор полегшує налаштування, а вбудовані SEO та інтеграції дають усе необхідне в одному місці.
Дотримуйтесь цього посібника, і у вас може бути живий стильний сайт менш ніж за годину.
