БЛОГ 2410

Как изменить цвет текста в WordPress (3 простых метода)

Как изменить цвет текста в WordPress (3 простых метода)
Обсудим ваш проект?

Предлагаем обсудить, чем мы можем вам помочь. Забронируйте 15-минутную консультацию.

Поделиться статьей

Недавно один из наших читателей спросил, есть ли простой способ изменить цвет текста в WordPress?

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

В этом руководстве мы покажем вам, как легко изменить цвет текста в WordPress, шаг за шагом.

Легко изменить цвет текста в WordPress
Легко изменить цвет текста в WordPress Изображение с сайта wpbeginner.com

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

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

В этом руководстве мы рассмотрим следующие методы:

Просто щелкните одну из этих ссылок, чтобы сразу перейти к этому методу.

Метод 1. Изменение цвета текста с помощью визуального редактора

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

Пример цветного текста на странице WordPress
Пример цветного текста на странице WordPress Изображение с сайта wpbeginner.com

Вот как вы можете изменить цвет текста с помощью редактора блоков.

Во-первых, вам нужно будет отредактировать сообщение или страницу, которые вы хотите изменить, или создать новую.

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

Как только ваш текст на месте, вы можете изменить цвет.

Изменение цвета текста блока

В этом первом примере мы собираемся изменить цвет текста всего блока.

Просто нажмите на блок, и в правой части экрана должна открыться панель настроек блока. Затем нажмите на стрелку «Настройки цвета», чтобы развернуть эту вкладку. Здесь вы увидите настройки цвета текста.

Выбор цвета текста для всего блока в WordPress
Выбор цвета текста для всего блока в WordPress Изображение с сайта wpbeginner.com

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

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

Выбор пользовательского цвета текста для вашего блока
Выбор пользовательского цвета текста для вашего блока Изображение с сайта wpbeginner.com

Если вы передумали и хотите вернуться к цвету текста по умолчанию, просто нажмите кнопку «Очистить» под параметрами цвета:

Возврат вашего блока к цвету текста по умолчанию
Возврат вашего блока к цвету текста по умолчанию Изображение с сайта wpbeginner.com

Совет от профессионала: если вы хотите изменить цвет фона для блока, вы можете сделать это и здесь.

Изменение цвета текста слова или фразы

Что, если вы хотите изменить цвет только одного или двух слов? Это легко сделать и с помощью редактора блоков.

Во-первых, вам нужно выделить слова, которые вы хотите изменить. Затем щелкните маленькую стрелку вниз на панели инструментов редактора содержимого.

Выделите слова, цвет которых вы хотите изменить
Выделите слова, цвет которых вы хотите изменить Изображение с сайта wpbeginner.com

Затем просто нажмите ссылку «Цвет текста» внизу раскрывающегося списка:

Щелкните ссылку Цвет текста внизу раскрывающегося списка.
Щелкните ссылку Цвет текста внизу раскрывающегося списка. Изображение с сайта wpbeginner.com

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

Выберите цвет текста для выделенного слова (слов)
Выберите цвет текста для выделенного слова (слов) Изображение с сайта wpbeginner.com

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

Изменение цвета текста блока заголовка в WordPress
Изменение цвета текста блока заголовка в WordPress Изображение с сайта wpbeginner.com

Примечание. Вы не можете установить цвет фона для блоков заголовков.

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

Изменение цвета шрифта с помощью классического редактора

Если вы все еще используете классический редактор WordPress, вы можете изменить цвет шрифта с помощью панели инструментов.

В классическом редакторе щелкните Переключатель панели инструментов справа. Вы увидите второй ряд значков:

Нажмите кнопку переключения панели инструментов, чтобы увидеть второй ряд значков.
Нажмите кнопку переключения панели инструментов, чтобы увидеть второй ряд значков. Изображение с сайта wpbeginner.com

Теперь вы можете выбрать текст и изменить цвет шрифта с помощью раскрывающегося списка цветов шрифта.

Используйте кнопку цвета текста в классическом редакторе
Используйте кнопку цвета текста в классическом редакторе Изображение с сайта wpbeginner.com

Метод 2. Изменение цвета текста в настройщике темы

Что, если вы хотите изменить цвет текста на всем сайте? Многие из лучших тем WordPress позволят вам сделать это с помощью настройщика тем.

