Das Theme ist installiert, der Inhalt ist eingepflegt, und die Seite sieht aus… wie nichts. Der integrierte WordPress-Customizer deckt grundlegende Szenarien ab: Hintergrundfarbe, Logo, Sidebar-Widgets. Doch sobald Sie eine Überschrift um 10 Pixel nach links verschieben, die Schriftart eines bestimmten Buttons ändern oder einem einzelnen Block einen Farbverlauf-Hintergrund verpassen möchten, stoßen die Standardsteuerelemente an ihre Grenzen. Und niemand möchte nach jeder kleinen Anpassung in die style.css eintauchen.

Yellow Pencil löst dieses Problem direkt. Es handelt sich um einen visuellen CSS-Editor: Sie klicken auf ein Element auf der Seite und ändern sofort Schriften, Farben, Abstände, Rahmen, Animationen, ohne eine einzige Codezeile zu schreiben. Das Plugin generiert sauberes CSS im laufenden Betrieb und lässt Ihre Theme-Dateien unberührt.

Am Ende dieses Leitfadens werden Sie Designs schneller anpassen, als ein Frontend-Entwickler die Code-Inspektion öffnen kann, und das ohne jedes Risiko, etwas kaputt zu machen.

💡 Kurzüberblick:

• Installieren Sie Yellow Pencil aus dem WordPress.org-Verzeichnis (kostenlos) oder laden Sie die Pro-Version von der offiziellen Website herunter
• Aktivieren Sie das Plugin und öffnen Sie den visuellen Editor über die Schaltfläche „Let's Start" auf dem Willkommensbildschirm
• Wählen Sie einen Anpassungstyp: global (site-weit), einzelne Seite oder Beitragsvorlage
• Klicken Sie auf Elemente auf der Seite und passen Sie deren Erscheinungsbild über das rechte Panel an: Schriften, Farbe, Rahmen, Hintergrund, Animation
• Speichern Sie Ihre Änderungen und prüfen Sie die Darstellung mit dem integrierten Tablet- und Smartphone-Emulator

Was Yellow Pencil ist und warum Sie es brauchen

Yellow Pencil ist ein visuelles CSS-Editing-Plugin für WordPress. Eine wichtige Unterscheidung vorweg: Es handelt sich nicht um einen Page-Builder wie Elementor oder Gutenberg. Das Plugin fügt keine neuen Blöcke hinzu; es gestaltet bestehende. Jene, die Sie mit einem beliebigen Builder erstellt haben, oder jene, die mit Ihrem Theme kommen.

Im Kern steckt ein Element-Inspektor: Klicken Sie auf eine Überschrift, einen Button oder ein Bild, und Sie erhalten sofort Zugriff auf über 60 CSS-Eigenschaften im rechten Panel. Bewegen Sie einen Schieberegler, und die Seite verändert sich in Echtzeit. Schluss mit dem Kreislauf „Code bearbeiten → Browser aktualisieren → passt nicht → wiederholen".

Das Plugin funktioniert mit jedem WordPress-Theme und verändert dessen Dateien nicht. Alle Bearbeitungen werden in einem separaten Stylesheet gespeichert und dynamisch geladen. Das Theme bleibt unberührt, Änderungen können rückgängig gemacht, als einsatzfertiges CSS exportiert oder zusammen mit dem Plugin entfernt werden.

Wer braucht das? In erster Linie diejenigen, die kein CSS von Hand schreiben, aber das Design visuell verfeinern möchten. Aber auch erfahrene Entwickler werden die Geschwindigkeit zu schätzen wissen: Statt Quelldateien zu bearbeiten und neu zu laden, liefert ein Mausklick sofortige Ergebnisse. Freelancer und Agenturen nutzen Yellow Pencil für die schnelle Anpassung von Kunden-Websites, ohne Gefahr zu laufen, das Theme eines anderen zu beschädigen.

Kernfunktionen von Yellow Pencil

Es gibt viele Funktionen, aber alle drehen sich um eine Idee: Nehmen Sie ein beliebiges Element auf der Seite und verändern Sie sein Erscheinungsbild über eine visuelle Oberfläche. Nachfolgend die Kernfunktionen der Pro-Version (v7.6.7, Stand 2026):

