Konfliktierende Stile priorisieren

Das Styling von Elementen im Elementor Editor V4 basiert auf dem Konzept von Klassen. Weitere Informationen zu Klassen in V4 finden Sie unter Klassen in Elementor.

Das Arbeiten mit Klassen hat viele Vorteile, insbesondere die Möglichkeit, Elemente wiederzuverwenden, was Ihre Arbeit schneller und effizienter macht. Die Verwendung von Klassen kann jedoch manchmal bedeuten, dass Sie einem Element widersprüchliche Stile hinzufügen. Zum Beispiel kann ein Absatzelement eine Klasse haben, die die Textfarbe auf Grün setzt, und eine andere Klasse, die die Textfarbe auf Rot setzt. Wie entscheidet der Editor, welche Farbe verwendet werden soll?

Klassen priorisieren und Konflikte identifizieren

Im folgenden Beispiel verwenden wir zwei Klassen:

Red_text: Diese Klasse ist so eingestellt, dass der Text rot wird.
Green_text: Diese Klasse ist so eingestellt, dass der Text grün wird.

Informationen zum Erstellen von Klassen finden Sie unter Klassen in Elementor.

Um die Klassenpriorität und Konflikterkennung zu demonstrieren, erstellen wir ein Beispiel-Element.

Fügen Sie ein Absatzelement zur Arbeitsfläche hinzu.
Da wir den Absatz nicht gestylt haben, wird die Standardtextfarbe – Schwarz – verwendet.
Klicken Sie auf den Style-Tab.

Oben auf der Registerkarte „Stil“ befindet sich das Textfeld Klassen. Das Textfeld Klassen enthält die Namen aller Klassen, die auf das Element angewendet werden. Im Moment ist die einzige Klasse, die auf das Element angewendet wird, Lokal.

Lokal ist eine spezielle Klasse. Jedes Element hat eine lokale Klasse, die nur auf dieses Element angewendet wird. Zu diesem Zeitpunkt haben wir der lokalen Klasse keine Stile hinzugefügt, sodass das Absatzelement die Standardeinstellungen verwendet.

Fügen wir nun etwas Farbe zum Text hinzu.

Fügen Sie im Textfeld Klassen die Klasse Red_text hinzu.

Der Text wird rot, weil er die von der Klasse Red_text festgelegte Farbe verwendet.

Schauen wir uns nun die Indikatoren an. Indikatoren zeigen Ihnen, welche Einstellungen für Ihr Element verwendet werden.

Öffnen Sie das Feld Typografie und sehen Sie sich die Einstellung Textfarbe an. Der Indikatorpunkt ist grün und zeigt an, dass dies die Einstellung ist, die verwendet wird.

Note

Wenn Sie das Typografie-Feld schließen würden, würde ein Indikatorpunkt neben dem Wort Typografie erscheinen. Indikatoren erscheinen bei jeder Stileinstellung, die einen Wert hat. Unten finden Sie eine Tabelle, die die Bedeutung der Indikatorfarbe erklärt.

Gehen Sie nun zur lokalen Klasse und sehen Sie sich die Typografie-Einstellung an.

Es gibt einen grauen Punkt bei Textfarbe. Das zeigt, dass dieses Element eine andere Klasse enthält, die die Textfarbe festlegt.

Wir gehen zurück zum Textfeld Klassen und fügen die Klasse Green_text hinzu.

Beachten Sie, dass, obwohl wir die Klasse Green_text nach der Klasse Red_text hinzugefügt haben, sie nach links von der Red_class verschoben wird. Klassen links haben immer Vorrang vor den Klassen rechts. Das bedeutet, dass die lokale Klasse immer die höchste Priorität hat, da sie immer die linkeste Klasse ist.

Um zu verstehen, warum, klicken Sie auf das Klassenmanager-Symbol, um den Klassenmanager zu öffnen. Details finden Sie unter Der Elementor Editor Klassenmanager.

Beachten Sie, dass Green_text über Red_text steht, was bedeutet, dass es Vorrang vor Red_text hat. Jedes Element mit sowohl Green_text als auch Red_text übernimmt die Einstellungen von Green_text.

Wenn wir uns die Typografie-Einstellungen für jede Klasse ansehen, werden wir Folgendes feststellen:

