Der Elementor Editor wurde entwickelt, um Web-Erstellern zu helfen, schnell und effizient zu arbeiten. Als Teil dieser Mission übernimmt der Editor die Prinzipien des Atomic Design. Dieses System basiert auf der Idee, kleine, wiederverwendbare Elemente zu erstellen. In Elementor werden diese Elemente Klassen genannt. Dies steht im Einklang mit dem von CSS verwendeten Vokabular.
Als zusätzlichen Vorteil kann die richtige Verwendung von Klassen auch die Leistung Ihrer Website verbessern.
Eine Klasse erstellen
Das Erstellen von Klassen erfolgt automatisch. Sie tun dies jedes Mal, wenn Sie ein Element zur Arbeitsfläche hinzufügen. Wenn Sie ein Element zur Arbeitsfläche hinzufügen, erscheinen die Elementoptionen im linken Bereich. 
Oben im Tab Stil sehen Sie das Feld Klasse, in dem die Klasse lokal bereits ausgefüllt ist. Sie können dem Element nun neue Klassen hinzufügen, indem Sie diesen Prozess befolgen:
- Geben Sie einen Klassennamen in das Textfeld ein.
Ein Dropdown-Menü erscheint.
- Wählen Sie den Klassennamen unter Neue Klasse erstellen.
Eine Klasse bearbeiten
Nachdem Sie eine Klasse erstellt haben, müssen Sie diese bearbeiten, um ihre Eigenschaften festzulegen.
So bearbeiten Sie eine Klasse:
- Erstellen Sie die Klasse.
- Überprüfen Sie das CSS-Klassenfeld. Die Klasse, die Sie bearbeiten, ist rosa, wenn es sich um eine lokale Klasse handelt. Andernfalls ist sie grün. Wenn die Klasse rosa oder grün ist, bearbeiten Sie diese Klasse.
Was ist eine Klasse?
Eine Klasse ist eine Sammlung gemeinsamer Stilmerkmale. Wenn Sie beispielsweise eine Website erstellen und möchten, dass der Standardtext auf der gesamten Website die Schriftart Arial 12 Punkt verwendet, können Sie eine Klasse namens Haupttext mit diesen Merkmalen erstellen. Auf diese Weise würde jedes Element mit der Klasse Haupttext Arial 12 Punkt als Schriftart verwenden.
Die lokale Klasse
In Elementor hat jedes Element mindestens eine Klasse – die lokale Klasse. Diese Klasse definiert das jeweilige Element, mit dem Sie arbeiten. Es ist wichtig zu beachten, dass, obwohl alle Elemente eine lokale Klasse haben, die lokale Klasse für jedes Element unterschiedlich sein kann. Zum Beispiel können Sie ein Text-Widget haben, das die Schriftart Arial in seiner lokalen Klasse verwendet, und ein anderes Text-Widget, das Calibri in seiner lokalen Klasse verwendet.
Klassenhierarchie
Das andere Wichtige, das man über Klassen wissen sollte, ist, dass sie nach Hierarchien funktionieren. Wenn sich Klassen widersprechen, weiß der Editor, welche Merkmale Priorität haben. Wenn ein Element beispielsweise zwei Klassen enthält, eine, die die Schriftart auf Arial setzt, und eine andere, die die Klasse auf Calibri setzt, muss der Editor bestimmen, welche Priorität hat. Diese Priorität wird im Klassenmanager festgelegt. Die lokale Klasse hat jedoch immer die höchste Priorität. Im obigen Fall würde das Element also die Schriftart New Times Roman verwenden, wenn die lokale Klasse die Schriftart auf New Time Roman gesetzt hätte.
Tipp: Es ist am besten, Ihre Klassen so aufzubauen, dass es so wenige Konflikte wie möglich gibt. Diese Konflikte können nicht nur Ihre Zeit verschwenden, sondern auch Ihre Website verlangsamen.
Beispiel für den Aufbau von Klassen
In diesem Beispiel werden wir uns den Aufbau einer Website ansehen, die mehrere Schaltflächen enthält. Um Zeit zu sparen und die Leistung zu steigern, erstellen wir zwei Klassen – eine zur Definition wichtiger Schaltflächen und eine weitere zur Definition sekundärer Schaltflächen.
- Erstellen Sie eine Seite im Elementor Editor.
- Ziehen Sie ein Schaltflächen-Widget auf die Arbeitsfläche.
Die Optionen erscheinen im Bedienfeld.
- Klicken Sie auf den Style-Tab.
- Geben Sie im Textfeld Klassen, neben lokal, Main_button ein.
- Wählen Sie im Dropdown-Menü Neue „Hauptschaltfläche“ erstellen.
Main_button erscheint im Textfeld Klassen.
Beachten Sie, dass der Klassenname Main_button grün ist. Das bedeutet, dass Sie diese Klasse bearbeiten.
- Öffnen Sie das Größe-Feld.
- Geben Sie der Schaltfläche eine Breite von 200 PX und eine Höhe von 50 PX.
- Öffnen Sie das Feld Hintergrund.
- Wählen Sie eine Farbe für die Schaltfläche. Details finden Sie unter Tab Stil – Hintergrund.
Nun erstellen wir eine Klasse für sekundäre Schaltflächen. - Löschen Sie im Textfeld CSS Klassen die Hauptschaltfläche.
Beachten Sie, dass die Schaltfläche zu ihren Standardeinstellungen zurückkehrt. - Geben Sie im Textfeld Klassen Secondary_button ein.
- Wählen Sie im Dropdown-Menü „Sekundäre Schaltfläche“ erstellen.
Beachten Sie, dass der Klassenname grün ist, was bedeutet, dass Sie die Klasse bearbeiten.
- Öffnen Sie das Größe-Feld.
- Geben Sie der Schaltfläche eine Breite von 100 PX und eine Höhe von 50 PX.
- Öffnen Sie das Feld Typografie.
- Stellen Sie die Schriftgröße auf 12 ein.
- Öffnen Sie das Feld Hintergrund.
- Wählen Sie eine Farbe für den Hintergrund. Stellen Sie sicher, dass sie sich vom Hintergrund der Hauptschaltfläche unterscheidet.
Nun testen wir die Ergebnisse.
- Fügen Sie ein neues Schaltflächen-Element zur Arbeitsfläche hinzu.
- Öffnen Sie den Tab Stil.
- Klicken Sie auf das CSS-Klassenfeld und wählen Sie Hauptschaltfläche aus dem Dropdown-Menü.
Die Schaltfläche sollte die Eigenschaften der Hauptschaltflächen-Klasse übernehmen.
- Klicken Sie auf das CSS-Klassenfeld und wählen Sie Sekundäre Schaltfläche aus dem Dropdown-Menü.
Die Schaltfläche wird die meisten Eigenschaften der Hauptschaltflächen-Klasse haben. Das liegt daran, dass die Hauptschaltflächen-Klasse in der Klassenhierarchie höher steht. Die Schriftart der Schaltfläche übernimmt jedoch den Stil der Sekundärschaltflächen-Klasse. Das liegt daran, dass wir die Typografie der Hauptschaltfläche nie definiert haben, sodass die Sekundärschaltflächen-Klasse den Schriftstil bestimmt.
- Klicken Sie im CSS-Klassenfeld auf die drei Punkte neben Sekundäre Schaltfläche.
- Wählen Sie Entfernen aus dem Dropdown-Menü.
Das CSS-Klassenfeld sollte nun nur noch die Klassen lokal und Hauptschaltfläche enthalten.
Nehmen wir nun an, wir möchten diese eine Schaltfläche so anpassen, dass sie wie eine Hauptschaltfläche aussieht, aber eine zusätzliche Funktion hat – sie ändert die Farbe, wenn Besucher mit der Maus darüberfahren.
- Klicken Sie auf die drei Punkte neben der lokalen Klasse.
Durch Bearbeiten der lokalen Klasse können wir den Stil dieser Schaltfläche ändern, ohne andere Schaltflächen mit der Hauptschaltflächen-Klasse zu ändern.
- Wählen Sie Hover aus dem Dropdown-Menü.
Hover ist das, was man einen Zustand nennt. Wenn Sie es auswählen, bestimmen Sie, wie die Schaltfläche aussieht, wenn Besucher mit der Maus darüberfahren.
- Öffnen Sie das Hintergrundfeld.
- Wählen Sie eine andere Hintergrundfarbe.
Beachten Sie, dass sich die Farbe der Schaltfläche ändert, wenn Sie den Cursor darüber bewegen.