• Element-Inspektor: Ein Klick auf einen beliebigen Block, Text oder ein Bild öffnet ein Panel mit allen verfügbaren CSS-Eigenschaften
• **Visuelles **Drag-and-Drop: Ändern Sie Elementpositionen mit der Maus, ohne Code zu bearbeiten
• Größenanpassung: Ziehen Sie die Ränder des blauen Rahmens um ein Element, und die Größe ändert sich visuell
• Über 900 Google Fonts: Binden Sie diese mit einem Klick aus der integrierten Bibliothek des Plugins ein
• Über 300 Hintergrundmuster: plus Farbverläufe, Volltonfarben und eigene Bilder
• Über 50 Animationen: fertige CSS-Animationen mit einem visuellen Manager und benutzerdefiniertem Keyframe-Generator
• CSS-Code-Editor: für diejenigen, die Stile manuell schreiben möchten, mit Autovervollständigung und Fehlerprüfung
• Responsive-Modus: separate Stilbearbeitung für Desktop, Tablet und Smartphone

Das Plugin generiert CSS dynamisch und lädt es als separates Stylesheet. Die Seitenleistung wird nicht beeinträchtigt; es wird genau ein Stylesheet hinzugefügt, nicht mehr.

Yellow Pencil installieren

Die Installation unterscheidet sich nicht von der eines anderen WordPress-Plugins. Besorgen Sie sich zunächst die Datei: Die kostenlose Version ist im WordPress.org-Verzeichnis verfügbar, während Pro auf der offiziellen Website des Entwicklers erworben wird (Einzellizenz, lebenslange Updates). Einige Premium-Themes enthalten Yellow Pencil Pro im Bundle.

Öffnen Sie das WordPress-Dashboard und gehen Sie zu „Plugins" → „Installieren".

Klicken Sie auf „Plugin hochladen" → „Datei auswählen".

Wählen Sie das heruntergeladene ZIP-Archiv waspthemes-yellow-pencil.zip aus und klicken Sie auf „Jetzt installieren".

Klicken Sie nach der Installation auf „Aktivieren". Für die Pro-Version geben Sie Ihren Lizenzschlüssel ein (er kommt nach dem Kauf per E-Mail). Die Aktivierung schaltet Updates und alle Pro-Funktionen frei.

Die Willkommensseite von Yellow Pencil erscheint auf Ihrem Bildschirm. Der Bereich „Ressourcen" enthält Dokumentation, Anleitungen und Support-Links.

Klicken Sie auf „Los geht's", und Sie gelangen direkt in den visuellen Editor der aktuellen Website-Seite.

Oberfläche: drei Editor-Bereiche

Die Yellow-Pencil-Oberfläche ist in drei Bereiche unterteilt. Links befindet sich eine schmale Werkzeugleiste mit Symbolen: Element-Inspektor, Rückgängig- und Wiederholen-Aktionen, Vollbildmodus, Responsive-Tool und Messlineal. Das Panel ist minimalistisch gehalten und lenkt nicht von der Seite ab, die Sie bearbeiten.

Rechts befindet sich das Editor-Panel. Wenn kein Element ausgewählt ist, zeigt es drei verfügbare Anpassungstypen an.

Wenn Sie auf ein Element auf der Seite klicken, wechselt das Panel zu den Stileigenschaften: Schriftarten, Farben, Abstände, Rahmen.

Um das ausgewählte Element erscheint ein blauer Rahmen mit Ziehpunkten. Das Element lässt sich durch Ziehen verschieben und durch Ziehen an den Rahmenkanten in der Größe verändern.

Der mittlere Bereich wird von der Seite selbst eingenommen: Sie sehen sie so, wie Besucher sie sehen werden, und bearbeiten sie in Echtzeit.

Wichtigste Werkzeuge

Das linke Panel enthält drei Werkzeuge, die Sie ständig nutzen werden:

