Все материалы

Адаптивы без сюрпризов: как подготовить 5 экранов

Сетка 1200 / 960 / 640 / 480 / 320, синхронные имена и контроль текстовых переносов.

Какие ширины использоватьКогда нужен отдельный элементКак тестировать после reopen
01

Начните с контентной логики

Не масштабируйте desktop механически. Сначала решите, что меняет порядок, что скрывается и какие блоки переходят в одну колонку. Только после этого фиксируйте геометрию в каждом Frame.

02

Свяжите слои именами

Одинаковая кнопка на всех экранах должна иметь одинаковое имя. Если мобильная версия — другой объект с другой ролью, дайте ей отдельное имя. Так синхронизация не смешает независимые элементы.

03

Текст требует собственной проверки

Подключите шрифт в Tilda до импорта. Сверьте ширину текстового блока, межстрочный интервал и ручные переносы. Разница метрик браузера и редактора чаще всего проявляется именно на длинных заголовках.

  • Нет случайных переносов
  • Кнопки не меняют высоту
  • Текст не выходит за Frame
04

Reopen-тест

Сохраните блок, закройте редактор и откройте его снова. Если геометрия сохраняется после reopen, модель записана корректно. Затем проверьте опубликованную страницу на реальных ширинах, а не только в панели Tilda.