[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f3s5JFgMKlGa4nrnRHPx_qQDmkXXRzIvw0wuvnY_fFYc":3,"blog-related":25},{"id":4,"slug":5,"title":6,"description":7,"category":8,"readTime":9,"author":10,"authorRole":11,"keywords":12,"content":20,"coverUrl":21,"publishDate":22,"updatedAt":23,"createdAt":24},"6035ff3b-5193-4cc8-bcb2-5e70602cffa0","zero-block-tilda-step-by-step-animation","Zero Block в Tilda: вёрстка и Step-by-Step анимация","Zero Block в Тильде: сетка и брейкпоинты, порядок сборки адаптива, слои, Step-by-Step анимация, ошибки новичков и влияние на скорость сайта.","Дизайн","10 мин","Екатерина Соколова","Lead UX\u002FUI & Step-by-Step Specialist",[13,14,15,16,17,18,19],"zero block тильда","пошаговая анимация tilda","как работать с zero block","верстка в zero block","step by step tilda","адаптив zero block","брейкпоинты тильда","\u003Cp>Zero Block — единственное место в Тильде, где элементы стоят там, где вы их поставили, а не там, где разрешил шаблон. Плата за свободу: адаптив собирается руками на пяти разрешениях, слои превращаются в кашу, страница тяжелеет. Ниже — как устроена сетка, в каком порядке делать адаптив, как работает Step-by-Step анимация и когда Zero Block открывать не стоит. Какие из современных приёмов вообще собираются на этом холсте, а какие требуют кастомной разработки, разобрано \u003Ca href=\"\u002Fblog\u002Ftrendy-veb-dizayna-2026-chto-nuzhno-znat-zakazchiku\">в обзоре трендов\u003C\u002Fa>.\u003C\u002Fp> \u003Ch2 id=\"chem-otlichaetsya\">Чем Zero Block отличается от стандартных блоков\u003C\u002Fh2> \u003Cp>Библиотека Тильды — это несколько сотен готовых блоков: обложки, тексты, галереи, формы, тарифы, футеры. У каждого есть панель контента и панель настроек, а сама вёрстка и правила адаптива зашиты внутри. Сдвинуть заголовок на 30 пикселей влево нельзя, если такого параметра в блоке не предусмотрено.\u003C\u002Fp> \u003Cp>Zero Block — пустой холст с абсолютным позиционированием. Вы добавляете элементы: текст, фигуру, изображение, кнопку, форму, видео, вставку HTML — и для каждого задаёте координаты, размеры, слой, поведение при наведении и анимацию. Редактор открывается поверх обычного и живёт по своим правилам: отдельное сохранение и своя история отмены действий.\u003C\u002Fp> \u003Ctable> \u003Cthead> \u003Ctr>\u003Cth>Критерий\u003C\u002Fth>\u003Cth>Стандартный блок\u003C\u002Fth>\u003Cth>Zero Block\u003C\u002Fth>\u003C\u002Ftr> \u003C\u002Fthead> \u003Ctbody> \u003Ctr>\u003Ctd>Свобода макета\u003C\u002Ftd>\u003Ctd>Ограничена настройками шаблона\u003C\u002Ftd>\u003Ctd>Полная, вплоть до пикселя\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>Адаптив\u003C\u002Ftd>\u003Ctd>Работает из коробки\u003C\u002Ftd>\u003Ctd>Собирается вручную на каждом разрешении\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>Время на секцию\u003C\u002Ftd>\u003Ctd>Минуты\u003C\u002Ftd>\u003Ctd>От часа до нескольких часов\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>Правки контент-менеджером\u003C\u002Ftd>\u003Ctd>Практически безопасны\u003C\u002Ftd>\u003Ctd>Легко сломать композицию\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>Вес страницы\u003C\u002Ftd>\u003Ctd>Минимальный набор стилей\u003C\u002Ftd>\u003Ctd>Плюс скрипты блока и анимаций\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>Риск ошибок без опыта\u003C\u002Ftd>\u003Ctd>Низкий\u003C\u002Ftd>\u003Ctd>Высокий\u003C\u002Ftd>\u003C\u002Ftr> \u003C\u002Ftbody> \u003C\u002Ftable> \u003Cp>Вывод простой: Zero Block нужен там, где макет действительно нестандартный. Всё остальное быстрее и надёжнее собирается готовыми блоками. Если вы заказываете сайт, спросите исполнителя, какие секции он планирует делать в Zero Block и почему. Ответ «весь сайт» чаще говорит о привычке, чем о задаче.\u003C\u002Fp> \u003Ch2 id=\"setka-i-breykpointy\">Сетка, контейнер и брейкпоинты\u003C\u002Fh2> \u003Cp>Базовое разрешение Zero Block — \u003Cspan class=\"code-inline\">1200 px\u003C\u002Fspan>. Это ширина рабочей области, в которой строится десктопный макет. Внутри включается сетка из 12 колонок с настраиваемым отступом. Если блоки текста и картинок начинаются и заканчиваются на границах колонок, макет выглядит аккуратнее, а адаптив собирается заметно быстрее.\u003C\u002Fp> \u003Cp>У каждого элемента есть привязка по горизонтали — к левому краю, центру или правому краю — и по вертикали, к верху или низу артборда. Отдельно задаётся, к чему эта привязка считается: к контейнеру шириной 1200 px или к окну браузера. Фоновые полосы и фигуры, которые должны тянуться от края до края, привязывают к окну; контент — к контейнеру. Ошибка здесь даёт классику: на мониторе 27 дюймов кнопка уезжает в сторону от заголовка.\u003C\u002Fp> \u003Ctable> \u003Cthead> \u003Ctr>\u003Cth>Разрешение\u003C\u002Fth>\u003Cth>Устройства\u003C\u002Fth>\u003Cth>На что смотреть в первую очередь\u003C\u002Fth>\u003C\u002Ftr> \u003C\u002Fthead> \u003Ctbody> \u003Ctr>\u003Ctd>1200 px\u003C\u002Ftd>\u003Ctd>Десктоп\u003C\u002Ftd>\u003Ctd>Базовый макет, от него наследуется всё остальное\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>980 px\u003C\u002Ftd>\u003Ctd>Ноутбуки, планшет в альбомной ориентации\u003C\u002Ftd>\u003Ctd>Ширина колонок, переносы длинных заголовков\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>640 px\u003C\u002Ftd>\u003Ctd>Планшет портретом, крупные телефоны\u003C\u002Ftd>\u003Ctd>Перестроение в одну колонку\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>480 px\u003C\u002Ftd>\u003Ctd>Основная масса телефонов\u003C\u002Ftd>\u003Ctd>Кегль текста, высота артборда, размер кнопок\u003C\u002Ftd>\u003C\u002Ftr> \u003Ctr>\u003Ctd>320 px\u003C\u002Ftd>\u003Ctd>Узкие и старые экраны\u003C\u002Ftd>\u003Ctd>Ничего не должно вылезать за край и обрезаться\u003C\u002Ftd>\u003C\u002Ftr> \u003C\u002Ftbody> \u003C\u002Ftable> \u003Cp>Настройки, заданные на 1200 px, наследуются вниз. Но как только вы поправили конкретный параметр на конкретном разрешении, он перестаёт подхватывать изменения сверху и дальше живёт своей жизнью. Это главная причина, по которой адаптив нельзя делать параллельно с десктопом.\u003C\u002Fp> \u003Cblockquote>Правило, которое экономит часы: пока десктопный макет не утверждён заказчиком, меньшие разрешения не трогают вообще.\u003C\u002Fblockquote> \u003Ch2 id=\"poryadok-raboty-s-adaptivom\">Порядок работы с адаптивом\u003C\u002Fh2> \u003Col> \u003Cli>\u003Cstrong>Доведите 1200 px до конца.\u003C\u002Fstrong> Финальные тексты, финальные изображения, утверждённая структура. Правка десктопа после собранного адаптива обходится примерно вдвое дороже: часть изменений придётся повторять на каждом разрешении руками.\u003C\u002Fli> \u003Cli>\u003Cstrong>Проверьте привязки и слои.\u003C\u002Fstrong> До адаптива, а не после. Элемент, который должен оставаться по центру, привяжите к центру контейнера, фон — к окну. Иначе каждое следующее разрешение вы будете чинить дважды.\u003C\u002Fli> \u003Cli>\u003Cstrong>Идите сверху вниз: 980, 640, 480, 320.\u003C\u002Fstrong> Прыжки через разрешение приводят к тому, что промежуточный брейкпоинт остаётся с десктопными координатами и разъезжается.\u003C\u002Fli> \u003Cli>\u003Cstrong>На каждом разрешении начинайте с высоты артборда.\u003C\u002Fstrong> Она задаётся отдельно для каждого брейкпоинта. Сначала высота сцены, потом крупные фигуры, затем текст и только потом иконки и подписи.\u003C\u002Fli> \u003Cli>\u003Cstrong>Настройте типографику отдельно.\u003C\u002Fstrong> Заголовок в 64 px на 320 px превращается в четыре строки по два слова. Рабочий диапазон для мобильного заголовка — примерно 24-32 px, для основного текста — 15-17 px, для кнопки — не меньше 44 px по высоте.\u003C\u002Fli> \u003Cli>\u003Cstrong>Проверьте на живом устройстве.\u003C\u002Fstrong> Превью показывает ширину, но не системные шрифты, поведение адресной строки браузера и тормоза на слабом телефоне.\u003C\u002Fli> \u003C\u002Fol> \u003Cp>У каждого элемента есть настройка скрытия на конкретном разрешении. Инструмент полезный: убрать декоративную графику на мобильном — нормальная практика. Но скрытый элемент остаётся в разметке и в сгенерированных стилях, поэтому вес кода не уменьшается. Прятать таким способом целые дубликаты секций — прямой путь к тяжёлой мобильной версии.\u003C\u002Fp> \u003Ch2 id=\"sloi-i-gruppirovka\">Слои, группировка и порядок элементов\u003C\u002Fh2> \u003Cp>В Zero Block есть панель слоёв — список всех элементов блока с их порядком наложения. Пока элементов десяток, без неё можно обойтись. После двадцати работа без слоёв превращается в угадывание, по какому именно прямоугольнику вы сейчас кликнули.\u003C\u002Fp> \u003Cul> \u003Cli>\u003Cstrong>Переименуйте элементы сразу.\u003C\u002Fstrong> «Заголовок первого экрана», «Кнопка CTA», «Фон-круг жёлтый» вместо безымянных обозначений. При передаче проекта другому специалисту это экономит десятки минут.\u003C\u002Fli> \u003Cli>\u003Cstrong>Фон вниз, интерактив вверх.\u003C\u002Fstrong> Прозрачная фигура, случайно оказавшаяся поверх кнопки, перехватывает клики, и форма перестаёт открываться. Это одна из самых частых причин жалобы «кнопка не нажимается на телефоне».\u003C\u002Fli> \u003Cli>\u003Cstrong>Группируйте то, что двигается вместе.\u003C\u002Fstrong> Карточка услуги — это фон, иконка, заголовок и описание. В группе они переносятся одним движением и сохраняют взаимное расположение, что критично при адаптиве.\u003C\u002Fli> \u003Cli>\u003Cstrong>Не плодите копии.\u003C\u002Fstrong> Отдельная версия секции для мобильного плюс скрытая десктопная — это два макета, которые надо править синхронно, и двойной вес страницы.\u003C\u002Fli> \u003Cli>\u003Cstrong>Один смысловой экран — один блок.\u003C\u002Fstrong> Если элементов уже несколько десятков и блок тянется на три экрана, его стоит разделить.\u003C\u002Fli> \u003C\u002Ful> \u003Ch2 id=\"step-by-step-animaciya\">Step-by-Step анимация: триггеры, шаги, скролл\u003C\u002Fh2> \u003Cp>Step-by-Step — встроенный в Zero Block конструктор пошаговой анимации. В отличие от простого появления, где вы выбираете готовый эффект из списка, здесь вы сами описываете последовательность состояний элемента.\u003C\u002Fp> \u003Ch3>Триггер\u003C\u002Fh3> \u003Cp>Триггер — событие, запускающее сценарий. Основные варианты: загрузка страницы, прокрутка, клик и наведение курсора. Для первого экрана обычно берут загрузку, для сторителлинга — прокрутку, для интерактивных карточек и раскрывающихся подсказок — клик или наведение. На тач-устройствах наведения нет, поэтому сценарий, построенный только на нём, для мобильных бесполезен.\u003C\u002Fp> \u003Ch3>Шаги\u003C\u002Fh3> \u003Cp>Сценарий состоит из шагов. У каждого есть точка старта, длительность и набор свойств, к которым элемент должен прийти: смещение по горизонтали и вертикали, прозрачность, масштаб, поворот, размытие. Промежуточные кадры между шагами Тильда рассчитывает сама. Три-пять шагов на элемент — разумный потолок: дальше сценарий перестаёт читаться зрителем и становится хрупким при любой правке макета.\u003C\u002Fp> \u003Ch3>Привязка к прокрутке\u003C\u002Fh3> \u003Cp>При триггере прокрутки доступна фиксация блока: он остаётся на экране, пока пользователь крутит страницу, а анимация проигрывается пропорционально прокрутке. Так делают сцены, где текст сменяет текст или объект собирается из частей. Плата — длина страницы: пока сцена не доиграна, посетитель не двигается дальше. Держите такие сцены редкими: одна-две на страницу, каждая не длиннее двух экранов прокрутки.\u003C\u002Fp> \u003Ch3>Что проверить до публикации\u003C\u002Fh3> \u003Cul> \u003Cli>Перемещение, прозрачность и масштаб браузер отрисовывает дёшево. Размытие — самый тяжёлый эффект, на больших областях оно заметно роняет плавность даже на среднем телефоне.\u003C\u002Fli> \u003Cli>Одновременная анимация десятка объектов на мобильном почти всегда даёт рывки. Оставьте два-четыре движущихся элемента или отключите сценарий на малых разрешениях.\u003C\u002Fli> \u003Cli>Контент должен читаться, даже если анимация не отработала. Не держите единственный заголовок, телефон или кнопку заявки в нулевой прозрачности до срабатывания триггера.\u003C\u002Fli> \u003C\u002Ful> \u003Cp>Если сцена задумана сложная, а уверенности в сборке нет, дешевле привлечь специалиста по \u003Ca href=\"\u002Fhire\u002Fzero-block\">вёрстке Zero Block\u003C\u002Fa>, чем осваивать таймлайн на боевом сайте накануне запуска рекламы.\u003C\u002Fp> \u003Ch2 id=\"tipichnye-oshibki-novichkov\">Типичные ошибки новичков\u003C\u002Fh2> \u003Cul> \u003Cli>\u003Cstrong>Вёрстка на глаз.\u003C\u002Fstrong> Элементы, расставленные без сетки и без выравнивания, дают разъезд в один-два пикселя. Явной ошибки не видно, а страница читается как неряшливая.\u003C\u002Fli> \u003Cli>\u003Cstrong>Адаптив параллельно с десктопом.\u003C\u002Fstrong> Поправили на 480, вернулись на 1200, снова поправили — связь между разрешениями рвётся, и половина изменений не доезжает вниз.\u003C\u002Fli> \u003Cli>\u003Cstrong>Текст картинкой.\u003C\u002Fstrong> Заголовок, выгруженный из макета в PNG, не индексируется, не выделяется мышью, размывается на плотных экранах и весит в разы больше живого текста. При приёмке работы это отдельный пункт проверки — подробнее в чек-листе о том, \u003Ca href=\"\u002Fblog\u002Fgde-nayti-dizaynera-tilda-chek-list-portfolio\">как выбирать дизайнера по портфолио\u003C\u002Fa>.\u003C\u002Fli> \u003Cli>\u003Cstrong>Заголовки без тегов.\u003C\u002Fstrong> У текстового элемента задаётся HTML-тег: H1, H2, H3 или обычный абзац. Если его не выставить, визуально это заголовок, а для поисковой системы просто текст. Что с этим делать, разобрано в материале про \u003Ca href=\"\u002Fblog\u002Fseo-optimizaciya-sayta-na-tilda-yandex-google\">SEO-оптимизацию сайта на Тильде\u003C\u002Fa>.\u003C\u002Fli> \u003Cli>\u003Cstrong>Фиксированная высота под идеальный текст.\u003C\u002Fstrong> Артборд не тянется по содержимому. Заказчик добавил одно предложение — и текст наехал на кнопку. Закладывайте запас или выносите длинные тексты в стандартный блок.\u003C\u002Fli> \u003Cli>\u003Cstrong>Анимация на всём подряд.\u003C\u002Fstrong> Когда движется каждый элемент, не движется ничего: внимание рассеивается, а страница начинает подтормаживать.\u003C\u002Fli> \u003Cli>\u003Cstrong>Проверка только в превью.\u003C\u002Fstrong> Публикация и открытие с реального телефона и ноутбука — обязательный шаг перед сдачей работы.\u003C\u002Fli> \u003C\u002Ful> \u003Ch2 id=\"skorost-zagruzki\">Влияние на скорость загрузки\u003C\u002Fh2> \u003Cp>Zero Block не бесплатен для страницы. Тильда подключает к нему дополнительный скрипт, а пошаговая анимация тянет за собой ещё один. Стили генерируются под каждое проработанное разрешение, поэтому блок с пятью настроенными брейкпоинтами весит ощутимо больше стандартного с тем же содержимым.\u003C\u002Fp> \u003Col> \u003Cli>\u003Cstrong>Изображения.\u003C\u002Fstrong> Обычно именно они дают основную часть веса страницы. Разумный ориентир для фотографии — 200-400 КБ, для фоновой обложки — до 500 КБ. Не грузите PNG там, где подойдёт JPG.\u003C\u002Fli> \u003Cli>\u003Cstrong>Количество Zero Block на странице.\u003C\u002Fstrong> Пять-шесть нестандартных секций подряд работают заметно медленнее, чем один эффектный первый экран плюс типовые блоки ниже.\u003C\u002Fli> \u003Cli>\u003Cstrong>Шрифты.\u003C\u002Fstrong> Два семейства и три-четыре начертания — разумный потолок. Каждое лишнее начертание это отдельный файл на загрузку.\u003C\u002Fli> \u003Cli>\u003Cstrong>Фоновое видео.\u003C\u002Fstrong> На десктопе допустимо, на мобильном чаще вредно: трафик, нагрев, автовоспроизведение работает не везде.\u003C\u002Fli> \u003Cli>\u003Cstrong>Скрытые, но не удалённые элементы.\u003C\u002Fstrong> Они остаются в разметке и стилях и незаметно копятся от правки к правке.\u003C\u002Fli> \u003C\u002Fol> \u003Cp>Практический порядок: первый экран в Zero Block, остальное по возможности на стандартных блоках, затем замер Core Web Vitals с оглядкой на время отрисовки контента и сдвиг макета. Тяжёлая скролл-сцена в середине длинной страницы — частая причина залипающей мобильной версии.\u003C\u002Fp> \u003Ch2 id=\"kogda-izbytochen-i-komu-poruchit\">Когда Zero Block избыточен и кому поручить работу\u003C\u002Fh2> \u003Cp>Zero Block не нужен, если:\u003C\u002Fp> \u003Cul> \u003Cli>макет типовой — обложка, три преимущества, отзывы, форма: всё это есть в библиотеке и работает из коробки;\u003C\u002Fli> \u003Cli>сайт будет регулярно править контент-менеджер без навыков вёрстки, потому что в Zero Block он рано или поздно что-нибудь сдвинет;\u003C\u002Fli> \u003Cli>сроки и бюджет ограничены: каждая нестандартная секция — это оплачиваемые часы ручного адаптива;\u003C\u002Fli> \u003Cli>задача — быстро проверить гипотезу: для теста оффера важнее скорость запуска, чем уникальность композиции;\u003C\u002Fli> \u003Cli>страница длинная и контентная — статья, каталог, база знаний: здесь выигрывают структура и скорость, а не композиция.\u003C\u002Fli> \u003C\u002Ful> \u003Cp>Для большинства проектов оптимален гибрид: первый экран и один-два ключевых смысловых блока в Zero Block, остальное на стандартных. Так вы получаете узнаваемый дизайн и сохраняете скорость правок. Ориентиры по бюджету на такую работу разобраны в материале о \u003Ca href=\"\u002Fblog\u002Fzakazat-sayt-na-tilda-cena-stoimost\">стоимости сайта на Тильде\u003C\u002Fa>.\u003C\u002Fp> \u003Cp>Если делать самому некогда, работу обычно разбивают на две роли: дизайнер собирает макет с учётом сетки Тильды, верстальщик переносит его в Zero Block и настраивает адаптив с анимацией. На fyxi есть обе: \u003Ca href=\"\u002Fhire\u002Ffigma\">дизайнеры в Figma\u003C\u002Fa> и универсалы, которые делают \u003Ca href=\"\u002Fhire\u002Ftilda\">сайт на Тильде под ключ\u003C\u002Fa>. Контакты одного специалиста стоят 500 рублей, пакет из пяти профилей — 2000 рублей, комиссии со сделки нет, вы договариваетесь напрямую. Профили, прошедшие ручную модерацию, отмечены в \u003Ca href=\"\u002F\">каталоге\u003C\u002Fa>.\u003C\u002Fp> \u003Cp>Перед выбором просите не картинки из портфолио, а живые ссылки и открывайте их с телефона. Вёрстка, которая не разъехалась на 320 px и не тормозит на скролле, говорит о квалификации больше любого описания.\u003C\u002Fp>","\u002Fblog\u002Fzero-block-tilda-step-by-step-animation.jpg","2026-07-21T10:00:00.000Z","2026-07-26T22:02:08.812Z","2026-07-26T09:10:12.197Z",[26,29,33,38,42,46,50,51],{"slug":27,"title":28,"category":8,"readTime":9},"trendy-veb-dizayna-2026-chto-nuzhno-znat-zakazchiku","Тренды веб-дизайна 2026: что внедрять заказчику сайта",{"slug":30,"title":31,"category":32,"readTime":9},"voronka-prodazh-na-tilda-ot-lendinga-do-crm","Воронка продаж на Tilda: от лендинга до CRM и аналитики","Маркетинг",{"slug":34,"title":35,"category":36,"readTime":37},"tilda-vs-kastomnaya-razrabotka-chto-vybrat-biznesu-2026","Tilda или разработка с нуля: что выбрать бизнесу","Технологии","9 мин",{"slug":39,"title":40,"category":41,"readTime":37},"gde-nayti-dizaynera-tilda-chek-list-portfolio","Где найти дизайнера Tilda: чек-лист по портфолио","Маркетплейс",{"slug":43,"title":44,"category":45,"readTime":9},"internet-magazin-na-tilda-yookassa-integraciya","Интернет-магазин на Tilda: каталог, ЮKassa и 54-ФЗ","E-commerce",{"slug":47,"title":48,"category":49,"readTime":9},"seo-optimizaciya-sayta-na-tilda-yandex-google","SEO-оптимизация сайта на Tilda: чек-лист под Яндекс","SEO & Продвижение",{"slug":5,"title":6,"category":8,"readTime":9},{"slug":52,"title":53,"category":54,"readTime":9},"zakazat-sayt-na-tilda-cena-stoimost","Заказать сайт на Тильде: цена и разбор сметы 2026","Разработка"]