Мобильная версия на Тильде. Как сделать адаптив, который реально работает

Тильда работает по системе брейкпоинтов — контрольных точек ширины экрана, при пересечении которых меняется отображение страницы. Стандартные брейкпоинты:

• ≥ 1200px — десктоп
• 960–1199px — ноутбук / небольшой монитор
• 640–959px — планшет
• ≤ 639px — смартфон

Тильда автоматически перестраивает стандартные блоки под эти точки: меняет количество колонок, уменьшает шрифты, перекладывает элементы вертикально. Это хорошая база — но только база. Без ручной доработки результат почти всегда требует правок. Важно: Google и Яндекс оценивают сайт именно по мобильной версии при ранжировании. Если мобайл сломан — SEO страдает, даже если десктоп идеальный.

Это одно из ключевых обновлений февраля 2025. Раньше чтобы увидеть мобильную версию, нужно было открывать предпросмотр или реальный телефон. Теперь прямо в редакторе блоков можно переключиться на мобильный вид и вносить правки не выходя из него: настраивать отступы, менять стили, двигать элементы.

Как включить: в редакторе блока → иконка переключения устройства → выбрать смартфон или планшет → редактировать. Это меняет рабочий процесс принципиально: видишь проблему, сразу фиксишь, не переключаясь между вкладками.

Наконец-то нативно. Раньше скрыть элемент на мобильном без CSS-кода было невозможно. Теперь в Zero Block у каждого элемента есть настройка:

Элемент → Settings → Visibility → Hide

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

Максимальное разрешение для кастомных брейкпоинтов увеличили с 1920 до 2560px. Актуально для сайтов, которые смотрят на широких мониторах, телевизорах или презентационных экранах. Теперь можно настроить отображение точно под эти разрешения без сдвигов и растяжений.

Самый простой уровень работает почти автоматически, но требует осознанного контроля.

Отступы сверху и снизу — задаются отдельно для десктопа и мобильного. Не нужно делать огромные отступы везде одинаково: на мобильном достаточно 40–60px вместо десктопных 120px.

Количество колонок — в блоках с карточками (портфолио, услуги, команда) можно задать сколько карточек в ряд на каждом устройстве. Три на десктопе — одна на мобильном.

Видимость блока — блок можно полностью скрыть на мобильном или, наоборот, показать только на мобильном. Это позволяет делать разные версии одного раздела: на десктопе — таблица сравнения, на мобильном — аккордеон.

Мобильный порядок блоков — можно переставить блоки местами для мобильной версии. Например, форма обратной связи на десктопе стоит справа, а на мобильном должна идти первой. Это настраивается без кода.

В Тильде размеры шрифтов для мобильного задаются отдельно от десктопных через настройки шрифтов проекта. Правильная иерархия для мобильного:

• H1: 32–40px (на десктопе может быть 60–80px)
• H2: 24–28px
• Body: 15–16px — минимум, меньше нечитаемо
• Межстрочный интервал: 1.5–1.6 — всегда, на любом устройстве

Типичная ошибка: оставить размеры шрифтов одинаковыми для всех устройств. Заголовок 72px на телефоне занимает весь экран.

Zero Block — это полный ручной контроль. Тильда ничего не делает за тебя автоматически. Это мощь и ответственность одновременно.

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

Стандартный рабочий процесс:

1. Делаешь десктопную версию на 1200px.
2. Переключаешься на 960px — проверяешь, корректируешь.
3. Переключаешься на 640px (планшет) — перестраиваешь компоновку.
4. Переключаешься на 320px (мобильный) — финальная настройка.

Помимо стандартных четырёх точек можно добавить собственные. Любое значение от 320 до 2560px. Пригодится когда:

• Нужна точная настройка под конкретный размер экрана (например, 768px для iPad).
• Стандартные точки не покрывают нужный диапазон.
• Сложный дизайн требует плавных переходов между несколькими состояниями.

Каждый элемент в Zero Block теперь можно скрыть или показать на конкретном брейкпоинте. Алгоритм:

1. Переключиться на нужный брейкпоинт (например, 320px)
2. Выделить элемент
3. В правой панели → Settings → Visibility → Hide

Практические применения:

• Декоративные элементы (паттерны, большие иллюстрации) — скрыть на мобильном.
• Горизонтальное меню — скрыть на мобильном, показать бургер-иконку.
• Дополнительные колонки с текстом — убрать на мобильном, оставить главное.
• Отдельный мобильный блок с другой компоновкой — показать только на мобильном.

Auto Layout (флексбокс внутри Zero Block) значительно упрощает адаптив. Группа элементов с Auto Layout сама перестраивается при изменении ширины: меняет направление с горизонтального на вертикальное, пересчитывает отступы. Вместо того чтобы вручную двигать каждый элемент на мобильном, просто меняешь параметр Auto Layout группы: Direction → Vertical. Карточки, которые стояли в ряд, складываются в столбик автоматически.

Относительно новый и недооценённый инструмент Zero Block. Autoscale — это пропорциональное масштабирование всего блока как единого объекта под ширину экрана. Работает как «вектор в Figma»: уменьшаешь — всё пропорционально сжимается, сохраняя компоновку. Логика использования: autoscale тянет блок от десктопного разрешения до ~640px, дальше — ручная мобильная версия с другой компоновкой.

Когда autoscale выручает:

• Нестандартный сложный дизайн, который трудно адаптировать поэлементно.
• Срочный проект без времени на ручную настройку каждого брейкпоинта.
• Презентационные экраны, баннеры, нестандартные форматы.

Ограничения:

• При сильном сжатии текст становится мелким, следи за читаемостью (минимум 14px на выходе).
• Не работает для сложных интерактивных сцен с пошаговой анимацией.
• На очень маленьких экранах (320px) лучше переходить на ручной адаптив.

Ошибка 1. Сайт проверили только в браузере на компьютере
Режим DevTools «мобильный вид» и реальный телефон — разные вещи. Шрифты рендерятся иначе, тач-взаимодействие другое, скорость загрузки другая. Тестируй на нескольких реальных устройствах перед сдачей.

Ошибка 2. Кнопки слишком маленькие для пальца
Минимальный размер тапабельного элемента 44×44px. Меньше — пользователь промахивается, раздражается, уходит. Особенно критично для форм, кнопок меню, ссылок в тексте.

Ошибка 3. Фиксированная ширина элементов в пикселях
Элемент с width: 800px на экране шириной 375px выйдет за пределы экрана. Всегда используй процентные значения или max-width для адаптивных элементов.

Ошибка 4. Сложная пошаговая анимация не отключена на мобильном
Горизонтальный скролл, фиксированные сцены, параллакс — всё это работает непредсказуемо на разных мобильных устройствах. В настройках Zero Block есть переключатель Mobile Animation → Switch Off — используй его для сложных анимаций и заменяй простым Fade In.

Ошибка 5. Текст в изображениях вместо текста
Красивый заголовок сделали картинкой. На мобильном он нечитаем, не масштабируется, не индексируется поисковиками. Текст — всегда текстом.

Ошибка 6. Одинаковые отступы на всех устройствах
120px сверху и снизу каждого блока на мобильном, это половина экрана пустого места. Для мобильного: 40-60px между блоками, 20-30px внутри.

Ошибка 7. Формы не проверены на мобильном
Поля формы слишком мелкие, клавиатура перекрывает форму, кнопка «Отправить» уходит за экран. Формы на мобильном нужно проверять обязательно, это точка конверсии.