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

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

Скругление границ:

Скругление границ указывается в пикселях - рх

Пример отображения секции с настройками скругления границ:

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

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

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

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

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

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

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

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

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

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

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

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

Эффект появления при скролле

Включите этот переключатель, чтобы при скролле был эффект появления вашего контента. Можно сделать, чтобы контент появлялся снизу, сверху, слева, справа.

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

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

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

Можно адаптировать текст на узких экранах согласно стилям SaleBot. Переключите этот ползунок:

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

Внешние отступы

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

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

Если вы хотите сделать равные отступы со всех сторон - внесите значение в окно, не открывая дополнительное окно настроек. Все позиции заполнятся автоматически:

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

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

Внутренние отступы

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

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

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

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

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

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

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

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

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

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

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

Пример

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

Создадим 2 секции.

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

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

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

Чтобы протестировать, как будут выглядеть секции на определенном устройстве, переходим на страницу предпросмотра сайта. Далее в Браузере переходим в Настройки, выбираем “Дополнительно” — “Инструменты разработчика”