Tilda — конструктор сайтов

Tilda Publishing — визуальный конструктор для создания сайтов без кода. Из готовых блоков собираются лендинги, визитки, магазины и блоги — быстро и без программирования.

Уровень: начальный 17 разделов ⏱ 2–3 часа

1. Что такое Tilda и для кого она

Tilda — конструктор на платформе tilda.cc. Сайт собирается из «блоков»: заголовок, текст, картинка, форма, галерея, товары и т.д. Блоки перетаскиваются и настраиваются мышкой.

лендинги и промо-страницы;
портфолио и визитки;
интернет-магазины и каталоги;
блоги и лендинги для событий.

Tilda идеальна для старта: скорость запуска несколько часов. Но глубокую кастомизацию дизайна требует Zero Block — о нём ниже.

2. Интерфейс и структура сайта

В аккаунте управление идёт на двух уровнях:

Аккаунт → Проект — сайт (домен, настройки, аналитика);
Проект → Страница — набор блоков одной страницы.

Панель слева на странице: кнопки «добавить блок», «настройки страницы», «опубликовать». Список всех блоков открывается каталогом — там их сотни с категориями (Текст, Галерея, Формы, Персонал, Товары).

3. Блоки и их настройка

Клик по любому блоку справа открывает его настройки. У каждого блока:

Контент — текст, изображения, кнопки;
Дизайн — фон, отступы, скрытие на мобильных;
Тень/эффекты — тень, скругление, анимация.

Блоки можно копировать (Ctrl + C / Ctrl + V), переносить и сохранять в Библиотеку для переиспользования на другом сайте.

Аккуратно с прозрачностью и тенями на каждом блоке: визуальный шум размывает восприятие. Держи 1–2 акцентных эффекта на экран.

4. Тексты и типографика

Текст в Tilda настраивается через панель, которая похожа на текстовые редакторы:

шрифт (гарнитура), размер, межстрочный интервал;
жирность, курсив, зачёркивание;
выравнивание, цвет, ссылки.

Для заголовков подбирается единый стиль. Чтобы не править размер текста на каждом блоке вручную, используй Стили (Раздел 7).

Тип	Рекомендуемый размер
H1 (заголовок страницы)	40–60 px (пк)
H2 (секция)	30–40 px
Обычный текст	16–18 px
Мелкий текст / подпись	12–14 px

5. Медиа: изображения, галереи, видео

Каждый блок поддерживает:

Изображения — загрузка, URL, стоковые фото (внутри Tilda есть каталог);
Галереи — слайдер и сетка фотографий;
Видео — встраивание YouTube / Vimeo по ссылке.

Рекомендации по изображениям:

Формат: JPG (фото) / PNG (прозрачность) / WebP (веб)
Размер по ширине: 1200–1920 px для десктопов
Вес файла: до ~300–400 КБ на изображение
Оптимизация: сожми перед загрузкой

Тяжёлые картинки замедляют сайт. Используй стоковые категории Tilda или собственные оптимизированные файлы.

6. Формы и сбор заявок

Форма — ключевой элемент лендинга. Настройка в блоке формы:

поля (имя, телефон, email, комментарий);
кнопка и её текст;
получатели заявок — email, Telegram или CRM (Bitrix24, amoCRM);
спасибо-надпись после отправки;
переадресация на другую страницу.

Обязательно настрой уведомления: Tilda может слать письма на email и в Telegram. Иначе заявки будут только в панели.

7. Zero Block и Flex-режим

Zero Block — конструктор внутри Tilda для «пустого» блока: сами размещаешь элементы в любую точку, как в графическом редакторе (двигай, размер, поворот, тень, анимацию).

Flex-режим — упрощённый Zero Block: колонки и ряды выстраиваются автоматически с равными отступами, удобно для плановых сеток.

Zero Block: полная свобода, но нужен аккуратный контроль
Flex: быстрый результат, ровная сетка автоматически
Правило: сначала Flex, потом Zero для деталей

В Zero Block элементы тянутся за уголки, курсор показывает границы. Сохранение через «Опции» блока или Ctrl + S.

8. Стили и глобальные настройки

Вкладка Сайт → Стили управляет всем сайтом сразу:

базовый шрифт;
цвета (основной, дополнительный, фон);
цвет кнопок;
почта для форм, аналитика, favicon.

Изменяй цвет и шрифт один раз — они применятся ко всем блокам, не аннулированным локально.

