Тема установлена, контент на месте, а сайт выглядит... никак. Штатный кастомайзер WordPress закрывает базовые сценарии: цвет фона, логотип, виджеты в сайдбаре. Но стоит захотеть подвинуть заголовок на 10 пикселей левее, сменить шрифт у конкретной кнопки или добавить градиентную подложку одному блоку, и штатных рычагов уже нет. А лезть в style.css после каждой мелочи не хочется никому.

Yellow Pencil решает эту проблему в лоб. Это визуальный CSS-редактор: кликаете по элементу на странице и сразу меняете шрифты, цвета, отступы, границы, анимацию, без единой строки кода. Плагин генерирует чистый CSS на лету и не трогает файлы темы.

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

💡 Быстрый обзор:

• Установите Yellow Pencil из каталога WordPress.org (бесплатно) или загрузите Pro-версию с официального сайта
• Активируйте плагин и откройте визуальный редактор кнопкой «Начнем» из приветственного экрана
• Выберите тип настройки: глобальная (для всего сайта), для одной страницы или для шаблона записей
• Кликайте по элементам на странице и меняйте их вид через правую панель: шрифты, цвет, границы, фон, анимацию
• Сохраните изменения и проверьте адаптивность встроенным эмулятором планшета и телефона

Что такое Yellow Pencil и зачем он вам

Yellow Pencil, плагин визуального редактирования CSS для WordPress. Важно сразу разделить: это не конструктор страниц вроде Elementor или Gutenberg. Плагин не добавляет новые блоки, он стилизует уже существующие. Те, что вы создали любым билдером или что идут в теме.

В основе лежит инспектор элементов: кликаете по заголовку, кнопке, изображению, и сразу получаете доступ к 60+ CSS-свойствам на правой панели. Двигаете ползунок, страница меняется в реальном времени. Никакого цикла «поправил код → обновил браузер → не подошло → снова».

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

Кому это нужно? В первую очередь тем, кто не пишет CSS руками, но хочет доводить дизайн до ума визуально. Однако и опытные разработчики оценят скорость: вместо правки исходников и перезагрузки, клик мышью и мгновенный результат. Фрилансеры и агентства используют Yellow Pencil для быстрой кастомизации клиентских сайтов без риска сломать чужую тему.

Ключевые возможности Yellow Pencil

Возможностей много, но все они крутятся вокруг одной идеи: взять любой элемент на странице и изменить его внешний вид через визуальный интерфейс. Ниже, ключевые функции Pro-версии (v7.6.7, актуальной на 2026 год):

• Инспектор элементов, клик по любому блоку, тексту или изображению открывает панель со всеми доступными CSS-свойствами
• **Визуальное **перетаскивание, меняйте положение элементов мышью, без правки кода
• Изменение размера, тяните за края синей рамки вокруг элемента, и размер меняется визуально
• 900+ шрифтов Google Fonts, подключаются в один клик из встроенной библиотеки плагина
• 300+ фоновых паттернов, плюс градиенты, сплошные цвета и собственные изображения
• 50+ анимаций, готовые CSS-анимации с визуальным менеджером и генератором собственных ключевых кадров
• Редактор CSS-кода, для тех, кто хочет дописать стили вручную, с автодополнением и проверкой ошибок
• Адаптивный режим, раздельное редактирование стилей для десктопа, планшета и телефона

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

Установка Yellow Pencil

Установка не отличается от любого другого плагина WordPress. Сначала получите файл: бесплатная версия доступна в каталоге WordPress.org, а Pro, приобретается на официальном сайте разработчика (лицензия на один сайт, пожизненные обновления). Некоторые премиум-темы включают Yellow Pencil Pro в комплекте.

Откройте панель управления WordPress и перейдите в «Плагины» → «Добавить».

Нажмите «Загрузить плагин» → «Выбрать файл».

Выберите скачанный ZIP-архив waspthemes-yellow-pencil.zip и нажмите «Установить».

После установки нажмите «Активировать». Для Pro-версии введите лицензионный ключ, он придёт на почту после покупки. Активация открывает доступ к обновлениям и всем Pro-функциям.

