Цветовая схема
Время чтения: 10 минут
🎇 Цветовая схема - специализированный раздел, позволяющий комплексно настроить цветовое оформление сайта. Вы можете настроить каждый цветовой параметр согласно дизайн-концепту вашей онлайн-академии.
Выбрать пресет. С помощью этой кнопки вы можете выбрать любую из предложенных готовых тем оформления вашего сайта и донастроить ее с помощью параметров из настроек ниже.
Раздел настроек. Всего существует 5 разделов: Основные настройки, Акцентный цвет, Основные кнопки, Второстепенные кнопки, Шапка. В этих разделах сгруппированы настройки разных частей сайта, которые настраиваются индивидуально.
Подраздел настроек. Здесь вы точечно можете настроить один из элементов, выбрав нужный цвет самого элемента и цвет текста, который будет на этом элементе.
Настройка цвета. Кликнув на иконку цвета или ее код, откроется окно, в котором вы можете выбрать цвет из палитры или внести вручную по коду.
Выбор пресета
Если вам нужно быстро запустить свою академию и вы не имеете дизайн, вы можете выбрать готовый цветовой пресет, который сможете быстро донастроить.
На вкладке Цветовая схема кликните на кнопку Выбрать пресет
В открывшемся окне выберите пресет который больше всего вам подходит и нажмите на кнопку Сохранить
После сохранения кликните на кнопку Сохранить изменения внизу страницы
Новая цветовая схема будет применена после перезагрузки сайта академии.
💡После выбора нужного пресета вы можете донастроить компоненты сайта с помощью раздела настроек. О разделе настроек вы узнаете чуть ниже в статье.
Настройка цвета
Нажав на иконку цвета или его номер перед вами откроется Палитра:
Основная палитра. С помощью ползунка вы можете точечно выбрать нужный вам цвет
Слайдер оттенка. Позволяет выбрать основной оттенок для дальнейшей настройки.
Поле прозрачности цвета. Это поле позволит вам донастроить прозрачность выбранного вами цвета
Превью цвета. В этом поле отображается итоговый вариант настроенного вами цвета
Поле ввода кодов цвета. Если у вас есть заранее выбранные цвета, вы можете ввести их HEX или RGBA коды, после чего палитра покажет нужный цвет
Настройка элементов сайта
Основные настройки
Основной фон - самый важный параметр, который задает цветовой фон вашей академии. В каждой настройке из раздела настроек вы также можете менять цвет текста, который будет применен к изменяемому элементу.
Страница сайта до изменения параметра Основной фон
Страница сайта после изменения
Фон подложки - это цвет, который накладывается на подложку элементов блока. Фон на подложке используется в блоках на страницах сайта, на промостраницах и т.д., и отвечает за цвет под графическими элементами и текстом.
Фон подложки до изменения
После изменения
Фон на подложке - цвет, который используется в графических элементах внутри пользовательского интерфейса в разделе обучения продукта.
Фон на подложке до изменения
После изменения
Фон на подложке (Текст на изображениях) - С помощью этой настройки вы можете настроить цвет текста на изображениях. Эта настройка позволяет изменить цвет текста на все карточках в каталоге, на баннерах и т.д.
Текст на изображениях до изменения
После изменения:
Ссылки - Вы можете кастомизировать цвет ссылок в шапке сайта вашей академии.
Дополнительные настройки
Помимо основных настроек, вы можете настроить цветовую схему второстепенных элементов с помощью неосновных настроек.
Более подробно каждую из настроек мы разберем ниже:
Акцентный цвет - цвет, который используется для выделения определенных элементов в дизайне сайта. Это может быть цвет, который привлекает внимание, выделяется среди других цветов и служит для подчеркивания важности или привлечения внимания к определенным частям дизайна.
Пример изменения акцентного цвета
После изменения
Основные кнопки - это кнопки, с помощью которых пользователь делает целевое действие, записывается на курс или открывает промо-страницу какого-либо продукта. Основные кнопки используются на баннерах.
Основные кнопки до изменения
После изменения
Второстепенные кнопки - это элементы интерфейса, которые обычно имеют меньший вес или важность по сравнению с основными, или "примарными", кнопками. В Reezonly Space второстепенные кнопки используются, в основном, на главной странице сайта.
Второстепенные кнопки до изменения
После изменения
Шапка
Шапка сайта (хеддер) - верхняя часть сайта и содержит важные элементы интерфейса и навигации. С помощью настройки Шапка вы можете изменить цвет шапки сайта.
Шапка сайта до изменения:
После изменения:
🎆В этой статье мы постарались показать вам как устроена настройка цветовой схемы, если у вас возникли дополнительные вопросы - обращайтесь в нашу службу поддержки. Мы всегда рады помочь :)
Last updated