Was ist die lokale Klasse?

Im Feld Klassen steht bei jedem Element local. Das ist die lokale Klasse: Sie gehört nur diesem einen Element und steht in der Rangfolge über jeder gemeinsamen Klasse.

Was sie ist

Der Atomic Editor legt für jedes Element automatisch eine eigene Klasse an. Sie hat keinen Namen, den du vergeben müsstest, und sie lässt sich nicht entfernen. Alles, was du einstellst, während sie markiert ist, gilt genau für dieses Element — sonst nirgends.

Pink und grün

Farbe im Feld Was du bearbeitest Reichweite
Pinklocal die lokale Klasse dieses eine Element
Grün — z. B. c-btn--primary eine Global Class jedes Element mit dieser Klasse, auf der ganzen Website

Die Farbe entscheidet, wohin deine nächste Einstellung geschrieben wird. Ein Klick auf den Klassennamen wechselt.

Warum sie immer gewinnt

Wenn sich zwei Klassen widersprechen, regelt Elementor die Rangfolge über den Klassen-Manager: Was weiter oben steht, gewinnt. Die lokale Klasse steht dabei grundsätzlich über allem anderen.

Das ist so gebaut, damit ein Sonderfall an einer Stelle möglich ist, ohne das System umzustellen. Der Preis: Diese Stelle nimmt keine spätere Systemänderung mehr mit. Wird die Markenfarbe getauscht oder ein Abstand feiner justiert, ziehen alle Elemente mit — außer denen, die den Wert lokal tragen.

Wann sie richtig ist

  • Ein einmaliger Effekt an genau einem Element — etwa ein besonderer Hover-Zustand für einen einzelnen Button auf einer Kampagnenseite.
  • Anordnung statt Aussehen — Reihenfolge, Ausrichtung, Spaltenzahl an dieser einen Stelle.
  • Ein Zwischenstand beim Ausprobieren, den du danach in eine Global Class überführst.

Wann sie falsch ist

  • Wenn dieselbe Einstellung an einer zweiten Stelle wieder gebraucht wird. Spätestens beim dritten Mal ist es ein Muster und gehört in eine Klasse.
  • Wenn du damit eine Global Class „reparierst“, die eigentlich falsch ist. Dann bleibt die Ursache stehen und du wiederholst die Reparatur an jeder Fundstelle.
  • Bei Marken-Eigenschaften — Farbe, Schriftart, Rundung, Schatten. Das sind genau die Dinge, die später zentral geändert werden.

Woran du erkennst, dass etwas lokal steht

Neben jeder Eigenschaft im Stil-Reiter zeigt Elementor einen farbigen Punkt für die Herkunft des Werts: pink = lokale Klasse, grün = Global Class, grau = geerbt, orange = Konflikt. Ein Klick darauf nennt Klasse, Bildschirmgröße und Zustand.

Bei zugeklappten Gruppen (Typografie, Rahmen …) erscheinen dieselben Punkte am Gruppentitel — du musst also nicht jede Gruppe öffnen.

Wenn du nicht Administrator bist: Der Editor lässt dich Global Classes zwar anwenden, aber nicht ändern; der Klassen-Manager ist dann gar nicht sichtbar. Die lokale Klasse und ihre Zustände darfst du bearbeiten. Das ist keine Einschränkung deiner Arbeit, sondern schützt die gemeinsame Grundlage — melde dich, wenn eine Klasse fehlt oder falsch ist.

Verwandte Artikel