Тильда мобильная версия: правки, которые не ломают десктоп

Тильда мобильная версия сайта и его десктопная версия используют одну разметку, но разные настройки поверх неё: шрифт, отступы, видимость блока и порядок колонок можно поменять отдельно для телефона, не трогая то, что видят посетители с компьютера. За несколько лет работы с Тильдой я не раз чинил сайты, где правка «только для мобильных» неожиданно съезжала и на десктопе, потому что автор перепутал общие настройки с теми, что изолированы по устройствам. Разбираю, где проходит граница безопасных правок и что стоит проверить перед публикацией.

Мобильный вид в Тильде: что общее, а что раздельное

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

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

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

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

Шрифты и отступы под телефон без переделки десктопа

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

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

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

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

Скрыть блок на телефоне без потери на десктопе

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

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

Обратный пример: кнопку быстрой связи вроде «Написать в мессенджер», закреплённую внизу экрана, обычно показываю только на телефоне, а на десктопе прячу, потому что там для той же цели уже есть кнопка в шапке или сайдбаре. Логика та же самая настройка видимости, просто применённая в другую сторону: не скрываю лишнее на мобильном, а показываю то, что нужно только там. Если добавить такую кнопку без проверки видимости на планшете, она нередко перекрывает форму заказа внизу страницы, поэтому этот вариант тоже стоит смотреть отдельно.

Ошибка, которую вижу регулярно: скрывают блок на телефоне, но забывают проверить планшет, и там появляется пустой промежуток или, наоборот, дублирование информации из соседнего блока. Видимость по трём типам устройств стоит проверять именно по трём вкладкам, а не только по десктопу и телефону.

Отдельная картинка и мобильное меню

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

С меню похожая логика. Оформление бургер-меню на телефоне (цвет иконки, фон выпадающего списка, расположение пунктов) настраивается на отдельной вкладке и не связано жёстко с оформлением горизонтального меню на десктопе. Меняю там анимацию раскрытия или добавляю кнопку звонка в шапку мобильного меню, при этом десктопное меню остаётся как было.

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

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

Точечные CSS-правки только для мобильных

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

@media (max-width: 640px) {
  .my-mobile-hide {
    display: none;
  }
  .my-mobile-title {
    font-size: 22px;
    line-height: 1.3;
  }
}

Класс здесь свой, назначенный вручную через настройки блока или через атрибут в Zero Block, а не системный класс Тильды, поэтому конфликтов с чужими стилями не возникает.

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

Тестирование мобильной версии перед публикацией

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

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

Когда проблема на телефоне не воспроизводится визуально, а вылезает только в поведении скрипта, подключаю телефон к компьютеру и смотрю реальный DOM через удалённую отладку: для Android это встроенный в Chrome инструмент удалённой отладки, для iPhone аналогичная функция есть в Safari через меню разработчика на Mac. Так видно, какие стили реально применились на устройстве, а не что должно было примениться по логике брейкпоинта, и разница иногда обнаруживается быстро.

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

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

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

Можно ли скрыть блок только на телефоне, оставив его на десктопе и планшете?

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

Почему правки в мобильном виде иногда видны и на десктопе?

Обычно потому, что менялся не отдельный мобильный параметр, а общий: текст, содержимое картинки по умолчанию или структура блока. Шрифт, отступы и видимость изолированы по устройствам, а сам контент общий для всех вариантов сразу.

Нужно ли отдельно тестировать кастомные скрипты на мобильной версии?

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

Как быстро проверить, что мобильная версия не сломалась после правок?

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