Универсальные настройки секций: шрифты, фон и отображение

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

Чтобы найти универсальные настройки, наведите на необходимый блок курсором и найдите кнопку "Настройки":

Кликнув по кнопке, откроется правое меню с универсальными настройками секции:

Настройки шрифтов

Можно изменить:

шрифт, стиль написания (например, Normal или Italic),
выбрать начертание (толщину линий в шрифте), размер шрифта, межбуквенный интервал (интервал между буквами) и высоту строки (расстояние между строками).

В секциях с полями Заголовок и Текст есть возможность применить данные настройки ко всему блоку или создать дополнительный шрифт.

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

Как добавить свой шрифт

Чтобы добавить свой шрифт, найдите одноименную кнопку и кликните по ней:

Вы перейдете на страницу с огромным множеством различных шрифтов:

Шаг 1. Найдите нужный шрифт

а) Это можно сделать с помощью поисковой строки:

Подберите необходимые критерии для шрифта:

Категория шрифта - sans-serif (без засечек на буквах) - serif (с засечками на буквах) - handwriting (шрифт, имитирующий рукописный ввод) - monospace (моноширинный или непропорциональный шрифт, — шрифт, в котором все знаки имеют одинаковую ширину) - display (отображаемый жирный шрифт)
Поддержка языка - кириллица - латиница

Обращаем внимание!

Некоторые шрифты не поддерживают кириллицу.

б) Также шрифт можно найти, пролистав ленту вручную.

Шаг 2. Кликните по выбранному шрифту:

Вам откроется модальное окно с вариантами начертания шрифта:

Шаг 3. Выберите вариант шрифта, поставив напротив необходимого вам галочку:

Шаг 4. Нажмите на кнопку "Добавить":

Ваш добавленный шрифт, внутри которого будут лежать варианты начертания шрифтов, отобразятся здесь:

Шаг 6. Кликните на "Сохранить":

Теперь добавленные шрифты будут отображены в общем списке с шрифтами по умолчанию:

Настройки заднего фона

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

Можно совмещать заливку и фоновое изображение:

Изображение можно добавить файлом или ссылкой на изображение:

Позиция изображения

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

указать команду для позиционирования или их комбинацию:

top - вверху центр (пример 1) bottom - внизу центр center - в центре секции (пример 2) left - левый край right - правый край bottom left - внизу секции слева (пример 3) и т.д.

указать гибкие настройки в % (пример 4) или px или комбинировать разные параметры

Размер изображения

Можно изменять размер изображения:

установить гибкие настройки из двух значений: первое - ширина изображения, второе - высота в пикселях (пример 1 - 500 px) или в % (пример 2 - 15%).
указать один из параметров: contain - поместит изображение по высоте секции (пример 3) cover - первоначальный размер изображения (пример 4, исходный размер изображения 1268 х 1343 рх)

Повторение изображения на заднем фоне

По умолчанию отключено. Доступны следующие варианты:

Пример стандартного повторения:

Повторение по оси Х:

Повторение по оси Y:

Закрепить изображение

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

Цвет фона и Градиент

Цвет фона и Градиент заднего фона секции можно менять. Сделать однотонным цвет или выбрать градиент из возможных предложенных вариантов.

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

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

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

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

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 пикселей. Это будет мобильная версия блока.

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

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

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

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