Wenn Sie eine Elementor-Site bauen und der Text „irgendwie nicht atmet“ oder Überschriften zu eng auf den Absätzen sitzen, ist es fast immer das Zusammenspiel aus Line-Height und Margin. Beide hängen zusammen, beide werden im Elementor-Interface getrennt gesetzt — und beide werden in der Praxis oft verwechselt. In diesem Beitrag gehe ich durch die Logik, zeige konkrete Werte, die sich in über 50 Projekten bewährt haben, und gehe auf die typischen Fallen ein (besonders mobile). Wenn Sie generell tiefer in Elementor-Design einsteigen wollen, ist mein Beitrag Top 10 Design-Tipps für Elementor der gute Folge-Schritt.
Voraussetzung: Elementor 3.20+ oder neuer. Die meisten Tipps gelten auch für Elementor Pro — wo Pro-spezifische Features ins Spiel kommen, weise ich darauf hin.
Line-Height vs. Margin: wo der Unterschied steckt
Zwei verwandte, aber unterschiedliche Konzepte:
Line-Height ist der Abstand innerhalb eines Textblocks — zwischen zwei Zeilen desselben Absatzes. Wenn Ihr Body-Text „gedrungen“ wirkt, ist Line-Height die Schraube, an der Sie drehen.
Margin ist der Abstand zwischen Elementen — z. B. zwischen einem Absatz und der nächsten Überschrift. Wenn zwei Absätze „aneinander kleben“ oder eine Überschrift „auf dem Absatz sitzt“, ist Margin der Hebel.
Faustregeln, die in der Praxis funktionieren:
- Body-Text Line-Height: 1.5–1.7 (manchmal Em, manchmal Unit-less — Elementor erlaubt beides)
- Überschriften Line-Height: 1.1–1.3 (große Headlines brauchen weniger Luft)
- Margin zwischen Absätzen: 1em–1.5em (also etwa eine Zeilenhöhe)
- Margin zwischen Überschrift und nachfolgendem Text: 0.5em (eng, gehört zusammen)
- Margin zwischen Absatz und nachfolgender neuer Überschrift: 2em (Abstand, neues Thema)
Diese Werte sind kein Dogma — passen Sie sie Ihrer Schriftwahl an. Eine schmale Serifen-Schrift (z. B. Lora) braucht mehr Line-Height, eine breite Grotesk-Schrift (z. B. Inter, Source Sans) weniger.
Globale Typografie: einmal setzen, überall nutzen
Der größte Fehler, den ich in Elementor-Projekten sehe: Line-Height wird pro Widget eingestellt, statt global. Das Resultat: 47 verschiedene Line-Heights über die Site verteilt, keine Konsistenz, jede Änderung wird zur Sisyphos-Arbeit.
Stattdessen: Globale Typografie nutzen.
In Elementor → Hamburger-Menü oben links → „Site Settings“ → „Typography“. Dort definieren Sie:
- Primary Heading (H1)
- Secondary Heading (H2)
- Text (Body)
- Accent Text (z. B. Lead-Texte)
Pro Style legen Sie Font Family, Weight, Size, Line-Height und Letter-Spacing fest. Diese werden danach in jedem Widget per Klick anwendbar — und wenn Sie später die Line-Height von 1.6 auf 1.55 ändern, ändert sich das überall auf der Site, nicht nur an einer Stelle.
Empfohlene Default-Werte:
| Style | Font Size (Desktop) | Line-Height | Margin-Bottom |
|---|---|---|---|
| Primary Heading (H1) | 48 px | 1.15 | 0.5em |
| Secondary Heading (H2) | 32 px | 1.2 | 0.6em |
| Tertiary Heading (H3) | 24 px | 1.3 | 0.5em |
| Body Text | 17 px | 1.6 | 1.2em |
| Accent / Lead | 20 px | 1.5 | 1.5em |
Diese Werte sind ein Startpunkt für moderne Tech-/Service-Sites. Bei Magazinen, Blogs, längeren Lesetexten würde ich die Body-Line-Height auf 1.7 oder sogar 1.8 stellen — Lesefluss schlägt Dichte.
Pro-Section: Zeilenabstand für Headlines vs. Body
Headlines vertragen wenig Line-Height, weil sie zwischen den Zeilen keinen Lesefluss-Charakter haben — sie sind kurz, knackig, sollen zusammenstehen. Wenn Sie eine zweizeilige H1 mit Line-Height 1.6 setzen, sieht das aus, als hätte jemand zwei separate Sätze hingeschrieben.
Body-Text dagegen ist Lesetext. Hier brauchen die Zeilen Atemraum, damit das Auge zur nächsten Zeile springen kann, ohne den Anschluss zu verlieren. Faustregel: je länger Ihre Zeilenlänge, desto mehr Line-Height. Eine 800-Pixel-breite Textspalte mit 65 Zeichen pro Zeile verträgt 1.6 problemlos; eine schmale 400-Pixel-Spalte mit 35 Zeichen pro Zeile sollte eher 1.4 haben.
Praxis-Hack: In den Elementor-Widget-Einstellungen sehen Sie unter „Style“ → „Typography“ einen „Line Height“-Slider. Schalten Sie ihn auf „Unit-less“ (das kleine Dropdown rechts vom Slider). Unit-less Line-Height skaliert mit der Schriftgröße — wenn Sie später die Font-Size ändern, passt sich der Zeilenabstand automatisch an. Bei „Em“ oder „px“-Werten bricht das.
Spacing-Widget vs. CSS Margin: wann was?
Elementor bietet drei Wege, vertikalen Abstand zu erzeugen:
- Margin am Element (Style-Tab → Advanced → Margin)
- Padding am Container (Layout-Tab → Padding)
- Spacer-Widget (eigenes Widget, das man zwischen Elementen einfügt)
Welcher Weg ist richtig? Hängt vom Kontext ab.
Margin verwende ich für:
- Standard-Abstände zwischen Text-Elementen
- Globale Konsistenz (in globaler Typografie definiert)
Padding verwende ich für:
- Section-übergreifende Abstände (oben/unten Padding am Container)
- Wenn der Hintergrund/Background eine Rolle spielt (Padding schiebt den Inhalt, nicht den farbigen Bereich)
Spacer-Widget verwende ich für:
- Einmalige, sehr spezifische Abstände, die nicht in die Standard-Logik passen
- Schnelle Tests im Design-Modus
Was ich vermeide:
- Mehrere leere
-Tags im Texteditor, um Abstand zu erzeugen. Das ist HTML-Hack aus 2007 — unsemantisch, schlecht für Screenreader, springt beim Responsive-Verhalten anders, als man erwartet. - Pixel-genaue Spacer auf jeder Section. Spacer mit 73 px sieht im Editor exakt aus, ist aber Wartungsalbtraum.
Mobile Zeilenabstand: was beim Tablet/Phone schiefgeht
Die häufigste mobile Spacing-Falle: Sie haben am Desktop H1 mit 48 px Schriftgröße und Line-Height 1.15. Auf dem Handy schrumpft die Font-Size automatisch auf 32 px — aber Line-Height 1.15 macht den Headline-Block dort plötzlich zu eng, weil mobile Headlines oft umbrechen.
Lösung: Elementor erlaubt responsive Werte pro Breakpoint. Klicken Sie auf das Geräte-Icon neben jedem Wert und setzen Sie:
- Desktop H1: Line-Height 1.15
- Tablet H1: Line-Height 1.2
- Mobile H1: Line-Height 1.25
Genauso bei Body-Text:
- Desktop Body: Line-Height 1.6
- Mobile Body: Line-Height 1.55 (kürzere Zeilen brauchen weniger)
Margin sollte auf Mobile kleiner sein als auf Desktop. Wer 2em zwischen H2 und Absatz auf Desktop hat, sollte mobile auf 1.2em runtergehen — sonst sieht die Site auf einem 5-Zoll-Display aus, als hätte jemand jede Section mit drei Leerzeilen separiert.
Bonus-Tipp für Pro-Nutzer: Mit Elementor Pro können Sie unter „Site Settings“ → „Layout“ eigene Breakpoints definieren. Standard sind Mobile (≤767 px), Tablet (768–1024 px), Desktop. Wenn Ihre Zielgruppe viele iPad-Pros hat, lohnt sich ein zusätzlicher Breakpoint bei 1200 px.
Performance-Note: keine Inline-CSS-Orgien
Jeder Spacing-Wert, den Sie in Elementor pro Widget setzen, landet als generierte CSS-Klasse im HTML — und kann sich akkumulieren. Eine Seite mit 200 individuell gestylten Widgets hat 200 zusätzliche CSS-Regeln im Head. Das ist nicht kriminell, aber unnötig.
Best Practices für saubere Performance:
- Globale Typografie definieren (siehe oben) statt pro Widget zu styles.
- Pre-built Section-Templates wiederverwenden statt jede Section neu zu styles.
- Custom CSS Classes (Elementor Pro) definieren — z. B. eine Klasse
.spacing-medium, die 2em Margin-Bottom setzt, und die dann wo nötig anwenden. - Unbenutzte Widgets deaktivieren. Elementor lädt CSS für jedes aktivierte Widget — auch wenn Sie es nicht verwenden. Unter „Settings“ → „Features“ können Sie aufräumen.
Für tiefere Performance-Tipps zu Elementor schauen Sie in meinen Beitrag Elementor Performance-Optimierung. Und wenn Sie ganz am Anfang stehen und Elementor strukturiert lernen wollen, ist Elementor Einsteiger-Tutorial Pflicht-Lektüre.
Designcheck oder Schulung gewünscht?
Wenn Ihre Elementor-Site spacing-mäßig „irgendwie nicht passt“, schaue ich Ihnen in 60 Minuten über die Schulter und decke die häufigsten Lücken auf — meistens reicht eine Stunde, um die Typografie sauber zu setzen und Konsistenz herzustellen. Schreiben Sie mir kurz und ich vereinbare mit Ihnen ein 1:1-Coaching oder einen kleinen Audit.
→ Coaching anfragen: Kontakt aufnehmen
Tags
