JetStyleManager Anleitung: Gutenberg-Blöcke gestalten

JetStyleManager ist das unauffälligste der Crocoblock-Plugins. Es fügt keine neuen Inhalte hinzu, keine Widgets, keine Formulare. Es sorgt dafür, dass sich Blöcke im WordPress-Block-Editor (Gutenberg) gestalten lassen: Abstände, Rahmen, Farben, Schrift.

Gleich vorweg, weil das oft verwechselt wird: JetStyleManager ist ein Plugin für den Block-Editor. Mit Elementor hat es nichts zu tun. Wer seine Website mit Elementor baut, kann diesen Beitrag getrost überspringen.

Für alle, die mit dem Block-Editor und Jet-Plugins wie JetEngine oder JetFormBuilder arbeiten, erkläre ich hier, was JetStyleManager macht, wie Sie es einrichten und worauf Sie achten sollten.

Die kurze Antwort

JetStyleManager ist ein kostenloses Plugin, das im Block-Editor zusätzliche Gestaltungsoptionen bereitstellt, vor allem für die Blöcke der Gutenberg-kompatiblen Jet-Plugins. Wenn Sie JetEngine, JetSmartFilters oder JetFormBuilder im Block-Editor nutzen und deren Blöcke optisch anpassen möchten, gehört es dazu. Wenn Sie mit Elementor arbeiten oder gar keine Jet-Plugins einsetzen, brauchen Sie es nicht.

Was JetStyleManager kann

Laut offizieller Produktseite:

Bereich	Was dahintersteckt
Einsatzbereich	Gestaltung von Blöcken im Block-Editor (Gutenberg)
Stil-Steuerung	Rahmen, Innen- und Außenabstände, Ausrichtung, Farbwähler, Abmessungen
Typografie	Schriftgröße und -familie, Farbe, Schriftstärke, Zeilenhöhe, Laufweite, Stil
Responsive	Unterschiedliche Einstellungen je Gerät, sofern der Block das unterstützt
Steuerelemente	Mehr als zehn verschiedene Arten von Einstellungsfeldern
Jet-Plugins	Stil-Einstellungen für Gutenberg-kompatible JetPlugins, genannt werden JetEngine, JetSmartFilters und JetFormBuilder
Entwickler	Lässt sich laut Crocoblock auch in eigene Plugins einbinden
Preis	Kostenlos

Die Produktseite verspricht, „any Gutenberg block“ gestalten zu können. In der Praxis spielt das Plugin seine Stärke bei den Jet-Blöcken aus. Für die normalen WordPress-Blöcke bringt der Block-Editor inzwischen selbst viele Gestaltungsoptionen mit.

Schritt für Schritt: JetStyleManager einrichten

Als Beispiel nehme ich ein Kontaktformular aus JetFormBuilder im Block-Editor, dessen Eingabefelder und Button zum Design der Website passen sollen.

1. Plugin herunterladen. Auf der Produktseite fordern Sie den kostenlosen Download an. Crocoblock schickt den Link per E-Mail, dafür ist die Zustimmung zu Werbe-E-Mails Voraussetzung.
2. Installieren und aktivieren. Unter Plugins → Installieren → Plugin hochladen die ZIP-Datei hochladen und aktivieren. Ein Lizenzschlüssel ist nicht nötig.
3. Jet-Block einfügen. Öffnen Sie die Kontaktseite im Block-Editor und fügen Sie das Formular aus JetFormBuilder ein.
4. Gestaltungsoptionen öffnen. Markieren Sie den Block. In der Seitenleiste rechts finden Sie nun zusätzliche Stil-Einstellungen. Wo genau sie liegen, hängt vom jeweiligen Block ab.
5. Grundwerte setzen. Passen Sie Rahmen, Abstände und Farben der Eingabefelder an. Verwenden Sie dabei die Farben aus Ihrem Theme, damit das Formular nicht wie ein Fremdkörper wirkt.
6. Typografie anpassen. Schriftgröße, Zeilenhöhe und Schriftstärke für Beschriftungen und Button festlegen.
7. Responsive prüfen. Wechseln Sie in die Vorschau für Tablet und Handy. Wo der Block unterschiedliche Werte je Gerät erlaubt, verkleinern Sie dort zum Beispiel Abstände.
8. Speichern und im Frontend testen. Öffnen Sie die Seite in einem privaten Browserfenster und prüfen Sie, ob alles so aussieht wie im Editor.

