Настройка внешнего вида лонгрида
Настройка внешнего вида позволяет изменить шрифты, цвета, логотип и другие детали лонгрида. А также выбрать вид обложки. Вот так выглядит страница с настройками:
Слева находятся настройки, а справа находится демонстрация — чтобы вы сразу могли увидеть внесенные изменения.
Чтобы настроить внешний вид, нужно зайти в лонгрид и выбрать раздел «Настройки».
Открытие настроек
Чтобы увеличить демонстрацию, нажмите на нее.
Давайте разберём каждую настройку подробнее.
Обложка лонгрида
Обложка лонгрида в Scroll состоит из 3-х компонентов: изображение, цветной фон и заголовок.
Вы можете управлять всеми этими компонентами. А также выбрать, какие из них будут видны и в каком сочетании. Для этого нужно выбрать тип обложки. Всего их шесть:
- Текст на обложке (выбран по умолчанию)
- Текст на сплошном фоне
- Текст снизу
- Текст справа
- Текст слева
- Без обложки
Примеры обложек в каждом типе
Текст на обложке
Текст на сплошном фоне
Текст снизу
Текст справа
Текст слева
Без обложки
На следующей таблице отмечено, какие компоненты скрыты или показаны в разных типах.
| Изображение |
Фон |
Заголовок |
|
| Текст на обложке | + |
+ |
+ |
| Текст на сплошном фоне | + |
+ |
|
| Текст снизу | + |
+ |
+ |
| Текст справа | + |
+ |
+ |
| Текст слева | + |
+ |
+ |
| Без обложки |
Как видно из таблицы, последний тип («Без обложки») полностью скрывает все 3 компонента. Фактически лонгрид не имеет обложки. Второй тип («Текст на сплошном фоне») скрывает изображение и показывает только фон с заголовком. В остальных типах видны все 3 компонента.
Рассмотрим каждый компонент отдельно.
Изображение
Чтобы выбрать изображение для обложки, зайдите в лонгрид и нажмите на кнопку «Сменить изображение» в правом верхнем углу. Затем выберите изображение с компьютера.
Загрузить изображение
Чтобы увеличить демонстрацию, нажмите на нее.
Фон
Фон используется в 5 типах обложки, а в первом типе («Текст на обложке») он накладывается поверх загруженного изображения. Вы можете менять цвет и прозрачность фона.
По умолчанию установлен белый цвет фона. Но вы можете поменять его на любой цвет из предложенных, или на цвет цветовой схемы.
Выбор цвета фона
Чтобы увеличить демонстрацию, нажмите на нее.
По умолчанию прозрачность фона установлена на 75%. Если выбрать число больше, то фон станет темнее, а если меньше — то светлее.
Выбор прозрачности фона
Чтобы увеличить демонстрацию, нажмите на нее.
Заголовок
В настройках вы можете выбрать цвет для заголовка лонгрида.
Выбор цвета заголовка
Чтобы увеличить демонстрацию, нажмите на нее.
Обратите внимание, что цвет текста для описания лонгрида задается в самом лонгриде с помощью выделения.
Цветовая схема лонгрида
В конструкторе Scroll есть возможность задать цвет для элементов интерфейса лонгрида. Для этого используется цветовая схема. Цвет, выбранный для цветовой схемы, наследуется многими контентными блоками как основной.
Вы можете выбрать цвет из системной палитры, в которой есть 20 цветов, в том числе чёрный и белый. Посмотреть все 20 цветов можно в блоке «Палитра». А чтобы выбрать какой-то цвет, раскройте список «Цветовая схема лонгрида» и выберите нужный цвет.
Выбор основного цвета лонгрида
Чтобы увеличить демонстрацию, нажмите на нее.
Как добавить свой цвет
Вы можете также добавить свой собственный цвет. Для этого скопируйте HEX-код своего цвета и вставьте его в окошко «Своя палитра». Затем нажмите кнопку «Добавить цвет».
Добавление своего цвета
Чтобы увеличить демонстрацию, нажмите на нее.
После этого ваш цвет появится в списке «Цветовая схема лонгрида» и вы сможете выбрать его, чтобы применить к лонгриду.
Выбор своего цвета
Чтобы увеличить демонстрацию, нажмите на нее.
Обязательно вставлять HEX-код без символа решётки (#), иначе цвет не будет работать.
Логотип
Вы можете добавить логотип вашей компании на верхнюю панель лонгрида. Для этого подготовьте изображение на прозрачном фоне (формат "png") и загрузите его в поле «Логотип» в «Настройках» лонгрида.
Добавление логотипа
Чтобы увеличить демонстрацию, нажмите на нее.
Обратите внимание, что верхняя панель лонгрида всегда остается тёмной, поэтому старайтесь выбирать логотип светлого цвета.
Время на прохождение
Вы можете добавить время на изучение. Оно будет отображаться на обложке лонгрида. Если вы выбрали тип обложки «Без обложки», то эта настройка работать не будет.
Чтобы включить эту настройку, нажмите переключатель «Демонстрация времени на изучение» и введите минуты в появившемся ниже поле.
Добавление времени
Чтобы увеличить демонстрацию, нажмите на нее.
Шрифты лонгрида
В конструкторе Scroll есть возможность задать шрифты для всего лонгрида. Вы можете выбрать начертание шрифта и его размер. При этом, шрифты для заголовков и для основного текста задаются отдельно.
Чтобы настроить шрифт, зайдите в «Настройки» и перейдите на вкладку «Шрифты и размеры». Здесь можно выбрать 4 вида шрифта:
- шрифт для заголовка лонгрида
- шрифт для описания лонгрида
- шрифт для заголовка блока
- шрифт для основного текста
Выбор шрифта
Чтобы увеличить демонстрацию, нажмите на нее.
Вы также можете загрузить свой собственный шрифт. Для этого нажмите на кнопку «Добавить пользовательский шрифт», перед вами появится окно для добавления шрифта, где нужно ввести имя шрифта и загрузить файл с компьютера.
Загрузка своего шрифта
Чтобы увеличить демонстрацию, нажмите на нее.
Желательно добавлять шрифты в формате "ttf".
Теперь этот шрифт появится в списке шрифтов, и вы сможете выбрать его в любом из 4-х полей. Он будет иметь то имя, которое вы ввели при загрузке.
Выбор своего шрифта
Чтобы увеличить демонстрацию, нажмите на нее.
Наименование уроков
В конструкторе Scroll есть возможность изменить слово, которым называются уроки лонгрида. По умолчанию, в начале каждого урока стоит заголовок «Урок» и порядковый номер урока. Но если вам не подходит слово «Урок» и вы хотите, чтобы уроки назывались по-другому, вы можете легко изменить это в настройках лонгрида.
Для этого зайдите в «Настройки» и перейдите на вкладку «Плеер и навигация». Здесь вы увидите поле, где написано слово «Урок». Вместо него вы можете вписать любое другое слово. Затем кликните мышкой вне этого поля, чтобы сохранить изменения.
Изменение наименования уроков
Чтобы увеличить демонстрацию, нажмите на нее.