X-Bar für Kadence

Was X-Bar macht

Effizienz-Features

X-Bar ist ein smartes Command Panel für Kadence, mit dem du schnellen Zugriff auf häufige Block-Steuerelemente und Live-CSS-Bearbeitung erhältst – ohne die Seite zu verlassen, an der du arbeitest.

Du kannst X-Bar an zwei Stellen verwenden:

• Block-Editor: verwalte Klassen, benenne Blöcke um, wähle HTML-Tags und füge blockbezogenes benutzerdefiniertes CSS hinzu.

• Frontend: bearbeite seitenweites CSS, das direkt in WordPress Customize → Additional CSS gespeichert wird, und miss Elemente mit einem Seitenlineal.

Page-Building-Features

X-Bar

X-Bar funktioniert mit Kadence Blocks und modernen WordPress-Websites und merkt sich, wo du sie auf dem Bildschirm platzierst.

Voraussetzungen

X-Bar öffnen und schließen

Verwende dieselbe Tastenkombination, um X-Bar im Kadence Block-Editor oder im Frontend zu öffnen.

X-Bar im Kadence Block-Editor verwenden

Im Block-Editor konzentriert sich X-Bar auf Block-Tools, damit du Struktur und Styling schneller anpassen kannst.

Klassenmodus

Spare Zeit mit One-Click-Class-Control

Der Klassenmodus lässt dich mit CSS-Klassen auf jedem ausgewählten Block arbeiten.

• X-Bar listet alle CSS-Klassen auf, die dem aktuell ausgewählten Block zugewiesen sind.

• Du kannst Klassen hinzufügen, bearbeiten oder entfernen, ohne die Block-Seitenleiste zu öffnen.

• Diese Klassen werden in den Block-Attributen gespeichert – genau wie die eigenen Klasseneinstellungen von Kadence – und funktionieren mit deinem Theme oder eigenem CSS.

Verwende den Klassenmodus, wenn du Styling über mehrere Blöcke hinweg standardisieren möchtest, indem du Klassennamen teilst.

Block umbenennen (List-View-Label)

Blocknamen direkt in X-Bar bearbeiten

Der Modus „Block umbenennen“ aktualisiert die Anzeige eines Blocks in der WordPress List View.

• Ändere das List-View-Label des ausgewählten Blocks in etwas Sinnvolles.

• Das neue Label hilft dir, die Struktur deines Layouts schneller zu verstehen, wenn du die List View durchgehst.

Das ändert nicht den Blocktyp oder die Ausgabe im Frontend. Es betrifft nur das Label im Editor.

HTML-Tag-Auswahl (Row Layout und Section-Blöcke)

HTML-Tags schnell ändern

Für Kadence Row Layout- und Section-Blöcke enthält X-Bar einen schnellen HTML-Tag-Selektor.

• Wähle das HTML-Tag für den Container, z. B. section, div, header oder footer.

• X-Bar aktualisiert das Tag in den Block-Attributen und entspricht dabei den eigenen HTML-Tag-Steuerelementen von Kadence.

Nutze das, um Semantik und Barrierefreiheit zu verbessern, ohne dich durch Seitenleisten und verschachtelte Einstellungen klicken zu müssen.

Custom-CSS-Modus (Row Layout und Section-Blöcke)

Custom CSS ohne Reibung

Der Custom-CSS-Modus ermöglicht dir, CSS direkt an einen Row Layout- oder Section-Block zu hängen.

• X-Bar spiegelt das Feld Kadence Additional CSS für den ausgewählten Row Layout- oder Section-Block.

• CSS wird in den Block-Attributen gespeichert und gilt nur für diesen Block und seinen Inhalt.

• Änderungen aktualisieren sich live im Editor, sodass du die Wirkung sofort siehst.

• Der Editor verwendet einen CodeMirror-basierten Code-Editor für Syntax-Highlighting und bessere Lesbarkeit.

X-Bar im Frontend verwenden

Im Frontend wird X-Bar zu einem seitenweiten CSS-Editor und Messwerkzeug.

Live-CSS-Editor (Customize → Additional CSS)

Umgehe das enge CSS-Panel des Customizers

Der CSS-Editor im Frontend von X-Bar schreibt in das Feld WordPress Customize → Additional CSS.

• Tippe CSS in X-Bar und sieh Live-Änderungen auf der Seite, während du schreibst.

• Speichere direkt per Tastatur, ohne den Customizer öffnen zu müssen.