Typische Einsatzfälle

Das Verzeichnis im Block-Editor. Ein Tourismusverband in Tirol listet Unterkünfte mit JetEngine und Filtern aus JetSmartFilters. JetStyleManager sorgt dafür, dass Listen und Filterfelder zum Erscheinungsbild der Website passen.

Die Firmenwebsite mit Formular. Ein Steuerberatungsbüro baut seine Website bewusst ohne Page Builder, nur mit dem Block-Editor. Das Anfrageformular aus JetFormBuilder wird mit JetStyleManager an Farben und Schriften angepasst.

Die Agentur mit eigenem Plugin. Eine Agentur entwickelt einen eigenen Block für Kundenprojekte und nutzt JetStyleManager als Grundlage für die Gestaltungsoptionen, statt sie selbst zu programmieren. Laut Produktseite gibt es dafür eine Anleitung zur Integration.

Typische Fehler und wie Sie sie vermeiden

Für Elementor installiert. Der häufigste Irrtum: JetStyleManager wird in einer Elementor-Website installiert und tut dort nichts Sichtbares. In Elementor gestalten Sie Jet-Widgets direkt in den Widget-Einstellungen.

Doppelte Gestaltung. Wenn Theme, Block-Einstellungen und JetStyleManager gleichzeitig Abstände und Farben vorgeben, wissen Sie irgendwann nicht mehr, woher ein Wert kommt. Legen Sie Grundwerte im Theme fest und nutzen Sie JetStyleManager nur für Abweichungen.

Werte von Hand statt aus dem Theme. Tippen Sie Farben nicht jedes Mal als festen Wert ein. Wählen Sie die Farben aus der Theme-Palette, dann bleibt ein späterer Farbwechsel einfach.

Caching. Wenn Änderungen im Frontend nicht ankommen, zuerst den Cache leeren. Optimierungs-Plugins, die CSS zusammenfassen, halten oft noch den alten Stand.

Plugins, die niemand braucht. Ist auf der Website kein Gutenberg-kompatibles Jet-Plugin aktiv, gibt es kaum einen Grund für JetStyleManager. Deaktivieren und löschen Sie es dann.

Lohnt sich JetStyleManager? Kosten und Alternativen

JetStyleManager ist kostenlos. Crocoblock führt es auf der Preisseite gemeinsam mit JetGridBuilder unter den kostenlosen Jet-Plugins.

Die Frage „lohnt es sich“ stellt sich deshalb anders: Brauchen Sie es? Wenn Sie Jet-Plugins im Block-Editor nutzen und deren Blöcke gestalten wollen, ja. In jedem anderen Fall nein. Eine echte Alternative im engeren Sinn gibt es nicht, weil das Plugin vor allem die Jet-Blöcke bedient. Für die normalen WordPress-Blöcke reichen meist die eingebauten Gestaltungsoptionen und ein gutes Block-Theme.

Für einen Partnerlink ist hier kein Platz: Das Plugin kostet nichts. Wenn Sie überlegen, welche kostenpflichtigen Jet-Plugins zu Ihrem Projekt passen, hilft Ihnen mein Crocoblock-Überblick.

Häufige Fragen

Funktioniert JetStyleManager mit Elementor?

Nein. Die Produktseite nennt ausschließlich den Block-Editor (Gutenberg). In Elementor gestalten Sie Jet-Widgets direkt über deren eigene Einstellungen.

Ist JetStyleManager kostenlos?

Ja. Für den Download müssen Sie eine E-Mail-Adresse angeben und den Erhalt von Werbe-E-Mails bestätigen.

Brauche ich JetStyleManager für JetEngine im Block-Editor?

Wenn Sie die JetEngine-Blöcke optisch anpassen möchten, ist es die vorgesehene Ergänzung. Die Produktseite nennt JetEngine, JetSmartFilters und JetFormBuilder als Plugins, mit denen es zusammenarbeitet.

Kann ich damit auch normale WordPress-Blöcke gestalten?

Die Produktseite verspricht das. Für die Standardblöcke bietet der Block-Editor selbst aber schon viele Optionen. Prüfen Sie zuerst, ob Sie mit den eingebauten Einstellungen auskommen.

Wenn Sie Ihre Website mit dem Block-Editor aufbauen und Unterstützung möchten: In meiner WordPress-Schulung richte ich die Gestaltung mit Ihnen gemeinsam an Ihrer eigenen Website ein, remote, € 109,– pro Stunde.