Designer verwenden selten eine einfache horizontale Trennlinie. Ein Trenner ist normalerweise ein leerer div mit einer Höhe und einem Hintergrund oder ein kurzer Akzentbalken unter einer Überschrift. Wer diese erkennt, hält den Elementor-Baum sauber, statt ihn mit leeren Containern zu füllen.
Was als Trenner erkannt wird
Ein <hr> wird immer zu einem Divider-Widget. Darüber hinaus wird ein leeres <div>– oder <span>-Element als Trenner behandelt, wenn es:
- keinen Text und keine echten Inhaltselemente enthält,
- als dünner Balken gerendert wird – geringe Höhe und deutlich breiter als hoch,
- und tatsächlich eine sichtbare Farbe hat, entweder als Hintergrund oder als obere/untere Rahmenlinie.
Der Fall „leer und farblos“ wird absichtlich ausgeschlossen. Ein leeres Abstands-div ohne Farbe ist kein Trenner, und es in eine sichtbare Linie zu verwandeln würde etwas hinzufügen, das Ihr Design nie hatte.
Was übernommen wird
Die Linienfarbe und ihre Dicke – ausgelesen aus der Rahmenlinie, wenn eine vorhanden ist, andernfalls aus der Hintergrundfarbe und der gerenderten Höhe. Ein kurzer Akzentbalken, der deutlich schmaler als sein Container ist, erhält außerdem eine explizite Breite und Ausrichtung, damit ein 78-Pixel-Balken unter einer Überschrift ein 78-Pixel-Balken bleibt, statt sich über die ganze Spalte zu strecken.
Warum das wichtiger ist, als es klingt
Ohne dies würde jede dekorative Linie zu einem leeren Container mit Hintergrund – ein Knoten in Ihrem Baum, der wie ein Layout-Element aussieht, aber keines ist. Multipliziert mit jedem Abschnitt auf einer langen Seite wird die Strukturübersicht schwer lesbar. Die Zuordnung zu Divider-Widgets macht den Baum ehrlich darin, was Layout und was Dekoration ist.
Nachträgliches Bearbeiten
Elementors Divider bietet mehr als eine schlichte Linie: Stile über durchgezogen hinaus (gepunktet, gestrichelt, Muster), optionalen Text oder ein Icon in der Mitte sowie Breiten- und Abstandssteuerungen. Sobald eine Linie ein echtes Divider-Widget ist, ist all das nur einen Klick entfernt – was bei einem leeren farbigen div nicht der Fall ist.
Die genauen Schwellenwerte
Die vagere Version dieser Regel würde auf einer halben Seite Fehlalarme produzieren, daher ist der Test bewusst eng gefasst. Ein leeres <div>– oder <span>-Element wird nur dann zu einem Divider, wenn es mindestens 12 px breit, höchstens 8 px hoch und mindestens dreimal breiter als hoch ist – zusätzlich zu einer sichtbaren Farbe.
Jede Zahl erfüllt einen Zweck. Die 12-px-Untergrenze weist winzige dekorative Punkte und die 1-px-Artefakte zurück, die um Rahmenlinien herum auftreten. Die 8-px-Obergrenze trennt eine Linie von einem Balken – darüber haben Sie einen farbigen Block, der in einen Container gehört, in den Sie Inhalte legen können. Das 3:1-Verhältnis weist kleine Quadrate zurück: Ein 6×6-Farbmuster besteht die ersten beiden Tests, ist aber offensichtlich kein Trenner.
Die Maße stammen vom tatsächlich gerenderten Element, nicht aus dem Stylesheet. Ein Balken, dessen Höhe aus einer Padding-Regel oder einer geerbten Zeilenhöhe resultiert, wird also nach dem beurteilt, was sichtbar ist, und nicht danach, welche Eigenschaft ihn erzeugt hat.
Auch Verlaufsbalken zählen
Der Farbtest akzeptiert sowohl ein Hintergrundbild als auch eine Hintergrundfarbe, und ein CSS-Verlauf ist ein Hintergrundbild. Der beliebte Akzentbalken – ein kurzer Balken unter einer Abschnittsüberschrift, der von einer Markenfarbe in eine andere läuft – wird also erkannt und zu einem Divider konvertiert.
Es ist jedoch gut zu wissen, was danach passiert: Elementors Divider nimmt eine Volltonfarbe an, keinen Verlauf, daher kommt das Widget mit einer einzigen Farbe statt mit dem Farbverlauf an. Wenn der Verlauf wichtig ist, ist das einer der wenigen Fälle, in denen es die bessere Wahl ist, das Original als kleinen gestalteten Container zu behalten.
Wenn die Linie überhaupt kein eigenes Element ist
Ein großer Teil der Linien auf einer echten Seite sind keine Elemente. Sie sind Rahmenlinien an etwas anderem – ein border-bottom unter einer Überschrift, eine obere Rahmenlinie an einem Footer, eine linke Rahmenlinie, die ein Zitat markiert.
Diese werden nicht zu Dividern und sollten es auch nicht. Die Rahmenlinie ist eine Eigenschaft der Überschrift oder des Containers und konvertiert genau als solche: als Rahmeneinstellung an dem Widget, zu dem sie gehört. Das visuelle Ergebnis ist identisch und die Struktur ehrlicher, weil die Linie an dem Element bleibt, das sie dekoriert. Verschiebt man die Überschrift, bewegt sich die Linie mit – das wäre nicht der Fall, wenn sie in ein separates Divider-Widget darunter aufgeteilt worden wäre.
Abstandshalter sind keine Trenner
Ein leeres div mit Höhe und ohne Farbe ist ein Abstandshalter und fällt beim Farbtest absichtlich durch. Es in einen Divider zu verwandeln würde eine Linie zeichnen, die Ihr Design nie hatte – eine sichtbare Änderung, und zwar die schlimmste, weil sie beabsichtigt aussieht.
Abstandshalter folgen stattdessen den normalen Wrapper-Regeln: Einer ohne Styling-Effekt wird zusammengelegt, und einer mit einer min-height überlebt als Container mit dieser Höhe. Wenn Sie lieber ein explizites Spacer-Widget hätten, ist das ein schneller Tausch im Editor – und eine gute Idee für alles, was Sie später responsiv anpassen möchten, da das Spacer-Widget Höhensteuerungen pro Gerät hat.
Tipp für die Quelle
Wenn ein Trenner sauber konvertieren soll, geben Sie ihm eine explizite Hintergrundfarbe und eine geringe Höhe, statt sich auf ein Pseudoelement zu verlassen. Pseudoelemente wie ::after sind keine echten DOM-Knoten und können daher überhaupt nicht in Widgets konvertiert werden – alles, was mit ihnen gezeichnet wird, muss in Elementor von Hand neu aufgebaut werden. Dies ist der mit Abstand häufigste Grund, warum der Akzentbalken eines Designers bei der Konvertierung verschwindet: Er war von Anfang an nie im DOM.