Тему встановлено, контент на місці, а сайт виглядає... ніяк. Штатний кастомізатор 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: перевіряйте адаптивність після кожної серії правок. Вбудований емулятор планшета й телефона показує чесну картину, а роздільні стилі під кожну роздільну здатність дають змогу виправити те, що з’їхало. З цією звичкою плагін окупає себе в перший же день використання.