Изменение цветов сайта с помощью стилей

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

В этом руководстве

1. Обзорное видео
2. Переход к настройкам цвета
3. Определение цветовой палитры
   1. Цвета темы
   2. Пользовательские цвета
4. Настройка цветов элементов

Обзорное видео

Переход к настройкам цвета

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

1. На консоли перейдите в раздел Внешний вид → Редактор.
2. Нажмите Стили слева или выберите значок «Стили», как показано здесь. Значок выглядит как чёрно-белый круг.
3. Выберите Цвета.
4. Выберите Палитра, чтобы указать цвета по умолчанию для своего сайта, или выберите один из следующих элементов на сайте:
   • Текст
   • Фон
   • Ссылка
   • Подписи
   • Кнопка
   • Заголовок

Далее в этом руководстве будет дано более подробное объяснение каждого из этих элементов.

Определение цветовой палитры

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

Здесь можно изменить цвета темы, цвета по умолчанию и пользовательские цвета.

• Тема. Цвета, установленные дизайнерами темы при создании темы и используемые в дизайне темы.
• По умолчанию. Цвета, которые отображаются в настройках цвета блока при редактировании страниц и записей.
• Пользовательские. Определите и назовите дополнительные цвета, которые будут использоваться в цветовой палитре.

Цвета темы

Чтобы обновить цвета темы, следуйте инструкциям ниже.

1. Щёлкните по любому месту области под палитрой.

2. Щёлкните по трём точкам рядом с темой, а затем выберите Показать подробности, чтобы развернуть список цветовых областей в палитре.
3. Каждая тема определяет свои собственные цветовые области. В нашем примере для редактирования этого цвета можно выбрать Основной, Второстепенный, Передний, Фоновый или Третичный.

Процедура обновления цветов темы и цветов по умолчанию в разделе Стили редактора сайта

4. Выберите нужный цвет с помощью всплывающего окна выбора цвета.
5. Нажмите Готово, чтобы установить выбранный цвет.
6. Нажмите Сохранить в правом верхнем углу, чтобы сохранить изменения.

Пользовательские цвета

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

Чтобы добавить пользовательские цвета, выполните следующие дополнительные действия.

1. В разделе Пользовательские нажмите кнопку +.
2. Выберите цвет в палитре или введите значение цвета в HEX, RGB или HSL.
3. Щёлкните по названию цвета (по умолчанию это «Цвет 1») и введите название нового цвета.
4. Нажмите Готово.

Эти шаги демонстрируются в следующем видео:

Настройка цветов элементов

В настройках цвета под палитрой можно изменять цвета отдельных элементов сайта. К таким элементам относятся:

• Текст. Выберите цвет для обычного основного текста на вашем сайте, исключая ссылки, подписи, текст кнопки или заголовки.
• Фон. Выберите сплошной цвет или градиент для фона вашего сайта. Подробнее см. в нашем руководстве по настройке фона сайта.
• Ссылка. Выберите цвет для всех ссылок на вашем сайте. Здесь можно выбрать цвет по умолчанию для всех ссылок, а также цвет при наведении курсора на ссылку.

• Подписи. Выберите цвет текста, используемый в подписях к блокам «Изображение».
• Кнопки. Задайте цвет, используемый в блоках «Кнопки». Для кнопок можно выбрать цвет текста и задать сплошной цвет или градиент фона.
  • В настоящее время управление цветом при наведении для кнопок недоступно. Для применения цвета при наведении к кнопке можно использовать код CSS.
• Заголовки. Задайте цвет для блоков «Заголовок» на сайте. Можно выбрать цвет текста и задать сплошной цвет или градиент для фона заголовка.
  • Чтобы выбрать разные цвета для каждого уровня заголовка (от H1 до H6), щёлкните по трём точкам рядом с параметром Цвет, чтобы развернуть параметры, и щёлкните по нужному уровню заголовка. Рядом с уровнем заголовка появится галочка, после чего можно закрыть окно параметров, чтобы получить доступ к настройкам цвета для данного уровня заголовка.

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