Widget anklicken → Reiter Erweitert → Feld CSS-Klassen → Klassennamen eintippen. Fertig — das Aussehen ändert sich sofort.

Schritt für Schritt

1. Öffne die Seite im Elementor-Editor.
2. Klicke das Element an, das du formatieren willst — eine Überschrift, einen Text, einen Button oder einen Container.
3. In der linken Spalte erscheinen drei Reiter: Inhalt, Stil, Erweitert. Wähle Erweitert.
4. Ganz oben findest du das Feld CSS-Klassen.
5. Tippe den Klassennamen ein — zum Beispiel t-heading--l. Ohne Punkt am Anfang.
6. Klicke ins Vorschaufenster. Das Element sieht sofort anders aus.
7. Speichern.

Drei Regeln für das Feld

• Kein Punkt. t-heading--l ist richtig, .t-heading--l falsch.
• Genau eine Komponenten-Klasse. Ein Button bekommt c-btn--primary — nicht zusätzlich c-btn.
• Helfer dürfen dazu. Klassen mit u- regeln nur Abstände und dürfen zusätzlich stehen, durch ein Leerzeichen getrennt: t-heading--l u-mb--xl.

Achte auf die Ebene

Elementor ist verschachtelt: Ein Container kann weitere Container enthalten, darin liegen die Widgets. Klassen wirken 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 über die Navigator-Ansicht (Tastenkürzel Strg+I bzw. Cmd+I): Dort siehst du die Struktur als Baum und welches Element markiert ist.

Verwandte Artikel

• Klassen-Übersicht: alle Klassen auf einen Blick
• Die 3 goldenen Regeln
• Mein Button hat die falsche Farbe oder Form