На экране появится приветственная страница Yellow Pencil. В разделе «Ресурсы» лежит документация, руководства и ссылки на поддержку.

Нажмите «Начнем», и вы сразу попадёте в визуальный редактор на текущей странице сайта.

Интерфейс: три зоны редактора

Интерфейс Yellow Pencil разделён на три зоны. Слева, узкая панель инструментов с иконками: инспектор элементов, отмена и повтор действий, полноэкранный режим, инструмент адаптивности и измерительная линейка. Панель минималистична и не отвлекает от страницы, которую вы редактируете.

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

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

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

Центральную зону занимает сама страница, вы видите её так, как увидят посетители, и редактируете в реальном времени.

Основные инструменты

На левой панели три инструмента, которыми вы будете пользоваться постоянно:

• Инспектор элементов, выбирает любой визуальный элемент на странице для настройки. Клик по заголовку, кнопке или блоку, и все его CSS-свойства появляются на правой панели.
• Отмена и повтор, экспериментируете с цветами и шрифтами? Жмите «отменить», если переборщили. История правок не теряется до выхода из редактора.
• Полноэкранный режим, убирает админку WordPress, оставляя только страницу и панели редактора. Удобно для точного позиционирования.

На правой панели, в самом верху, три самые важные кнопки:

• Предпросмотр, показывает страницу без интерфейса редактора. Так вы видите результат глазами посетителя.
• Сбросить изменения, откатывает все несохранённые правки. Удобно, если заигрались и потеряли нить.
• Сохранить, применяет изменения. После сохранения правки видны всем посетителям сайта.

Три режима настройки: когда что выбирать

Перед началом редактирования Yellow Pencil предлагает выбрать область действия правок. Панель редактора (при снятом выделении) показывает три варианта:

• Глобальная настройка, изменения применяются ко всем страницам сайта. Поменяли цвет всех заголовков H2, они сменятся везде: на главной, в блоге, на странице контактов.
• Настройка одной страницы, правки действуют только на той странице, которую вы редактируете. Идеально для лендингов и уникальных разделов.
• Настройка шаблонов, изменения применяются ко всем записям того же типа. Хотите, чтобы все страницы товаров выглядели одинаково? Этот режим для вас.

Текущий режим отображается вверху панели редактора. Перед сохранением всегда проверяйте, что редактируете правильный тип: перепутать глобальную и страничную настройку легко, а последствия видны сразу на всём сайте.

Что можно сделать с Yellow Pencil: практический разбор

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

Типографика

Текст, первое, за что берутся после установки плагина. Кликните по любому текстовому блоку и выберите «Текст» на панели редактора. Доступны все базовые свойства: смена шрифта (900+ вариантов из Google Fonts в Pro), размер, высота строки, межбуквенный и межсловный интервал. Цвет текста выбирается из встроенных палитр, material и flat, или задаётся пипеткой.

Главное преимущество, живой предпросмотр. Вы двигаете ползунок размера шрифта и сразу видите, как плывёт вёрстка. Это в разы быстрее цикла «поправил CSS → обновил страницу → не подошло → снова».

Границы

Рамка вокруг блока, простой способ выделить карточку, цитату или форму подписки. Выберите элемент и перейдите во вкладку «Граница» на панели редактора. Доступны четыре стиля: сплошная, пунктирная, точечная и скрытая.

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

Фон

Фон элемента настраивается во вкладке «Фон». Вариантов три: сплошной цвет (пипетка или палитра), один из 300+ встроенных паттернов и CSS-градиент, линейный или радиальный. Можно загрузить собственное изображение и настроить его позиционирование, повтор и поведение при прокрутке.

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

Анимация

Вкладка «Анимация» открывает доступ к 50+ готовым CSS-анимациям: появление, исчезновение, подпрыгивание, вращение, пульсация и другие. Выбираете эффект в визуальном менеджере, настраиваете продолжительность и задержку, и сразу видите, как элемент оживает.