• Element-Inspektor: Wählt ein beliebiges visuelles Element auf der Seite zur Anpassung aus. Klicken Sie auf eine Überschrift, einen Button oder einen Block, und alle seine CSS-Eigenschaften erscheinen im rechten Panel.
• Rückgängig und Wiederholen: Experimentieren Sie mit Farben und Schriftarten? Klicken Sie auf „Rückgängig", wenn Sie zu weit gegangen sind. Der Bearbeitungsverlauf bleibt erhalten, bis Sie den Editor verlassen.
• Vollbildmodus: Blendet die WordPress-Administration aus und lässt nur die Seite und die Editor-Panels übrig. Nützlich für präzise Positionierung.

Im rechten Panel befinden sich ganz oben drei entscheidende Schaltflächen:

• Vorschau: Zeigt die Seite ohne die Editor-Oberfläche. So sehen Sie das Ergebnis mit den Augen eines Besuchers.
• Änderungen zurücksetzen: Macht alle nicht gespeicherten Bearbeitungen rückgängig. Nützlich, wenn Sie den Überblick verloren haben.
• Speichern: Übernimmt die Änderungen. Nach dem Speichern sind die Bearbeitungen für alle Website-Besucher sichtbar.

Drei Anpassungsmodi: wann Sie welchen nutzen

Bevor Sie mit der Bearbeitung beginnen, fragt Yellow Pencil Sie nach dem Geltungsbereich Ihrer Änderungen. Das Editor-Panel zeigt (wenn nichts ausgewählt ist) drei Optionen:

• Globale Anpassung: Änderungen gelten für alle Seiten der Website. Ändern Sie die Farbe aller H2-Überschriften, und sie wird überall geändert (Startseite, Blog, Kontaktseite).
• Einzelseiten-Anpassung: Bearbeitungen wirken sich nur auf die Seite aus, die Sie gerade bearbeiten. Ideal für Landingpages und einmalige Bereiche.
• Vorlagen-Anpassung: Änderungen gelten für alle Beiträge desselben Typs. Sollen alle Produktseiten gleich aussehen? Dieser Modus ist der richtige dafür.

Der aktuell aktive Modus wird oben im Editor-Panel angezeigt. Prüfen Sie vor dem Speichern stets, ob Sie den korrekten Typ bearbeiten: Globale und seitenbezogene Anpassungen lassen sich leicht verwechseln, und die Auswirkungen sind sofort auf der gesamten Website sichtbar.

Was Sie mit Yellow Pencil tun können: ein praktischer Rundgang

Nachfolgend eine Aufschlüsselung der wichtigsten Funktionen mit konkreten Beispielen. Jede Aktion wird durch Anklicken eines Elements und Auswahl des entsprechenden Bereichs im rechten Panel ausgeführt.

Typografie

Text ist das Erste, was man nach der Installation des Plugins anpackt. Klicken Sie auf einen beliebigen Textblock und wählen Sie im Editor-Panel „Text" aus. Alle grundlegenden Eigenschaften stehen zur Verfügung: Schriftartwechsel (900+ Optionen von Google Fonts in der Pro-Version), Größe, Zeilenhöhe, Zeichenabstand und Wortabstand. Die Textfarbe wählen Sie aus integrierten Paletten (Material und Flat) oder setzen sie mit einer Pipette.

Der Hauptvorteil ist die Live-Vorschau. Sie bewegen den Schieberegler für die Schriftgröße und sehen sofort, wie sich das Layout verschiebt. Das ist deutlich schneller als der Kreislauf „CSS bearbeiten → Seite aktualisieren → passt nicht → wiederholen".

Rahmen

Ein Rahmen um einen Block ist eine einfache Möglichkeit, eine Karte, ein Zitat oder ein Anmeldeformular hervorzuheben. Wählen Sie das Element aus und gehen Sie im Editor-Panel auf den Tab „Rahmen". Vier Stile stehen zur Verfügung: durchgezogen, gestrichelt, gepunktet und ausgeblendet.

Eine Funktion, die den meisten Wettbewerbern fehlt: Jede der vier Rahmenseiten kann separat konfiguriert werden. Oberer Rahmen rot gestrichelt, linker blau durchgezogen, rechter grün, unterer nicht vorhanden. Breite, Farbe und Stil werden für jede Seite unabhängig festgelegt und geben Ihnen gestalterische Freiheit ohne eine einzige Codezeile.

