Zero Block в Тильде: что это и когда без него не обойтись

Zero блоки в Тильде - это отдельный инструмент внутри конструктора: вместо готового блока из библиотеки получаешь пустой холст с редактором кода T123, куда добавляешь свою верстку, стили и скрипты. За практику работы с Тильдой вывел простое правило: если задачу закрывают стандартные блоки и настройки - делаю на них, без зеро-блоков. Если нужна логика, которой в библиотеке нет - калькулятор с условиями, форма с проверкой полей, интеграция с CRM или эквайрингом - открываю T123 и пишу код руками.

Что такое Zero Block и чем он отличается от обычных блоков Тильды

Обычный блок Тильды - шаблон с фиксированной структурой: меняешь текст, картинки, цвета через панель настроек, но напрямую HTML-разметку не трогаешь. Zero Block, он же T123, - блок с чистым полем: открываешь редактор кода прямо в интерфейсе Тильды и пишешь HTML, CSS и JavaScript с нуля или на основе своей заготовки.

Разница ощутима уже на этапе верстки. В обычном блоке работаю в рамках сетки и опций, которые заложены в шаблон - отступы, шрифты, анимации выбираются из готового списка. В zero-блоке собираю произвольную структуру: свою сетку, свои брейкпоинты, свои классы. Это отдельный фронтенд-проект внутри Тильды - со всеми плюсами гибкости и обязанностями, которые она добавляет.

Когда без zero-блока не обойтись

Стандартная библиотека Тильды закрывает большинство лендингов и визиток - там сотни готовых блоков под разные разделы. Zero Block подключаю, когда задача выходит за рамки настроек:

• Калькулятор с условной логикой - цена зависит от нескольких параметров, а не просто складывается из чекбоксов
• Форма с валидацией полей на лету - маска телефона, проверка email, обязательные поля с разными сообщениями об ошибках
• Интеграция с CRM, эквайрингом или службой доставки - данные с формы нужно отправить не в Тильду, а на внешний адрес
• Нестандартная сетка - карточки, каталог или галерея с версткой, которой нет ни в одном готовом блоке
• Анимации и интерактив за пределами встроенных эффектов - параллакс, кастомные слайдеры, drag-and-drop
• Мультистраничные формы - визард в несколько шагов с сохранением состояния между экранами

Что технически можно сделать в zero-блоке

Внутри T123 доступен полноценный HTML с любой вложенностью, CSS с медиазапросами и JavaScript без ограничений на синтаксис - фактически пишешь код так же, как в обычном проекте, только внутри редактора Тильды. Из зеро-блока можно обратиться к любому внешнему API через fetch, обработать ответ и обновить DOM без перезагрузки страницы.

Вот пример того, как я обычно перехватываю отправку формы в zero-блоке и отправляю данные на вебхук - например, в сценарий n8n, который дальше раскладывает лид по CRM и шлёт уведомление менеджеру через Telegram-бота на aiogram:

document.querySelector('#zeroForm').addEventListener('submit', function (e) {
  e.preventDefault();
  const data = {
    name: this.name.value,
    phone: this.phone.value,
    city: this.city.value
  };
  fetch('https://hooks.example.com/webhook/tilda-lead', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  }).then(function (res) {
    if (res.ok) {
      document.querySelector('#zeroForm').style.display = 'none';
      document.querySelector('#zeroSuccess').style.display = 'block';
    }
  });
});

Такой код не завязан на встроенную отправку форм Тильды - сам решаю, куда уйдут данные, в каком формате и что показать пользователю после отправки. Это же свойство используется для калькуляторов: JS в zero-блоке считает стоимость на основе выбранных параметров и обновляет цену без перезагрузки.

Ограничения zero-блоков, о которых редко предупреждают

Гибкость T123 не бесплатна - за неё платишь временем на верстку и рисками, которых нет в обычных блоках.

• Нет серверной части - весь код выполняется в браузере пользователя, а значит секретные ключи API нельзя зашивать в JS напрямую, их прячут за прокси-сервисом вроде n8n или отдельного бэкенда
• Адаптив под мобильные версии делаешь вручную - брейкпоинты, отступы и размер шрифтов не подхватываются автоматически, как в стандартных блоках
• SEO-разметку - заголовки, alt для картинок, микроразметку - прописываешь сам, Тильда не добавляет её за тебя внутри T123
• Ошибка в JS может уронить не только сам блок, но и повлиять на скрипты соседних блоков страницы, если код написан без изоляции переменных
• История изменений кода в Тильде ограничена - для сложных зеро-блоков веду резервные копии кода отдельно, чтобы не потерять рабочую версию при правках

