> For the complete documentation index, see [llms.txt](https://wiki.reezonly.ru/space/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.reezonly.ru/space/nastroiki/stil-saita/shapka-saita.md).

# Шапка сайта

*Время на чтение: 5 минут*

{% hint style="info" %}
**Шапка сайта** — это верхняя панель, которая отображается на страницах вашей онлайн-академии. В ней можно разместить логотип, меню навигации и кнопку перехода к обучению. Для шапки также можно выбрать компактное отображение или вариант с открытой навигацией на компьютере.
{% endhint %}

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

### Где находятся настройки шапки

1. В административной части откройте раздел **«Настройки»**.
2. Перейдите в подраздел **«Стиль сайта»**.
3. Откройте настройки **«Шапка сайта»**.

<figure><img src="/files/N5du2xGclhNWhsbMmILa" alt=""><figcaption></figcaption></figure>

Здесь можно настроить:

1. стиль шапки;
2. логотип;
3. название кнопки перехода к обучению;
4. пункты меню;
5. HTML-код в шапке сайта.

{% hint style="info" %}
Изменения в настройках шапки сохраняются автоматически. Отдельно нажимать кнопку сохранения не нужно.
{% endhint %}

### Как выбрать стиль шапки

В поле **«Стиль шапки»** доступны два варианта:

* **«Компактная»** — пункты навигации открываются через кнопку меню;

<figure><img src="/files/Ho5jd9NJC8qfwN4DSn1Y" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ON4LYBxjHDf5P2J8u8AW" alt=""><figcaption></figcaption></figure>

Чтобы изменить стиль:

1. Откройте поле **«Стиль шапки»**.
2. Выберите **«Компактная»** или **«Навигация в шапке»**.
3. Проверьте результат в области предварительного просмотра.

<figure><img src="/files/x2hWK2Rd8pR08LDUJncv" alt=""><figcaption></figcaption></figure>

Выбранный вариант сохраняется автоматически.

#### Как настроить логотип

Логотип помогает посетителю узнавать сайт. При нажатии на него пользователь возвращается на главную страницу.

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

Чтобы загрузить новый логотип:

1. Нажмите на область загрузки.
2. Выберите файл на устройстве.
3. Дождитесь, пока новый логотип появится в предварительном просмотре.

Поддерживаются файлы в форматах PNG и SVG.

<figure><img src="/files/xxRaA9FEzkgjBTQy2T35" alt=""><figcaption></figcaption></figure>

#### Как настроить кнопку перехода к обучению

Кнопка перехода к обучению отображается для авторизованных посетителей. Она ведёт на страницу **«Моё обучение»**, где пользователь может открыть назначенные ему продукты и продолжить обучение.

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

Неавторизованному посетителю вместо неё отображается кнопка **«Войти»** с иконкой пользователя. Нажатие на эту кнопку открывает форму авторизации.

<figure><img src="/files/TiOFA0GxaAG6S4FmirVd" alt=""><figcaption></figcaption></figure>

### Как настроить меню

В разделе **«Меню»** настраиваются ссылки, с помощью которых посетители переходят между страницами сайта или открывают внешние ресурсы.

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

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

Как добавить пункт меню

1. Откройте нужный столбец меню.
2. Нажмите **«+ Добавить»**.
3. Введите название пункта.
4. Добавьте ссылку.

<figure><img src="/files/xipVD8P3ZSS38a0NCqpd" alt=""><figcaption></figcaption></figure>

Пункты отображаются в том же порядке, в котором расположены в настройках. Если выбран стиль **«Навигация в шапке»**, первые шесть пунктов появятся непосредственно в шапке, а остальные — в меню **«Ещё»**.

#### Какие ссылки можно использовать

В меню поддерживаются следующие варианты:

1. **Полный адрес** — полный URL страницы. Используйте его для внешних ресурсов.

   Пример: `https://reezonly.com/space`
2. **Относительный адрес** — путь после домена. Используйте его для страниц текущего сайта.

   Пример: `/main`
3. **Якорная ссылка** — переход к определённому блоку на странице.

   Пример: `/#catalog`

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

### Как добавить HTML-код в шапку сайта

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

<figure><img src="/files/nucvZYRZX33HQMV6bFFu" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Добавляйте только проверенный код. Ошибка в разметке или в подключаемом скрипте может повлиять на отображение и работу страниц сайта.
{% endhint %}

{% hint style="success" %}
Готово: стиль и элементы шапки настроены. Проверьте результат на компьютере и мобильном устройстве, чтобы навигация оставалась понятной для всех посетителей сайта.
{% endhint %}