Постоянные элементы

Шапка и «футеры» обычно фиксируются: страницы разметки имеют «главный» блок-заголовок и «героя» — они видны на всех страницах.

9. Адаптивность и мобильная версия

Tilda автоматически подстраивает блоки под телефон. Переключение Пк ↔ Мобильный — кнопки в верхней панели страницы. Для каждой версии можно скрыть лишние блоки:

на мобильной показывается упрощённый вариант сетки;
в настройках блока отключай «показывать на мобильных» при необходимости;
проверяй предпросмотр на устройствах (иконка телефона/планшета).

В Zero Block элементы можно позиционировать отдельно для мобильной версии — переключившись в режим «Мобильный».

10. Публикация, домен и SEO

Кнопка Опубликовать делает изменения публичными. Настройки публикации:

поддомен вида your-site.tilda.ws — сразу после публикации;
Домен — подключение своего (в настройках проекта, регистрация/паркинг по инструкции);
SSL-сертификат Tilda включает автоматически.

SEO-минимум

1. Title страницы (до 60 символов)
2. Description (до 160 символов)
3. H1 на странице — один, смысловой
4. Тексты содержат ключевые слова, не переспама
5. Favicon + Open Graph (превью при пересылке)

Поделиться превью в соцсетях: настройки страницы → Open Graph → задать картинку.

SEO-аналитика: подключи Яндекс.Метрику и Google Analytics в настройках проекта, без них не видно, откуда приходят посетители.

11. Интернет-магазин и оплата

Tilda умеет продавать напрямую: корзина, каталог и приём оплаты настраиваются в проекте без сторонних сервисов.

Каталог товаров — блок «Товары и услуги»: цена, фото, описание, кнопка «В корзину».
Корзина — автоматически собирает выбранное и показывает итог по скидке и доставке.
Оплата — подключение к эквайрингу или приём через платёжных провайдеров;
Доставка — варианты «Самовывоз», «Курьер», «Почта» с разными ценами.

1. Создайте страницу «Каталог» с блоком «Товары»
2. Настройте валюту и способ доставки в разделе «Корзина»
3. Подключите платёжную систему в «Настройках проекта»
4. Опубликуйте и протестируйте покупку тестовой картой

Тестируйте оплату тестовой картой до запуска, а не после: конфигурация эквайринга бывает разной, ошибки должны уйти до первых клиентов.

Для большого ассортимента подключайте внешний сервис (например, магазин), синхронизирующий товары по API.

12. Аналитика и воронки

Сайт без аналитики — вы не знаете, работают ли страницы. Минимум для любого проекта — счётчик Метрики/GA4 и цели на ключевые действия.

подключите счётчик в настройках проекта (раздел «Подключение»);
цели: отправка формы, переход к оплате, клик по телефону;
тепловая карта Метрики покажет, куда смотрят посетители;
веб-визор — где люди упираются и бросают форму.

Воронка: Главная (100%) →
          Карточка товара (34%) →
          Корзина (12%) →
          Оплата (6%)

Воронка быстро показывает узкое место: например, страница товара собирает мало переходов — проблема в контенте, а не в оплате.

Ставьте не больше одной-двух целей на страницу: «отправил заявку» важнее «прокрутил до середины». Регулярно смотрите тепловые карты и записи, но решения принимайте по числам, а не по единичному наблюдению.

Всегда сравнивайте данные до и после правки: одна цифра ничего не значит без «до». Замеряйте неделю до изменения и неделю после.

13. Финальный чек-лист запуска

Перед публикацией прогоните сайт по контрольному списку — большинство «забытых мелочей» всплывает именно в день запуска.

все ссылки и меню работают, нет «битых» страниц;
форма отправляет запрос в почту/CRM и это проверено;
мобильная версия корректна на телефоне, а не только в предпросмотре;
домен подключён, SSL активен, favicon и Open Graph заданы;
счётчики аналитики видят события, цели настроены;
заполнены Title и Description каждой страницы;
контакты и реквизиты актуальны, политика обработки данных на месте.

Проверка не занимает много времени, если список под рукой. Отмечайте каждый пункт галочкой, а не «в уме»: через месяц вы вспомните, что проверили. Держите чек-лист в заметках проекта и дополняйте по мере роста сайта.

Сделайте «мягкий запуск»: пригласите 10–20 знакомых, соберите отзывы и доработайте до широкой публикации.

