> 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/cvetovaya-skhema.md).

# Цветовая схема

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

{% hint style="info" %}
🎇 Цветовая схема - специализированный раздел, позволяющий комплексно настроить цветовое оформление сайта. Вы можете настроить каждый цветовой параметр согласно дизайн-концепту вашей онлайн-академии.
{% endhint %}

<figure><img src="/files/4l95ZJ2WXpMrsgwREUDr" alt="" width="563"><figcaption><p>№1. Страница Цветовая схема</p></figcaption></figure>

1. **Выбрать пресет**. С помощью этой кнопки вы можете выбрать любую из предложенных готовых тем оформления вашего сайта и донастроить ее с помощью параметров из настроек ниже.
2. **Раздел** настроек. Всего существует 5 разделов: **Основные настройки, Акцентный цвет, Основные кнопки, Второстепенные кнопки, Шапка**. В этих разделах сгруппированы настройки разных частей сайта, которые настраиваются индивидуально.
3. **Подраздел** настроек. Здесь вы точечно можете настроить один из элементов, выбрав нужный цвет самого элемента и цвет текста, который будет на этом элементе.
4. **Настройка цвета.** Кликнув на иконку цвета или ее код, откроется окно, в котором вы можете выбрать цвет из палитры или внести вручную по коду.

## Выбор пресета <a href="#h_643967ffa4" id="h_643967ffa4"></a>

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

<figure><img src="/files/9Q9SavS4Z8ivMdvtKYIG" alt="" width="563"><figcaption><p>№2. Выбор пресета</p></figcaption></figure>

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

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

{% hint style="info" %}
💡После выбора нужного пресета вы можете донастроить компоненты сайта с помощью раздела настроек. О разделе настроек вы узнаете чуть ниже в статье.
{% endhint %}

### Настройка цвета <a href="#h_894055a486" id="h_894055a486"></a>

Нажав на иконку цвета или его номер перед вами откроется Палитра:

<figure><img src="/files/EVObmzBXqqTChPPPi47C" alt="" width="563"><figcaption><p>№3. Выбор цвета на Палитре</p></figcaption></figure>

<figure><img src="/files/mPiNt0J5RoHBdWIPUumj" alt="" width="188"><figcaption><p>№4. Палитра</p></figcaption></figure>

1. Основная палитра. С помощью ползунка вы можете точечно выбрать нужный вам цвет
2. Слайдер оттенка. Позволяет выбрать основной оттенок для дальнейшей настройки.
3. Поле прозрачности цвета. Это поле позволит вам донастроить прозрачность выбранного вами цвета
4. Превью цвета. В этом поле отображается итоговый вариант настроенного вами цвета
5. Поле ввода кодов цвета. Если у вас есть заранее выбранные цвета, вы можете ввести их HEX или RGBA коды, после чего палитра покажет нужный цвет

## Настройка элементов сайта <a href="#h_dab40f79e1" id="h_dab40f79e1"></a>

### Основные настройки <a href="#h_ab965b868f" id="h_ab965b868f"></a>

<figure><img src="/files/L2GuYh5ohUY4PqIJ99Jp" alt="" width="563"><figcaption><p>№5. Основные настройки</p></figcaption></figure>

1. **Основной фон** - самый важный параметр, который задает цветовой фон вашей академии. В каждой настройке из раздела настроек вы также можете менять цвет текста, который будет применен к изменяемому элементу.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Страница сайта до изменения параметра <strong>Основной фон</strong></td><td><a href="/files/G8Mp0DKNQsUGnALqkIVq">/files/G8Mp0DKNQsUGnALqkIVq</a></td></tr><tr><td>Страница сайта после изменения</td><td><a href="/files/ycM35vjVJT5PlTo4wQt5">/files/ycM35vjVJT5PlTo4wQt5</a></td></tr></tbody></table>

2. **Фон подложки** - это цвет, который накладывается на подложку элементов блока. Фон на подложке используется в блоках на страницах сайта, на промостраницах и т.д., и отвечает за цвет под графическими элементами и текстом.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Фон подложки до изменения</td><td><a href="/files/g9wbGJC862YpJNoAHpCx">/files/g9wbGJC862YpJNoAHpCx</a></td></tr><tr><td>После изменения</td><td><a href="/files/GW3kNCJEHIalfj5GDIXh">/files/GW3kNCJEHIalfj5GDIXh</a></td></tr></tbody></table>

