Zero Block в Tilda: вёрстка и Step-by-Step анимация

Zero Block — единственное место в Тильде, где элементы стоят там, где вы их поставили, а не там, где разрешил шаблон. Плата за свободу: адаптив собирается руками на пяти разрешениях, слои превращаются в кашу, страница тяжелеет. Ниже — как устроена сетка, в каком порядке делать адаптив, как работает Step-by-Step анимация и когда Zero Block открывать не стоит. Какие из современных приёмов вообще собираются на этом холсте, а какие требуют кастомной разработки, разобрано в обзоре трендов.

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

Библиотека Тильды — это несколько сотен готовых блоков: обложки, тексты, галереи, формы, тарифы, футеры. У каждого есть панель контента и панель настроек, а сама вёрстка и правила адаптива зашиты внутри. Сдвинуть заголовок на 30 пикселей влево нельзя, если такого параметра в блоке не предусмотрено.

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

Вывод простой: Zero Block нужен там, где макет действительно нестандартный. Всё остальное быстрее и надёжнее собирается готовыми блоками. Если вы заказываете сайт, спросите исполнителя, какие секции он планирует делать в Zero Block и почему. Ответ «весь сайт» чаще говорит о привычке, чем о задаче.

Сетка, контейнер и брейкпоинты

Базовое разрешение Zero Block — 1200 px. Это ширина рабочей области, в которой строится десктопный макет. Внутри включается сетка из 12 колонок с настраиваемым отступом. Если блоки текста и картинок начинаются и заканчиваются на границах колонок, макет выглядит аккуратнее, а адаптив собирается заметно быстрее.

У каждого элемента есть привязка по горизонтали — к левому краю, центру или правому краю — и по вертикали, к верху или низу артборда. Отдельно задаётся, к чему эта привязка считается: к контейнеру шириной 1200 px или к окну браузера. Фоновые полосы и фигуры, которые должны тянуться от края до края, привязывают к окну; контент — к контейнеру. Ошибка здесь даёт классику: на мониторе 27 дюймов кнопка уезжает в сторону от заголовка.

Настройки, заданные на 1200 px, наследуются вниз. Но как только вы поправили конкретный параметр на конкретном разрешении, он перестаёт подхватывать изменения сверху и дальше живёт своей жизнью. Это главная причина, по которой адаптив нельзя делать параллельно с десктопом.

Правило, которое экономит часы: пока десктопный макет не утверждён заказчиком, меньшие разрешения не трогают вообще.

Порядок работы с адаптивом

1. Доведите 1200 px до конца. Финальные тексты, финальные изображения, утверждённая структура. Правка десктопа после собранного адаптива обходится примерно вдвое дороже: часть изменений придётся повторять на каждом разрешении руками.
2. Проверьте привязки и слои. До адаптива, а не после. Элемент, который должен оставаться по центру, привяжите к центру контейнера, фон — к окну. Иначе каждое следующее разрешение вы будете чинить дважды.
3. Идите сверху вниз: 980, 640, 480, 320. Прыжки через разрешение приводят к тому, что промежуточный брейкпоинт остаётся с десктопными координатами и разъезжается.
4. На каждом разрешении начинайте с высоты артборда. Она задаётся отдельно для каждого брейкпоинта. Сначала высота сцены, потом крупные фигуры, затем текст и только потом иконки и подписи.
5. Настройте типографику отдельно. Заголовок в 64 px на 320 px превращается в четыре строки по два слова. Рабочий диапазон для мобильного заголовка — примерно 24-32 px, для основного текста — 15-17 px, для кнопки — не меньше 44 px по высоте.
6. Проверьте на живом устройстве. Превью показывает ширину, но не системные шрифты, поведение адресной строки браузера и тормоза на слабом телефоне.

У каждого элемента есть настройка скрытия на конкретном разрешении. Инструмент полезный: убрать декоративную графику на мобильном — нормальная практика. Но скрытый элемент остаётся в разметке и в сгенерированных стилях, поэтому вес кода не уменьшается. Прятать таким способом целые дубликаты секций — прямой путь к тяжёлой мобильной версии.

Слои, группировка и порядок элементов

В Zero Block есть панель слоёв — список всех элементов блока с их порядком наложения. Пока элементов десяток, без неё можно обойтись. После двадцати работа без слоёв превращается в угадывание, по какому именно прямоугольнику вы сейчас кликнули.

• Переименуйте элементы сразу. «Заголовок первого экрана», «Кнопка CTA», «Фон-круг жёлтый» вместо безымянных обозначений. При передаче проекта другому специалисту это экономит десятки минут.
• Фон вниз, интерактив вверх. Прозрачная фигура, случайно оказавшаяся поверх кнопки, перехватывает клики, и форма перестаёт открываться. Это одна из самых частых причин жалобы «кнопка не нажимается на телефоне».
• Группируйте то, что двигается вместе. Карточка услуги — это фон, иконка, заголовок и описание. В группе они переносятся одним движением и сохраняют взаимное расположение, что критично при адаптиве.
• Не плодите копии. Отдельная версия секции для мобильного плюс скрытая десктопная — это два макета, которые надо править синхронно, и двойной вес страницы.
• Один смысловой экран — один блок. Если элементов уже несколько десятков и блок тянется на три экрана, его стоит разделить.

Step-by-Step анимация: триггеры, шаги, скролл

