Корректировка мобильной версии сайта

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

Если определенный блок (например, обложка) хорошо выглядит на компьютере, но на экране мобильного отражается плохо, вы можете установить диапазон видимости данного блока 980 px и выше. Это будет десктопная версия блока, она перестанет отображаться на мобильных телефонах.

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, размер шрифта и т. д). Этому блоку задайте диапазон видимости от 0 до 980px. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

Диапазон (разные значения параметров) нужен, чтобы при необходимости вы могли настроить внешний вид блока для какого-то конкретного устройства, выбрав разрешение. Например, если блок плохо отображается именно на планшете или на определенной модели телефона.
Нет необходимости менять диапазон для всех блоков. Настройку можно сделать только для тех блоков, где неудачно обрезается фотография, или если выбранный блок не подходит для мобильной версии.
Пример

Рассмотрим, как настроить мобильную версию обложки, на которой текст выровнен по левому краю, а на фотографии значимый объект расположен справа.
Проверяем, как выглядит сайт на телефоне. Видим, что фотография обрезается неудачно.
Ставим этому блоку видимость > 980px. Теперь он не будет отображаться на мобильных устройствах.
Копируем блок.
Адаптируем копию блока для мобильной версии — меняем фото и выравнивание текста.
Этому блоку ставим видимость ≤980px. Его не будет видно на устройствах с шириной экрана более 980px.
Готово. На разных устройствах обложка отображается по-разному, в зависимости от ширины экрана.
Примеры ширины экрана некоторых устройств
iPhone6 — 375px
iPhone5 — 320px
iPhone6+ — 414px
iPad — 1024px
Samsung Galaxy — 360px
Nokia Lumia — 320px

Настройка отступов для мобильных

В любом блоке откройте настройки, нажмите на иконку рядом с «отступ сверху, отступ снизу» и задайте расстояние для мобильного устройства.
Дополнительные настройки для мобильных
В любом блоке вы также можете дополнительно для мобильных изменить размер шрифта и межстрочное расстояние, а для изображений задать отдельно скругление углов.
Изменение размера шрифта межстрочного расстояния для мобильных
Чтобы это сделать, нажмите на кнопку «Настройки» блока и найдите раздел «Типографика». В этом разделе нажмите на иконку компьютера рядом с полем. После этого появится поле, где можно указать размер шрифта для мобильной версии.

Аналогичный порядок действий и для изменения межстрочного интервала.
Изменение радиуса скругления углов изображения и внешний отступ обложек для мобильных
Задать свое значение радиуса скругления углов или внешний отступ для обложек специально для мобильных устройств можно во всех блоках категории «Обложка» и «Изображение».

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

По умолчанию доступны 4 размера экрана: 360px и 480px — под смартфон, 640px и 960px — под планшет.
Чтобы выбрать другой размер мобильного устройства, нажмите на «Устройства» в списке. В подменю выберите нужное вам устройство. Все актуальные мобильные устройства и планшеты уже добавлены в список.
После переключения режима отображения блоков в редакторе, нажмите на кнопку «Настройки» блока. Теперь вы можете вносить изменения в мобильную версию и они сразу отобразятся в превью.
Настройка адаптивности в Zero Block
Адаптивность блока для разных устройств можно настроить, сконвертировав его в Zero с помощью опции в настройках блока. В данный момент эта опция доступна в большинстве блоков.
После конвертации вы сможете вручную настраивать вид блока на пяти диапазонах ширины экрана. Подробнее о настройке адаптивности в Zero Block можно прочитать в статьях «Zero Block. Начало работы» и «Zero Block. Отзывчивый дизайн».
Отключение адаптивности страницы
Если отключить адаптивность, страница будет показываться на мобильных так же, как и на компьютере. Для этого нужно нажать галочку «Отключить адаптивность для мобильных устройств» в Настройках страницы → Дополнительно и переопубликовать страницу
Слева версия сайта, адаптированная для мобильных устройств, справа — сайт с выключенной адаптивностью.
Made on
Tilda