3. **Фон на подложке** - цвет, который используется в графических элементах внутри пользовательского интерфейса в разделе обучения продукта.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Фон на подложке до изменения</td><td><a href="/files/UTUEE7IU26qxzvB6R25D">/files/UTUEE7IU26qxzvB6R25D</a></td></tr><tr><td>После изменения</td><td><a href="/files/7JDEbQtyaqXMDyS7xfOY">/files/7JDEbQtyaqXMDyS7xfOY</a></td></tr></tbody></table>

4. **Фон на подложке** (Текст на изображениях) - С помощью этой настройки вы можете настроить цвет текста на изображениях. Эта настройка позволяет изменить цвет текста на все карточках в каталоге, на баннерах и т.д.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Текст на изображениях до изменения</td><td><a href="/files/aXxYJ89IaWlv5bW6r6Oc">/files/aXxYJ89IaWlv5bW6r6Oc</a></td></tr><tr><td>После изменения:</td><td><a href="/files/E6txQ5AC2v1f9AzkSZE9">/files/E6txQ5AC2v1f9AzkSZE9</a></td></tr></tbody></table>

5. **Ссылки** - Вы можете кастомизировать цвет ссылок в шапке сайта вашей академии.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><h4 id="h_112461c56c">Как это выглядит до изменения</h4></td><td><a href="/files/YuC8Ch1DhXW1cEomXT8a">/files/YuC8Ch1DhXW1cEomXT8a</a></td></tr><tr><td>Как выглядит после</td><td><a href="/files/LRSJ5fbgYx8GLJHmR2zq">/files/LRSJ5fbgYx8GLJHmR2zq</a></td></tr></tbody></table>

### Дополнительные настройки <a href="#h_4c96263f15" id="h_4c96263f15"></a>

Помимо основных настроек, вы можете настроить цветовую схему второстепенных элементов с помощью неосновных настроек.

<figure><img src="/files/dwsxeLte8gyVluZsgS3i" alt="" width="563"><figcaption><p>№6. Дополнительные настройки</p></figcaption></figure>

Более подробно каждую из настроек мы разберем ниже:

1. Акцентный цвет - цвет, который используется для выделения определенных элементов в дизайне сайта. Это может быть цвет, который привлекает внимание, выделяется среди других цветов и служит для подчеркивания важности или привлечения внимания к определенным частям дизайна.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Пример изменения акцентного цвета</td><td><a href="/files/f9Mz3WA9UGkc1SghAd0j">/files/f9Mz3WA9UGkc1SghAd0j</a></td></tr><tr><td>После изменения</td><td><a href="/files/tmMI56oMxxxX2I6thtDm">/files/tmMI56oMxxxX2I6thtDm</a></td></tr></tbody></table>

2. Основные кнопки - это кнопки, с помощью которых пользователь делает целевое действие, записывается на курс или открывает промо-страницу какого-либо продукта. Основные кнопки используются на баннерах.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Основные кнопки до изменения</td><td><a href="/files/Mzk21zhP1vn1zk32a78Y">/files/Mzk21zhP1vn1zk32a78Y</a></td></tr><tr><td>После изменения</td><td><a href="/files/96GVMxR95oXXlOco2duy">/files/96GVMxR95oXXlOco2duy</a></td></tr></tbody></table>

3. **Второстепенные кнопки** - это элементы интерфейса, которые обычно имеют меньший вес или важность по сравнению с основными, или "примарными", кнопками. В Reezonly Space второстепенные кнопки используются, в основном, на главной странице сайта.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td>Второстепенные кнопки до изменения</td><td><a href="/files/jH6yNVz3AxS2EDgn3HmH">/files/jH6yNVz3AxS2EDgn3HmH</a></td></tr><tr><td>После изменения</td><td><a href="/files/laTIy5oMPhscQiVhc83H">/files/laTIy5oMPhscQiVhc83H</a></td></tr></tbody></table>

#### Шапка <a href="#h_bf19e71bf9" id="h_bf19e71bf9"></a>

Шапка сайта (хеддер) - верхняя часть сайта и содержит важные элементы интерфейса и навигации. С помощью настройки Шапка вы можете изменить цвет шапки сайта.

Шапка сайта до изменения:

<figure><img src="/files/61lR1asTXVizSCiR2qgj" alt=""><figcaption><p>№7. Шапка сайта до изменения</p></figcaption></figure>

После изменения:

<figure><img src="/files/CL1Feo3Oilm6jnlENxxa" alt=""><figcaption><p>№8. Шапка сайта после изменения</p></figcaption></figure>

{% hint style="info" %}
🎆В этой статье мы постарались показать вам как устроена настройка цветовой схемы, если у вас возникли дополнительные вопросы - обращайтесь в нашу службу поддержки. Мы всегда рады помочь :)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://wiki.reezonly.ru/space/nastroiki/stil-saita/cvetovaya-skhema.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.