Plugin JetStyle Manager

JetStyle Manager ist ein kostenloses Plugin von Crocoblock, das Gestaltungsoptionen – Typografie, Farben, Abstände, Rahmen und Responsivität – zu den von JetEngine, JetSmartFilters und JetFormBuilder erzeugten Gutenberg-Blöcken hinzufügt. Nach der Aktivierung erhalten die unterstützten Blöcke die Schaltfläche „Block Style“ mit einem Style-Panel.

Blöcke stylen über das Panel Block Style: Typografie, Farben, Abstände

JetStyleManager fügt den unterstützten Gutenberg-Blöcken die Schaltfläche „Block Style“ hinzu, die ein Gestaltungspanel öffnet: Typografie, Hintergrund-, Text- und Icon-Farben, Margin und Padding mit der Option „Unlink Sides“, Rahmen in fünf Typen sowie Border Radius. Die Styles werden responsiv eingestellt, getrennt für Desktop, Tablet und Mobile. Ganz ohne CSS zu schreiben.

Der Aufbau des Panels erinnert an den Style-Tab von Elementor. Wer mit diesem Editor gearbeitet hat, findet sich sofort zurecht. Der Hersteller gibt mehr als 10 Arten von Style-Controls an – von Ausrichtung und Hintergrund über Rahmen bis hin zu Farbe und Position von Icons.

Typografie und Google-Fonts-Integration

Die Typografie-Kontrolle umfasst ein vollständiges Set an Textoptionen: Schriftgröße im Bereich 1–200 (Einheiten PX, EM, REM, VW), Schriftstärke (Weight 100–1000), Zeilenhöhe, Buchstabenabstand (Letter Spacing von -2 bis 20) sowie Transform, Style und Decoration. Version 1.2.0 ergänzte die Kontrolle um eine Google-Fonts-Integration, spätere Versionen optimierten das Schriften-Caching (1.3.7).

Die Schriftfamilie wählt man also direkt aus der Google-Fonts-Bibliothek, im selben Panel, ohne ein separates Plugin für die Typografie-Verwaltung.

Farben, Rahmen, Margin und Padding

Das Set der Style Controls stellt Hintergrund-, Text- und Icon-Farbe ein – aus einer Palette von 12 Standardfarben oder mit einem eigenen Code im Format HEX, RGB oder HSL. Einige Kontrollen haben zusätzlich einen „Hover“-Tab für die Farbe bei Mouseover. Rahmen gibt es in fünf Typen (Solid, Double, Dashed, Dotted, Groove) samt separatem Border Radius.

• Margin und Padding – Außen- und Innenabstände mit der Option „Unlink Sides“, mit der jede der vier Seiten einen eigenen Wert erhalten kann.
• Background Color und Text Color – Hintergrund- und Textfarben aus der Palette oder per eigenem HEX/RGB/HSL-Code.
• Icon Color, Size, Position – eigene Kontrollen für Icons in den JetPlugins-Blöcken.
• Alignment – Ausrichtung des Elements innerhalb des Blocks.

Responsive Kontrollen für Desktop, Tablet und Mobile

Der responsive Modus setzt getrennte Style-Werte für drei Gerätebereiche – Desktop, Tablet und Mobile –, was sich in separaten Media-Query-Regeln niederschlägt. Ein und dasselbe Feld, etwa Schriftgröße oder Padding, kann auf dem Computerbildschirm einen anderen Wert haben als auf dem Smartphone.

Die Responsivität wird über den Geräte-Umschalter im Panel aktiviert. Kein manuelles Schreiben von Media Queries nötig.

Welche Blöcke und JetPlugins-Erweiterungen JetStyleManager stylt

JetStyleManager stylt Blöcke, die von den JetPlugins-Erweiterungen erzeugt werden: dynamische Blöcke und Listing Grid aus JetEngine, alle Filterblöcke aus JetSmartFilters sowie Felder und das gesamte Formular aus JetFormBuilder. Das Plugin funktioniert ausschließlich mit den Blöcken dieser Plugins (sowie mit über die API integrierten Blöcken) – native WordPress-Core-Blöcke oder Blöcke anderer Hersteller rührt es nicht an.

Die Schlussfolgerung ist einfach: Ohne mindestens ein Crocoblock-Plugin, das Gutenberg-Blöcke erzeugt, gibt es nichts zu stylen. JetStyleManager fügt bestehenden JetPlugins-Blöcken ein Gestaltungspanel hinzu, erstellt selbst aber keine Blöcke.

Dynamische Blöcke und Listing Grid in JetEngine

In JetEngine unterstützt JetStyleManager die dynamischen Blöcke – Dynamic Field, Dynamic Link, Dynamic Image, Dynamic Repeater und Dynamic Meta – sowie den Listing-Grid-Block und den Formular-Block. Für das Listing Grid stehen unter anderem Horizontal Gap und Vertical Gap zur Verfügung, die die Abstände zwischen den Elementen der Beitragsliste regeln.

