In den meisten Fällen ist es eines von zwei Dingen: ein Tippfehler im Klassennamen — oder eine eigene Einstellung im Reiter Stil, die die Klasse überschreibt.
1. Schreibweise prüfen
Der Name muss exakt stimmen. Häufige Fehler:
| Falsch | Richtig | Fehler |
|---|---|---|
c-btn-primary |
c-btn--primary |
nur ein Bindestrich |
.c-btn--primary |
c-btn--primary |
Punkt am Anfang |
c-btn--Primary |
c-btn--primary |
Großbuchstabe |
c-button--primary |
c-btn--primary |
ausgeschrieben statt btn |
c-btn--accent |
c-btn--primary |
Variante existiert nicht |
Es gibt genau drei Button-Klassen: c-btn--primary, c-btn--secondary, c-btn--link.
2. Stil-Reiter prüfen
Wechsle zum Reiter Stil. Sobald dort ein Wert vom Standard abweicht, zeigt Elementor daneben ein kleines Zurücksetzen-Symbol.
Setze alles zurück, was mit Farbe, Rahmen, Rundung, Typografie oder Innenabstand zu tun hat. Diese Einstellungen sind stärker als die Klasse und gewinnen immer.
3. Steht die Klasse am richtigen Element?
Bei Button-Widgets muss die Klasse am Widget stehen, nicht am umgebenden Container. Prüfe im Navigator (Strg+I / Cmd+I), welches Element du markiert hast.
4. Wird eine Grundform allein verwendet?
Steht im Feld nur c-btn, sieht der Button völlig unformatiert aus — wie ein normaler Link. c-btn ist ein interner Baustein ohne eigenes Aussehen. Es muss immer eine Variante sein: c-btn--primary.
Sonderfall: rechteckig statt rund
Buttons haben im Standard eine Pillenform (vollständig gerundete Enden). Sieht dein Button eckig aus, obwohl die Klasse richtig ist, wurde meist im Stil-Reiter ein eigener Rahmenradius eingetragen — siehe Schritt 2.
Strg+Shift+R / Cmd+Shift+R).