Hintergrund

Der Elementhintergrund wird im Tab „Hintergrund" konfiguriert. Drei Optionen stehen zur Verfügung: Volltonfarbe (Pipette oder Palette), eines von über 300 integrierten Mustern und ein CSS-Verlauf (linear oder radial). Sie können ein eigenes Bild hochladen und dessen Positionierung, Wiederholungsverhalten und Scrollverhalten einstellen.

Hintergrundmuster sind ein nettes Detail, das Zeit spart. Statt auf Stock-Seiten nach Texturen zu suchen, wählen Sie ein Muster aus der Bibliothek, ändern dessen Farbe und Deckkraft und erhalten mit wenigen Klicks einen ansprechenden Blockhintergrund.

Animation

Der Tab „Animation" bietet Zugriff auf über 50 fertige CSS-Animationen: Einblenden, Ausblenden, Hüpfen, Drehen, Pulsieren und andere. Sie wählen einen Effekt im visuellen Manager aus, legen Dauer und Verzögerung fest und sehen sofort, wie das Element zum Leben erwacht.

Für individuelle Szenarien gibt es einen Animationsgenerator (Pro): Sie definieren Keyframes im visuellen Editor, und das Plugin generiert die CSS-@keyframes. Mehrere Animationen können gleichzeitig ablaufen, für komplexes Elementverhalten.

Größe und Position

Die Größe eines Elements ändern Sie buchstäblich durch Ziehen an den Rändern. Ein Klick auf ein Element zeigt einen blauen Rahmen mit Griffen an den Ecken und Seiten. Ziehen Sie an einem Griff, und die Größe ändert sich.

Die Position zu ändern ist noch einfacher: Greifen Sie das Element mit der Maus und ziehen Sie es an die gewünschte Stelle.

Ein Vorbehalt: Ziehen kann die Responsivität beeinträchtigen. Prüfen Sie nach dem Verschieben von Elementen stets, wie die Seite auf Tablet und Smartphone aussieht. Das linke Panel enthält einen Responsivitäts-Emulator, der den Vorschaubereich zwischen Desktop, Tablet und Smartphone umschaltet. Falls etwas verrutscht ist, lassen sich für jede Auflösung separate Stile festlegen.

Free vs. Pro: Was Sie wählen sollten

Die Möglichkeiten der kostenlosen und der Pro-Version unterscheiden sich erheblich. Die kostenlose Version bietet einen Basissatz an CSS-Eigenschaften: Schriftarten (ohne Google Fonts), Textfarbe, Abstände, Rahmen, Schatten, Positionierung. Das reicht für minimale Theme-Anpassungen (eine Überschrift verschieben, eine Button-Farbe ändern, einen Rahmen hinzufügen).

Pro schaltet alles Weitere frei: 900+ Google Fonts, Hintergrundfarbe und -bilder, Animationen mit einem visuellen Manager, Verläufe, Hintergrundmuster, Breiten- und Höhensteuerung, einen CSS-Editor mit Autovervollständigung, Anpassung der WordPress-Login-Seite und den Animationsgenerator.

Für ein einmaliges Kundenprojekt macht sich die Pro-Lizenz sofort bezahlt, da sie Ihnen Stunden manueller Codierung erspart. Für einen persönlichen Blog reicht die kostenlose Version oft aus.

Preis

Yellow Pencil Pro wird unter einer kostenpflichtigen Lizenz von der offiziellen Website des Entwicklers vertrieben. Der Preis beinhaltet lebenslange Plugin-Updates und einen Support-Zeitraum. Die Lizenz gilt für eine Site; für mehrere Projekte müssen separate Schlüssel erworben werden.

Die kostenlose Version ist auf der WordPress.org-Plugin-Seite verfügbar. Die Installation erfolgt standardmäßig direkt aus dem Admin-Bereich über „Plugins" → „Installieren" → Suche nach „Yellow Pencil".

Ein detaillierter Video-Überblick über die Oberfläche und die wichtigsten Arbeitstechniken mit dem Plugin (auf Englisch, visuell und auf den Punkt gebracht).