В этом примере мы используем тему OceanWP. Это одна из лучших бесплатных тем для WordPress.

На панели управления WordPress перейдите в Внешний вид »Настроить, чтобы открыть настройщик тем.

Перейдите в Внешний вид, затем выберите Настроить на панели инструментов WordPress.
Перейдите в Внешний вид, затем выберите Настроить на панели инструментов WordPress. Изображение с сайта wpbeginner.com

Затем вам нужно найти такой вариант, как «Типографика». Доступные параметры и то, как они называются, зависят от вашей темы.

Выберите Типографика или аналогичный параметр в настройщике темы.
Выберите Типографика или аналогичный параметр в настройщике темы. Изображение с сайта wpbeginner.com

Давайте перейдем к вкладке «Типографика» или аналогичному варианту. Затем найдите параметр, в котором вы можете изменить текст своих сообщений и страниц. В OceanWP это называется «Основной» текст. Вам нужно нажать на это, чтобы вы могли настроить цвет шрифта и многое другое.

Выберите основной текст для изменения в настройщике
Выберите основной текст для изменения в настройщике Изображение с сайта wpbeginner.com

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

Выбор цвета основного текста с помощью настройщика темы
Выбор цвета основного текста с помощью настройщика темы Изображение с сайта wpbeginner.com

Вы также можете изменить цвета заголовка аналогичным образом, используя параметры для изменения H1, H2 и так далее.

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

Публикация изменений на вашем сайте
Публикация изменений на вашем сайте Изображение с сайта wpbeginner.com

Совет: выбор черного или темно-серого текста на белом или очень светлом фоне обычно лучше для читабельности.

Метод 3. Изменение цвета текста с помощью кода CSS

Что делать, если в вашей теме нет возможности изменить цвет текста?

Вы по-прежнему можете изменить цвет шрифта на всем сайте, используя настройщик темы. Перейдите в Внешний вид »Настройщик на панели инструментов WordPress.

Внизу списка параметров вы увидите вкладку с надписью «Дополнительные CSS».

Откройте раздел Additional CSS в настройщике темы.
Откройте раздел Additional CSS в настройщике темы. Изображение с сайта wpbeginner.com

Затем перейдите на вкладку «Дополнительные CSS», и вы увидите несколько инструкций и поле для ввода кода CSS.

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

п {цвет: # 99 00 00; }

Введите CSS для изменения цвета абзаца в настройщике темы
Введите CSS для изменения цвета абзаца в настройщике темы Изображение с сайта wpbeginner.com

Это изменит цвет шрифта обычного текста во всех ваших сообщениях и страницах на темно-красный (или любой другой цвет, который вы выбрали), например:

Цвет текста настраивается для всего сайта с использованием кода CSS
Цвет текста настраивается для всего сайта с использованием кода CSS Изображение с сайта wpbeginner.com

Если вы хотите изменить цвет заголовков в своем сообщении, вы можете вместо этого добавить этот код:

h2 {цвет: # 99 00 00; }

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

Если вы не знакомы с CSS или хотите удобный для начинающих редактор CSS, который позволяет легко настраивать все стили вашего веб-сайта, мы рекомендуем изучить CSS Hero. Это мощный визуальный редактор, который позволяет настраивать стили всего вашего сайта.

Плагин CSS Hero
Плагин CSS Hero Изображение с сайта wpbeginner.com

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

Свяжитесь с нами.

Узнайте, чем мы можем быть для вас полезны.

Контакты
Как изменить цвет текста в WordPress (3 простых метода) | Блог 2410

Агентство веб разработки.

Услуги программирования и веб разработки по фиксированной цене. Специализация: WordPress, разработка B2B решений и создание кастомных скриптов.

WordPress

Разработка шаблонов, плагинов, интернет магазинов на WooCommerce, создание сайтов

Подробнее

B2B решения

CRM, ERP, внутренние системы, автоматизация, калькуляторы, SaaS и индивидуальные решения

Подробнее

Программирование

Разработка кастомных скриптов, API, интеграции, Zapier, Integromat, автоматизация

Подробнее

Подписка

Безлимитные услуги графического дизайна и веб разработки по фиксированной цене

Подробнее