# Брендирование

В разделе **«Брендирование»** на уровне компании происходит настройка дизайна всех новых учебных курсов, созданных в компании.

{% hint style="info" %}
Все создаваемые курсы имеют стиль, определенный по умолчанию на уровне компании.
{% endhint %}

В этой статье вы узнаете:

* [как создать стиль](#shag-1.-sozdanie-stilya.);
* [как настроить стиль](#shag-2.-nastroika-stilya.);
* [как установить стиль по умолчанию](#shag-3.-ustanovka-stilya-po-umolchaniyu-opcionalno-.);
* [как применить стиль в конкретном курсе](#shag-4.-primenenie-izmenenie-stilya-v-konkretnom-kurse.).
* [как импортировать/экспортировать стиль](#shag-5.-import-stilya)
* [как дублировать стиль](#shag-7.-dublirovat-stil)
* [как удалить стиль](#shag-8.-udalit-stil)

### **Шаг 1. Создание стиля**

В разделе **«Брендирование»** на уровне компании создайте новый стиль. 

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FchxOIFE638egQ4GoCpRw%2FScreenshot%202023-11-27%20at%2017.44.30.png?alt=media&#x26;token=a4a17026-66c3-472b-8ce5-eed248c7dc34" alt=""><figcaption></figcaption></figure>

### **Шаг 2.** Настройка стиля

Настройте стиль с помощью 5 вкладок:&#x20;

{% tabs %}
{% tab title="Тема" %}
Начинайте настройку стиля с вкладки **«Тема»**. Завершив настройку вкладки **«Тема»**, вы можете перейти к вкладке **«Элементы»**, если нужно точечно настроить отдельные элементы:

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fb3riHcJdaSZqlg3QUdgP%2FScreenshot%202024-07-22%20at%2015.35.17.png?alt=media&#x26;token=28a77315-e8d8-4e41-85a4-416f579d21da" alt=""><figcaption></figcaption></figure>

* **«Логотип»** – загрузите ваш логотип, который будет отображаться в хедере/футере вашего курса:

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FvhsHN1HtQV6VfSkoaxNn%2FScreenshot%202024-07-22%20at%2015.36.21.png?alt=media&#x26;token=2f3e856f-774d-40d2-9631-e0322e18ae6b" alt=""><figcaption></figcaption></figure>

* **«Цветовая схема»** – установите основной цвет, дополнительный цвет, цвет неактивных элементов, цвет разных типов текста, цвет фона у всех элементов и др.:

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FbHQnMAeii4PFzn1Yk8G3%2FScreen%20Recording%202024-07-22%20at%2015.26.04.gif?alt=media&#x26;token=c60ff76b-54d1-4b5f-9aa5-67e6b84db51e" alt=""><figcaption></figcaption></figure>

* **«Рамка»** – вы можете скрыть/показать рамку у всех элементов и определить параметр скругления для всех элементов:

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FS8WImzjqVJR8DYUV2YaD%2FScreen%20Recording%202024-07-22%20at%2015.37.19.gif?alt=media&#x26;token=00d0b93a-39a6-4b5b-9843-740511fad249" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Типография" %}
Продолжить работу над целостностью и гармонией визуального стиля можно через настройку шрифтов на вкладке **"Типография"**.&#x20;

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F22neBQqRTib8KlIqYOmy%2FScreenshot%202024-06-04%20at%2017.48.12.png?alt=media&#x26;token=8f49f230-1e76-43e0-a06f-2e7d9501e37a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FxtzmMHuhDseI5qNhbhHN%2FScreen%20Recording%202024-06-04%20at%2017.53.12.gif?alt=media&#x26;token=9a2fb8ce-d5b9-493a-a2be-557f950f5e0b" alt=""><figcaption></figcaption></figure>

*Для таких типов текста как **"Список",*** ***"Цитата"** и **"Ссылка"** часть параметров наследуется из настроек основного текста.*[<br>](#user-content-fn-1)[^1]

\
Вкладка **"Типография"** также включает в себя **"Прогрессию"** - возможность настраивать параметры текста **(размер и интервал)** отдельно для каждого вида экрана (мобильный, планшет, десктоп). Это поможет обеспечить идеальное отображение текста на устройствах с различными разрешениями и диагоналями.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FtUIaFyDeAjWgrPhg7jFT%2FScreen%20Recording%202024-06-04%20at%2017.50.33.gif?alt=media&#x26;token=d35da1c5-07ea-4ee3-8dda-24534b0f5af6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Страницы курса" %}

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FDpFoMfuGGpyHcTCeIkzi%2FScreenshot%202024-03-29%20at%2017.14.18.png?alt=media&#x26;token=05588d61-d6ee-4da3-a2c9-2dc57f210c8a" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FjAcEgrQdO2ReIuJHvbZR%2FScreen%20Recording%202024-03-29%20at%2017.15.21.gif?alt=media&#x26;token=1dc01be8-23ce-4f81-9249-6b2a59ede47d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Элементы" %}
Вкладка **«Элементы»** содержит все настройки элементов. Используйте ее, если элемент необходимо донастроить.

Выберите элемент, который планируете изменить. Внесите изменения в появившемся окне настроек:

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F5rwI0L90OwVKuyz7tbLx%2FScreen%20Recording%202024-03-29%20at%2017.19.59.gif?alt=media&#x26;token=02ed3add-aaf5-4879-826e-45e2723e768d" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
После того, как вы установили нужные настройки стиля, не забудьте сохранить их.
{% endhint %}

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FyL1stwtl0T6arnX4HNhs%2FScreenshot%202024-03-29%20at%2017.25.04.png?alt=media&#x26;token=eddb2961-aab9-44d3-a1e8-220661b800be" alt=""><figcaption></figcaption></figure>

### Шаг 3. Установка стиля по умолчанию (опционально)

Если созданный стиль будет постоянно (или довольно часто) использоваться в проектах, имеет смысл установить данный стиль по умолчанию.

В разделе **«Брендирование»** поставьте галочку напротив созданного стиля, и в выпадающем списке выберите **«По умолчанию»**.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FCgTOB3Gg6jhjCNcy9IgJ%2FScreen%20Recording%202024-03-29%20at%2016.28.19.gif?alt=media&#x26;token=cd74ff31-962a-44b4-8eb4-ecb9f4b97bc1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Теперь все новые курсы создаются с брендированием, установленным по умолчанию в шаге 3.
{% endhint %}

### Шаг 4. Применение/изменение стиля в конкретном курсе

Откройте проект, перейдите в настройки проекта.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FDNyS6HRsjUbc0ItuHaES%2FScreenshot%202024-03-29%20at%2015.56.42.png?alt=media&#x26;token=21cfe47c-b8ef-4dbf-a4c3-b97bd2b6b143" alt=""><figcaption></figcaption></figure>

В секции **«Шаблон брендирования»** выберите стиль.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FLVapeAhrcjKlJdH2uEm9%2FScreenshot%202024-03-29%20at%2015.51.10.png?alt=media&#x26;token=b448842d-465f-4cbf-aac6-dc1dfa91526e" alt=""><figcaption></figcaption></figure>

Нажмите кнопку **«Применить»**.

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FJXcdVmwKiRZJJEadWQ3W%2FScreenshot%202024-03-29%20at%2015.58.10.png?alt=media&#x26;token=7abfd83d-f9e0-4227-9d0d-845ef2907a70" alt=""><figcaption></figcaption></figure>

### Шаг 5. Импорт стиля

Вы можете загрузить готовый стиль брендирования, в виде файла json. В разделе "Брендирование" нажмите на значок плюса и в выпадающем меню выберите "Импортировать".

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2Fnr6J25jl45t0V68PgVaH%2FScreenshot%202024-03-29%20at%2016.02.44.png?alt=media&#x26;token=e8c2ecb1-250a-40d1-ba2a-0e46fc79af3e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2F0fQyiufNqUX9quY3OTKR%2FScreenshot%202024-03-29%20at%2016.05.01.png?alt=media&#x26;token=02dd0e9b-1918-414c-b9a3-1bfb93149953" alt=""><figcaption></figcaption></figure>

### Шаг 6. Экспорт стиля

Вы можете экспортировать стиль, в виде файла json, для дальнейшего использования, например в другой компании.&#x20;

В разделе **«Брендирование»** поставьте галочку напротив нужного стиля, и в выпадающем списке выберите **«Экспортировать».**

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FXdf7W3M2bQRWrHAc86fO%2FScreen%20Recording%202024-03-29%20at%2017.26.35.gif?alt=media&#x26;token=465826e6-1128-4603-a3c8-9f6ad3f9e84f" alt=""><figcaption></figcaption></figure>

### Шаг 7. Дублировать стиль

Чтобы дублировать стиль брендирования, в разделе **«Брендирование»** поставьте галочку напротив нужного стиля, и в выпадающем списке выберите **«Дублировать».**

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FRseEfaMMqGWhRGcyyXjE%2FScreen%20Recording%202024-03-29%20at%2017.31.22.gif?alt=media&#x26;token=1857db78-8896-4a92-8790-12af8e70a012" alt=""><figcaption></figcaption></figure>

### **Шаг 8. Удалить стиль**

Чтобы удалить стиль брендирования, в разделе **«Брендирование»** поставьте галочку напротив нужного стиля, и в выпадающем списке выберите **«Удалить».**

<figure><img src="https://3865113055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDNAf78MjCvzZdPg7TdO%2Fuploads%2FwFRYUhkLOdxZSm7rpL1z%2FScreen%20Recording%202024-03-29%20at%2017.31.52.gif?alt=media&#x26;token=335375e2-6dbd-4f80-89ef-9593671e9705" alt=""><figcaption></figcaption></figure>

[^1]: