Was ist das te. Design System?

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 […]

Welche Artikel sind für meine Rolle relevant?

Suche dir unten deine Rolle. Jede Rolle braucht nur einen Teil der Artikel — du musst nicht alles lesen. Inhalte pflegen (Redakteur) Du legst Seiten, Blogbeiträge oder Landingpages an und füllst sie mit Inhalt. Du brauchst kein CSS. Wie vergebe ich eine CSS-Klasse in Elementor? — der Handgriff, auf dem alles aufbaut Die 3 goldenen […]

Wie vergebe ich eine CSS-Klasse in Elementor?

Widget anklicken → Reiter Erweitert → Feld CSS-Klassen → Klassennamen eintippen. Fertig — 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 Text, einen Button oder einen Container. In der linken Spalte erscheinen drei Reiter: Inhalt, Stil, Erweitert. Wähle […]

Die 3 goldenen Regeln

Keine eigenen Pixel-Werte. Keine Änderungen im Reiter Stil. Eine Komponenten-Klasse pro Element. Wenn du diese drei Regeln einhältst, bleibt die Website dauerhaft pflegbar. 1. Keine eigenen Pixel-Werte Trage in Elementor keine festen Werte für Schriftgrößen, Abstände oder Ränder ein — also kein 23px, kein 14px. Warum: Feste Pixel bleiben auf dem Handy genauso groß wie […]

Klassen-Übersicht: alle Klassen auf einen Blick

Diese Seite listet alle verfügbaren Klassen. Speichere sie als Lesezeichen — im Alltag ist sie die Seite, die du am häufigsten brauchst. Alle Klassen werden im Elementor-Feld CSS-Klassen eingetragen, ohne Punkt. Pro Element genau eine Komponenten-Klasse, dazu beliebig viele u–Helfer. Überschriften Klasse Wofür t-heading–display Übergroße Hero-Schrift t-heading–xxl Hauptüberschrift auf Landingpages t-heading–xl Hauptüberschrift Unterseiten t-heading–l Sektionsüberschrift […]

Überschriften formatieren

Vergib eine Klasse zwischen t-heading–display (sehr groß) und t-heading–xs (sehr klein). Schriftart, Gewicht und Farbe kommen automatisch mit. Die Stufen Klasse Typischer Einsatz t-heading–display Sehr große Hero-Schrift auf der Startseite t-heading–xxl Hauptüberschrift einer Landingpage t-heading–xl Hauptüberschrift einer Unterseite t-heading–l Sektionsüberschrift — der Standardfall t-heading–m Unterüberschrift, Titel in einer Karte t-heading–s Kleine Überschrift innerhalb eines Abschnitts […]

Fließtext formatieren

Vergib t-text–m für normalen Fließtext. Für Einleitungen t-text–l, für Hinweise t-text–s. Die Stufen Klasse Typischer Einsatz t-text–xl Sehr große Aussage, fast überschriftgroß t-text–l Einleitung unter einer Überschrift, Teaser t-text–m Standard — normale Absätze t-text–s Hinweise, Bildunterschriften t-text–xs Fußnoten, Datum, Autor, Meta-Angaben Ein typischer Textblock Ein Abschnitt besteht meist aus drei Elementen: Überschrift: t-heading–l u-mb–s Einleitung: […]

Mein Button hat die falsche Farbe oder Form

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 […]

Text auf dunklem Hintergrund ist nicht lesbar

Ergänze am Textelement die Helfer-Klasse u-text–on-dark. Sie stellt die Schriftfarbe auf einen hellen Ton um. Warum das passiert Alle Textklassen gehen von einem hellen Hintergrund aus — der Normalfall. Legst du eine Sektion oder Karte auf eine dunkle Fläche, bleibt die Schrift dunkel und verschwindet. Die Lösung Die Textklasse bleibt, die Helfer-Klasse kommt dazu — […]

Das Bild ragt aus der Karte heraus

Gib dem Container, in dem das Bild liegt, die Klasse c-card__media — geschrieben mit zwei Unterstrichen. Die Rundung passt sich dann automatisch an die Karte an. Warum das passiert Eine Karte hat runde Ecken und einen Innenabstand. Ein Bild darin ist standardmäßig rechteckig — die Ecken stehen über und wirken unsauber. Das Design System rechnet […]