# Оформление

Источник: https://docs.emdesell.ru/nastroika-servisa/nastroiki/oformlenie

[Данные ученика](https://docs.emdesell.ru/nastroika-servisa/nastroiki/dannye-uchenika.md) <--- [Оформление](https://docs.emdesell.ru/nastroika-servisa/nastroiki/oformlenie.md) ---> [Курсы и уроки](https://docs.emdesell.ru/nastroika-servisa/nastroiki/kursy-i-uroki.md)

Подраздел школы **Оформление** предназначен для того, чтобы оформить кабинет школы по уникальному стилю своей компании.

Чтобы перейти в раздел, нужно сначала перейди в раздел - **Настройки**, далее, открыть подраздел - **Оформление**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2701%29.png" alt=""><figcaption></figcaption></figure>

На тарифе **Старт** доступна опция настройки - **Основное**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2702%29.png" alt=""><figcaption></figcaption></figure>

И опция добавления размеров шрифтов (**Прочее**) для редактирования уроков школе.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2706%29.png" alt=""><figcaption></figcaption></figure>

На остальных тарифах (Бизнес, Эксперт, Эксперт+WL) можно настроить дополнительно **Фон школы**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2703%29.png" alt=""><figcaption></figcaption></figure>

И также можно настроить дополнительно - **Цвета элементов школы**.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2704%29.png" alt=""><figcaption></figcaption></figure>

## **Основное**

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2707%29.png" alt=""><figcaption></figcaption></figure>

**Логотип** - возможность добавления логотипа в виде картинки для кабинета школы.

Можно загрузить картинку по нажатию иконки для загрузки.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2708%29.png" alt=""><figcaption></figcaption></figure>

Все картинки загружаются в раздел - [**Файлы**](https://docs.emdesell.ru/nastroika-servisa/faily.md).

**Отображение логотипа** - может быть Включено или Выключено.

Опция позволяет включить отображение логотипа в кабинете школы.

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

Отображение логотипа с компьютера.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2709%29.png" alt=""><figcaption></figcaption></figure>

Отображение логотипа с моб. устройства.

![](https://docs.emdesell.ru/.assets/oformlenie/2.1.png)

Также, логотип будет отображаться при входе (или регистрации) в кабинет школы.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/2024-01-15_11-29-53.png" alt=""><figcaption></figcaption></figure>

И еще, отображение логотипа будет на платежных формах школы.
(Картинку можно будет поменять на другую в настройках платежной формы школы).

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/2024-01-15_11-31-55.png" alt=""><figcaption></figcaption></figure>

**Фон логотипа** - фон изображения логотипа.
Также может быть включен или выключен.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2713%29.png" alt=""><figcaption></figcaption></figure>

**Фавикон** - это значок (иконка) веб-сайта или веб-страницы.&#x20;

Отображается во вкладке браузера перед названием страницы, а также в качестве картинки рядом с закладкой.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2714%29.png" alt=""><figcaption></figcaption></figure>

Фавикон загружается картинкой в данной строке ввода из раздела Файлы.

**Иконки для курсов в меню** (на тарифах Бизнес и Эксперт) - при включении для каждого курса можно задать иконку рядом с названием в меню ученика: отдельно для доступного и недоступного курса. **Положение иконки** - до или после названия. Здесь же задаются иконки по умолчанию: **Иконка курса (доступен)** и **Иконка курса (недоступен)**.

**Логотип раздела Сайта** и **Логотип раздела Сайта в футере** - появляются, если в школе включен Сайт.

## **Фон школы**

В этой опции настройки можно сформировать фон школы по дополнительным параметрам (доступна только на тарифах Бизнес, Эксперт, Эксперт+WL).

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2715%29.png" alt=""><figcaption></figcaption></figure>

Включает в себя настройку доп. параметров:
- Цвет фона;
- Фоновое изображение (можно загрузить картинку для фона);
- Выравнивание фона;
- Повторение фона;
- Размер фона: **Исходный размер**, **По ширине окна** или **На весь экран**;
- Фиксирование фона;
- Интенсивность теней элементов.

## **Цвета элементов школы**

В этой опции настройки можно сформировать цвета элементов школы по дополнительным параметрам (доступна только на тарифах Бизнес, Эксперт, Эксперт+WhiteLabel).

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2716%29.png" alt=""><figcaption></figcaption></figure>

Включает в себя настройку доп. параметров:
- Цвет основных элементов (кнопки и пр.) и Цвет текста основных элементов;
- Цвет основных элементов (наведение) и Цвет текста основных элементов (наведение);
- Цвет активных текстовых элементов (ссылки и пр.);
- Цвет дополнительных элементов (вспомогательные кнопки и пр.) и Цвет текста дополнительных элементов;
- Цвет дополнительных элементов (наведение) и Цвет текста дополнительных элементов (наведение);
- Цвет нейтральных элементов;
- Цвет неосновных блоков и заблокированных элементов;
- Цвет модулей курса;
- Цвет вводимого текста полей ввода;
- Цвет текста-плейсхолдера полей ввода;
- Цвет фона полей ввода;
- Цвет темы мобильных устройств.

Кнопка **Установить стандартные** возвращает цвета по умолчанию.

## **Цвета Сайта**

Блок появляется, если в школе включен Сайт, и доступен на тарифах Бизнес и Эксперт. В нем задаются **Основной цвет** и **Дополнительный цвет** Сайта.

## **Прочее**

Опция дает возможность сформировать размеры шрифтов для использования в разделе редактирования уроков школы.

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2717%29.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://docs.emdesell.ru/.gitbook/assets/image%20(2718%29.png" alt=""><figcaption></figcaption></figure>

Таким образом, можно включить несколько размеров для шрифта.

## Видео урок - Оформление школы

https://kinescope.io/sg3Tmv3tsfR1yw1SuxbH7s

<details>

<summary>Текстовая версия видео</summary>

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

#### Название и описание школы

1. `0:00` По умолчанию школа называется «Мой сайт», а на главной странице ученика стоит баннер без текста, логотипа и фирменных цветов. Чтобы это изменить, откройте **Настройки** и перейдите на вкладку **Основное**.
2. `0:51` В поле **Название школы** введите название, под которым вы представляете школу, например «Онлайн-школа дизайна». Поисковые роботы определяют школу по этому названию, поэтому используйте то, как ее обычно ищут.
3. `1:09` В поле **Описание школы** напишите краткое описание школы, например «Обучение веб-дизайну».
4. `1:40` В поле **Ключевые слова (через запятую)** укажите ключевые слова. Они влияют на поисковую выдачу (SEO). Нажмите **Сохранить изменения**, затем обновите страницу школы: название и описание появятся в шапке.

#### Главная страница ученика

5. `2:03` Чтобы оформить главную страницу, откройте раздел **Главная ученика**. На вкладке **Страница** находится текст, который видят ученики, и редактор для его оформления.
6. `2:28` В редакторе выделите текст и измените размер и тип шрифта, оформите заголовки, подчеркивание, абзацы, цитаты, выравнивание и нумерованные списки. Выделенный текст можно окрасить, а также задать цвет фона для него. Картинки и видео вставляются через этот же редактор.
7. `3:07` Перейдите на вкладку **Слайдер**. Оптимальный размер слайда — 850 на 390 пикселей; эти значения указаны в полях **Ширина** и **Высота**. Слайдер удобен, например, для анонса нового курса или встречи.
8. `3:25` Чтобы добавить слайд, нажмите кнопку с плюсом и загрузите изображение. В настройках слайда укажите название, ссылку и при необходимости отметьте **Открывать в новом окне**. По нажатию на баннер ученик перейдет по этой ссылке.
9. `3:41` В полях слайда укажите главное событие и описание. Текст появится под баннером на главной странице.
10. `4:01` Если добавить несколько слайдов, баннер будет переключаться между ними по очереди.
11. `4:21` Чтобы убрать баннер, откройте слайд и нажмите **Удалить**, затем **Сохранить изменения**. Если слайдов не осталось, пустое место на странице схлопывается.

#### Цвета школы

12. `4:36` Откройте **Настройки** и перейдите в раздел **Оформление**. Фирменные цвета задаются в блоке **Цвета элементов школы**.
13. `4:47` Нажмите на цветной квадрат нужного параметра и выберите цвет на цветовой панели или колесе либо введите код. Самый распространенный формат — HEX, также поддерживается RGB. Если у вас есть фирменные цвета, дизайнер может задать их, введя коды.
14. `5:22` Чтобы вернуть стандартные цвета, нажмите **Установить стандартные**, сохраните изменения, и цвета школы восстановятся.

#### Логотип, фавикон и фоновое изображение

15. `5:36` Логотип, фавикон и фоновое изображение добавляются в блоках **Логотип**, **Фавикон** и **Фоновое изображение** раздела **Оформление**. Нажмите кнопку с иконкой файла, чтобы открыть файловый менеджер.
16. `5:43` В файловом менеджере нажмите **Создать папку**, назовите ее, например, «Оформление» и откройте ее.
17. `5:53` Загрузите файлы в папку: нажмите **Выбрать файлы для загрузки** или перетащите файлы в окно. Загруженные файлы можно перемещать в другие папки.
18. `6:40` Чтобы установить логотип, выберите его в файловом менеджере. Включите **Отображение логотипа** и сохраните изменения. Логотип появится в школе и на странице входа.
19. `7:12` Фавикон загружается не в формате JPEG или PNG, а в формате **ICO**. Для преобразования изображения используйте специальные сервисы или попросите разработчиков создать файл.
20. `7:36` Выберите фавикон и сохраните изменения. Значок школы появится во вкладке браузера вместо стандартного значка.
21. `8:05` Фоновое изображение добавляется так же: выберите файл в поле **Фоновое изображение** и сохраните изменения. Фон появится в школе.
22. `8:13` Рекомендуемые размеры: логотип — 400 пикселей в ширину и 220 пикселей в высоту, фоновое изображение — 2250 на 1180 пикселей. Это максимальный размер, в котором школу могут открыть мониторы.

</details>

[Данные ученика](https://docs.emdesell.ru/nastroika-servisa/nastroiki/dannye-uchenika.md) <--- [Оформление](https://docs.emdesell.ru/nastroika-servisa/nastroiki/oformlenie.md) ---> [Курсы и уроки](https://docs.emdesell.ru/nastroika-servisa/nastroiki/kursy-i-uroki.md)