Wenn Sie eine konvertierte Seite in Elementor öffnen, finden Sie manchmal Container in Containern in Containern. Das ist kein Zufall – es spiegelt Ihr HTML exakt wider. Wer die Regel versteht, hat die Verschachtelung leicht im Griff.
Die Grundregel: ein Blockelement, ein Container
Der Konverter durchläuft Ihr DOM. Jeder Wrapper auf Blockebene (<div>, <section>, <article>, <header>, <figure>…) wird zu einem Elementor-Container, und seine berechneten Werte für Padding, Hintergrund, Rahmen, Eckenradius und Schatten sowie sein Flex-/Grid-Layout werden auf diesen Container übertragen. Text, Überschriften, Bilder und Buttons werden zu Widgets darin.
Eine Markup-Kette wie section > div.wrap > div.row > div.col > h2 erzeugt also vier verschachtelte Container, bevor Sie bei der Überschrift ankommen. Kaputt ist nichts – aber das Bearbeiten ist mühsam.
Was bereits automatisch zusammengefasst wird
Ein Wrapper, der überhaupt keine visuelle oder Layout-Wirkung hat, wird automatisch entfernt. Konkret wird ein <div> zusammengefasst, wenn es genau ein Kindelement hat und nichts von Folgendem: Hintergrund, Hintergrundbild, Rahmen, Padding, Box-Shadow, max-width, min-height oder eine Flex-/Grid-Darstellung. Der Konverter zählt diese Fälle und zeigt sie im Überblick der Strukturübersicht als „Überflüssige Wrapper zusammengefasst“ an.
Sobald ein Wrapper auch nur ein kleines Padding oder einen Hintergrund trägt, bleibt er erhalten – denn ihn zu entfernen würde das Layout verändern.
Karten werden zu einem einzigen Widget abgeflacht
Es gibt eine zweite, stärkere Abflachung: Wenn eine Karte eigentlich nur ein gestylter Rahmen um ein einzelnes Inhaltselement ist, wandert der Rahmen auf das Widget selbst, und der Wrapper verschwindet. Zwei Muster lösen das aus:
- Bild + Überschrift + kurzer Text → ein einzelnes Bild-Box-Widget
- Icon + Überschrift + kurzer Text → ein einzelnes Icon-Box-Widget
In beiden Fällen werden Hintergrund, Rahmen, Eckenradius, Schatten und Padding der Karte in die Einstellungen im Tab „Erweitert“ des Widgets geschrieben. Eine Reihe aus fünf Karten wird so zu einem Grid mit fünf Widgets – nicht zu einem Grid mit fünf Containern, die jeweils ein Widget enthalten. Genau so würden Sie es auch von Hand bauen.
So erhalten Sie ein flacheres Ergebnis
- Schreiben Sie flacheres HTML. Ein Wrapper pro Abschnitt reicht meist aus. Wenn Sie das HTML mit KI erzeugen, sagen Sie das ausdrücklich im Prompt.
- Fügen Sie keine Layout-Divs hinzu, die Sie nicht brauchen. Ein Grid- oder Flex-Elternelement kann seine Kindelemente direkt anordnen; ein zusätzlicher
.col-Wrapper pro Element ist mit modernem CSS selten nötig. - Nutzen Sie die Kopierwurzel. Klicken Sie in der Strukturübersicht auf das Zielsymbol in der Zeile, die Sie tatsächlich haben möchten. Alles darüber wird verworfen, sodass die äußeren Seiten-Wrapper Elementor gar nicht erst erreichen.
- Schließen Sie aus, was Sie nicht brauchen – mit dem ✕-Symbol in einer Zeile.
Der genaue Test – und warum die Padding-Schwelle bei 2px liegt
Es lohnt sich, die tatsächliche Regel zu kennen, denn sie erklärt die meisten Überraschungen. Ein Wrapper wird nur entfernt, wenn alle folgenden Bedingungen zutreffen: Er ist weder Flex noch Grid; er ist nicht positioniert (fixed, absolute oder sticky); er hat weder Hintergrundfarbe noch Hintergrundbild; die gesamte Rahmenbreite ist null; das gesamte Padding beträgt 2px oder weniger; es gibt keinen Box-Shadow; es gibt keine max-width; min-height ist null; und keiner der beiden seitlichen Margins ist auto.
Der Spielraum von 2px ist Absicht. Browser melden berechnetes Padding als Pixelbruchteile, und ein Wrapper, für den ein Stylesheet kein Padding festlegt, kommt durch Rundung, Rahmen und Zoom regelmäßig auf etwa 0,4px. Ein Test auf exakt null würde Hunderte Wrapper behalten, die nichts tun; lässt man ein paar Pixel Rauschen zu, werden sie entfernt, ohne dass je ein Padding verworfen wird, das ein Designer wirklich beabsichtigt hat.
Die beiden Bedingungen zu Margin und max-width gibt es für ein ganz bestimmtes Muster: die zentrierte Inhaltsspalte. Ein Wrapper mit max-width: 1100px; margin: 0 auto wirkt leer – kein Hintergrund, kein Padding –, erledigt aber die wichtigste Layoutaufgabe der ganzen Seite. Würde man ihn zusammenfassen, liefe der Inhalt von Rand zu Rand. Deshalb bleibt er erhalten und wird zu einem Boxed-Container.
Warum Wrapper mit Padding nie mit ihrem Kindelement zusammengeführt werden
Eine Idee, die vernünftig klingt, ist, noch weiter zu gehen: Wenn ein Container genau einen Container enthält, führt man beide zusammen und addiert die Paddings. Das ist meist der erste Wunsch, den Nutzer äußern – und das Tool tut es bewusst nicht.
Nehmen wir eine Karte: ein äußerer Wrapper mit 24px Padding, der den Abstand zwischen den Karten erzeugt, und darin eine innere Box mit eigenem 24px Padding und weißem Hintergrund, die den Raum zwischen Kartenrand und Text schafft. Diese beiden Paddings sehen in den berechneten Stilen identisch aus und bedeuten völlig unterschiedliche Dinge. Führen Sie sie zusammen, erhalten Sie eine Box mit 48px Padding, einen Hintergrund, der jetzt auch den früheren Zwischenraum bedeckt, und eine Kartenreihe ohne Abstände dazwischen.
Allein aus berechneten Stilen lassen sich die beiden nicht zuverlässig unterscheiden, und eine Fehlentscheidung zerstört ein Layout stillschweigend auf eine Weise, die sich nur schwer zurückverfolgen lässt. Deshalb entfernt der automatische Durchgang nur Wrapper, die nachweislich nichts tun, und alles Mehrdeutige bleibt Ihnen überlassen – genau dafür gibt es die Kopierwurzel und die Ausschluss-Funktion.
Was Verschachtelungstiefe Sie tatsächlich kostet
Tiefe Verschachtelung ist kein Korrektheitsproblem. Die Seite wird einwandfrei dargestellt. Was sie kostet, ist Aufwand bei allem, was Sie danach tun:
- Elemente auswählen. Ein Klick auf eine Überschrift im Canvas wählt das innerste Element aus; um zum Abschnitts-Wrapper zu gelangen, müssen Sie jedes Mal vier- oder fünfmal in der Breadcrumb-Leiste nach oben gehen.
- Responsive Anpassungen. Padding für drei Gerätegrößen über fünf verschachtelte Ebenen sind fünfzehn Einstellungen, wo drei genügen sollten.
- Gewicht der Ausgabe. Jeder Container ist ein echtes
<div>mit eigenen generierten CSS-Regeln. Eine Tiefe von acht bei zwanzig Abschnitten ist viel Markup für ein Layout, das zwei Ebenen braucht. - Übergabe. Wenn später ein Kunde oder Kollege die Seite bearbeitet, ist ein tiefer Baum die Stelle, an der er aufgibt und Sie bittet, es zu erledigen.
Ein konkretes Beispiel
Diese Form erzeugen die meisten Page Builder und KI-Generatoren:
section.features > div.container > div.row > div.col-4 > div.card > div.card-body > h3
Sieben Ebenen bis zu einer Überschrift. Nach der Konvertierung bleibt div.container erhalten, wenn es die Zentrierung per max-width trägt, div.row wird zusammengefasst, wenn es ein reines Flex-Elternelement ohne eigenes Styling ist – und wenn .card ein Icon, eine Überschrift und einen kurzen Absatz enthält, wird der gesamte Kartenzweig zu einem einzigen Icon-Box-Widget abgeflacht. Aus sieben Ebenen werden ungefähr drei, ohne dass Sie etwas anfassen.
Schreiben Sie die Quelle als section.features > div.grid > div.card > h3, landen Sie bei zwei. Das ist der ganze Trick: Der Konverter bildet Ihr Markup getreu ab, daher ist flaches Markup der einzige zuverlässige Weg zu einem flachen Elementor-Baum.
Vor dem Export prüfen
Der Überblick der Strukturübersicht zeigt die Max. Verschachtelungstiefe. Sehen Sie dort eine Zahl wie 7 oder 8, ist das Ihr Signal, eine Kopierwurzel tiefer im Baum zu setzen oder das Quell-Markup zu vereinfachen und erneut zu konvertieren. Mit Tiefe 3–5 lässt es sich im Elementor-Editor angenehm arbeiten.