Temat został ustalony, treść jest na swoim miejscu, a strona wygląda... nijak. Wbudowany konfigurator WordPressa obsługuje podstawowe scenariusze: kolor tła, logo, widgety w pasku bocznym. Ale gdy tylko zechcą Państwo przesunąć nagłówek o 10 pikseli w lewo, zmienić czcionkę w konkretnym przycisku lub dodać gradientowe tło do jednego bloku, wbudowanych narzędzi już nie ma. A grzebanie w style.css przy każdej drobnostce nikomu nie sprawia przyjemności.

Yellow Pencil rozwiązuje ten problem wprost. To wizualny edytor CSS: klikają Państwo element na stronie i od razu zmieniają czcionki, kolory, odstępy, obramowania, animację, bez ani jednej linii kodu. Wtyczka generuje czysty CSS w locie i nie rusza plików motywu.

Pod koniec tego poradnika będą Państwo konfigurować wygląd szybciej, niż specjalista od składu otworzy inspektor kodu, i bez ryzyka, że coś się zepsuje.

💡 Szybki przegląd:

• Zainstaluj Yellow Pencil z katalogu WordPress.org (bezpłatnie) lub pobierz wersję Pro z oficjalnej strony
• Aktywuj wtyczkę i otwórz edytor wizualny przyciskiem „Zaczynajmy" z ekranu powitalnego
• Wybierz typ konfiguracji: globalną (dla całej witryny), dla jednej strony lub dla szablonu wpisów
• Klikaj elementy na stronie i zmieniaj ich wygląd za pomocą prawego panelu: czcionki, kolor, obramowania, tło, animację
• Zapisz zmiany i sprawdź responsywność za pomocą wbudowanego emulatora tabletu i telefonu

Czym jest Yellow Pencil i do czego jest Państwu potrzebny

Yellow Pencil to wtyczka do wizualnej edycji CSS dla WordPressa. Ważne jest, by od razu rozdzielić: to nie jest kreator stron w rodzaju Elementora czy Gutenberga. Wtyczka nie dodaje nowych bloków, stylizuje już istniejące. Te, które stworzyli Państwo za pomocą dowolnego buildera lub które są częścią motywu.

Podstawą jest inspektor elementów: klikają Państwo nagłówek, przycisk, obrazek i natychmiast uzyskują dostęp do ponad 60 właściwości CSS w prawym panelu. Przesuwają Państwo suwak, strona zmienia się w czasie rzeczywistym. Żadnego cyklu „poprawiłem kod → odświeżyłem przeglądarkę → nie pasuje → jeszcze raz".

Wtyczka działa z każdym motywem WordPress i nie modyfikuje jego plików. Wszystkie poprawki są zapisywane w osobnym arkuszu stylów i ładowane dynamicznie. Motyw pozostaje nietknięty, zmiany można wycofać, wyeksportować jako gotowy CSS lub usunąć razem z wtyczką.

Komu jest to potrzebne? Przede wszystkim tym, którzy nie piszą CSS ręcznie, ale chcą doprowadzić wygląd do porządku wizualnie. Jednak również doświadczeni programiści docenią szybkość: zamiast edycji kodu źródłowego i przeładowania, kliknięcie myszą i natychmiastowy rezultat. Freelancerzy i agencje używają Yellow Pencil do szybkiej personalizacji stron klientów bez ryzyka zepsucia cudzego motywu.

Kluczowe możliwości Yellow Pencil

Możliwości jest wiele, ale wszystkie krążą wokół jednej idei: wziąć dowolny element na stronie i zmienić jego wygląd za pomocą interfejsu wizualnego. Poniżej przedstawiono kluczowe funkcje wersji Pro (v7.6.7, aktualnej na rok 2026):

• Inspektor elementów, kliknięcie dowolnego bloku, tekstu lub obrazka otwiera panel ze wszystkimi dostępnymi właściwościami CSS
• **Wizualne **przeciąganie, zmieniaj położenie elementów myszą, bez edycji kodu
• Zmiana rozmiaru, ciągnij za krawędzie niebieskiej ramki wokół elementu, a rozmiar zmienia się wizualnie
• Ponad 900 czcionek Google Fonts, podłączanych jednym kliknięciem z wbudowanej biblioteki wtyczki
• Ponad 300 wzorów tła, plus gradienty, jednolite kolory i własne obrazy
• Ponad 50 animacji, gotowe animacje CSS z wizualnym menedżerem i generatorem własnych klatek kluczowych
• Edytor kodu CSS, dla tych, którzy chcą dopisać style ręcznie, z autouzupełnianiem i sprawdzaniem błędów
• Tryb responsywny, oddzielna edycja stylów dla desktopu, tabletu i telefonu

