Containers replaced sections and columns as Elementor’s layout system. A container is one box that can hold widgets or other containers, nest as deep as the design needs and reorder per device, which means less code on the page and far easier mobile layouts. If your Elementor site is more than a few years old, it’s probably made of sections, columns and inner sections. Most sites built more recently use containers. Both still work. But they behave differently, and if you’re paying someone to maintain or extend an older site, it helps to know what they mean when they say “we should convert this to containers”.
The old model: sections, columns, inner sections
The original Elementor layout was a fixed hierarchy. A section held one or more columns. Columns held widgets. If you needed a layout inside a column, say two buttons side by side, you added an inner section, which had its own columns.
It was easy to understand, and it’s how a lot of good sites were built. The problems showed up as pages got more complex:
- Every section came with columns, whether you needed them or not, which meant extra wrapper code around everything.
- You couldn’t nest more than one inner section deep.
- Changing the order of things on mobile was awkward. Often the workaround was building a second copy of a section for mobile and hiding the desktop one.
- Making a whole block clickable (an entire card linking to a service page) needed custom code.
The new model: containers
A container is a single box that can hold widgets, other containers, or both. Instead of the section/column split, you just nest containers as deep as the design needs. Each container decides whether its contents sit in a row or a column, how they’re spaced and aligned, and whether they wrap onto a new line when space runs out.
Elementor offers two kinds. Flexbox containers arrange items in a line (horizontal or vertical) and let them grow, shrink and wrap. Grid containers lay items out in rows and columns, which suits evenly spaced cards and galleries. Both are based on standard CSS layout methods that browsers handle natively.
Containers have been the default for new Elementor sites for some time now. Elementor’s overview of what a container is covers the basics in more detail.
What changed for the site
| Sections and columns | Containers | |
|---|---|---|
| Wrappers per block | Two (section plus column) | One |
| Nesting | One inner section deep | As deep as needed |
| Reordering on mobile | Often needs duplicate content | Change direction or order per device |
| Clickable blocks | Custom code | Built in (container can be a link) |
| Even grids | Workarounds | Grid container |
The headline benefit is less code. Elementor’s own explanation is that a container has one wrapper element where a section and column have two, so the page’s DOM (the structure the browser has to build) is smaller. A smaller DOM is generally quicker to render, especially on cheaper phones. How much faster depends entirely on how the page is built: a container page with ten layers of pointless nesting can be heavier than a tidy section page.
The bigger day-to-day benefit, in our experience, is mobile. Being able to say “on phones, stack these the other way round” without duplicating content means fewer hidden elements, less to maintain, and less chance of the desktop and mobile versions drifting apart.
The catch: containers are easy to over-nest
Because you can nest freely, it’s tempting to wrap everything in a container “just in case”. We see pages where a single heading sits inside four containers, each with its own padding. That’s the old section bloat by another name.
A good rule: every container should be doing a job, such as setting a background, controlling direction or grouping items for alignment. If you can delete a container and nothing changes, delete it. Elementor’s Structure panel (the layered list of everything on the page) makes these empty layers easy to spot.
Should you convert an older site?
Elementor has a built-in Convert option. Open a section’s settings, go to Layout, and click Convert. Elementor creates a container version of the section directly below the original, so you can compare them before deleting the old one. The steps are in Elementor’s guide to converting sections to containers.
Three things to know before you start:
- It’s one-way. Once a page is built in containers, there’s no converting back to sections.
- The result needs checking. Elementor’s own guidance flags vertical alignment, content widths, padding and margins, and minimum heights carried over from the section. Expect to tidy every converted section by hand.
- Converting doesn’t fix a bad design. It changes the scaffolding, not the content or the layout decisions.
How we usually decide:
Leave it on sections if the site works well, isn’t changing much, and is due for a redesign in the next year or two anyway. Converting a site you’re about to replace is wasted money.
Convert gradually if the site is in good shape but you’re adding new pages (a typical ongoing Elementor maintenance job). Build new pages in containers, and convert old pages when they’re next due for a real content update. Sections and containers can live on the same site.
Rebuild if the site is slow, awkward on mobile, full of duplicated hide-on-mobile content, or you’re planning new templates anyway. At that point, converting old sections one by one often costs more than building clean pages from scratch, which is how all new builds in our web design service are done.
Before converting anything on a live site, take a full backup and work on a staging copy if you can. And don’t switch the Container feature off on a site that already uses containers: Elementor warns that container content won’t display while it’s inactive.
What about Elementor’s version 4 editor?
At the time of writing (late 2026), Elementor is rolling out its version 4 “atomic” editor, which adds a new set of leaner elements, including its own layout elements. They run alongside the classic widgets and containers rather than switching them off, so a site built in containers today doesn’t need rebuilding to keep working. Check Elementor’s release notes before planning a large V4 migration, because the details are still moving.
Where to put the effort
If you’re planning layout work, start with the parts of the site every visitor sees. Your header and footer are templates that appear on every page, so rebuilding those in containers has the widest effect. We cover that in building headers and footers with Elementor Theme Builder. After that, focus on your homepage, and in particular the first screen of your homepage, where speed and mobile layout matter most.
Can’t tell which of the three your site is? Send us the address for a quick look. For a working older site, leaving it alone is sometimes the best result of that check.