Запустили — не забудьте про резервные копии и доступ к админке с двухфакторной аутентификацией. Мелкая защита важнее красивой страницы.

14. Embed HTML и JavaScript (блок T123)

Типовых блоков Tilda хватает для большинства задач, но кастомные вставки — обратный отсчёт, виджеты, сторонние формы — делаются через блок T123 «Embed HTML код».

<div id="countdown"></div>
<script>
  const target = new Date("2026-12-31T23:59:59");
  const el = document.getElementById("countdown");
  setInterval(() => {
    const diff = target - Date.now();
    el.textContent = Math.floor(diff / 86400000) + " дней";
  }, 1000);
</script>

в T123 работают собственные script и style, ограниченные блоком;
общие библиотеки подключаются один раз на страницу, а не в каждый блок;
неуверенный код сначала проверяйте в песочнице (CodePen), потом вставляйте.

T123 рендерится после стандартных блоков: если виджет «не виден» — проверьте конфликт с JS-библиотеками самой Tilda.

Готовый T123-блок сохраните в библиотеку сайта: один раз настроили — переиспользуете на десятке страниц.

15. Структура эффективного лендинга

Лендинг работает, когда ведёт посетителя по одной линии: от вопроса «что это» до нажатия кнопки. Типовая структура проверена годами, отклоняться стоит осознанно.

Блок	Задача
Первый экран	оффер: кто вы и что получит посетитель
Выгоды	3–5 фактов, отвечающих на «зачем мне»
Как я работаю	снять возражения «это сложно/дорого»
Кейсы и отзывы	социальное доказательство
Форма + CTA	следующий шаг ровно к контакту

Соответствие «одна страница — одна цель» важнее красоты: при двух разных призывах посетитель перестаёт выбирать и уходит.

Тест первого экрана: за 5 секунд опишите своими словами, что предлагает сайт. Не получилось — оффер сформулирован слабо.

Место отзывов — рядом с формой: доказательство цены усиливается именно в момент решения о заявке.

16. Фирменный стиль и консистентность

Сайт выглядит профессиональным, когда элементы не спорят друг с другом: одна палитра, две гарнитуры шрифта, одинаковые отступы и скругления.

палитра: 2 основных цвета плюс нейтральные, остальное — семантика состояния;
шрифт: максимум 2 семейства и сетка размеров (заголовок / подзаголовок / текст);
высоты и отступы блоков повторяйте с страницы на страницу;
кнопки одного действия выглядят одинаково на всём сайте.

В Tilda стили задаются централизованно: глобальные настройки проекта хранят цвета, шрифты и стиль кнопок — правка одного поля обновляет все страницы.

1. Настройки проекта → Branding / Стили
2. Задайте палитру и шрифтовую пару
3. Настройте общий стиль кнопок
4. Проверьте контраст и сочетаемость на реальной странице

Не смешивайте на странице более одной «акцентной» кнопки (куплю/закажу): конкуренция одинаково ярких CTA размывает главное действие.

Скриншот-тест: откройте рядом 5 ключевых страниц — если не понимаете, где сайт «потерял» шапку, дизайн-система плывёт.

17. Скорость сайта и Core Web Vitals

Быстрый сайт зарабатывает больше: каждый лишний тяжёлый скриншот или скрипт платится конверсией. Ориентир — Core Web Vitals в PageSpeed Insights и Lighthouse.

LCP (загрузка главного контента) — меньше 2,5 с: первый экран должен вставать быстро;
INP (отклик на действия) — меньше 200 мс: кнопки и формы отвечают мгновенно;
CLS (сдвиг макета) — меньше 0,1: картинки и шрифты не «прыгают» при загрузке.

Оптимизация на Tilda:
1. Сжимайте изображения до 100–150 КБ
2. Убирайте лишние блоки — каждый стоит запросов
3. Не злоупотребляйте T123 и тяжёлыми скриптами

Tilda добавляет на страницу свои скрипты — финальную скорость проверяйте инструментами, а не «кажется быстрым»: PageSpeed честен.

После каждой крупной правки прогоняйте PageSpeed заново и фиксируйте балл: регрессия «сползает» незаметно.

18. Многостраничные сайты: структура и вложенность

Лендинг живёт на одной странице, а корпоративный сайт — на десятках. В Tilda многостраничность строится на трёх понятиях: страницы, меню и настройки каждого раздела.