⁉️🤔 Häufig gestellte Fragen

Macht Yellow Pencil mein Theme kaputt?

Nein. Das Plugin verändert keine Theme-Dateien und beeinträchtigt keine anderen Plugins. Alle Änderungen werden separat gespeichert und dynamisch geladen. Falls etwas schiefläuft, machen Sie Bearbeitungen über die Schaltfläche „Änderungen zurücksetzen" rückgängig oder löschen das Plugin, und das Theme kehrt in seinen ursprünglichen Zustand zurück.

Muss ich CSS beherrschen, um mit Yellow Pencil zu arbeiten?

Nein, das ist der ganze Sinn des Plugins. Sie klicken auf ein Element und ändern dessen Eigenschaften visuell: Farbe, Schrift, Abstände, Rahmen, Animation. Das CSS wird automatisch generiert. Wenn Sie CSS beherrschen, gibt es einen integrierten Code-Editor mit Autovervollständigung und Hervorhebung, und Sie können Stile zusätzlich zu den visuellen Bearbeitungen manuell schreiben.

Funktioniert das Plugin mit Gutenberg und Elementor?

Ja, Yellow Pencil ist mit allen gängigen Page-Buildern kompatibel: Gutenberg, Elementor, Divi, Beaver Builder, WPBakery. Das Plugin gestaltet die fertigen Blöcke, die Sie im Builder erstellen, und kollidiert nicht mit deren Markup.

Kann ich die WordPress-Login-Seite anpassen?

Ja, in der Pro-Version. Gehen Sie zu „Design" → „YellowPencil Editor", wählen Sie „WordPress-Login-Seite" als Ziel und klicken Sie auf „Anpassen". Sie bearbeiten Logo, Hintergrund, Schaltflächen und Formularfelder genau wie bei einer normalen Seite.

Was passiert, nachdem ich das Plugin gelöscht habe?

Alle angewendeten Stile verschwinden, und die Site kehrt zum Standard-Theme-Design zurück. Vor dem Löschen können Sie das CSS über die integrierte Funktion „Stylesheet exportieren" exportieren und manuell als Child-Theme einbinden, sodass die Stile auch ohne das Plugin erhalten bleiben.

Gibt es Alternativen?

Direkte Pendants mit einem visuellen CSS-Editor sind Microthemer (ähnlicher Element-Inspektor) und CSS Hero (etwas einfacher, weniger Eigenschaften). Beide sind kostenpflichtig. Unter den kostenlosen Optionen existiert nur der integrierte WordPress-Customizer, der jedoch nur Zugriff auf einen Bruchteil der CSS-Eigenschaften bietet, die Yellow Pencil bereitstellt.

Lohnt sich die Anschaffung von Yellow Pencil für die Theme-Anpassung

Wenn Sie CSS nicht von Hand schreiben und keine Stunden mit der Bearbeitung von Theme-Dateien verbringen möchten, ist Yellow Pencil eines der besten Werkzeuge am Markt. Es ersetzt keinen Page Builder, aber es adressiert genau den Schmerzpunkt, den jeder Website-Betreiber kennt: „Ich möchte nur ein wenig nachjustieren, eine Farbe und Schrift ändern, aber ohne Code."

Für Freelancer und kleine Agenturen bedeutet das Zeitersparnis bei routinemäßigen Kundenanpassungen. Für Blogbetreiber ist es ein Weg, die Optik aufzuräumen, ohne einen Frontend-Entwickler hinzuzuziehen. Für Entwickler bietet es schnelles Prototyping von Styles, bevor diese in ein Child-Theme überführt werden.

Die wichtigste Regel bei der Arbeit mit Yellow Pencil: Prüfen Sie nach jeder Bearbeitungsrunde die Darstellung auf verschiedenen Geräten. Der integrierte Tablet- und Smartphone-Emulator zeigt ein ehrliches Bild, und separate Styles für jede Auflösung erlauben es Ihnen, alles zu korrigieren, was verrutscht ist. Mit dieser Gewohnheit amortisiert sich das Plugin bereits am ersten Einsatztag.