Настройка зеро-блока в Тильде: когда он нужен и где ломает мобильную версию

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

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

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

Zero Block работает иначе. Это чистый холст с сеткой на 2, 4, 6, 8 или 12 колонок, где каждый элемент, текст, картинка, кнопка, видео, ставится вручную и позиционируется абсолютно или через отступы. Можно наложить элементы друг на друга, подключить собственные шрифты через загрузку файлов, задать точные пиксельные размеры под макет дизайнера. Расплата за эту гибкость в том, что адаптив под планшет и телефон Тильда не считает автоматически: под каждый брейкпоинт элементы нужно расставлять заново, иначе на маленьком экране верстка просто ломается.

Когда зеро-блок в Тильде действительно нужен

На практике беру зеро-блок для конкретных задач, а не по умолчанию:

• сложные посадочные экраны, где дизайн не укладывается в сетку из готовых пресетов и требует точного повторения макета из Figma;
• наложение элементов, параллакс-эффекты, анимации при скролле, декоративные фигуры поверх фотографий;
• нестандартные формы с собственной логикой, например калькулятор доставки СДЭК или виджет оплаты T‑Bank, встроенный в произвольное место макета;
• случаи, когда заказчик уже утвердил у дизайнера пиксельную верстку и готов платить за точность, а не за скорость сборки.

Если макет укладывается в стандартную сетку хотя бы на 80%, зеро-блок обычно не нужен: проще собрать страницу из готовых блоков и точечно доработать нужные элементы CSS-стилями. Такие правки я закрываю в рамках услуг по разработке и доработке сайтов, и это почти всегда быстрее и дешевле полной верстки с нуля.

Настройка сетки и брейкпоинтов зеро-блока для адаптива

Zero Block переключает верстку на четырёх основных брейкпоинтах: около 1200 px для десктопа, 960 px для планшета в альбомной ориентации, 720 px для планшета в портретной и 480 px для телефона. На каждом из них редактор позволяет заново расставить позиции, размеры и видимость элементов, но по умолчанию ничего не наследуется автоматически, кроме грубого масштабирования.

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

Для точечных проблем я обычно добавляю кастомный CSS по конкретному data-elem-id элемента, чтобы не трогать вёрстку на десктопе:

@media screen and (max-width: 480px) {
  .t396__elem[data-elem-id="123456789"] {
    position: static !important;
    width: 100% !important;
    margin-top: 20px !important;
  }
}

Id элемента смотрю через инспектор браузера или в самом редакторе Тильды при клике на элемент зеро-блока. Такой точечный фикс держит десктопную версию нетронутой и решает конкретную поломку на мобильном без переверстки всего блока.

Из-за чего зеро-блок ломает мобильную версию

По моей практике поломки повторяются из проекта в проект, и почти всегда причина одна из пяти:

• абсолютное позиционирование, которое не перенесли вручную на мобильный брейкпоинт, из-за чего элемент остаётся в координатах десктопа и вылезает за экран;
• кастомные шрифты, подключённые через собственный @font-face, не подгружаются вовремя на мобильном при медленном соединении, и текст скачет по ширине;
• наложение через отрицательные margin и z‑index, которое на маленьком экране превращается в текст под картинкой или кнопку под шапкой;
• видеофон и параллакс-эффекты, которые не отключили для мобильных, из-за чего страница долго грузится и проседает по скорости;
• формы с калькулятором доставки или виджетом эквайринга, у которых поля ввода не подстроены под узкий экран и обрезаются по краю.

Отдельно стоит частая ошибка с шрифтами: если в зеро-блоке используется нестандартный шрифт с большим количеством начертаний, файлы могут весить по 100-200 килобайт каждое, и на мобильном при 3G или нестабильном Wi-Fi это добавляет секунду-две к отрисовке текста.

Как проверить и починить мобильную адаптацию зеро-блока

Стандартный чек-лист перед публикацией страницы с зеро-блоком:

• пройти по всем четырём брейкпоинтам в редакторе Тильды и вручную поправить каждый элемент, не полагаясь только на автоматическое масштабирование;
• проверить страницу не только в превью Тильды, но и на реальном телефоне: Safari на iOS иначе рендерит тени, обводки и загрузку шрифтов, чем десктопный Chrome;
• прогнать страницу через PageSpeed Insights отдельно для мобильной версии, зеро-блок с тяжёлыми PNG и кастомными шрифтами легко проседает до 40-50 баллов;
• проверить формы и виджеты на всех брейкпоинтах отдельно, особенно если внутри блока стоит интеграция с СДЭК или эквайрингом.

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

Zero Block или обычные блоки Тильды: что выбрать

На практике собираю страницу из обычных блоков там, где дизайн не требует точности, а зеро-блок оставляю под hero-экран или один-два акцентных раздела, где визуал критичен для конверсии.

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

Зеро-блок тормозит мобильную версию, что делать в первую очередь?

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

Можно ли ставить зеро-блок вперемешку с обычными блоками Тильды на одной странице?

Да, это обычная практика. Беру зеро-блок для hero-экрана или акцентного раздела, где важна точность макета, а остальную страницу собираю из стандартных блоков: так адаптив под мобильные работает предсказуемо, а верстка не растягивается по срокам.

Сколько стоит настройка зеро-блока под сложный дизайн?

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

Как проверить адаптацию зеро-блока до публикации сайта?

Переключать ширину экрана прямо в редакторе Тильды по каждому из четырёх брейкпоинтов, а не просто сужать окно браузера, потом обязательно открыть страницу на реальном iPhone и Android. Дополнительно стоит прогнать мобильную версию через PageSpeed Insights и проверить, что формы и виджеты отправляют данные корректно на всех размерах экрана.