In der Klasse Red_text befindet sich ein orangefarbener Punkt bei Textfarbe . Dies zeigt, dass eine andere Klasse die Einstellung für diese Klasse überschreibt.
In der Klasse Green_text befindet sich ein grüner Punkt bei Textfarbe . Dies zeigt, dass dies die in diesem Element verwendete Farbe ist.
In der lokalen Klasse befindet sich ein grauer Punkt bei Textfarbe . Dies zeigt, dass dieses Element eine andere Klasse hat, die diese Einstellung bestimmt, aber es kollidiert nicht mit dieser Klasse.

Schließlich wollen wir sehen, was passiert, wenn wir die lokale Klasse bearbeiten.

Ändern Sie in Typografie die Textfarbe.

Der Text ändert sich in diese Farbe, da die lokale Klasse immer die höchste Priorität hat. Der Indikator neben Textfarbe wird rosa, was anzeigt, dass diese Farbe lokal ist und die höchste Priorität hat.

Unten ist eine Tabelle der Indikatoren und ihrer Bedeutung:

Note

Diese Indikatoren erscheinen bei Einstellungen, die Werte enthalten, und bei Feldern, wie z. B. Größe und Typografie, die Einstellungen mit Werten enthalten. Es können mehrere Indikatoren neben Feldnamen erscheinen, da es in diesen Feldern einzelne Einstellungen geben kann, die unterschiedliche Status haben. Zum Beispiel kann ein Typografie-Feld einen Schrifttyp enthalten, der von dieser Einstellung verwendet wird (grüner Indikator), und eine Schriftgröße, die von einer anderen Einstellung bestimmt wird (orangefarbener Indikator).

Indikator	Bedeutung
Rosa	Wert, der von der lokalen Klasse festgelegt wurde. Kann niemals überschrieben werden.
Grün	Diese Einstellung wird derzeit von dieser Klasse bestimmt. Dies kann durch Neuanordnung der Klassenprioritäten geändert werden.
Grau	Diese Einstellung wird derzeit von einer anderen Klasse bestimmt.
Orange	Diese Einstellung wird derzeit von einer anderen Klasse bestimmt. Dies kann durch Neuanordnung der Klassenprioritäten geändert oder von der lokalen Klasse überschrieben werden.

Identifizieren Sie, welche Klasse verwendet wird

Die oben erklärten Indikatoren zeigen Ihnen, wo Konflikte bestehen, können aber auch genauere Informationen liefern. Klicken Sie auf einen Indikator, und ein Popup erklärt genau, welchen Stil er verwendet und welche Stile er ignoriert.

Wir werden die Klassen im obigen Beispiel verwenden, um zu sehen, wie es funktioniert.

Ziehen Sie ein Absatzelement auf die Arbeitsfläche.
Erstellen Sie die Klassen Red_text und Green_text wie oben erwähnt.

So sollte das Feld „Klassen“ aussehen.
Öffnen Sie im Bedienfeld das Feld Typografie.

Note

Der Indikator neben dem Wort Typografie zeigt an, dass es einen Konflikt in den Typografie-Feldern gibt.

Klicken Sie auf den Indikator neben Textfarbe.
Ein Popup zeigt die Namen der widersprüchlichen Klassen an. Die Eigenschaften der nicht verwendeten Klasse sind durchgestrichen.

Die responsiven Bearbeitungsfunktionen des Editors ermöglichen es Ihnen, verschiedene Klassen für verschiedene Bildschirmgrößen festzulegen. Als Beispiel werden wir unterschiedliche Schriftgrößen für Desktops und Mobilgeräte festlegen.

Fügen Sie ein Absatzelement zur Arbeitsfläche hinzu und geben Sie Text ein.
Öffnen Sie das Feld Typografie.
Geben Sie im Zähler Schriftgröße 14 ein.
Klicken Sie auf das Mobil-Symbol.
Öffnen Sie das Feld Typografie und stellen Sie die Textgröße auf 24 ein.
Klicken Sie auf den Indikator bei Schriftgröße.
Das Popup zeigt an, welche Schriftgröße für Mobilgeräte und welche für Desktops verwendet wird. Da wir uns im Mobilmodus befinden, ist die Desktop-Eigenschaft durchgestrichen.