Wtyczka generuje CSS dynamicznie i ładuje go jako osobny arkusz stylów. Wydajność witryny przy tym nie cierpi, dodawany jest dokładnie jeden plik stylów, nic więcej.

Instalacja Yellow Pencil

Instalacja nie różni się od instalacji każdej innej wtyczki WordPress. Najpierw proszę pobrać plik: bezpłatna wersja jest dostępna w katalogu WordPress.org, a wersję Pro kupuje się na oficjalnej stronie dewelopera (licencja na jedną witrynę, dożywotnie aktualizacje). Niektóre motywy premium zawierają Yellow Pencil Pro w zestawie.

Proszę otworzyć panel administracyjny WordPress i przejść do „Wtyczki" → „Dodaj nową".

Proszę kliknąć „Załaduj wtyczkę" → „Wybierz plik".

Proszę wybrać pobrane archiwum ZIP waspthemes-yellow-pencil.zip i kliknąć „Zainstaluj".

Po instalacji proszę kliknąć „Aktywuj". W przypadku wersji Pro należy wprowadzić klucz licencyjny, który zostanie wysłany na e-mail po zakupie. Aktywacja otwiera dostęp do aktualizacji i wszystkich funkcji Pro.

Na ekranie pojawi się strona powitalna Yellow Pencil. W sekcji „Zasoby" znajduje się dokumentacja, poradniki i linki do wsparcia.

Proszę kliknąć „Zaczynajmy", a od razu trafią Państwo do edytora wizualnego na bieżącej stronie witryny.

Interfejs: trzy strefy edytora

Interfejs Yellow Pencil jest podzielony na trzy strefy. Po lewej stronie znajduje się wąski pasek narzędzi z ikonami: inspektor elementów, cofanie i ponawianie akcji, tryb pełnoekranowy, narzędzie responsywności oraz linijka pomiarowa. Panel jest minimalistyczny i nie odwraca uwagi od edytowanej strony.

Po prawej stronie znajduje się panel edytora. Jeśli żaden element nie jest zaznaczony, pokazuje on trzy dostępne typy ustawień.

Gdy klikną Państwo element na stronie, panel przełącza się na właściwości stylu: czcionki, kolory, odstępy, obramowania.

Wokół wybranego elementu pojawia się niebieska ramka z uchwytami zmiany rozmiaru. Element można przesuwać, przeciągając go, i zmieniać jego wymiary, pociągając za krawędzie ramki.

Centralną strefę zajmuje sama strona, widzą ją Państwo tak, jak zobaczą ją odwiedzający, i edytują w czasie rzeczywistym.

Podstawowe narzędzia

Na lewym panelu znajdują się trzy narzędzia, z których będą Państwo stale korzystać:

• Inspektor elementów, wybiera dowolny element wizualny na stronie do konfiguracji. Proszę kliknąć nagłówek, przycisk lub blok, a wszystkie jego właściwości CSS pojawią się na prawym panelu.
• Cofanie i ponawianie, eksperymentują Państwo z kolorami i czcionkami? Proszę kliknąć „cofnij", jeśli przesadzą Państwo z efektem. Historia zmian nie jest tracona aż do opuszczenia edytora.
• Tryb pełnoekranowy, usuwa panel administracyjny WordPress, pozostawiając tylko stronę i panele edytora. Jest to wygodne przy precyzyjnym pozycjonowaniu.

Na prawym panelu, na samej górze, znajdują się trzy najważniejsze przyciski:

• Podgląd, pokazuje stronę bez interfejsu edytora. W ten sposób widzą Państwo rezultat oczami odwiedzającego.
• Resetuj zmiany, cofa wszystkie niezapisane edycje. Przydatne, gdy zaszaleją Państwo z modyfikacjami i stracą wątek.
• Zapisz, stosuje zmiany. Po zapisaniu edycje są widoczne dla wszystkich odwiedzających witrynę.

Trzy tryby konfiguracji: kiedy który wybrać

Przed rozpoczęciem edycji Yellow Pencil proponuje wybór obszaru działania zmian. Panel edytora (gdy zaznaczenie jest zdjęte) pokazuje trzy opcje:

• Ustawienie globalne, zmiany są stosowane do wszystkich stron witryny. Zmienili Państwo kolor wszystkich nagłówków H2, zmienią się one wszędzie: na stronie głównej, na blogu, na stronie kontaktowej.
• Ustawienie pojedynczej strony, poprawki działają tylko na tej stronie, którą Państwo edytują. Idealne dla landing pages i unikalnych sekcji.
• Ustawienie szablonów, zmiany są stosowane do wszystkich wpisów tego samego typu. Chcą Państwo, aby wszystkie strony produktów wyglądały tak samo? Ten tryb jest dla Państwa.

