Zero Block на Тильде - это блок T396, который вместо готовых настроек даёт чистый холст: своя верстка, свой CSS и JS, доступ к любому элементу через класс или id. За практику я собирал на нём калькуляторы доставки, кастомные формы, виджеты с внешним API и блоки, которых в стандартной библиотеке Тильды просто нет. У инструмента при этом есть предсказуемые пределы и набор поломок, которые повторяются от проекта к проекту почти дословно, разберу и то, и другое.
По теме статьи
Готовое решение
Ограничение применения промокода в корзине Tilda
Промокод в Tilda не действует на выбранную категорию (например, «Распродажа»). Готовый скрипт + инструкция по подключению.
от6 000 ₽
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Что такое Zero Block и чем он отличается от обычных блоков Тильды
В интерфейсе Тильды Zero Block маркируется как блок T396 и открывается не в обычной панели настроек, а в отдельном редакторе t.zero. Там холст с сеткой, список слоёв и панель стилей, где каждому элементу назначается свой класс, id и произвольные CSS-свойства по пяти брейкпоинтам: 1200 и выше для компьютеров, 980‑1200 планшет горизонтальный, 640-980 планшет вертикальный, 480-640 смартфон горизонтальный, 320-480 смартфон вертикальный. Свои точки тоже можно добавить, в диапазоне от 320 до 2560 px.
В обычном блоке библиотеки я меняю то, что заложил разработчик блока: отступы, цвета, количество колонок, набор полей формы. В Zero Block структуру рисую сам и вешаю на неё любой код, свою анимацию, валидацию формы, запрос к внешнему сервису. Тильда рендерит то, что нарисовано в t.zero, а логика и стили внутри блока, это моя ответственность целиком, автоматики здесь нет.
Отдельный момент: Zero Block точно так же участвует в адаптиве, экспорте и публикации страницы, как и любой другой блок Тильды, просто содержимое внутри уникально для каждого проекта, а не берётся из типового набора настроек.
Из этого сразу вытекают и сильные стороны блока, и характер поломок: раз код мой, значит и чинить его тоже мне, штатной поддержкой со стороны Тильды такой блок не покрывается.
Что реально можно сделать в блоке T396
На практике в Zero Block закрываю задачи, которые не собрать из готовых блоков библиотеки:
- нестандартную верстку с точным позиционированием элементов, которую не получить из готовых секций
- анимации при скролле, параллакс и переходы без сторонних конструкторов лендингов
- кастомные формы со своей валидацией на JS, при этом отправка данных всё равно идёт через встроенный обработчик форм Тильды, то есть заявки так же попадают в CRM и на почту
- калькуляторы и виджеты, завязанные на внешний API: конвертер валют, расчёт налогов, проверку промокода по своим правилам
- вставку сторонних скриптов и библиотек напрямую в разметку блока, без правки кода всего проекта
Отдельно эксплуатирую Zero Block под нестандартные меню и шапки: бургер с анимацией, липкая навигация, многоуровневые выпадающие списки, то, что через обычные блоки шапки Тильды один в один не собрать.
Часть таких виджетов я довёл до отдельных продуктов: например, скрипт для расчёта налогов и НДС для Tilda или конвертер валют для Tilda, это по сути тот же Zero Block, только уже собранный и протестированный под конкретную задачу.
Где нулевой блок ограничен на практике
У Zero Block есть штатные возможности, но есть и рамки, о которых лучше знать до старта работ.
Блок не подтягивает обновления автоматически. Если в библиотеке Тильды выходит правка для похожего готового блока, в уже вставленный Zero Block она не попадает, зону нужно обновлять вручную через настройки блока, и то не любые изменения переносятся без конфликта с уже написанным кодом.
Копии блока живут отдельно друг от друга. Скопировал Zero Block на пять страниц, и при правке JS придётся вносить изменение в каждую копию отдельно, либо заранее выносить скрипт во внешний файл и подключать его ссылкой через код проекта.
SEO-разметка внутри блока держится на том, что я туда вписал руками: теги, атрибут alt у изображений, микроразметка. Тильда её не достраивает сама, потому что блок для неё, по сути, обычный HTML-контейнер.
Редактор t.zero тяжелее обычной панели настроек: на большом количестве слоёв и тяжёлых картинках холст в браузере подтормаживает, особенно при работе через слабый ноутбук или нестабильный интернет. Первую неделю с блоком у большинства разработчиков уходит на привыкание к логике сеток и слоёв, интерфейс своеобразный, и часть привычных сочетаний клавиш из Figma тут не работает.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Типичные поломки Zero Block и почему они повторяются
Разберу поломки, с которыми сталкиваюсь чаще всего на живых проектах, и что с ними делаю.
| Поломка | Причина | Решение |
|---|---|---|
| Второй экземпляр блока на странице перестаёт работать | Скрипт ищет элемент по document.getElementById, а id задвоился при копировании блока | Перехожу на querySelectorAll с data-атрибутами вместо жёстких id |
| После правки на десктопе слетает мобильная версия | Настройки по брейкпоинтам в t.zero не всегда наследуются при переносе элемента | После каждой правки прохожу вручную все пять версий экрана, от 1200 до 320 |
| Стили одного блока перетекают на соседние блоки страницы | Глобальный CSS завязан на теги, а не на класс контейнера блока | Вешаю все стили на уникальный родительский класс, а не на теги целиком |
| Страница стала заметно тяжелее | Одна и та же библиотека, например скрипт анимаций, подключена в нескольких копиях Zero Block по отдельности | Проверяю вкладку Network в браузере и оставляю одно подключение библиотеки в коде проекта |
Ещё один момент, который недооценивают: у Zero Block нет истории версий такого масштаба, как у обычных блоков, откат по шагам ограничен. Перед крупной правкой всегда копирую код блока в отдельный файл, чтобы было куда вернуться, если что-то пойдёт не так.
Zero Block в связке с доставкой, оплатой и уведомлениями
Часть виджетов на Zero Block я собираю не сами по себе, а как часть цепочки: заявка ушла через форму, дальше её нужно куда-то передать и на что-то среагировать.
Форма внутри Zero Block по-прежнему отправляется через встроенный обработчик форм Тильды, а значит доступен и штатный вебхук в настройках формы. На этот вебхук обычно вешаю сценарий в n8n: он раскладывает заявку по CRM, добавляет строку в таблицу и запускает уведомление. Для уведомлений менеджеру часто ставлю телеграм-бота на aiogram, он отдельный сервис, но именно он присылает быстрое сообщение о новой заявке, пока клиент ещё на сайте.
Оплату тоже можно подключить без выноса логики за пределы Тильды: в настройках платёжных систем есть готовая интеграция с Робокассой, и кнопка оплаты работает без единой строчки кода в Zero Block. Свой JS в блоке нужен, только если логика сложнее стандартной, например скидка зависит от суммы корзины, посчитанной на лету, или чек собирается по нестандартным правилам.
Со штатным подключением CDEK в Настройках сайта → Платёжные системы → Сервисы доставки справляется большинство проектов: стоимость считает сам перевозчик, а Тильде нужны идентификатор и секретный ключ из личного кабинета СДЭК. Понятия «зон доставки» у Тильды нет, свои варианты задаются по городу, через «Создать свой вариант доставки по адресу». Но если нужны свои тарифы, привязка к остаткам склада или объединение нескольких служб доставки в одном виджете, беру готовый скрипт зоны доставки для Tilda и дорабатываю логику под условия конкретного магазина.
Когда брать Zero Block, а когда обойтись обычным блоком
| Критерий | Обычный блок библиотеки | Zero Block |
|---|---|---|
| Способ редактирования | Панель настроек с готовыми параметрами | Отдельный редактор t.zero, верстка с нуля |
| Обновления от Тильды | Подтягиваются автоматически | Обновляются вручную через настройки зоны, не всегда без конфликтов |
| Кто отвечает за код после запуска | Тильда | Тот, кто писал блок |
| Когда уместен | Типовые секции: шапка, преимущества, отзывы, футер | Нестандартная анимация, калькулятор со своей логикой, виджет с внешним API |
Простая доработка уже существующего Zero Block, поправить логику, добавить поле, поменять анимацию, у меня стоит от 3 000 рублей. Блок с нуля под задачу и с интеграцией с CRM или эквайрингом, это уже комплексная доработка сайта на Tilda, от 40 000 рублей. Сайт на Тильде под ключ, включая нужные Zero Block элементы, беру от 30 000 рублей.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Zero Block замедляет загрузку сайта?
Сам механизм блока не тяжелее обычного, скорость проседает от кода внутри: неоптимизированных картинок, тяжёлых JS-библиотек и повторного подключения одной и той же библиотеки в нескольких копиях блока на одной странице. Проверяю это через вкладку Network в браузере до сдачи проекта.
Можно ли перенести макет из Figma в Zero Block один в один?
Верстка в Zero Block произвольная, поэтому визуально повторить макет получается почти всегда. Автоматический импорт у Тильды есть: «С помощью плагина Figma to Tilda можно переносить полноценные макеты и слои из Figma сразу в Zero Block в один клик». У плагина свои требования к макету: Frame шириной 1200 px, большой Frame надо разбить на несколько, вложенных групп не больше шести уровней. Поэтому разводку по брейкпоинтам и доводку после импорта я всё равно делаю руками.
Как защититься от поломки блока, если дизайн потом будет дорабатывать другой специалист?
Держу копию кода блока отдельно от Тильды, называю классы по единой схеме с префиксом проекта, чтобы не пересекаться с другими блоками на странице, и оставляю короткие комментарии в коде, что за что отвечает. Это не защищает от ошибок на сто процентов, но сильно упрощает разбор чужой правки.
Стоит ли собирать весь сайт на Тильде через Zero Block?
Нет смысла. Для типовых секций обычные блоки библиотеки быстрее в настройке и не требуют последующей поддержки кода. Zero Block ставлю точечно, там, где обычными блоками задачу не закрыть.