Для нестандартных сценариев есть генератор анимации (Pro): вы задаёте ключевые кадры в визуальном редакторе, а плагин генерирует CSS @keyframes. Несколько анимаций можно запустить одновременно, для сложного поведения элемента.

Размер и положение

Менять размер элемента, буквально тянуть за края. Клик по элементу показывает синюю рамку с маркерами по углам и сторонам. Тянете за маркер, размер меняется.

Положение меняется ещё проще: захватили элемент мышью и перетащили куда нужно.

Единственный нюанс: перетаскивание может нарушить адаптивность. После перемещения элементов обязательно проверьте, как страница выглядит на планшете и телефоне. Для этого в левой панели есть эмулятор адаптивности, он переключает область предпросмотра между десктопом, планшетом и смартфоном. Если что-то съехало, для каждого разрешения задаются отдельные стили.

Бесплатная и Pro: что выбрать

Возможности бесплатной и Pro-версии различаются серьёзно. Бесплатная даёт базовый набор CSS-свойств: шрифты (без Google Fonts), цвет текста, отступы, границы, тени, позиционирование. Этого хватит для минимальной кастомизации темы, подвинуть заголовок, сменить цвет кнопки, добавить рамку.

Pro открывает всё остальное: 900+ шрифтов Google, цвет фона и фоновые изображения, анимации с визуальным менеджером, градиенты, фоновые паттерны, управление шириной и высотой элементов, редактор CSS с автодополнением, настройку страницы входа WordPress и генератор анимаций.

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

Цена

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

Бесплатная версия доступна на странице плагина WordPress.org. Установка, стандартная, прямо из админки через «Плагины» → «Добавить» → поиск «Yellow Pencil».

Подробный видеообзор интерфейса и ключевых приёмов работы с плагином, на английском, наглядно и без воды.

⁉️🤔 Частые вопросы

Сломает ли Yellow Pencil мою тему?

Нет. Плагин не модифицирует файлы темы и не трогает другие плагины. Все изменения хранятся отдельно и загружаются динамически. Если что-то пошло не так, откатываете правки кнопкой «Сбросить изменения» или удаляете плагин, и тема возвращается к исходному состоянию.

Нужно ли знать CSS для работы с Yellow Pencil?

Нет, в этом и смысл плагина. Вы кликаете по элементу и меняете его свойства визуально: цвет, шрифт, отступы, границы, анимацию. CSS генерируется автоматически. Если знаете CSS, есть встроенный редактор кода с автодополнением и подсветкой, можно дописать стили руками поверх визуальных правок.

Работает ли плагин с Gutenberg и Elementor?

Да, Yellow Pencil совместим со всеми популярными конструкторами страниц: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Плагин стилизует готовые блоки, которые вы создали в билдере, и не конфликтует с их разметкой.

Можно ли настроить страницу входа WordPress?

Да, в Pro-версии. Перейдите в «Внешний вид» → «YellowPencil Editor», выберите целевую страницу «WordPress login page» и нажмите «Customize». Редактируете логотип, фон, кнопки и поля формы так же, как обычную страницу.

Что будет после удаления плагина?

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

Есть ли альтернативы?

Прямые аналоги с визуальным CSS-редактором: Microthemer (похожий инспектор элементов) и CSS Hero (чуть проще, меньше свойств). Оба платные. Из бесплатных, только штатный кастомайзер WordPress, но он даёт доступ лишь к малой части CSS-свойств, которые предлагает Yellow Pencil.

Стоит ли брать Yellow Pencil для кастомизации темы

Если вы не пишете CSS руками и не хотите тратить часы на правку файлов темы, Yellow Pencil один из лучших инструментов на рынке. Он не заменяет конструктор страниц, но закрывает именно ту боль, с которой сталкивается каждый владелец сайта: «хочу чуть-чуть подвинуть, поменять цвет и шрифт, но без кода».

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

Главное правило работы с Yellow Pencil: проверяйте адаптивность после каждой серии правок. Встроенный эмулятор планшета и телефона показывает честную картину, а раздельные стили под каждое разрешение позволяют поправить то, что съехало. С этой привычкой плагин окупает себя в первый же день использования.