Как настроить мобильную версию в Тильде

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

Мобильный режим и предпросмотр: где что правится

В редакторе страницы нажмите значок мобильного устройства в центре верхней панели. В выпадающем меню выберите размер экрана, а если нужна конкретная модель — раздел «Устройства» с перечнем смартфонов и планшетов. Редактор переключится в мобильный режим, и правки в блоках станут удобнее ^[1].

Здесь важно различать две вещи. Переключение вида в редакторе не заменяет полноценный предпросмотр: анимация в нём не работает, часть блоков выглядит иначе, чем на опубликованной странице. Проверять итог нужно через кнопку «Предпросмотр» на верхней панели ^[1].

В предпросмотре тоже есть значок мобильного устройства и выбор размера экрана, но менять настройки блока там нельзя — режим служит только для проверки. Вернуться к правкам можно значком карандаша в левом нижнем углу, скрыть интерфейс — значком со стрелками, масштаб меняется через «100%» в правом нижнем углу ^[1].

Рабочая последовательность такая: правки — в мобильном режиме редактора, проверка — в предпросмотре, финальная сверка — на телефоне по опубликованной ссылке.

Настройки базового блока для телефона

В каждом блоке есть отдельные настройки отступов и типографики для мобильной версии, а у части блоков — дополнительные мобильные настройки отдельных элементов, обычно с подсказками в панели ^[1]. Общий приём один: рядом с нужным полем нажимается значок компьютера, после чего появляется дополнительное поле со значком смартфона, и в него вписывается мобильное значение ^[1].

Что правим	Где в панели	Действие
Отступы сверху и снизу	Поля «Отступ сверху» / «Отступ снизу»	Значок рядом с полем → значение для мобильного
Размер шрифта	Раздел «Типографика»	Значок компьютера → поле «Моб. размер шрифта»
Межстрочное расстояние	Раздел «Типографика»	Тем же способом, что и размер шрифта
Скругление и внешний отступ обложки	Блоки категорий «Обложка» и «Изображение»	Значок компьютера у поля → мобильное значение
Позиционирование фона	«Позиционирование фонового изображения»	Готовое значение из списка или своя точка на изображении

Отступы задаются в любом блоке: откройте настройки, нажмите значок рядом с полем отступа и укажите мобильное значение — появятся поля «МОБ. ОТ. СВЕРХУ» и «МОБ. ОТ. СНИЗУ» ^[1].

Шрифт и межстрочное меняются в разделе «Типографика»: нажмите значок компьютера и в поле со значком мобильного устройства укажите размер для телефона, интервал настраивается так же ^[1].

Скругления и внешний отступ обложки доступны в блоках категорий «Обложка» и «Изображение»: найдите нужное поле в «Настройках», нажмите значок компьютера и задайте мобильное значение ^[1].

Позиционирование фона решает частую проблему обложки: на узком экране картинка обрезается так, что главный объект уходит за край. Выберите значение в выпадающем меню, например «Центр Центр», либо нажмите значок рядом с полем и поставьте свою точку на изображении, затем сохраните ^[1].

Диапазон видимости: разные блоки для телефона и десктопа

Чтобы показывать на телефоне и компьютере разные блоки, настройте видимость каждого из них. Откройте настройки блока, прокрутите панель до пункта «Диапазон видимости на устройствах», укажите устройства, где блок должен показываться, сохраните и заново опубликуйте страницу ^[1].

Повторная публикация здесь обязательна: изменения в редакторе не видны другим, пока страницу не опубликуют снова ^[3].

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

Zero Block: адаптивность отдельно от базовых блоков

Zero Block — профессиональный редактор внутри Тильды для блоков с собственным дизайном ^[2]. Адаптивность в нём настраивается вручную для каждого экрана, а не через мобильные поля базового блока.

По умолчанию предусмотрены контрольные точки: 1200 и больше — компьютеры, 980–1200 — планшет горизонтально, 640–980 — планшет вертикально, 480–640 — смартфон горизонтально, 360–480 — смартфон вертикально. Через иконку настроек рядом с переключателем экранов можно добавить свои брейкпоинты в диапазоне от 360 до 2560 px ^[2].

Логика правок: соберите дизайн на основном артборде, затем переключайте экраны и там, где нужно, поправьте ширину колонки текста, размер изображения, размер шрифта, высоту артборда или положение элементов ^[2].

