Das te. Design System ist der technische Baukasten hinter deiner Website. Statt Schriftgrößen, Farben und Abstände in Elementor einzeln einzustellen, vergibst du eine vorbereitete CSS-Klasse — das Aussehen kommt automatisch.
Warum es das gibt
Klassische WordPress-Seiten werden mit der Zeit unruhig: Auf jeder Unterseite wählt jemand eine etwas andere Schriftgröße, einen etwas anderen Abstand. Nach zwei Jahren sieht keine Seite mehr wie die andere aus, und eine Änderung am Design bedeutet, jede Seite einzeln anzufassen.
Das Design System verhindert das: Alle Werte stehen an einer zentralen Stelle. Ändert sich die Markenfarbe, ändert sich ein Wert — und die ganze Website zieht mit.
Was das für dich bedeutet
- Du kannst nichts kaputt machen. Es gibt keine falschen Zahlen, nur vorhandene oder nicht vorhandene Klassen.
- Du bist schneller. Eine Klasse eintippen statt fünf Felder auszufüllen.
- Es bleibt einheitlich — automatisch. Auch in zwei Jahren, auch wenn mehrere Leute Seiten anlegen.
- Mobil passt es von allein. Schriftgrößen und Abstände skalieren mit der Bildschirmbreite.
Die Klassen-Familien
Jede Klasse beginnt mit einem Buchstaben, der ihre Aufgabe verrät:
| Vorsilbe | Wofür | Beispiel |
|---|---|---|
t- |
Text: Überschriften, Fließtext, Labels | t-heading--l |
c- |
Komponenten: Buttons, Karten | c-btn--primary |
l- |
Layout: Sektionen, Raster | l-section--m |
f- |
Formulare | f-input |
u- |
Helfer: Abstand, Sichtbarkeit | u-mb--xl |
Wichtig: nicht das te. Framework
Der Begriff te. Framework ist das Dach über zwei Dingen: dem te. Workflow — wie wir Projekte bauen (Strategie, Marke, Prototyp, Umsetzung) — und dem te. Design System, um das es hier geht. In diesem Hilfebereich findest du ausschließlich das Design System.