Zero Block в Tilda: как делать свои блоки и анимацию

Что такое Zero Block и когда он нужен

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

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

Артборд и контейнеры

Редактор открывается кнопкой «Редактировать блок». Основа — артборд, область блока. В его настройках задаются высота, фон, отступы и поведение при разной ширине окна.

У каждого элемента есть контейнер, относительно которого он позиционируется:

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

Позицию можно задать относительно левого, правого края или центра, а единицы — в пикселях или процентах. Для крупного декоративного фона удобнее проценты, для текста — пиксели и привязка к сетке.

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

Адаптивность: брейкпоинты

Zero Block хранит раскладку для нескольких разрешений: десктопная ширина и меньшие — для планшетов и телефонов, вплоть до 320 px. Переключатель разрешений находится в верхней панели редактора.

Как работает наследование:

1. Сначала собирайте десктоп.
2. Переходите на меньшее разрешение: элементы наследуют настройки с большего.
3. Изменения на меньшем разрешении не затрагивают большие.
4. Лишнее на конкретном экране скрывайте, а не удаляйте — удаление уберёт элемент везде.

Чек-лист для каждого брейкпоинта:

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

Анимация: базовая и пошаговая

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

Пошаговая анимация — последовательность шагов, в каждом из которых меняются положение, прозрачность, масштаб, поворот. Запускается триггером:

• при появлении блока на экране;
• при прокрутке — анимация привязана к скроллу;
• при наведении курсора;
• по клику.

Порядок работы:

1. Выберите элемент и включите пошаговую анимацию.
2. Задайте триггер.
3. Добавьте шаги: для каждого — длительность и изменяемые свойства.
4. При необходимости включите повтор.
5. Проверьте результат в предпросмотре, затем на опубликованной странице.

Советы по анимации:

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

Ошибки, которые ломают мобильную версию

• Собрали только десктоп. На маленьких экранах элементы наезжают друг на друга или уходят за край.
• Текст картинкой. Его не видят поисковики, он размывается и не масштабируется. Используйте текстовые элементы.
• Фиксированная высота текстового блока. Если шрифт подгрузится с другой метрикой или текст станет длиннее, он перекроет соседей.
• Декор в Window container без проверки. На узком экране он может закрыть контент.
• Тяжёлые изображения. Сжимайте картинки и не загружайте исходники в несколько мегабайт.
• Слишком много элементов в одном блоке. Такой блок тяжело поддерживать; лучше разбить на несколько Zero Block.
• Анимация при прокрутке на длинном блоке может дёргаться на слабых телефонах — упростите её для мобильных разрешений.