Меню в Zero Block на Тильде. Что умеет редактор без кода

Раньше нормальное меню в Zero Block делалось только через JavaScript и HTML. Теперь нет. Тильда за последние год-два добавила столько инструментов, что большинство задач закрывается прямо в редакторе. Разбираю по-честному: что реально работает без кода, что потребует минимального вмешательства, а что всё ещё лучше делать иначе.
Почему вообще делать меню в Zero Block, а не стандартным блоком?
Стандартные блоки меню в Тильде (серия ME) хорошие. Они быстро настраиваются, адаптивны и закрывают большинство задач. Но у них есть потолок: фиксированный набор вариантов компоновки, ограниченная типографика, невозможность сделать нестандартную геометрию или анимацию.
Zero Block нужен, когда вы хотите:
  • Меню с уникальным дизайном, не из шаблона, а под проект
  • Полноэкранное меню-попап (как у агентств, студий, дизайнеров)
  • Меню с анимированными элементами, ховеры, переходы, подчёркивания
  • Нестандартную компоновку: логотип по центру, пункты по бокам или вертикальное боковое меню
  • Точный контроль адаптивности. Не «примерно ок на мобильном», а пиксель-перфект на каждом брейкпоинте
Что теперь можно без кода. Главные изменения в 2025
Auto Layout — это изменило всё
Самое важное обновление Zero Block последних лет. Auto Layout — это флексбокс внутри редактора, управляемый визуально. Вы группируете элементы и задаёте:

  • Направление: горизонтально или вертикально
  • Отступы между элементами (gap)
  • Padding внутри группы
  • Выравнивание: по центру, по краям, space-between

Для меню это значит: вы буквально берёте логотип + пункты меню + кнопку, группируете их, ставите Auto Layout → горизонталь → space-between → и меню само распределяет элементы равномерно. Никакого кода, никакого позиционирования вручную. При изменении контента (добавили пункт меню), Auto Layout пересчитывает расположение сам.
Фиксированное меню при скролле теперь нативно
Раньше зафиксировать Zero Block при прокрутке страницы можно было только через JavaScript. Сейчас в настройках блока есть параметр Behavior → Fixed, и он просто работает. Блок прилипает к верху (или другому краю) и остаётся там при скролле.
Настройка:

  1. Открыть настройки блока (шестерёнка)
  2. Поведение → Fixed
  3. Привязка → Window Top

Всё. Без кода.
Попап-меню через блок T1093
Это официальное решение Тильды для бургер-меню и полноэкранных навигаций. Блок T1093 «Popup: Zero Block в попапе» находится в категории «Другое». Как работает схема:

  1. Основное меню — Zero Block с логотипом и иконкой бургера (три полоски)
  2. Бургер-иконка получает ссылку #menu (или любой ID попапа)
  3. T1093 — это и есть тот самый попап: вы рисуете в нём полноэкранное меню, крестик закрытия
  4. Крестик получает ссылку #close
  5. Тильда сама обрабатывает открытие/закрытие
  6. Анимация появления попапа настраивается в параметрах блока T1093 без кода.
Новые настройки кнопок в Zero Block (2025)
Тильда обновила работу с кнопками внутри Zero Block:

  • Fit — управляет тем, как текст ведёт себя внутри кнопки. Можно зафиксировать ширину кнопки или дать ей растягиваться по тексту
  • Flashing — встроенный эффект мигания/пульсации для кнопки-призыва к действию
  • Быстрая типографика — зажать Cmd/Ctrl + клик на текст → сразу открывается меню шрифтов, не нужно лезть в настройки

Для кнопок в меню (например, CTA-кнопка «Заказать» рядом с пунктами навигации) это даёт гибкость без единой строки кода.
Иконки без поиска на стоках
В Zero Block теперь встроена библиотека The Noun Project и Tilda Icons. Иконка бургера, крестика, стрелки, соцсетей — всё ищется и вставляется прямо внутри редактора. Цвет, размер, толщина линий — меняются там же.
Брейкпоинты под контроль
Адаптивность меню — исторически боль Zero Block. Сейчас добавили кастомные брейкпоинты: можно задать свои контрольные точки (не только стандартные 1200/960/640/320), а ненужные удалить. Для меню это важно. Можно точно настроить момент, когда бургер сменяет горизонтальное меню.
Пошаговая логика сборки меню в Zero Block
Вариант 1: Простое фиксированное меню без попапа
  1. Добавить Zero Block в начало страницы
  2. Нарисовать логотип (SVG или текст) + пункты навигации (текстовые элементы со ссылками) + CTA-кнопку
  3. Выделить всё → сгруппировать → Auto Layout → горизонталь → space-between
  4. Настройки блока → Behavior: Fixed → привязка к верху окна
  5. Настроить адаптив: на мобильном скрыть пункты меню, показать бургер-иконку
Вариант 2: Бургер-меню с полноэкранным попапом
  1. Zero Block — основная шапка: логотип + бургер-иконка
  2. Иконке бургера назначить ссылку на ID попапа (#menu)
  3. Добавить блок T1093 из категории «Другое»
  4. Внутри T1093 нарисовать полноэкранное меню: пункты, крестик, возможно дополнительные элементы (соцсети, контакты)
  5. Крестику назначить ссылку #close
  6. В настройках T1093 выбрать анимацию появления
Итог
Zero Block в 2025 году, это уже не «страшный редактор для программистов». Auto Layout, нативная фиксация, попапы через T1093, встроенные иконки — всё это позволяет собрать профессиональное меню визуально. Граница между «конструктором» и «инструментом дизайнера» стирается с каждым обновлением.

Базовое меню: только Zero Block, ноль кода.
Бургер с попапом: Zero Block + T1093, ноль кода.
Анимации при скролле: Пошаговая анимация закрывает большинство запросов, ноль кода.
Блог