Wenn du speicherst, sendet X-Bar das CSS über die WordPress REST API und legt es an der Standard-Stelle für Additional CSS ab.

Page-Ruler-Tool

Das Page-Ruler-Tool hilft dir, Elemente direkt im Browser zu messen.

• Aktiviere das Lineal, um einen Fadenkreuz-Cursor zu sehen.

• Klicke und ziehe auf der Seite, um ein Messfeld zu zeichnen.

• X-Bar zeigt dir die Breite × Höhe des gezeichneten Bereichs in Pixeln an.

Nutze das, wenn du exakte Abmessungen für Sektionen, Bilder oder andere Layoutelemente brauchst.

Tastaturkürzel

Tastaturkürzel halten X-Bar sowohl im Editor als auch im Frontend schnell bedienbar.

Allgemeine Shortcuts

• X-Bar umschalten (öffnen oder fokussieren)

  • Mac: ⌘ + ⇧ + X

  • Windows: Ctrl + Shift + X

• X-Bar schließen

  • Esc

Shortcuts für den CSS-Editor im Frontend

Diese Shortcuts gelten, wenn dein Cursor im X-Bar-CSS-Editor im Frontend steht.

• CSS in Customize → Additional CSS speichern

  • Mac: ⌘ + S

  • Windows: Ctrl + S

• Text im CSS suchen

  • Mac: ⌘ + F

  • Windows: Ctrl + F

• Zum nächsten Suchtreffer springen

  • Drücke Enter

• Zum vorherigen Suchtreffer springen

  • Mac: ⌘ + Enter

  • Windows: Ctrl + Enter

Wie X-Bar Daten speichert

X-Bar trennt Layout-Einstellungen von CSS, damit du die Kontrolle über beides behältst.

• Panel-Größe und -Position

  • Gespeichert im Local Storage des Browsers, je Gerät und Browser.

  • Wenn du Browserdaten löschst, werden Position und Höhe von X-Bar zurückgesetzt.

• Frontend-CSS

  • Gespeichert über die WordPress REST API.

  • Abgelegt in Customize → Additional CSS, sodass es sich verhält wie CSS, das du direkt im Customizer hinzufügst.

• Custom CSS im Block-Editor

  • Gespeichert in den Block-Attributen (Row Layout und Section) zusammen mit Kadence Additional CSS.

X-Bar fügt keine Cookies oder Tracking-Skripte hinzu.

Fehlerbehebung

X-Bar öffnet sich nicht per Shortcut

Wenn die Tastenkombination keine Wirkung hat:

• Klicke einmal in den Seiteninhalt oder den Editor-Bereich, damit dieser den Fokus hat.

• Probiere die Tastenkombination erneut:

  • Mac: ⌘ + ⇧ + X

  • Windows: Ctrl + Shift + X

CSS-Änderungen sind im Frontend nicht live

Wenn du keine Aktualisierungen siehst, während du CSS in X-Bar bearbeitest:

• Prüfe Caching- oder Minify-Plugins, die CSS kombinieren oder verzögert laden.

• Leere oder deaktiviere CSS-Optimierung testweise, um das Problem einzugrenzen.

• Entferne nicht genutzte CSS-Regeln, die mit neuen Styles kollidieren oder diese überschreiben könnten.

Sobald du bestätigt hast, dass CSS korrekt greift, aktiviere die Optimierung mit Einstellungen, die Additional CSS respektieren.

CodeMirror-Editor wird nicht geladen

Wenn der CSS-Bereich wie ein einfaches Textfeld ohne Syntax-Highlighting aussieht:

• Stelle sicher, dass die WordPress-Core-Code-Editor-Assets nicht durch ein Performance- oder Admin-Plugin deaktiviert wurden.

• Aktiviere die Core-Editor-Skripte und -Styles wieder, damit X-Bar den CodeMirror-basierten Editor laden kann.

Ohne diese Assets nimmt X-Bar weiterhin CSS entgegen, du verlierst aber Syntax-Highlighting und erweiterte Editor-Funktionen.

Support

Wenn du auf Probleme stößt, die du mit dieser Anleitung nicht lösen kannst, kontaktiere den Support:

• WP Templater Pro Support: https://wptemplater.com/my-account/?tab=pro-support

Gib deine WordPress-Version, die Kadence-Blocks-Version und eine kurze Beschreibung dessen an, was du gerade gemacht hast, als das Problem aufgetreten ist. So kann das Team schneller helfen.