If you’ve used Elementor for a while, you probably built pages with sections and columns in the past. So what changed, and does it matter?
This guide explains the difference between sections and containers, why Elementor made the switch, and whether you should convert your existing sites.
The Quick Answer
Sections and columns were Elementor’s original layout system. Containers (built on CSS Flexbox) are the replacement. Containers produce cleaner code, load faster, and give you far more control over layout and responsiveness.
Containers are now the default. Sections still work on existing pages, but they’re deprecated and will eventually be phased out. For new work, containers are the way forward.
What Were Sections and Columns?
The original Elementor layout system worked in a fixed hierarchy:
Section
└── Column
└── Widget
Every section held one or more columns, and every column held widgets. If you needed a more complex layout inside a column, you added an inner section, which then held its own columns.
This worked, but it had limits. You could only nest one inner section deep. Complex layouts meant fighting the structure. And every section, column, and inner section added wrapper elements to your page’s HTML, which added weight.
What Are Containers?
Containers replace the whole section-column-widget hierarchy with a single flexible element:
Container
└── Widget
└── Widget
└── Container (nested as deep as needed)
└── Widget
A container can hold widgets directly, or hold other containers. There’s no forced section-then-column structure. You decide how elements stack, align, and space using Flexbox controls.
Containers come in two types: Flexbox (one direction at a time, row or column) and Grid (two dimensions at once). Flexbox handles the vast majority of layouts.
Sections vs Containers: Side by Side
| Feature | Sections & Columns | Containers |
| Structure | Fixed (section → column → widget) | Flexible (container → anything) |
| Nesting | One inner section deep | Unlimited |
| Code output | More wrapper divs | Fewer wrapper divs |
| Page speed | Heavier | Lighter |
| Layout control | Limited | Full Flexbox control |
| Responsive options | Basic | Granular per breakpoint |
| Clickable wrapper | Needs custom code | Built in |
| Status | Deprecated | Default, actively developed |
Why Elementor Made the Switch
The change wasn’t cosmetic. It addressed real problems with the old system.
Performance. Sections and columns generated a lot of nested div elements. A simple three-column layout could produce five or six wrapper divs. Containers cut this dramatically, which means a smaller DOM and faster rendering. This matters for Core Web Vitals and search rankings.
Flexibility. The old one-inner-section limit forced awkward workarounds for complex layouts. Containers nest as deep as you need, so layouts that were previously difficult or impossible become straightforward.
Responsive control. Containers expose Flexbox properties like direction, alignment, wrapping, and gap, all adjustable per breakpoint. You can switch a row to a column on mobile, reorder elements, or change spacing without duplicating anything.
Modern standards. Flexbox is how layouts are built on the modern web. Containers bring Elementor in line with current CSS practice rather than relying on an older, heavier approach.
Should You Convert Your Existing Sites?
This is the real question for most people. The answer depends on the site.
For new pages: Use containers. No reason not to. They’re the default and the better tool.
For existing sites built with sections: They still work, so there’s no emergency. But converting brings performance benefits and future-proofs the site before sections are eventually removed.
A reasonable approach:
- Convert high-traffic pages first, where speed gains matter most
- Convert pages you’re already editing anyway
- Leave low-priority pages until you have time
- Build all new pages with containers from the start
Don’t feel pressured to convert everything overnight. But don’t start new projects with sections either.
How to Convert Sections to Containers
Elementor includes a built-in conversion tool.
- Edit the page in Elementor
- Hover over a section and click the edit handle
- In the Layout settings, click “Convert”
- Elementor creates a container version
- Review it, adjust if needed, then delete the original section
Convert one section at a time so you can check each result. Some layouts, especially those with percentage-based widths, may need manual adjustment after conversion.
For a full breakdown of how containers work once you’ve converted, see our complete guide to Elementor Flexbox containers.
The “Section Not Full Width” Problem
One common point of confusion when moving to containers is width behaviour. People search for why their section or container won’t stretch full width.
The cause is almost always inheritance. A container can only stretch as far as its parent allows. If a parent container is set to boxed, or has a max-width, the child cannot exceed it, no matter what settings you apply to the child.
To fix it, work from the outside in. Confirm the parent container allows full width, then set the child to full width. For edge-to-edge backgrounds with readable content, use a full width parent with a boxed inner container.
We cover this in detail in our guide on why Elementor containers aren’t full width and how to fix it.
Wrapping Up
Sections and columns were Elementor’s original layout system. Containers are the modern replacement, built on Flexbox for cleaner code, faster loading, and far more layout control.
For new work, containers are the clear choice. For existing sites, convert at a sensible pace, prioritising high-traffic pages, while building everything new with containers from the start.
Want layouts that are already built with containers and ready to use? Element UI’s section library is built entirely on Flexbox containers, with proper structure and responsive behaviour handled. Copy, paste, and skip the setup.