Elementor Containers vs Sections: Which Should You Use?

For any new work, use containers. They are Elementor’s modern default, built on CSS Flexbox and Grid, and they produce cleaner, faster-loading pages than the old section-and-column system. Sections still work and won’t break existing sites, but Elementor has made containers the default and is winding sections down, so there is little reason to build anything new with them.

If you have used Elementor for a while, you have watched the layout tools change under you. For years, every page started with a section, which held columns, which held your widgets. Then containers arrived, and now they are what Elementor drops onto a blank page by default. If you are not sure whether to carry on with sections or make the switch, here is the short, practical version, based on how we build client sites every week.

What sections and columns were

Sections were Elementor’s original layout system, and for a long time they were the only one. Every layout followed the same fixed hierarchy: a section held one or more columns, and each column held your widgets. If you needed something more complex inside a column, you added an inner section, which then held its own columns.

It worked, but it had real limits. You could only nest one inner section deep, so genuinely complex layouts meant fighting the structure with workarounds. More importantly, every section, column, and inner section added its own wrapper div to the page’s HTML. A simple three-column layout could generate five or six of these wrappers before you had added a single word of content.

What containers are

Containers are the replacement, and they have been Elementor’s default since version 3.6. Instead of the rigid section-column-widget hierarchy, a container holds your widgets directly, or holds other containers, nested as deep as you need.

They come in two types. A Flexbox Container arranges elements along a single axis, either a row or a column, and handles the vast majority of layouts you will ever build. A Grid Container arranges elements in two dimensions at once, rows and columns together, which is ideal for things like image galleries and evenly aligned card rows. You can switch a container between the two in its settings, and you can mix them on the same page.

The real difference is what it does to your code

This is the part that matters most, and it is the reason we build everything in containers now. The old system’s habit of stacking wrapper divs made pages heavier than they needed to be. Every extra layer of markup is more work for the browser to read and render.

Containers flatten that structure dramatically. A layout that used to need a section with three columns now needs one container with three widgets inside it. Fewer wrappers means a smaller DOM, and a smaller DOM renders faster. That feeds straight into your Core Web Vitals, especially Largest Contentful Paint, which is one of the signals Google uses when it ranks you. If you want the full picture on performance, we go deeper in How to Speed Up an Elementor Website.

When sections still make sense

Being honest, sections are not evil, and you do not need to panic about them. If you inherit a site built entirely on sections, it will keep working perfectly well. Elementor has kept them available precisely so that older sites do not fall over.

So the only real case for touching sections is a practical one: you are maintaining an existing page that was built with them, and a quick edit inside the current structure is genuinely faster than rebuilding the block. That is fine. What we would not do is start a brand new page or template with sections. There is no upside to it, and you would be building on something Elementor is actively winding down.

Flexbox or grid?

Once you have committed to containers, the next question is which type to reach for. The simple rule we use: default to Flexbox, and switch to Grid only when the layout genuinely needs it.

Flexbox is one-dimensional, so it is perfect whenever your elements flow naturally in a single direction, a row of feature cards, a stacked column of content, a header with a logo on the left and a menu on the right. Grid is two-dimensional, so it earns its place when you need precise control over both rows and columns at the same time, like a gallery or a dashboard where everything must line up on a strict grid. Most pages are mostly Flexbox with the occasional Grid section where it counts.

Should you rebuild an existing site?

Almost never in one go. A full rebuild is a lot of hours for a benefit most visitors will never consciously notice, and it introduces risk on a site that currently works.

The sensible approach is to get the win where it is multiplied. Start with the templates that appear on every single page, your header and footer, because any weight you shave there is saved across the whole site at once. After that, rebuild individual pages in containers as you come to edit them anyway. Over time the site quietly modernises without you ever setting aside a scary rebuild week. And measure as you go, so you can actually see the DOM shrink rather than taking it on faith.

The short version

For anything new, build in containers. They are the default now, they produce cleaner and faster pages, and sections are on their way out. Sections will not break your existing site, so there is no need to rebuild everything at once, but when you do modernise, start with your header and footer where the gains multiply. Reach for Flexbox by default and Grid only when a layout truly needs two dimensions.

If your Elementor site feels heavier or slower than it should, rebuilding the worst offenders as containers is one of the things we do all the time. Tell us what is going on and we will take a look.

Written by Paul Weatherall, Elementor expert.