Bieżący tryb wyświetlany jest na górze panelu edytora. Przed zapisaniem proszę zawsze sprawdzać, czy edytują Państwo właściwy typ: pomylić ustawienie globalne ze stronowym jest łatwo, a skutki widać od razu na całej witrynie.

Co można zrobić z Yellow Pencil: praktyczny przegląd

Poniżej omówienie kluczowych możliwości na rzeczywistych przykładach. Każdą operację wykonuje się kliknięciem w element i wyborem odpowiedniej sekcji w prawym panelu.

Typografia

Tekst to pierwsza rzecz, za którą biorą się użytkownicy po zainstalowaniu wtyczki. Proszę kliknąć dowolny blok tekstowy i wybrać „Tekst" w panelu edytora. Dostępne są wszystkie podstawowe właściwości: zmiana czcionki (ponad 900 wariantów z Google Fonts w wersji Pro), rozmiar, wysokość linii, odstępy między literami i wyrazami. Kolor tekstu wybiera się z wbudowanych palet, material i flat, lub ustawia za pomocą pipety.

Główna zaleta to podgląd na żywo. Przesuwa Pan suwak rozmiaru czcionki i od razu widzi, jak zmienia się układ. Jest to wielokrotnie szybsze niż cykl „poprawiłem CSS → odświeżyłem stronę → nie pasuje → znowu".

Obramowanie

Ramka wokół bloku to prosty sposób na wyróżnienie karty, cytatu lub formularza subskrypcji. Proszę wybrać element i przejść do zakładki „Obramowanie" w panelu edytora. Dostępne są cztery style: ciągła, kreskowana, kropkowana i ukryta.

Funkcja, której nie ma u większości konkurentów: każdą z czterech stron obramowania można skonfigurować osobno. Górne obramowanie, czerwone kreskowane, lewe, niebieskie ciągłe, prawe, zielone, dolne, brak. Szerokość, kolor i styl dla każdej strony ustawia się niezależnie, co daje swobodę projektową bez ani jednej linii kodu.

Tło

Tło elementu konfiguruje się w zakładce „Tło". Są trzy opcje: jednolity kolor (pipeta lub paleta), jeden z ponad 300 wbudowanych wzorów i gradient CSS, liniowy lub radialny. Można przesłać własny obraz i skonfigurować jego pozycjonowanie, powtarzanie oraz zachowanie podczas przewijania.

Wzory tła to przyjemny detal, który oszczędza czas. Zamiast szukać tekstur w bankach zdjęć, wybiera Pan wzór z biblioteki, zmienia jego kolor i przezroczystość, i otrzymuje schludne tło dla bloku za pomocą kilku kliknięć.

Animacja

Zakładka „Animacja" daje dostęp do ponad 50 gotowych animacji CSS: pojawianie się, znikanie, odbijanie, obracanie, pulsowanie i inne. Wybiera Pan efekt w wizualnym menedżerze, ustawia czas trwania i opóźnienie, i od razu widzi, jak element ożywa.

Dla niestandardowych scenariuszy dostępny jest generator animacji (Pro): definiuje Pan klatki kluczowe w edytorze wizualnym, a wtyczka generuje CSS @keyframes. Kilka animacji można uruchomić jednocześnie, aby uzyskać złożone zachowanie elementu.

Rozmiar i położenie

Zmiana rozmiaru elementu to dosłownie przeciąganie za krawędzie. Kliknięcie elementu pokazuje niebieską ramkę ze znacznikami w rogach i na bokach. Przeciąga Pan za znacznik, a rozmiar się zmienia.

Położenie zmienia się jeszcze prościej: chwyta Pan element myszą i przeciąga w wybrane miejsce.

Jest tylko jeden niuans: przeciąganie może zaburzyć responsywność. Po przesunięciu elementów koniecznie trzeba sprawdzić, jak strona wygląda na tablecie i telefonie. Służy do tego emulator responsywności w lewym panelu, który przełącza obszar podglądu między desktopem, tabletem i smartfonem. Jeśli coś się przesunęło, dla każdej rozdzielczości ustawia się osobne style.

Darmowa i Pro: co wybrać

Możliwości wersji darmowej i Pro różnią się znacząco. Darmowa daje podstawowy zestaw właściwości CSS: czcionki (bez Google Fonts), kolor tekstu, odstępy, obramowania, cienie, pozycjonowanie. To wystarczy do minimalnej personalizacji motywu: przesunięcia nagłówka, zmiany koloru przycisku, dodania ramki.