Проект (домен)
├── Главная
├── Каталог
│     └── Товар: <категория>
├── О компании
└── Контакты

меню настраивается в блоке навигации — ссылки ведут на страницы проекта;
вложенные разделы (папки) дают «чистые» URL: /catalog/jacket;
шапка и подвал фиксируются глобально через настройки сайта.

Поглощающее правило: повторяемость — главный враг. Стили, шапка, футер задаются один раз на уровне проекта, иначе правка разъезжается по страницам.

Заводите страницы по готовой структурной схеме (от меню к контенту), а не «в лоб» по одному макету.

Не дублируйте SEO-поля: одно описание на несколько страниц — риск санкций поисковиков за сквозной контент.

Проверяйте «мёртвые» ссылки между страницами: починенный битый путь — минута работы, сломанный — потеря лида.

19. Командная работа: доступы и роли

Проект редко ведёт один человек: контент-менеджер правит тексты, дизайнер — блоки, маркетолог — формы и аналитику. В Tilda доступы делят по ролям, чтобы каждый видел своё и ничего не сломал.

Роль	Что доступно
Администратор	всё: проект, платежи, пользователи, удаление
Редактор	страницы и контент выбранных проектов
Аналитик/маркетолог	счётчики, формы, интеграции без правок дизайна

Добавление пользователей — в настройках аккаунта: указывается email и роль. Хорошая привычка — выдавать минимальные права и отзывать их, когда сотрудник ушёл.

Ведите список владельцев доступов в заметках: «кто что делает» спасает при внезапных изменениях.

Не делитесь паролем от аккаунта: гостевой доступ с ролью-редактором безопаснее полноценного админа для подрядчика.

История изменений в Tilda хранится вместе с датами — используйте её, чтобы разбирать «кто и когда сломал страницу».

20. Бэкапы, клонирование и перенос

Эксперименты на живой странице опасны: сломали — и лендинг в ступоре в разгар рекламы. Страховка — бэкап до правок и умение клонировать проект целиком.

В настройках проекта:
1. Создать копию → «Тираж» (клонировать весь проект)
2. Валидция: копия работает на поддомене tilda
3. Эксперимент → контроль → перенос в «боевой»

инструмент «Клонировать сайт» переносит все страницы и настройки;
перед крупной правкой снимите скриншоты/бэкап редактируемых страниц;
перенос на другой аккаунт — через экспорт/импорт (данные, формы — отдельная тема).

Миграция на другой домен: домен меняется в настройках, сертификат подтягивается автоматически; внимательно пересоздавайте формы, инфо-сетки и аналитику.

Планируйте «серебряную» копию: для A/B или новогодних акций клон проекта окупается за вечер настройки.

Данные форм живут на сервисе, а не в клоне: после переноса проверьте, куда уходят заявки — чужая почта сломает полезность клиента.

Читайте про список «не перемещается автоматически» (видео, платежи) — этот список короткий, но его надо пройти руками.

21. A/B-тесты и эксперименты на страницах

A/B-тест сравнивает две версии страницы (заголовок, кнопка, цвет, первый экран) на реальном трафике и выбирает лучшую по конверсии. В Tilda эксперименты близки к простой схеме.

1. Скопируйте страницу (раздел 20)
2. Внесите ТОЛЬКО одно изменение
3. Разделите трафик: оригинал / вариант (50/50)
4. Соберите 100+ конверсий, сравните по цели

одно изменение за тест: иначе непонятно, что выиграло;
метрика — цель (заявка, покупка), а не клики по странице;
статистика: неделя-две и достаточный объем — не «завтра».

Правильно настроенный тест на разделении 50/50 и странице с целями аналитики — сырьё для роста конверсии без «гадалок».

Зафиксируйте базу до эксперимента: 5% к конверсии на 1000 посетителей — это другая цифра, чем «на глазок — стало лучше».

Не держите «вечный» тест: A/B без сроков — потери трафика, а не исследование. Закрывайте по результату или по времени.

Сегменты важны: на мобильном и десктопе победители часто разные — считайте по устройствам, а не в сумме.

Что дальше

Освоив Tilda, ты можешь создавать сайты без кода. Чтобы углубиться в разработку, изучи HTML и CSS. Подобный визуальный конструктор — Readymag — подойдёт для креативных страниц и интерактивных сюжетов.

← Вернуться к курсам