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