Pro odblokowuje całą resztę: ponad 900 czcionek Google, kolor tła i obrazy tła, animacje z wizualnym menedżerem, gradienty, wzory tła, zarządzanie szerokością i wysokością elementów, edytor CSS z autouzupełnianiem, konfigurację strony logowania WordPress i generator animacji.

W przypadku jednorazowego projektu klienckiego licencja Pro zwraca się natychmiast, oszczędza Pan godziny ręcznego kodowania. Do osobistego bloga wersja darmowa często jest wystarczająca.

Cena

Yellow Pencil Pro jest dystrybuowany na płatnej licencji z oficjalnej strony dewelopera. W cenę wliczone są dożywotnie aktualizacje wtyczki oraz okres wsparcia. Licencja obowiązuje na jedną stronę, dla wielu projektów kupuje się osobne klucze.

Darmowa wersja jest dostępna na stronie wtyczki WordPress.org. Instalacja jest standardowa, bezpośrednio z panelu administracyjnego przez „Wtyczki" → „Dodaj" → wyszukaj „Yellow Pencil".

Szczegółowy przegląd wideo interfejsu i kluczowych technik pracy z wtyczką, po angielsku, poglądowo i bez lania wody.

⁉️🤔 Często zadawane pytania

Czy Yellow Pencil zepsuje mój motyw?

Nie. Wtyczka nie modyfikuje plików motywu i nie narusza innych wtyczek. Wszystkie zmiany są zapisywane osobno i ładowane dynamicznie. Jeśli coś pójdzie nie tak, cofa Pan poprawki przyciskiem „Resetuj zmiany" lub usuwa wtyczkę, a motyw wraca do stanu początkowego.

Czy trzeba znać CSS, aby pracować z Yellow Pencil?

Nie, to właśnie jest sens tej wtyczki. Klika Pan element i zmienia jego właściwości wizualnie: kolor, czcionkę, odstępy, obramowania, animację. CSS jest generowany automatycznie. Jeśli zna Pan CSS, dostępny jest wbudowany edytor kodu z autouzupełnianiem i podświetlaniem składni, można dopisać style ręcznie na wierzch poprawek wizualnych.

Czy wtyczka działa z Gutenbergiem i Elementorem?

Tak, Yellow Pencil jest kompatybilny ze wszystkimi popularnymi kreatorami stron: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Wtyczka stylizuje gotowe bloki utworzone w kreatorze i nie koliduje z ich strukturą.

Czy można skonfigurować stronę logowania WordPress?

Tak, w wersji Pro. Proszę przejść do „Wygląd" → „YellowPencil Editor", wybrać stronę docelową „WordPress login page" i kliknąć „Customize". Edytuje Pan logo, tło, przyciski i pola formularza tak samo, jak zwykłą stronę.

Co się stanie po usunięciu wtyczki?

Wszystkie wprowadzone style znikną, strona wróci do domyślnego wyglądu motywu. Przed usunięciem można wyeksportować CSS za pomocą wbudowanej funkcji „Export stylesheet" i podłączyć ręcznie jako motyw potomny, wtedy style zostaną zachowane również bez wtyczki.

Czy są alternatywy?

Bezpośrednie odpowiedniki z wizualnym edytorem CSS: Microthemer (podobny inspektor elementów) i CSS Hero (nieco prostszy, mniej właściwości). Oba są płatne. Z darmowych tylko standardowy customizer WordPress, ale daje on dostęp jedynie do niewielkiej części właściwości CSS oferowanych przez Yellow Pencil.

Czy warto wziąć Yellow Pencil do personalizacji motywu

Jeśli nie pisze Pan/Pani CSS ręcznie i nie chce spędzać godzin na edytowaniu plików motywu, Yellow Pencil to jedno z najlepszych narzędzi na rynku. Nie zastępuje ono konstruktora stron, ale rozwiązuje dokładnie ten problem, z którym mierzy się każdy właściciel witryny: „chcę coś trochę przesunąć, zmienić kolor i czcionkę, ale bez kodu".

Dla freelancerów i małych agencji to oszczędność czasu na typowych poprawkach w witrynach klientów. Dla właścicieli blogów, sposób na doprowadzenie wizualnego porządku bez wzywania specjalisty od układu. Dla deweloperów, szybki prototyp stylów przed przeniesieniem do motywu potomnego.

Główna zasada pracy z Yellow Pencil: proszę sprawdzać responsywność po każdej serii poprawek. Wbudowany emulator tabletu i telefonu pokazuje uczciwy obraz, a osobne style dla każdej rozdzielczości pozwalają naprawić to, co się rozjechało. Z tym nawykiem wtyczka zwraca się już pierwszego dnia użytkowania.