Open a converted page in Elementor and you sometimes find Containers inside Containers inside Containers. It is not random — it mirrors your HTML exactly. Understanding the rule makes it easy to control.
The basic rule: one block element, one Container
The converter walks your DOM. Every block-level wrapper (<div>, <section>, <article>, <header>, <figure>…) becomes an Elementor Container, and its computed padding, background, border, radius, shadow and flex/grid layout are carried onto that Container. Text, headings, images and buttons become widgets inside it.
So a markup chain like section > div.wrap > div.row > div.col > h2 produces four nested Containers before you reach the heading. Nothing is broken — but it is tedious to edit.
What already gets collapsed for you
A wrapper that has no visual or layout effect at all is removed automatically. Concretely, a <div> is collapsed when it has exactly one element child and none of: background, background image, border, padding, box-shadow, max-width, min-height, or a flex/grid display. The converter counts these and reports them as “Redundant wrappers collapsed” in the Structure map overview.
The moment a wrapper carries even a small padding or a background, it is kept — because dropping it would change the layout.
Cards are flattened into a single widget
There is a second, stronger flattening: when a card is really just a styled frame around one piece of content, the frame moves onto the widget itself and the wrapper disappears. Two patterns trigger it:
- image + heading + short text → a single Image Box widget
- icon + heading + short text → a single Icon Box widget
In both cases the card’s background, border, radius, shadow and padding are written to the widget’s own Advanced settings, so a row of five cards becomes a Grid holding five widgets — not a Grid holding five Containers each holding one widget. That is exactly how you would build it by hand.
How to get a flatter result
- Write shallower HTML. One wrapper per section is usually enough. If you generate the HTML with AI, say so explicitly in the prompt.
- Don’t add layout divs you don’t need. A grid or flex parent can lay out its children directly; an extra
.colwrapper per item is rarely necessary with modern CSS. - Use the copy root. In the Structure map, click the target icon on the row you actually want. Everything above it is dropped, so those outer page wrappers never reach Elementor.
- Exclude what you don’t need with the ✕ icon on a row.
The exact test — and why the padding threshold is 2px
It is worth seeing the actual rule, because it explains most of the surprises. A wrapper is dropped only when every one of these is true: it is not flex or grid; it is not positioned (fixed, absolute or sticky); it has no background colour and no background image; total border width is zero; total padding is 2px or less; there is no box shadow; there is no max-width; min-height is zero; and neither side margin is auto.
The 2px allowance is deliberate. Browsers report computed padding as fractional pixels, and a wrapper that a stylesheet declares as having no padding routinely computes to something like 0.4px once rounding, borders and zoom are involved. Testing for exactly zero would keep hundreds of wrappers that do nothing; allowing a couple of pixels of noise drops them without ever discarding padding a designer actually intended.
The two margin and max-width conditions exist for one specific pattern: the centered content column. A wrapper with max-width: 1100px; margin: 0 auto looks empty — no background, no padding — but it is doing the single most important layout job on the page. Collapsing it would let the content run edge to edge. So it is kept and turned into a Boxed container.
Why padded wrappers are never merged into their child
A reasonable-sounding idea is to go further: if a Container holds exactly one Container, merge them and add the paddings together. It is the first thing people ask for, and the tool deliberately does not do it.
Consider a card: an outer wrapper with 24px padding that creates the gap between cards, holding an inner box with its own 24px padding and a white background that creates the space between the card edge and its text. Those two paddings look identical in the computed styles and mean completely different things. Merge them and you get one box with 48px of padding, a background that now covers what used to be the gap, and a row of cards that no longer has spacing between them.
There is no reliable way to tell the two apart from computed styles alone, and getting it wrong silently breaks a layout in a way that is genuinely hard to trace back. So the automatic pass only removes wrappers that provably do nothing, and anything ambiguous is left for you — which is what the copy root and exclude controls are for.
What depth actually costs you
Deep nesting is not a correctness problem. The page renders fine. What it costs is everything you do afterwards:
- Selecting things. Clicking a heading in the canvas selects the innermost element; getting to the section wrapper means walking up the breadcrumb four or five times, every time.
- Responsive work. Padding at three device sizes across five nested levels is fifteen settings where there should be three.
- Output weight. Every Container is a real
<div>with its own generated CSS rules. Depth eight across twenty sections is a lot of markup for a layout that needs two levels. - Handover. If a client or colleague edits the page later, a deep tree is where they give up and ask you to do it.
A worked example
This is the shape most page builders and AI generators produce:
section.features > div.container > div.row > div.col-4 > div.card > div.card-body > h3
Seven levels to reach a heading. After conversion, div.container survives if it carries the max-width centering, div.row collapses if it is a bare flex parent with no styling of its own — and if .card holds an icon, a heading and a short paragraph, the whole card branch flattens into one Icon Box widget. What was seven levels becomes roughly three, without you touching anything.
Rewrite the source as section.features > div.grid > div.card > h3 and you land at two. That is the whole trick: the converter mirrors your markup faithfully, so shallow markup is the only reliable route to a shallow Elementor tree.
Check before you export
The Structure map overview shows Max nesting depth. If you see a number like 7 or 8, that is your signal to set a copy root deeper in the tree, or to simplify the source markup and convert again. Depth 3–5 is comfortable to work with in the Elementor editor.