Element anklicken → Reiter Stil → oben das Feld Klassen → Namen eintippen → aus der Liste die bestehende Klasse wählen. Das Aussehen ändert sich sofort.
Schritt für Schritt
- Öffne die Seite im Elementor-Editor.
- Klicke das Element an, das du formatieren willst — eine Überschrift, einen Absatz, einen Button oder einen Container.
- In der linken Spalte erscheinen zwei Reiter: Allgemein und Stil. Wähle Stil.
- Ganz oben findest du das Feld Klassen. Dort steht bereits
local. - Tippe den Klassennamen ein — zum Beispiel
t-heading--l. Ohne Punkt am Anfang. - Wähle den Treffer aus der Liste aus. Wichtig: Die Klassen des te. Design Systems gibt es schon. Wähle nie „Neue Klasse erstellen“ — sonst legst du eine leere zweite Klasse mit demselben Namensmuster an.
- Speichern.
Platzhalter — Bild wird nachgerüstet.
Pink oder grün: welche Klasse du gerade bearbeitest
Im Feld Klassen ist immer genau ein Eintrag aktiv — der, den du gerade bearbeitest. Elementor zeigt das über die Farbe:
| Farbe | Bedeutung | Wirkung deiner Einstellungen |
|---|---|---|
| Pink | die lokale Klasse (local) |
gilt nur für dieses eine Element |
| Grün | eine Global Class | gilt für jedes Element, das diese Klasse trägt |
Das ist die wichtigste Anzeige im ganzen Editor: Sie sagt dir, wohin dein nächster Klick geschrieben wird. Mehr dazu in Was ist die lokale Klasse?
Drei Regeln für das Feld
- Kein Punkt.
t-heading--list richtig,.t-heading--lfalsch. - Genau eine Komponenten-Klasse. Ein Button bekommt
c-btn--primary— nicht zusätzlichc-btn. - Helfer dürfen dazu. Klassen mit
u-setzen je eine Eigenschaft und dürfen zusätzlich stehen:t-heading--l u-mb--xl.
Achte auf die Ebene
Der Aufbau ist verschachtelt: Ein Container kann weitere Container enthalten, darin liegen die Elemente. Eine Klasse wirkt nur auf das Element, das du auch angeklickt hast. Wenn eine Klasse nichts tut, ist häufig die falsche Ebene ausgewählt.
Prüfen kannst du das in der Struktur-Ansicht: Dort siehst du den Aufbau als Baum und welches Element markiert ist.