Настройки отображения

Настройки отображения

Можно выбрать где данная секция будет отображаться(видна на устройствах). По умолчанию отображается на минилендинге и на странице подписки ВКонтакте. С помощью выпадающего меню можно выбрать один из вариантов отображения данного блока: или только на минилендинге, или только на Подписной ВК.

Высота секции

Высоту секции можно указать:

px - пиксели

vh - высота экрана устройства (любой размер экрана).

Пример 1. Отображение секции с настройками высоты по умолчанию, увеличивается по наличию контента внутри секции:

Пример 2. Высота секции = 100 vh (весь экран устройства). При пролистывании ниже, будет видна следующая секция:

Пример 3. Высота секции = 40 vh. Размер от 40 единиц размера экрана, контент будет помещаться внутри секции. Размер секции будет увеличиваться, если контент не помещается в секцию. Если текст или медиа вложение меньше заданного размера, то останется без изменений по указанным настройкам (40 vh).

Ширина секции

Данная настройка не применяется к Подписной странице ВК из-за строгих требований со стороны ВК.

Ширина 1 колонки = 106 px

По умолчанию заданы параметры: ширина секции = на весь экран и отображение контента на всю ширину секции.

Пример 1. Контент помещаем в центре секции и он занимает 5 колонок внутри секции:

Пример 2. Секция занимает 8 колонок, контент -на всю ширину секции:

Отображение контента

По умолчанию по центру. Можно сместить к правому и левому краю страницы:

Отступы (для секции)

С помощью данных полей можно настраивать пустое расстояние между секциями. По умолчанию, отступы сверху/снизу 32 px, слева/справа - 60 рх

Пример 1. Отступ секции по умолчанию выглядит так:

Пример 2. Увеличиваем отступ от верхней секции до 100 px:

Диапазон видимости на устройствах

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

Зачем это нужно и как оно работает?

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

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

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

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

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

Пример: настроим разное изображение для устройств разных размеров.

  1. Создадим 2 секции. Первая для мобильных устройств и планшетов. Укажем диапазон от 0 до 640 рх:

Вторая секция для ПК (ноутбуки). Укажем диапазон видимости от 640 до мах:

  1. Сохраним изменения и перейдем в предпросмотр страницы. Для удобства выведена информация видимости секции:

  1. Протестируем.

Экран монитора 1252 x 869:

Экран Samsung Galaxy S8+ (360х740)рх

Экран iPhone 12 Pro (390 x 844) рх

Экран iPad mini (768 x 1024) рх

Last updated