Что такое Тильда и какие сайты на ней создавать
Тильда, или Tilda Publishing, позволяет собирать страницы в визуальном редакторе из готовых блоков. Для собственного дизайна предусмотрен Zero Block.
Конструктор сайтов Тильда подходит для лендинга, портфолио и сайта компании. Сложный личный кабинет или расчёт стоимости сначала соберите на пробном проекте. Сопоставьте возможности платформы с требованиями бизнеса до оплаты подписки.
Плюс готовых блоков: вы редактируете сайт самостоятельно, без правки кода. Минус: функции зависят от платформы. При переезде формы и интеграции потребуют отдельной настройки. Экспорт кода не переносит сайт автоматически в другую CMS.
| Задача | Что подготовить | Что проверить |
|---|---|---|
| Лендинг услуги | Предложение, состав работ, цену и форму заявки | Понятно ли, что получит клиент |
| Сайт компании | Разделы услуг, сведения о компании и контакты | Можно ли быстро найти нужное направление |
| Интернет-магазин | Товары, характеристики, фото и условия доставки | Удобно ли выбрать вариант и оформить заказ |
| Блог | Темы, план статей и ссылки на связанные материалы | Есть ли у читателя понятный следующий шаг |
Сколько стоит сайт на Tilda: тарифы и бюджет
На сентябрь 2026 года официальная страница Tilda указывает следующие цены. Стоимость при годовой оплате показана в пересчёте на месяц. Это подписка на конструктор, а не цена разработки.
На сентябрь 2026 года Free ограничен 50 страницами на сайт, Personal и Business допускают до 1000. На Free доступна только часть библиотеки блоков. Перед выбором проверьте доступность форм, аналитики, каталога и оплаты в сравнении тарифов: бесплатный черновик не заменяет проверку рабочих функций.
| Тариф | Помесячная оплата | При оплате за год | Сайтов | Свой домен | Экспорт кода |
|---|---|---|---|---|---|
| Free | Бесплатно | Бесплатно | 1 | Нет | Нет |
| Personal | 750 ₽ в месяц | 500 ₽ в месяц | 1 | Да | Нет |
| Business | 1250 ₽ в месяц | 1000 ₽ в месяц | 5 | Да | Да |
Какие расходы учесть отдельно
Учтите регистрацию и продление домена, подготовку текстов, обработку фото и помощь дизайнера. Для онлайн-оплаты изучите условия платёжной системы. Сравнивайте предложения исполнителей с одинаковым составом работ.
Для оценки разработки перечислите страницы и интеграции. Укажите, кто подготовит материалы и будет обновлять сайт. Подписку и продление домена заложите в постоянные расходы.
Как сделать сайт компании на Тильде: пошаговая инструкция
- Опишите аудиторию, цель проекта и действие, которое должен совершить посетитель.
- Нарисуйте структуру: главная страница, внутренние разделы, переходы и формы.
- Подготовьте тексты, изображения, цены и ответы на частые вопросы.
- Создайте проект в Tilda, выберите шаблон или пустую страницу.
- Соберите блоки, оформите меню и проверьте мобильную версию.
- Настройте формы, адреса страниц и параметры для поисковых систем.
- Подключите домен, опубликуйте страницы и пройдите путь посетителя до заявки.
Подготовьте идею, структуру и прототип
Определите аудиторию и задачу сайта. Вместо «рассказать о компании» выберите действие: записаться, запросить расчёт или купить товар. Подчините ему содержание разделов.
Прототип можно нарисовать на бумаге. Обозначьте блоки прямоугольниками: предложение, состав услуги, цена, порядок работы, вопросы, заявка. Объедините разделы, которые повторяют одну мысль.
Изучите сайты конкурентов: какие условия они объясняют, какие вопросы оставляют без ответа. Соберите примеры оформления из своей и смежных ниш. Сравнивайте навигацию, подачу цены и фотографии, а не копируйте чужие тексты. Под разные задачи покупателей предусмотрите отдельные страницы, если одного лендинга недостаточно.
- Составьте список материалов: тексты, фотографии, изображения товара, документы и контактные данные.
- Сгруппируйте поисковые запросы по задачам клиента: например, покупка товара и его ремонт требуют разных ответов.
- Для каждого блока запишите вопрос посетителя и короткий ответ.
Создайте проект и выберите шаблон
Зарегистрируйтесь в Tilda, создайте сайт и задайте название проекта. Нажмите «Создать новую страницу», выберите шаблон или пустую страницу. Общие шрифты и цвета задайте в настройках сайта.
Выбирайте шаблон по структуре. Подставьте собственный заголовок и убедитесь, что он помещается без уменьшения шрифта. Удалите демонстрационные цены и обещания. Для сборки с нуля добавляйте блоки по своему прототипу.
В настройках страницы заполните название, описание и адрес. Для внутреннего раздела задайте понятный путь, например /services. В «Настройках сайта» откройте «Главная страница» и назначьте страницу, которая должна открываться по основному адресу.
В настройках страницы проверьте разделы «Бейджик» и «Соцсети»: изображение и подпись должны объяснять содержание ссылки. После публикации отправьте ссылку себе и посмотрите, какое превью появится.
Как создать сайт на Тильде с помощью ИИ
При создании страницы откройте вкладку «Бизнес» и нажмите «Сгенерировать». Подтвердите условия использования ИИ, укажите тему и задачу. Опишите аудиторию, предложение и нужные разделы. После генерации перейдите к редактированию.
Пример задания: «Страница мастерской по ремонту велосипедов. Нужны перечень работ, порядок обращения, вопросы и форма заявки. Цены оставь для заполнения». Проверьте каждый факт и замените картинки, которые не показывают вашу работу. Не публикуйте придуманные ИИ отзывы или гарантии.
Добавьте блоки, тексты и изображения
Нажмите «+» между блоками и выберите нужную категорию в библиотеке. В меню «Контент» меняйте текст, картинки и ссылки кнопок. В «Настройках» блока задавайте отступы, шрифты и фон. Ненужные блоки удалите, остальные расположите в порядке вопросов посетителя.
На первом экране объясните, что предлагаете и кому это подходит. Далее раскройте условия, стоимость и следующий шаг. Заголовок «Что входит в обслуживание» полезнее абстрактного «Наши преимущества», если ниже перечислены работы.
Используйте собственные фото товара или процесса работы. Если берёте изображение из фотобанка, проверьте условия его использования и сохраните сведения об авторе. Случайная картинка из поиска может принадлежать другому владельцу. Подпись должна объяснять, что показано.
Проверьте кадрирование: товар не должен исчезать за краем обложки. Перед видео кратко объясните, что зритель узнает. Перечитайте текст вслух: замените общие обещания конкретными условиями, уберите повторяющиеся абзацы.
Оформите дизайн и проверьте мобильную версию
Начните с простого оформления: спокойного фона, читаемого шрифта и заметной кнопки. Проверьте кириллицу и одинаковую типографику заголовков. Выровняйте отступы между разделами. Если текст сливается с фоновым изображением, смените фон или цвет текста.
Прочитайте страницу на телефоне без увеличения. Текст, таблицы и меню должны помещаться в экран. Кнопки не должны стоять вплотную.
Готовые блоки адаптируются под разные устройства, но после замены содержания всё равно нужна проверка. В Zero Block отдельно проверьте расположение элементов на телефоне и планшете. Уберите декор, который перекрывает текст или мешает нажать кнопку.
Оцените загрузку через мобильное подключение. Если долго виден пустой экран, уменьшите размер тяжёлых картинок и уберите фоновое видео. Анимацию оставьте там, где она поясняет действие.
Соберите меню, шапку и подвал
Добавьте блок из категории «Меню». Через «Контент» задайте названия пунктов и ссылки на разделы. «Цены» понятнее, чем «Возможности», если ссылка ведёт к стоимости.
Для перехода внутри лендинга используйте якорную ссылку на нужный блок. Для многостраничного сайта укажите адрес раздела. Проверьте меню с внутренней страницы: ссылка должна вести к нужному содержимому, а не к отсутствующему блоку.
Для общей шапки создайте отдельную страницу с меню. Для подвала создайте другую страницу со служебными ссылками и контактами вашего бизнеса. Откройте «Настройки сайта», затем «Шапка и подвал», назначьте подготовленные страницы. После сохранения опубликуйте все страницы сайта.
Если на отдельной странице общий блок не нужен, отключите шапку или подвал в её дополнительных настройках. Так можно убрать лишнее меню со страницы, подтверждающей отправку заявки.
Как из Фигмы перенести в Тильду готовый макет
Для импорта в Zero Block предусмотрен плагин Figma to Tilda. По инструкции Tilda на сентябрь 2026 года ширина фрейма должна составлять 1200 пикселей. Большой макет рекомендуется разделить на отдельные фреймы.
Группу элементов кнопки назовите button. Поддерживается не более 6 уровней вложенных групп. Упростите структуру слоёв до переноса.
- В Figma откройте Actions, затем Plugins & widgets, найдите Figma to Tilda и запустите плагин.
- Выберите нужный фрейм или слой, нажмите Prepare to copy, затем Copy to clipboard.
- Откройте Zero Block в Тильде и вставьте содержимое через Ctrl+V в Windows или Command+V на Mac.
- Проверьте шрифты, изображения, ссылки и расположение элементов на разных экранах.
Настройте формы заявок и обработку обращений
В Тильде блоки с формами находятся в категории «Форма», а также среди обложек, контактов и подвалов. Поля редактируются через «Контент», вкладку «Поля для ввода». Для каждого поля можно задать подпись, подсказку и обязательность заполнения.
Запрашивайте только сведения, необходимые для ответа. Для первого обращения обычно достаточно способа связи и описания задачи. Подпишите кнопку действием: например, «Получить расчёт».
В «Настройках сайта» откройте «Формы» и подключите получателя: почту, CRM или сервис рассылок. Затем отметьте этот сервис в «Контенте» нужной формы. Для подписки на рассылку сначала настройте список получателей в выбранном сервисе.
Опубликуйте страницу и отправьте пробную заявку. Убедитесь, что она получена, затем отправьте форму без обязательного поля. Если обращение не дошло, откройте «Заявки» проекта и «Журнал ошибок». Убедитесь, что получатель выбран в этой форме.
Согласие и политика обработки данных
Разместите политику обработки персональных данных на отдельной странице и добавьте ссылку рядом с формой. Если основанием обработки служит согласие, подготовьте отдельный текст согласия. Предусмотрите осознанное действие посетителя, без заранее установленной отметки.
Согласуйте документы с тем, какие сведения собираете и куда их передаёте. Настройка формы сама по себе не подтверждает соблюдение требований к обработке данных. Для аналитики отдельно определите порядок работы со статистическими cookie.
Что проверить для интернет-магазина и онлайн-оплаты
Для магазина подготовьте карточки товаров, корзину и порядок оформления заказа. Укажите варианты товара, цену и способы доставки. Сначала соберите пробную покупку и только потом заполняйте весь каталог.
Выберите платёжную систему, совместимую с Tilda, и проверьте её условия подключения. Пройдите весь заказ: добавление товара, изменение количества, доставка, оплата и уведомление продавцу. Для проверки оплаты используйте тестовый режим провайдера, если он предусмотрен.
Если нужен обмен остатками с учётной системой, включите его в техническое задание. Запишите, какие данные передаются и кто исправляет расхождения. Проверьте отдельно оплату, доставку и возврат: эти процессы нельзя оценить только по внешнему виду карточки.
Подключите свой домен к сайту на Тильде
Для чернового запуска можно использовать бесплатный адрес на tilda.ws. Собственный домен подключается на платном тарифе. В инструкции Tilda предусмотрены настройка A-записей у регистратора и делегирование домена на DNS-серверы платформы.
Если домен используется для почты, сохраните действующие DNS-записи. Согласуйте изменения с ответственным за почту компании.
- Зарегистрируйте домен или подготовьте доступ к управлению существующим адресом.
- Откройте «Настройки сайта», затем «Домен», укажите адрес и сохраните его.
- Для ручного подключения внесите у регистратора A-записи с IP-адресом из настроек вашего проекта.
- При делегировании используйте NS-серверы из официальной инструкции Tilda.
- После обновления записей проверьте открытие страниц по своему адресу и настройку HTTPS.
Подготовьте сайт к поисковому продвижению
Открытая публикация не гарантирует индексацию или высокие позиции в поиске. Отслеживайте состояние сайта в инструментах поисковых систем.
- Заполните Title и Description в SEO-настройках страницы, в разделе отображения в поисковой выдаче.
- Задайте понятные адреса страниц и логичную структуру заголовков H1, H2 и H3.
- Добавьте описания alt к содержательным изображениям.
- Загрузите favicon в разделе «Настройки сайта», затем «SEO», пункт Favicon.
- Снимите запрет индексации с готовых страниц, настройте страницу ошибки 404 и переадресации между версиями адреса.
- После публикации откройте SEO-рекомендации в настройках сайта.
- Подключите Яндекс Вебмастер и Google Search Console через раздел «SEO».
Подключите аналитику и проверьте цели
Создайте счётчик Яндекс Метрики. В Tilda откройте «Настройки сайта», раздел «Аналитика», пункт «Яндекс Метрика» и укажите номер счётчика. Сохраните изменения и переопубликуйте все страницы.
Настройте цель для отправки формы или покупки. После пробного действия проверьте отчёт: посещение страницы ещё не означает заявку. Сопоставьте события с реально полученными обращениями. Это поможет увидеть, где посетитель прерывает оформление заказа.
Опубликуйте страницы и проверьте результат
Откройте предпросмотр, затем нажмите «Опубликовать» и проверьте внешний адрес. После дальнейших правок публикуйте страницу заново. Попросите человека, который не видел проект, найти цену и отправить заявку без ваших подсказок.
- На первом экране понятно предложение, цены согласованы во всех разделах.
- Меню, кнопки и ссылки открывают нужные разделы.
- На телефоне нет обрезанного текста и горизонтальной прокрутки.
- Фотографии и видео загружаются, основные сведения доступны без просмотра ролика.
- Пробная заявка получена, ошибки заполнения формы можно исправить.
- Служебные документы доступны, название и иконка соответствуют проекту.
Частые ошибки при самостоятельной сборке
| Ошибка | Что получается | Как исправить |
|---|---|---|
| Выбирать дизайн до подготовки содержания | Текст не помещается в выбранный шаблон | Сначала составьте структуру и черновик |
| Добавлять блоки без общей задачи | Страница длинная, но условия непонятны | Свяжите каждый раздел с вопросом покупателя |
| Оставлять подпись кнопки из шаблона | Посетитель не понимает следующий шаг | Назовите действие и проверьте ссылку |
| Проверять только большой экран | На телефоне форма или заголовок обрезаны | Пройдите страницу на разных устройствах |
Когда стоит заказать разработку сайта
Если нужна помощь, посмотрите услугу «Разработка сайта на Tilda»: /uslugi/sajt-na-tilda/. В seosite1 итоговую цену и сроки называем после брифа. На оценку влияют состав страниц, готовность материалов и сложность задачи.
Мы делаем сайты с 2009 года и работаем удалённо по всей России. Оплата по этапам, каждый этап вперёд. В брифе зафиксируйте страницы, формы, интеграции и порядок передачи доступа. До начала работ согласуйте, кто проверяет результат и обновляет сайт после запуска.
Источники
- Tilda, справочный центр, импорт из Figma
- Tilda, тарифные планы
- Tilda, справочный центр: как подключить домен к сайту
- Tilda, справочный центр: как настроить форму приёма данных
- Tilda, справочный центр: гид по SEO
- Tilda: генерация страницы и текста с помощью ИИ
- Tilda: общая шапка и подвал сайта
- Tilda: подключение Яндекс Метрики