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

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

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

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

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

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

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

Откройте настройки блока и прокрутите панель до пункта «Диапазон видимости на устройствах». Укажите, на каких устройствах должен отображаться блок. Затем сохраните настройки и заново опубликуйте страницу.
Настройка адаптивности в Zero Block
Адаптивность блока для разных устройств можно настроить, сконвертировав его в Zero Block с помощью опции в настройках блока. Сейчас эта опция доступна в большинстве блоков.
После конвертации блока в Zero Block контент и дизайн вернутся к настройкам по умолчанию. Текст и изображения нужно будет добавить в блок заново.
После конвертации вы сможете вручную настроить вид блока на пяти диапазонах ширины экрана или добавить свои диапазоны. Подробнее о настройке адаптивности в Zero Block читайте в статьях «Zero Block. Начало работы» и «Zero Block. Отзывчивый дизайн».
Отключение адаптивности страницы
Если отключить адаптивность, страница на мобильных устройствах будет отображаться так же, как на компьютере.

Чтобы отключить адаптивную версию, перейдите в «Настройки страницы» → «Дополнительно», поставьте галочку «Отключить адаптивность для мобильных устройств» и переопубликуйте страницу.
Made on
Tilda