Typografie und Farben der dynamischen Felder sowie das Grid-Layout lassen sich damit an Seiten mit dynamischen Inhalten anpassen – an Angebotskataloge, Portfolios oder Immobilienlisten.

Filterblöcke in JetSmartFilters

Für JetSmartFilters stylt JetStyleManager alle Filterblöcke und stellt Kontrollen bereit, die für diesen Elementtyp spezifisch sind. Dazu gehören Direction (Horizontal oder Vertical), Filter Position, Space Between, Children Offset Left sowie für den Range-Filter-Block separat Points Width, Points Height und Stroke.

Standardmäßig wirken Filter – Checkboxen, Listen oder der Preis-Slider – recht schlicht. Hier lassen sie sich an das Layout eines WooCommerce-Shops oder eines Angebotskatalogs anpassen.

Felder und Formulare in JetFormBuilder

In JetFormBuilder stylt JetStyleManager einzelne Felder sowie das gesamte Formular, wobei Block Style hier die praktische Voraussetzung für die visuelle Anpassung der Felder ohne Code ist. Ein Teil der Einstellungen wirkt pro Feld, ein Teil für das gesamte Formular – das Form Break Field wird zum Beispiel nur über die Einstellungen des gesamten Formulars gestylt.

Das ist das häufigste Einsatzszenario des Plugins: Typografie, Farben, Rahmen, Abstände und Ausrichtung der Felder sowie der Schaltfläche eines auf Gutenberg aufgebauten Formulars.

Editor Load Level und Skins auf Elementor-Seite

JetStyleManager stellt auf Elementor-Seite die Funktion Editor Load Level bereit – fünf Stufen von None bis Full, die die Zahl der geladenen Style-Optionen für die Widgets JetElements, JetBlocks, JetBlog, JetTabs und JetTricks reduzieren. Laut Hersteller kann die Mindesteinstellung den Editor um 20–30 % beschleunigen. Skins speichern das Aussehen eines Widgets und übertragen es auf andere.

Dieser Teil der Funktionalität ist der Hauptaufgabe des Plugins – dem Stylen von Gutenberg-Blöcken – nachgeordnet. Er betrifft ausschließlich die Arbeit im Elementor-Editor mit den genannten Crocoblock-Plugins.

Fünf Stufen von Editor Load Level

Editor Load Level steuert, wie viele Optionen im Bereich Style im Elementor-Editor geladen werden. Eine niedrigere Stufe bedeutet weniger zu ladende Einstellungen und damit einen leichteren, schnelleren Editor – auf Kosten der laufend verfügbaren Style-Kontrollen.

1. None – es werden keine Style-Optionen geladen.
2. Die übrigen Zwischenstufen erweitern den Umfang der verfügbaren Einstellungen schrittweise.
3. Full – der vollständige Satz an Style-Optionen für Widgets.

Skins speichern und anwenden

Skins lösen das Problem, das eine niedrige Editor-Load-Level-Stufe mit sich bringt: Der Style-Tab verschwindet, das Aussehen muss aber trotzdem erhalten bleiben. Save as Skin speichert die Style-Einstellungen eines Widgets, Apply Skin überträgt sie auf ein anderes Widget, und Reset Skin stellt das Standardaussehen wieder her.

Der Arbeitsablauf sieht also so aus: das Aussehen mit dem vollen Satz an Optionen gestalten, es als Skin speichern und danach Editor Load Level zugunsten der Performance reduzieren, ohne das Design zu verlieren.

Sichtbarkeit der Einstellungen nach Benutzerrollen einschränken

JetStyleManager verwaltet, welche Benutzerrollen die Style-Einstellungen sehen. Das Werkzeug ist bei der Übergabe einer Website an den Kunden nützlich – es schützt das gestaltete Aussehen vor versehentlichen Änderungen durch Personen ohne Berechtigung zur Bearbeitung der Styles.

Für wen JetStyleManager sinnvoll ist

JetStyleManager bewährt sich bei Nutzern des JetPlugins-Ökosystems, die Websites mit Gutenberg bauen und das Aussehen von JetEngine-, JetSmartFilters- oder JetFormBuilder-Blöcken ohne CSS anpassen möchten. Am meisten bringt es beim Stylen von JetFormBuilder-Formularfeldern sowie in leichteren, älteren JetEngine-Setups – in neueren Projekten übernimmt der in JetEngine integrierte Style Manager diese Rolle.

JetFormBuilder-Formularersteller und Personen ohne CSS-Kenntnisse

Für Formularersteller in JetFormBuilder stellt das Block-Style-Panel in JetStyleManager Farben, Typografie, Rahmen und Abstände der einzelnen Felder sowie der Schaltfläche ohne Code ein. Wer kein CSS schreiben will oder kann, passt das Aussehen dynamischer Elemente und Filter visuell im Editor-Panel an.