Step-by-Step — встроенный в Zero Block конструктор пошаговой анимации. В отличие от простого появления, где вы выбираете готовый эффект из списка, здесь вы сами описываете последовательность состояний элемента.

Триггер

Триггер — событие, запускающее сценарий. Основные варианты: загрузка страницы, прокрутка, клик и наведение курсора. Для первого экрана обычно берут загрузку, для сторителлинга — прокрутку, для интерактивных карточек и раскрывающихся подсказок — клик или наведение. На тач-устройствах наведения нет, поэтому сценарий, построенный только на нём, для мобильных бесполезен.

Шаги

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

Привязка к прокрутке

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

Что проверить до публикации

• Перемещение, прозрачность и масштаб браузер отрисовывает дёшево. Размытие — самый тяжёлый эффект, на больших областях оно заметно роняет плавность даже на среднем телефоне.
• Одновременная анимация десятка объектов на мобильном почти всегда даёт рывки. Оставьте два-четыре движущихся элемента или отключите сценарий на малых разрешениях.
• Контент должен читаться, даже если анимация не отработала. Не держите единственный заголовок, телефон или кнопку заявки в нулевой прозрачности до срабатывания триггера.

Если сцена задумана сложная, а уверенности в сборке нет, дешевле привлечь специалиста по вёрстке Zero Block, чем осваивать таймлайн на боевом сайте накануне запуска рекламы.

Типичные ошибки новичков

• Вёрстка на глаз. Элементы, расставленные без сетки и без выравнивания, дают разъезд в один-два пикселя. Явной ошибки не видно, а страница читается как неряшливая.
• Адаптив параллельно с десктопом. Поправили на 480, вернулись на 1200, снова поправили — связь между разрешениями рвётся, и половина изменений не доезжает вниз.
• Текст картинкой. Заголовок, выгруженный из макета в PNG, не индексируется, не выделяется мышью, размывается на плотных экранах и весит в разы больше живого текста. При приёмке работы это отдельный пункт проверки — подробнее в чек-листе о том, как выбирать дизайнера по портфолио.
• Заголовки без тегов. У текстового элемента задаётся HTML-тег: H1, H2, H3 или обычный абзац. Если его не выставить, визуально это заголовок, а для поисковой системы просто текст. Что с этим делать, разобрано в материале про SEO-оптимизацию сайта на Тильде.
• Фиксированная высота под идеальный текст. Артборд не тянется по содержимому. Заказчик добавил одно предложение — и текст наехал на кнопку. Закладывайте запас или выносите длинные тексты в стандартный блок.
• Анимация на всём подряд. Когда движется каждый элемент, не движется ничего: внимание рассеивается, а страница начинает подтормаживать.
• Проверка только в превью. Публикация и открытие с реального телефона и ноутбука — обязательный шаг перед сдачей работы.

Влияние на скорость загрузки

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

1. Изображения. Обычно именно они дают основную часть веса страницы. Разумный ориентир для фотографии — 200-400 КБ, для фоновой обложки — до 500 КБ. Не грузите PNG там, где подойдёт JPG.
2. Количество Zero Block на странице. Пять-шесть нестандартных секций подряд работают заметно медленнее, чем один эффектный первый экран плюс типовые блоки ниже.
3. Шрифты. Два семейства и три-четыре начертания — разумный потолок. Каждое лишнее начертание это отдельный файл на загрузку.
4. Фоновое видео. На десктопе допустимо, на мобильном чаще вредно: трафик, нагрев, автовоспроизведение работает не везде.
5. Скрытые, но не удалённые элементы. Они остаются в разметке и стилях и незаметно копятся от правки к правке.

Практический порядок: первый экран в Zero Block, остальное по возможности на стандартных блоках, затем замер Core Web Vitals с оглядкой на время отрисовки контента и сдвиг макета. Тяжёлая скролл-сцена в середине длинной страницы — частая причина залипающей мобильной версии.

Когда Zero Block избыточен и кому поручить работу

Zero Block не нужен, если:

• макет типовой — обложка, три преимущества, отзывы, форма: всё это есть в библиотеке и работает из коробки;
• сайт будет регулярно править контент-менеджер без навыков вёрстки, потому что в Zero Block он рано или поздно что-нибудь сдвинет;
• сроки и бюджет ограничены: каждая нестандартная секция — это оплачиваемые часы ручного адаптива;
• задача — быстро проверить гипотезу: для теста оффера важнее скорость запуска, чем уникальность композиции;
• страница длинная и контентная — статья, каталог, база знаний: здесь выигрывают структура и скорость, а не композиция.

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

Если делать самому некогда, работу обычно разбивают на две роли: дизайнер собирает макет с учётом сетки Тильды, верстальщик переносит его в Zero Block и настраивает адаптив с анимацией. На fyxi есть обе: дизайнеры в Figma и универсалы, которые делают сайт на Тильде под ключ. Контакты одного специалиста стоят 500 рублей, пакет из пяти профилей — 2000 рублей, комиссии со сделки нет, вы договариваетесь напрямую. Профили, прошедшие ручную модерацию, отмечены в каталоге.

Перед выбором просите не картинки из портфолио, а живые ссылки и открывайте их с телефона. Вёрстка, которая не разъехалась на 320 px и не тормозит на скролле, говорит о квалификации больше любого описания.