Цвета и цветовые темы

Цвета задают настроение сайта: фон секций, заголовки, текст, ссылки и кнопки. В Photosquare цвета настраиваются глобально через палитру и цветовые темы — одна правка темы меняет вид всех секций, где она используется.

Обзор панели «Стили сайта» — в Стили сайта: обзор. Шрифты и форма кнопок — в Шрифты сайта и Кнопки.

Перед началом

1. Откройте редактор: ваш-id.photosquare.ru/config.
2. В главном меню выберите Стили → Цвета или нажмите иконку кисти над превью и перейдите в раздел цветов.
3. Изменения видны в превью справа — см. Превью сайта в редакторе.

[изображение: экран «Цвета» — полоска из пяти цветов палитры, кнопка «Редактировать палитру», список карточек цветовых тем]

Как устроены цвета

В Photosquare два уровня настройки:

1. Палитра — пять базовых цветов сайта (от самого светлого к самому тёмному).
2. Цветовые темы — десять готовых сочетаний на основе палитры. Каждая секция страницы использует одну из тем; тема задаёт, какой цвет палитры пойдёт на фон, заголовки, текст, кнопки и другие элементы.

Изменение палитры пересчитывает все темы. Изменение конкретной темы затрагивает все секции, где эта тема выбрана.

Палитра сайта

На экране Цвета вверху — превью текущей палитры из пяти цветов. Нажмите Редактировать палитру.

1. Выберите цвет в полоске палитры — откроется цветовой круг и поле hex.
2. Задайте нужный оттенок вручную или воспользуйтесь вкладкой Пресеты — готовые сочетания из пяти цветов.
3. На вкладке Из изображения загрузите картинку — Photosquare подберёт палитру по цветам фото.

Порядок цветов важен: слева направо — от светлого «белого» к тёмному «чёрному», с акцентным цветом в середине. Имеет смысл держать крайние цвета светлыми и тёмными, а центральный — самым выразительным (кнопки, акценты).

[изображение: «Редактировать палитру» — пять квадратов цветов, color picker, вкладки «Пресеты» и «Из изображения»]

Цветовые темы

Ниже палитры на экране Цвета — список из десяти тем. В интерфейсе они названы так:

Темы идут парами (1 и 2): у пары один фон, но по-разному распределены цвета текста и акцентов — удобно чередовать соседние секции с похожим, но не одинаковым видом.

Настройка цветов темы

Нажмите карточку темы на экране Цвета — откроется панель Редактировать цветовую тему.

1. В выпадающем списке можно переключиться на другую тему.
2. Элементы сгруппированы по категориям: шапка, общие настройки секции, текст, кнопки и др. Нажмите цветной квадрат у нужного параметра.
3. Выберите цвет из палитры (вкладка Palette) или задайте произвольный оттенок (вкладка Custom и поле Hex).

Примеры параметров: фон секции (Section Background), заголовки разных уровней, основной текст, ссылки, фон и текст основной, второстепенной и дополнительной кнопок. Список длинный — прокрутите панель, если ищете конкретный элемент.

Из панели темы можно перейти к редактированию всей палитры — ссылка вверху списка (Редактировать палитру сайта).

Важно: правки темы применяются ко всем секциям с этой темой на всём сайте, а не только к той, что видна в превью.

[изображение: «Редактировать цветовую тему» — выбор темы, группы Header / Text / Button, popover выбора цвета]

Цветовая тема секции

Чтобы секция выглядела иначе, не переделывая палитру, назначьте ей другую тему:

1. В режиме редактирования страницы нажмите на секцию.
2. Откройте настройки секции (иконка карандаша).
3. Перейдите на вкладку Цвета и выберите нужную тему.

Подробнее о настройках секции — в Оформление отдельной секции (когда будет опубликована). Цвета шапки и панели объявлений настраиваются отдельно — см. Настройка шапки сайта и Панель объявлений.

Сохранение

Любые изменения — палитра, настройки тем, тема секции — сначала видны в превью. Чтобы посетители увидели их на опубликованном сайте, нажмите Сохранить на панели над превью.