Як зробити сайт на Tilda: інструкція для початківців

Крок 1

Зареєструйтеся й оберіть тариф під задачу

У Tilda є українська версія сайту, і ціни платних тарифів на ній вказані в гривнях; оплата — банківською карткою. Станом на листопад 2026 року тарифів три. Безкоштовний (Free) — 1 сайт, до 50 сторінок, частина бібліотеки блоків і безкоштовна адреса на tilda.ws; власний домен, сервіси збору заявок із форм, платіжні системи й Google Analytics на ньому недоступні. Особистий (Personal) — 1 сайт з повною бібліотекою блоків і власним доменом. Бізнес (Business) — до 5 сайтів і експорт коду. Для навчання почніть із безкоштовного тарифу, а щоб спробувати всі блоки, увімкніть двотижневий пробний період: картка для нього не потрібна.

• •після пробного періоду можна повернутися на безкоштовний тариф; зроблене збережеться, але платні функції вимкнуться;
• •якщо платну підписку не продовжити, сайт знімуть з публікації, а дані зберігатимуться 6 місяців;
• •актуальні ціни дивіться на сторінці тарифів Tilda: вони відрізняються для щомісячної й річної оплати.

Крок 2

Спершу структура, потім блоки

Часта помилка — відкрити бібліотеку й гортати блоки, доки щось не сподобається. Так виходить сторінка «як у всіх». Почніть із задачі: хто прийде на сторінку і що має зробити. Потім випишіть порядок секцій на папері, а вже тоді шукайте блоки під кожну.

• •для навчального проєкту візьміть вигадану задачу: лендинг курсу кераміки, кав'ярні чи фестивалю;
• •типова структура: перший екран із пропозицією й кнопкою, переваги, приклади чи фото, відгук, питання й відповіді, контакти;
• •у кожній секції — одна думка; якщо секцію не можна описати одним реченням, її варто розділити.

💡 Тексти пишіть до дизайну. Блок, підібраний під «рибу», ламається, щойно в нього потрапляє справжній текст.

Крок 3

Налаштуйте стиль сайту й зберіть сторінку з блоків

Перш ніж додавати блоки, відкрийте налаштування сайту й задайте шрифти й кольори на рівні всього сайту: Tilda дозволяє підключити Google Fonts, Adobe Fonts або завантажити власні шрифти. Потім додавайте блоки зі стандартної бібліотеки й міняйте в них тексти, зображення й відступи. Для українського тексту перевірте, що обраний шрифт має кирилицю.

• •один шрифт для заголовків і один для тексту, а краще один шрифт у двох накресленнях;
• •обмежте палітру: основний колір, акцент і нейтральні відтінки; перевірте контраст тексту (для звичайного тексту WCAG вимагає щонайменше 4.5:1);
• •тримайте однакові відступи між секціями: різні відступи між блоками — перше, що видає «збірну» сторінку.

Крок 4

Зробіть одну секцію в Zero Block і налаштуйте адаптивність

Zero Block — вбудований редактор Tilda для власних блоків: у ньому ви розміщуєте текст, фігури, зображення й кнопки вільно, як у графічному редакторі. Це найкраще місце, щоб потренуватися в композиції. Ширина сітки в Zero Block фіксована — 1200 px, а адаптивність налаштовується окремо для п'яти типів екранів: від 1200 px, 980–1200, 640–980, 480–640 і 360–480 px. Перевірте, чи доступний Zero Block на вашому тарифі; якщо ні, скористайтеся пробним періодом.

• •спершу зробіть версію для 1200 px, потім пройдіться по кожному меншому екрану;
• •на кожному екрані змінюйте розмір шрифту, ширину текстових колонок, розмір зображень і висоту блоку;
• •Tilda підсвічує налаштування, змінені саме для цього екрана, а успадковані показує сірим — так видно, що ви вже правили.

💡 Не робіть увесь сайт у Zero Block: для навчання достатньо однієї-двох секцій. Решта на готових блоках уже адаптивна, а кожен Zero Block доведеться адаптувати вручну на п'яти екранах.

Крок 5

Опублікуйте сторінку й перевірте її наживо

Задайте безкоштовну адресу на tilda.ws у налаштуваннях сайту: за довідкою Tilda, сайт буде доступний на цьому піддомені на будь-якому тарифі. Опублікуйте сторінку й відкрийте її на телефоні. На сторінках показується напис «Made on Tilda»; прибрати його можна лише на річній підписці тарифу Personal або Business.

• •пройдіть сторінку на телефоні й на ноутбуці: чи все читається, чи кнопки великі й помітні, чи ніщо не накладається;
• •перевірте, що кожна кнопка веде туди, куди обіцяє;
• •попросіть людину, яка не бачила сторінку, за 5 секунд сказати, про що вона. Якщо не вийшло — переробляйте перший екран.

💡 Готова сторінка — це матеріал для портфоліо. Покажіть, яку задачу розв'язували, які секції обрали й чому, і що змінили після фідбеку.