Брейкпоинты Тильды: как вёрстка перестраивается под ширину экрана

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

Какие брейкпоинты заданы в Тильде по умолчанию

Сетка обычных Т‑блоков в Тильде рассчитана на пять контрольных ширин: 1200, 980, 640, 480 и 320 пикселей. Это не рекомендация и не настройка, которую можно поменять в общих параметрах сайта - значения зашиты в CSS каждого блока, и весь адаптив конструктора построен вокруг них, от Zero Block до обычной галереи из библиотеки блоков.

На практике эти пять точек соответствуют такому делению по устройствам. От 1200 px и выше это десктоп и широкие мониторы, сайт показывается в полную ширину со всеми колонками. Диапазон 980‑1199 px это ноутбуки с небольшим экраном или окно браузера, развёрнутое не на весь экран, тут уже начинают сокращаться боковые отступы. 640-979 px это планшеты и крупные телефоны в горизонтальной ориентации, здесь чаще всего меню сворачивается в бургер. 480-639 px это телефоны в вертикальной ориентации, самый частый мобильный диапазон у реальных посетителей. И до 320 px это компактные телефоны и старые модели с маленьким экраном, где на счету каждый пиксель отступа.

На каждом из этих порогов Тильда автоматически пересчитывает размер шрифта, отступы блока и поведение сетки колонок. Ширина 980 px обычно рвёт меню: до неё пункты идут в строку, после конструктор сворачивает их в бургер. 640 px чаще всего рвёт многоколоночные раскладки: три-четыре карточки в ряд превращаются в одну-две, а изображения в них меняют пропорции.

Как переключаться между версиями блока в редакторе

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

Для блоков, собранных в Zero Block, контроль тоньше: там можно выбрать конкретную ширину канвы - 1200, 980, 640, 480, 320 - и подвинуть, увеличить или спрятать элемент именно на этом брейкпоинте, не трогая остальные версии. Это удобно, когда на десктопе картинка справа от текста, а на телефоне её нужно опустить под текст и уменьшить в полтора раза - в обычном Т‑блоке так гибко не выйдет, а в Zero Block элемент просто по-другому расставляется на холсте. На одном из проектов я таким образом переносил блок с отзывами клиентов из правой колонки под основной текст только на диапазоне 480-639 px, оставляя десктопную и планшетную версии без изменений.

Настройка контента под каждую точку перелома

У большинства блоков в настройках есть отдельная вкладка «Планшеты» и «Телефоны», где можно:

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

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

Второе частое место правки - кнопки в шапке и в CTA-блоках. Шрифт кнопки на десктопе в 18 px на брейкпоинте 480 px нужно уменьшать вручную до 14-15 px, иначе текст переносится на две строки и кнопка растягивается по высоте, ломая выравнивание соседних элементов. То же самое с отступами, заданными в процентах или в vh: на узком экране такие единицы часто дают непропорционально большой пустой блок, и я меняю их на фиксированные значения именно для мобильной вкладки.

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

Кастомные медиа-запросы поверх стандартной сетки

Штатных настроек хватает процентов в восемьдесят случаев. Остальное я добавляю через блок T123 (HTML/CSS/JS) - в нём можно прописать свой стиль с медиа-запросами и подключить его поверх стандартной сетки. Обычно я привязываю значения к тем же точкам, что использует сама Тильда, чтобы кастомный код срабатывал синхронно со штатной адаптацией, а не создавал промежуточный разрыв в вёрстке, когда один блок уже переключился на мобильную версию, а соседний кастомный элемент ещё нет:

@media (max-width: 640px) {
  .t-card__wrapper {
    flex-direction: column;
  }
  .t-card__img {
    max-height: 220px;
    object-fit: cover;
  }
}

Такой код я добавляю, когда стандартная логика скрытия и показа элемента не покрывает задачу - например, нужно поменять не размер, а порядок блоков внутри карточки, или скрыть элемент только в диапазоне между 480 и 640 px, а не на всём мобильном диапазоне сразу. Ещё один частый случай - анимации и скрипты, завязанные на ширину экрана: если JS-скрипт проверяет window.innerWidth по своим значениям, а не по брейкпоинтам Тильды, на стыке диапазонов анимация и вёрстка блока начинают жить каждая по своему расписанию.

Типичные баги адаптивной вёрстки на стыке брейкпоинтов

• Кастомная плашка или баннер над шапкой, добавленный через T123, не подстроился под переключение меню в бургер на 980 px и перекрывает логотип - лечится добавлением своего медиа-запроса на той же точке.
• Три-четыре карточки в ряд на брейкпоинте 980 px не помещаются по ширине, потому что настройки колонок скопированы с десктопа без проверки на планшете, и текст в карточке вылезает за границу.
• Фоновое видео или картинка с обрезкой по контейнеру обрезаются не по нужному месту на 480 px, потому что фокус задан только для десктопной версии.
• Кнопка или ссылка в шапке становится кликабельной областью в один пиксель на 320 px из-за того, что паддинги не пересчитаны для самого узкого диапазона.
• Формы с большим количеством полей: на десктопе поля стоят в два столбца, а на 640 px превращаются в один, и если не проверить эту версию отдельно, кнопка отправки может уехать за пределы видимой области.

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

Когда штатных настроек мало и нужна доработка

Пять точек перелома покрывают большинство сайтов на конструкторе, но иногда нужного поведения именно на этих значениях недостаточно - например, заказчику важно, чтобы раскладка менялась на 1440 px под широкие мониторы, или чтобы на диапазоне 768-980 px элементы вели себя иначе, чем на остальном планшетном диапазоне. Здесь штатные вкладки «Десктоп», «Планшет» и «Телефон» такую точность не дают, и я добавляю дополнительные медиа-запросы поверх стандартной сетки, о которых писал выше.

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

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Можно ли поменять сами значения брейкпоинтов в Тильде?

Глобально нет, 1200, 980, 640, 480 и 320 пикселей зашиты в CSS стандартной сетки и одинаковы для всех блоков на конструкторе. Добавить свою дополнительную точку переключения можно через кастомный CSS в блоке T123, но это работает поверх штатной адаптации, а не заменяет её - штатные пять точек всё равно продолжают действовать параллельно.

Почему на планшете вёрстка ломается, а на телефоне и десктопе всё нормально?

Чаще всего дело в том, что настройки блока для вкладки «Планшет» просто не тронуты и наследуют десктопную версию - количество колонок, размер шрифта и отступы остаются как для широкого экрана. Открываю блок, переключаюсь на планшетную вкладку и донастраиваю её отдельно, обычно достаточно поправить количество колонок и размер шрифта заголовка.

Нужно ли отдельно настраивать шрифт для каждого из пяти брейкпоинтов?

На практике обычно хватает трёх точек правки: десктоп, планшет около 980 px и телефон около 480 px, диапазоны 640 и 320 px чаще наследуют ближайшую настроенную версию без искажений. Но у блоков с длинными заголовками, узкими кнопками или плотными формами я дополнительно проверяю и промежуточные значения, чтобы не пропустить перенос текста на вторую строку.

Как проверить вёрстку на всех брейкпоинтах без реальных устройств?

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