Менеджерам обучения
Курсы
Интерактивный лонгрид
Настройка внешнего вида лонгрида

Настройка внешнего вида лонгрида

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

Настройка внешнего вида проекта - Вид.png (opens in a new tab)

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

Чтобы настроить внешний вид, нужно зайти в лонгрид и выбрать раздел «Настройки».

Открытие настроек

C0Vimage.png (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Давайте разберём каждую настройку подробнее.

Обложка лонгрида

Обложка лонгрида состоит из 3-х компонентов: изображение, цветной фон и заголовок.

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

  • Текст на обложке (выбран по умолчанию);
  • Текст на сплошном фоне;
  • Текст снизу;
  • Текст справа;
  • Текст слева;
  • Без обложки.
Примеры обложек в каждом типе

Текст на обложке

op1-type1.jpg (opens in a new tab)

Текст на сплошном фоне

op1-type2.jpg (opens in a new tab)

Текст снизу

op1-type3.jpg (opens in a new tab)

Текст справа

op1-type4.jpg (opens in a new tab)

Текст слева

op1-type5.jpg (opens in a new tab)

Без обложки

op1-type6.jpg (opens in a new tab)

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

Изображение Фон Заголовок
Текст на обложке + + +
Текст на сплошном фоне + +
Текст снизу + + +
Текст справа + + +
Текст слева + + +
Без обложки

Как видно из таблицы, последний тип («Без обложки») полностью скрывает все 3 компонента. Фактически лонгрид не имеет обложки. Второй тип («Текст на сплошном фоне») скрывает изображение и показывает только фон с заголовком. В остальных типах видны все 3 компонента.

Рассмотрим каждый компонент отдельно.

Изображение

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

Загрузить изображение

nastroika-vnesnego-vida-proekta-zagruzit-izobrazenie.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Фон

Фон используется в 5 типах обложки, а в первом типе («Текст на обложке») он накладывается поверх загруженного изображения. Вы можете менять цвет и прозрачность фона.

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

Выбор цвета фона

Настройка внешнего вида проекта-Выбор цвета фона.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

По умолчанию прозрачность фона установлена на 75%. Если выбрать число больше, то фон станет темнее, а если меньше — то светлее.

Выбор прозрачности фона

Настройка внешнего вида проекта-Выбор прозрачности фона.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Заголовок

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

Выбор цвета заголовка

Настройка внешнего вида проекта-Выбор цвета заголовка.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Обратите внимание, что цвет текста для описания лонгрида задается в самом лонгриде с помощью выделения.

Цветовая схема лонгрида

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

Вы можете выбрать цвет из системной палитры, в которой есть 20 цветов, в том числе чёрный и белый. Посмотреть все 20 цветов можно в блоке «Палитра». А чтобы выбрать какой-то цвет, раскройте список «Цветовая схема лонгрида» и выберите нужный цвет.

Выбор основного цвета лонгрида

Настройка внешнего вида проекта-Выбор основного цвета проекта.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Как добавить свой цвет

Вы можете также добавить свой собственный цвет. Для этого скопируйте HEX-код своего цвета и вставьте его в окошко «Своя палитра». Затем нажмите кнопку «Добавить цвет».

Добавление своего цвета

Настройка внешнего вида проекта-Добавление своего цвета.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

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

Выбор своего цвета

Настройка внешнего вида проекта-Выбор своего цвета.gif (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Обязательно вставлять HEX-код без символа решётки (#), иначе цвет не будет работать.

Логотип

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

Добавление логотипа

AJMimage.png (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

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

Время на прохождение

Вы можете добавить время на изучение. Оно будет отображаться на обложке лонгрида. Если вы выбрали тип обложки «Без обложки», то эта настройка работать не будет.

Чтобы включить эту настройку, нажмите переключатель «Демонстрация времени на изучение» и введите минуты в появившемся поле.

Шрифты лонгрида

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

Чтобы настроить шрифт, зайдите в «Настройки» и перейдите на вкладку «Шрифты и размеры». Здесь можно выбрать 4 вида шрифта:

  • шрифт для заголовка лонгрида;
  • шрифт для описания лонгрида;
  • шрифт для заголовка блока;
  • шрифт для основного текста.
Выбор шрифта

5zKimage.png (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

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

Загрузка своего шрифта

NQ4image.png (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Желательно добавлять шрифты в формате "ttf".

Теперь этот шрифт появится в списке шрифтов, и вы сможете выбрать его в любом из 4-х полей. Он будет иметь то имя, которое вы ввели при загрузке.

Выбор своего шрифта

X0zimage.png (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.

Наименование уроков

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

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

Изменение наименования уроков

7oGimage.png (opens in a new tab)

Чтобы увеличить демонстрацию, нажмите на нее.