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

• Широкие экраны – 1170px
• Ноутбуки – 970px
• Планшеты – 750px
• Мобильные телефоны – меньше 750px

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

Как включить адаптивность?

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

Меняем ширину экрана в редакторе:

Меняем ширину экрана в предпросмотре:

Как настроить адаптивность отдельного виджета?

Адаптивность некоторых виджетов можно настраивать отдельно. Настраиваем отображение виджетов "Колонки","Картинка", "Текст" и "Кнопка" на мобильных устройствах.

Виджет «Колонки»

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

Виджет «Картинка»

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

Виджет «Текст»

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

Виджет «Кнопка»

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

Как скрыть виджет или секцию для определенных устройств?

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

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

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

Теперь скроем одну секцию на мобильных и планшетах, а вторую – на широких экранах и ноутбуках.

Также секцию можно растянуть по ширине.

Проверяем отображение скрытых виджетов и секций на опубликованной странице или в режиме предпросмотра. Отображение страницы при переключении устройств в редакторе изменяется не всегда.

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

Итак, мы настроили страницу для всех устройств. Теперь сайт корректно отображается на мобильных, планшетах, ноутбуках и широких экранах.

Читайте другие статьи о настройке сайта в рубрике #сделайлучше.

Базовые статьи о редакторе Платформы – здесь.