- Warum gibt es eine zusätzliche Leerzeile im Elementor Text Editor Widget
- Wie entfernt man die Leerzeile am Ende des Elementor Textfeldes
- Was macht dieser CSS Code genau
- Was ist das Custom CSS Feld in Elementor
- Kann man das CSS auch in Elementor Free nutzen
- 1. CSS im Customizer des Themes unter „Zusätzliches CSS“
- 2. CSS in ein Child Theme einfügen
- Was ist das Text Editor Widget überhaupt
- Was ist Elementor und warum passiert das dort
- Welche Vorteile hat das Entfernen des Margins
Wer mit dem Elementor Pagebuilder arbeitet, nutzt in den meisten Fällen regelmäßig das Text Editor Widget. Es ist eines der am häufigsten eingesetzten Widgets, um Inhalte wie Absätze, Überschriften oder Listen zu gestalten. Doch vielen Nutzern fällt früher oder später ein Detail auf: Am Ende eines Textblocks entsteht häufig eine zusätzliche Leerzeile. Besonders bei klar strukturierten Layouts oder minimalistischem Design wirkt dieser Abstand störend und kann das Gesamtbild der Seite beeinträchtigen.
In diesem Beitrag erkläre ich dir, warum diese Leerzeile entsteht, wie du sie entfernen kannst und was es mit dem CSS selector in Elementor auf sich hat. Zusätzlich zeige ich dir Alternativen, Tipps für Elementor Free und wie du das CSS sauber in ein Child Theme oder im Customizer unterbringen kannst.
Warum gibt es eine zusätzliche Leerzeile im Elementor Text Editor Widget
Das Text Editor Widget in Elementor erzeugt HTML Paragraphen, also sogenannte p Tags. Elementor fügt für diese p Tags standardmäßig ein margin-bottom ein. Dieses sorgt dafür, dass zwischen einzelnen Absätzen ein optisch angenehmer Abstand entsteht.
Das Problem: Auch der letzte Absatz bekommt dieses Margin. Dadurch entsteht am unteren Rand des Textfeldes ein unnötiger Abstand, der in vielen Layouts zu einem optischen Ungleichgewicht führt. Besonders in Kombination mit Buttons, Bildern oder Icons unterhalb des Textwidgets kann der Abstand störend wirken.
Damit du verstehst, was Elementor tut, hilft ein Blick auf die standardmäßigen Browser-Styles:
| HTML Element | Standard Stil (Browser) | Elementor Stil |
|---|---|---|
| p Tag | margin-top: 1em, margin-bottom: 1em | margin-bottom: festgelegt durch Elementor |
Elementor überschreibt diesen Standard teilweise, setzt aber bewusst ein margin-bottom für alle Paragraphen. Dadurch wird auch der letzte Absatz erweitert.
Wie entfernt man die Leerzeile am Ende des Elementor Textfeldes
Mit Elementor Pro ist die Lösung besonders einfach. Jedes Widget besitzt im Reiter „Erweitert“ den Bereich „Custom CSS“. Dort kannst du eigene CSS Regeln einfügen, die nur für das jeweilige Widget gelten.
Der CSS Code, der das Problem löst:
selector p:last-child{
margin-bottom:0px;
}
Was macht dieser CSS Code genau
- selector: Ein Platzhalter, den Elementor automatisch durch die eindeutige CSS Klasse des Widgets ersetzt. Damit hast du eine Regel, die nur auf dieses Widget wirkt und nicht global auf der gesamten Website.
- p:last-child: Wählt den letzten Paragraphen des Textwidgets aus.
- margin-bottom: 0px: Hebt das automatische Margin am letzten Absatz auf.
Das Ergebnis: Kein zusätzlicher Abstand, saubere Optik, volle Kontrolle.
Was ist das Custom CSS Feld in Elementor
Das Custom CSS Feld ist ein Premium Feature von Elementor Pro. Damit kannst du Styles direkt an einem Widget, einer Spalte oder einem Abschnitt anfügen, ohne zusätzliche Plugins oder Theme Dateien ändern zu müssen.
Kann man das CSS auch in Elementor Free nutzen
In Elementor Free fehlt das Custom CSS Feld. Du hast aber zwei Alternativen:
1. CSS im Customizer des Themes unter „Zusätzliches CSS“
Der Code muss dann global geschrieben werden, z. B.:
.elementor-widget-text-editor p:last-child{
margin-bottom: 0px;
}
Nachteil: Gilt für alle Text Editor Widgets auf deiner Seite. Vorteil: Keine zusätzlichen Plugins notwendig.
2. CSS in ein Child Theme einfügen
Hier kannst du den Code in die style.css deines Child Themes einfügen. Das ist besonders sinnvoll, wenn du ohnehin ein Child Theme nutzt.
Vorteil: Perfekt organisiert und update-sicher.
Was ist das Text Editor Widget überhaupt
Das Text Editor Widget ist eines der Standardwidgets in Elementor. Es arbeitet ähnlich wie der klassische TinyMCE Editor in WordPress. Es unterstützt:
- Formatierungen
- Listen
- Inline HTML
- Links
- Shortcodes
- Text und Bilder innerhalb eines Blocks
Durch die automatische Erzeugung von p Tags entstehen auch die automatischen Margins, die wir korrigieren möchten.
Was ist Elementor und warum passiert das dort
Elementor ist ein visueller Pagebuilder für WordPress, der es erlaubt, Websites ohne Programmierkenntnisse zu gestalten. Er erzeugt jeden Inhalt in Form von Widgets, die wiederum HTML Elemente generieren. Um ein konsistentes Design zu gewährleisten, nutzt Elementor globale Style Vorgaben wie:
- Standardabstände
- Typografie
- Farben
- Spacing von Absätzen
Der zusätzliche Abstand am Absatzende ist kein Fehler, sondern eine bewusst gesetzte Vorgabe, die jedoch nicht in jedes Design passt.
Welche Vorteile hat das Entfernen des Margins
Das Entfernen der Leerzeile kann je nach Layout mehrere Vorteile bringen:
| Vorteil | Erklärung |
|---|---|
| Sauberer Look | Keine unnötigen Abstände unterhalb des Textblocks |
| Perfekte Ausrichtung | Buttons, Icons oder Bilder schließen direkt an den Text an |
| Bessere Kontrolle | Volle Freiheit über das Spacing deines Designs |
| Optimierung für mobile Ansichten | Weniger leere Bereiche auf kleinen Bildschirmen |
| Weniger Scrollweg | Besonders hilfreich bei langen Seiten |