Полезная подсказка в интерфейсе: настройки, изменённые для текущего типа экрана, выделяются чёрным, унаследованные с предыдущего остаются бледно-серыми. По цвету сразу видно, что вы поменяли именно для телефона, а что пришло сверху ^[2].

Если блок уже собран на базовом блоке, его можно сконвертировать в Zero Block опцией в настройках — она доступна в большинстве блоков. Учтите цену: после конвертации контент и дизайн вернутся к настройкам по умолчанию, текст и изображения придётся добавлять заново ^[1]. Поэтому конвертацию планируют до наполнения, а не после.

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

Разбор учебной страницы и проверка перед публикацией

Учебный пример

Возьмём страницу из обложки, заголовка, двух абзацев, двух карточек и кнопки. На узком экране заголовок переносится, карточки идут в столбик. Для учебного разбора предположим, что на телефоне обнаружились проблемы из таблицы, и составим план правок.

Входные данные страницы

Элемент	Блок	Что не так на телефоне
Обложка с фоном	Обложка	Главный объект фото уходит за край, сверху мало воздуха
Заголовок	Текстовый блок	Крупный шрифт, строки слипаются
Два абзаца	Текстовый блок	Читаются, но плотно к краям
Две карточки	Блок с карточками	Встают в столбик, отступы большие
Кнопка	Блок кнопки	Скругление как на десктопе, выглядит крупно

План правок

Шаг	Элемент интерфейса	Поле	Значение для телефона
1	Значок смартфона в центре панели → «Устройства»	Устройство	Выберите модель смартфона для проверки
2	Настройки блока-обложки	«МОБ. ОТ. СВЕРХУ»	40
3	Настройки блока-обложки	«Позиционирование фонового изображения»	«Центр Центр»
4	«Типографика» заголовка	«Моб. размер шрифта»	28
5	«Типографика» заголовка	Мобильное межстрочное	1,2
6	Настройки блока карточек	«МОБ. ОТ. СВЕРХУ» / «МОБ. ОТ. СНИЗУ»	20 / 20
7	Вкладка «Кнопки»	«Скругление», мобильное значение	8
8	«Предпросмотр» → значок смартфона	Устройство	Ближайшая модель из «Устройств»
9	«Опубликовать»	—	Повторная публикация

Значения в шагах 2–7 — гипотеза для проверки на своей странице: ориентируйтесь на то, как текст и карточки читаются на выбранном экране.

Заполненный результат прогона

Проверка	Как смотрим	Итог
Обложка	Предпросмотр, смартфон вертикально	Фон по центру, объект в кадре, сверху есть воздух
Заголовок	Предпросмотр	Переносится на 2–3 строки, строки не слипаются
Абзацы	Предпросмотр	Читаются без горизонтальной прокрутки
Карточки	Предпросмотр	Столбиком, отступы ровные
Кнопка	Предпросмотр	Скругление умеренное, палец попадает
Видимость	Диапазон видимости	На телефоне виден облегчённый блок, на десктопе — полный
Публикация	«Опубликовать» → «Открыть страницу»	Изменения видны по публичной ссылке

Чек-лист контрольного прогона на телефоне

Открыть публичную ссылку на телефоне, а не служебную из адресной строки редактора: служебная открывается только у вас и не работает в меню ^[3].
Если изменений не видно, обновить страницу — браузер часто держит старую версию ^[3].
Пройти страницу сверху вниз: обложка, заголовок, абзацы, карточки, кнопка.
Проверить, что нет горизонтальной прокрутки и обрезанного текста.
Сверить, что на телефоне показывается нужный блок по диапазону видимости.
Проверить кнопку и форму пальцем: попадает ли палец, не перекрывает ли клавиатура поля.
Для быстрой проверки на телефоне взять QR-код: после публикации он создаётся автоматически, скачивается в JPG, PNG или SVG и открывает страницу в браузере телефона ^[3].

Если на странице есть вставки стороннего кода, проверьте, как они ведут себя на телефоне: приёмы вставки разобраны в материале как добавить HTML-код в Тильде. А вопросы, которые читатели задают по странице, стоит заранее собрать в FAQ для сайта с нейросетью — так меньше правок после запуска.

Итог маршрута: мобильный режим для правок, предпросмотр для проверки, диапазон видимости для разных блоков, Zero Block для собственного макета и повторная публикация с прогоном на телефоне. Страница готова, когда все пункты чек-листа закрыты на реальном устройстве.