Für wen JetStyleManager am besten geeignet ist:

• JetPlugins-Nutzer, die Websites mit Gutenberg ohne Elementor bauen,
• JetFormBuilder-Formularersteller, die das Aussehen der Felder ohne Code anpassen möchten,
• Personen, die CSS nicht mögen oder nicht beherrschen und Blöcke visuell stylen,
• Agenturen, die eine Website an Kunden übergeben und die Einschränkung der Einstellungen nach Rollen nutzen,
• Elementor-Nutzer mit Crocoblock-Plugins, denen ein leichterer Editor wichtig ist.

Agenturen, die eine Website an Kunden übergeben

Agenturen kombinieren mehrere Funktionen: Editor Load Level entschlackt den Editor, Skins bewahren das gestaltete Aussehen trotz ausgeblendeter Einstellungen, und die Verwaltung der Sichtbarkeit nach Rollen schränkt den Zugriff des Kunden auf die Style-Optionen ein. Zusammen verringert das die Gefahr, dass die übergebene Website beim Empfänger „auseinanderdriftet“.

Für wen JetStyleManager nicht notwendig ist

Ohne Crocoblock-Plugins hat JetStyleManager keinen Nutzen, denn es stylt weder native WordPress-Core-Blöcke noch Blöcke anderer Hersteller – ohne JetEngine, JetSmartFilters oder JetFormBuilder gibt es nichts zu stylen. Es dient auch nicht der globalen, einheitlichen Gestaltung.

Für wen JetStyleManager nicht die beste Wahl ist:

• Nutzer des neueren JetEngine (3.8.0+) mit integriertem Style Manager für Blocks Views,
• Personen ohne Crocoblock-Plugins – es fehlen kompatible Blöcke zum Stylen,
• wer eine globale Gestaltung sucht, etwa einen einheitlichen Stil für alle Formulare gleichzeitig,
• wer ein aktiv weiterentwickeltes Tool sucht – die Entwicklung des Plugins ruht seit August 2024 praktisch.

JetStyleManager und der integrierte Style Manager in JetEngine

Der in JetEngine integrierte Style Manager, eingeführt in Version 3.8.0 (Dezember 2025), übernimmt für Block-Views die Rolle, die zuvor JetStyleManager zukam. Er bietet native Style-Kontrollen direkt im Block-Editor – mit Responsivität für Desktop, Tablet und Mobile sowie Integration mit dem WordPress Fonts Manager.

In neuen Projekten auf Basis des aktuellen JetEngine ist das separate Plugin JetStyleManager damit nicht mehr zwingend nötig. Sein natürliches Einsatzgebiet bleiben ältere Setups sowie das Stylen von JetFormBuilder-Formularen.

Anforderungen und Kompatibilität mit WordPress, PHP und Elementor

JetStyleManager benötigt WordPress 5.6 oder neuer sowie PHP 7.2 oder neuer, wobei die offiziellen Angaben auf WordPress.org die Kompatibilität bis Version 6.6.x bestätigen. Das Plugin arbeitet vor allem im Gutenberg-Block-Editor und setzt Elementor nicht voraus, unterstützt auf dessen Seite aber Editor Load Level und Skins. Bei schlanken Themes sind CSS-Spezifitätskonflikte möglich, die gesetzte Styles überschreiben.

Mindestversionen von WordPress und PHP

Die technischen Anforderungen sind niedrig, was zum Charakter des Plugins als leichtgewichtige Editor-Erweiterung passt. Die folgende Tabelle stellt die auf WordPress.org bestätigten Parameter zusammen mit dem Umfang des unterstützten JetPlugins-Ökosystems dar.

Zusammenarbeit mit Gutenberg und Elementor

Die Haupteinsatzumgebung des Plugins ist der Gutenberg-Block-Editor – dort erscheinen die Schaltfläche „Block Style“ und das Panel der Gestaltungseinstellungen. Elementor ist für die Grundfunktion nicht erforderlich.

Auf der Elementor-Seite bleibt das Plugin dem Editor gegenüber „bewusst“ und unterstützt Editor Load Level sowie Skins für die Widgets JetElements, JetBlocks, JetBlog, JetTabs und JetTricks. Entwickler erhalten eine API, die das Style-Panel mit eigenen Block-Plugins integriert, mit Unterstützung für Media Queries und der Generierung von Styles in eine separate Datei.

Konflikte mit Themes und RTL-Unterstützung

Hinweis zur Kompatibilität: Bei schlanken Themes wie GeneratePress wurde ein CSS-Spezifitätskonflikt gemeldet – die Theme-Regeln können die in JetStyleManager gesetzten Styles überschreiben. Als Lösung dient meist eine höhere CSS-Spezifität auf Seiten des Plugins.

In Rezensionen tauchte auch der Hinweis auf eine unvollständige RTL-Unterstützung auf.