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.
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.