Anyone who learned Elementor a few years ago thinks in sections and columns: a full-width section, columns inside it, widgets inside the columns. Anyone starting today sees containers instead. Both systems exist side by side, and that causes confusion. Here is how they fit together.
The difference in one sentence
The old system had three fixed levels — section, column, widget. The container is one level that can be nested freely and works internally with flexbox, the layout model used to build practically every modern website today.
What gets better as a result
Less nesting, less markup. A single-column section used to need a section and a column, so two levels for one block of content. With containers it is one. Across a whole page that adds up to noticeably less HTML — which helps loading time and makes the structure easier to read.
Alignment that actually works. Aligning three boxes of differing text height flush at the bottom used to be a fiddle with matching minimum heights and manual work. With flexbox it is two clicks: direction, alignment, done.
Behaviour instead of guessing numbers. You decide whether elements sit in a row or stacked, how they are distributed, whether they wrap when space gets tight. The layout responds to the space available instead of being tied to fixed percentages — which makes the difference on tablets in particular.
Order freely changeable. The image should sit on the left on desktop, but above the text on a phone? With flexbox that is a setting, not a duplicate build.
The four settings you genuinely need
The container has many options. In practice you work almost exclusively with four:
Direction — side by side (row) or stacked (column). The single most important switch.
Align items — how the elements sit across the direction. In a row: top, centre, bottom.
Justify content — how the space is divided along the direction. “Space between” is the value you need for a header with the logo on the left and the menu on the right.
Gap — the spacing between elements. It replaces the padding that used to be set on every individual column, and does so more reliably.
Once you have understood those four, you will build ninety per cent of all layouts. The rest is fine-tuning.
A structure that has proved itself
For a normal content section I take an outer container, direction column, full width with a background. Inside it an inner container, limited in width and centred — that is your text area. And inside that, where needed, a container in row direction for elements sitting side by side.
This pattern — the frame on the outside, the width limit inside, the content within that — carries a very long way and remains understandable months later.
Should you rebuild existing pages?
No. At least not without a reason.
Elementor offers a conversion from sections to containers. It often works well, but not always without losses — particularly on pages with lots of individual spacing, negative margins or custom CSS. Rebuilding a page that looks good and works will not bring you a single extra visitor and can cost half a day of rework.
My approach: new work gets built with containers, existing work stays. When an old page is being revised for content reasons anyway, rebuild it while you are there. That way the website migrates gradually without you turning it into a conversion project.
If you do convert: take a backup first, and afterwards check every page on phone and tablet. What else can go wrong in the process is set out in Elementor updates without breaking the layout.
The side effect I value most
Less nesting means less HTML per page. That is no performance miracle — loading time depends far more on images and scripts. But it is a step in the right direction, and it costs nothing, because you are building anyway. The bigger levers for loading time are in Elementor and Core Web Vitals.
Elementor Pro: containers exist in both versions. Pro only becomes relevant once you want to use this structure for the header area, footer and post layouts as well. View Elementor Pro
If you are just starting out
Do not learn the old system at all. Sections and columns will keep turning up in older tutorials and videos for a long time yet — you can read them without using them. Start straight away with containers; that saves you learning a model and having to unlearn it later.
That is exactly how I proceed in my Elementor training: flexbox from the outset, because it is the ground you will be working on for the next few years.
Tags