Готовые решения из Zero Block Store или кастомная разработка

В Zero Block Store продаются готовые шаблоны блоков от сторонних разработчиков - от простых галерей до сложных калькуляторов. Для типовых задач это рабочий вариант: экономишь время на верстку, доводишь стили под свой дизайн. Проблема начинается там, где нужна нестандартная логика или интеграция с конкретным сервисом - готовый шаблон под такое не подгоняется, приходится переписывать половину скрипта.

Похожая история и с готовыми скриптами - часть задач закрывается универсальными решениями, которые не требуют разработки с нуля. Такие заготовки под частые сценарии для Тильды собраны в библиотеке готовых скриптов, и с них часто быстрее стартовать, чем с чистого листа. Но как только в проекте появляется своя CRM, нетиповой расчёт доставки или связка с конкретным эквайрингом - типовое решение адаптирую под задачу или пишу заново.

Как подключаю интеграции через zero-блок: CRM, эквайринг, СДЭК

На практике самые частые запросы с Zero Block - не дизайн, а интеграции. Пример из недавнего проекта: клиенту нужен был калькулятор доставки СДЭК прямо на карточке товара в Тильде. Прямой запрос к API СДЭК с фронтенда упирается в CORS и в то, что ключ доступа нельзя светить в браузере - поставил между Тильдой и СДЭК прослойку на n8n: зеро-блок отправляет город и вес посылки на вебхук, n8n дергает СДЭК и возвращает стоимость и сроки, которые уже выводятся в блоке.

По похожей схеме подключал приём оплаты через эквайринг T‑Bank - форма в zero-блоке собирает данные заказа, отправляет их на сервер, который создаёт платёж и возвращает ссылку на оплату, а покупатель уходит на неё без перезагрузки страницы Тильды. Для интернет-магазинов на связке Тильда плюс WooCommerce делаю то же самое в обратную сторону - карточки товаров и остатки синхронизируются через API, а форма заказа в zero-блоке пишет заказ сразу в нужную систему, а не только в базу Тильды.

Простая правка существующего зеро-блока - поправить стиль, добавить поле в форму, изменить логику расчёта - обычно стоит от 3 000 ₽. Комплексная интеграция с CRM, эквайрингом или службой доставки, где нужен сервер-посредник и обработка вебхуков, - от 40 000 ₽, в зависимости от количества внешних систем и логики между ними. Если проект только на старте и нужен весь сайт целиком с уже встроенными zero-блоками под задачи бизнеса, у меня можно заказать разработку сайта на Тильде под ключ - с калькуляторами, формами и интеграциями сразу в контуре проекта, а не докручивать их потом отдельными правками.

Частые вопросы

Нужно ли знать программирование, чтобы работать с zero-блоками?

Для простой верстки статичного блока хватит базового HTML и CSS. Как только нужна логика - расчёты, отправка данных на сторонний сервис, условные сценарии - без JavaScript не обойтись. Часть клиентов берёт готовые шаблоны из Zero Block Store и меняет в них только тексты и картинки, не трогая код, - это тоже рабочий вариант, пока задача типовая.

Можно ли использовать Zero Block без дополнительной платы за приложение?

Само приложение Zero Block доступно на платных тарифах Тильды как часть функционала конструктора, отдельно от тарифа его не покупают. Платить дополнительно приходится за готовые шаблоны из Zero Block Store, если решаешь не верстать блок с нуля, а взять готовую заготовку.

Замедляет ли zero-блок загрузку сайта?

Сам по себе - не обязательно, скорость зависит от того, что именно в него положили. Тяжёлые библиотеки, неоптимизированные изображения или лишние внешние запросы в zero-блоке просаживают скорость страницы сильнее, чем стандартные блоки Тильды, потому что там код не проходит через встроенную оптимизацию платформы. На практике проверяю итоговую скорость через Lighthouse после каждой доработки, а не полагаюсь на то, что Тильда сама всё оптимизирует.

Чем T123 в новых версиях Тильды отличается от старого Zero Block?

Принцип остался тот же - пустой блок с редактором кода, но интерфейс редактора и набор доступных настроек постепенно обновлялись: добавились удобства вроде подсветки синтаксиса и более гибкой работы с адаптивом. Для человека, который пишет код руками, разница некритична - логика работы с HTML, CSS и JS внутри блока не изменилась.