Elementor sections vs containers vs atomic elements

Elementor has changed its layout system twice. If you learned it with sections, moved to containers, and now see Div Block and Flexbox in the panel, it’s fair to wonder which one you should be using. Here’s how the three compare, what Elementor itself recommends for new and existing sites, and when it’s worth converting old pages.

What’s the difference between Elementor sections, containers and atomic elements?

Sections and columns are Elementor’s original layout: a fixed section, column, widget structure. Flexbox containers replaced them as the default in Elementor 3.16, letting you nest layouts freely with flexbox or grid controls. Atomic elements are Elementor V4’s building blocks, the default on new sites since April 2026, with lighter markup and styling through Classes and Variables.

	Sections and columns	Flexbox containers	Atomic elements
Elementor version	The original layout	V3, the default since 3.16 (2023)	V4, the default on new sites since April 2026
Structure	Section > column > widget	Container > widgets or more containers	Div Block, Flexbox or Grid > elements
Layout controls	Column widths and an inner section	Direction, alignment, gap and wrap in the container’s Layout tab, or a grid container	Display, flex and grid settings in the Style tab
Styling	Each widget’s own settings	Each widget’s own settings, plus global colors and fonts	Classes and Variables, or styles local to the element
Markup	Four divs around a widget	Two divs around a widget	A single div wrapper per element
Status today	Still works; no new layouts	The layout system for V3 sites	Elementor’s recommendation for new sites

The markup row is Elementor’s own numbers: its performance guide counts four divs for sections and columns against two for containers, and the Elementor 4.0 announcement describes a single div wrapper for each atomic element.

If you’re building on V4, the Elementor V4 components in Element UI, the Elementor component library, are made from atomic elements, so you can see the new structure in a real section.

Sections and columns: the original layout

Sections were how every Elementor page was built until containers arrived. Every section held one or more columns, every column held widgets, and if a column needed its own columns, you added an inner section inside it.

Section
├── Column
│   └── Widget
└── Column
    └── Inner section
        └── Column
            └── Widget

It worked, but it fought you on anything complex. Inner sections only went one level deep, every layout level added wrapper divs, and content in a section always stacked vertically, so side by side layouts meant more columns. Sections still render on existing pages, but there’s no reason to start a new page with one.

Flexbox containers: the default since Elementor 3.16

Containers replaced the section, column, widget hierarchy with one element that can hold widgets or other containers. Elementor switched them on by default for new sites in Elementor 3.16 in September 2023, with separate Flexbox and Grid containers.

Container
├── Widget
├── Widget
└── Container
    ├── Widget
    └── Widget

You choose the direction, alignment, gap and wrap, and change them per breakpoint, so one container can be a row on desktop and a stack on mobile. The settings are covered properly in the Elementor flexbox containers guide. For a V3 site, containers are the layout system to build with.

Atomic elements: Elementor V4’s building blocks

Atomic elements are a separate system that arrived with Elementor V4, and Elementor doesn’t call them containers. The layout elements are the Div Block, a light element for simple designs; the Flexbox element, for complex layouts; and the Grid element, added in Elementor 4.2. Their layout settings live in the Style tab rather than a Layout tab.

The bigger change is styling. Instead of setting colors and sizes on every element, you define Classes (reusable style collections) and Variables (colors, fonts and sizes defined once) and apply them across the site. And the markup is leaner: Elementor’s V4 FAQ describes atomic elements as pure HTML tags without extra wrapper layers.

Since April 2026, every new Elementor site starts on V4 with atomic elements enabled. Existing sites stay as they are until you choose to use them. For what else V4 changes, and when it’s worth switching a client site, see Elementor V4 and the atomic editor.

Which should you use for a new page?

Match the site you’re working on. On a new site, Elementor’s own advice is to start with V4 elements and build a design system with Classes and Variables, adding V3 widgets only where you still need them. On an existing V3 site, keep building with containers. Never start a new page with sections.

You’re working on	Build new pages with
A new site on Elementor V4	Atomic elements, with Classes and Variables
An existing site built with containers	Containers, or atomic elements for new sections if you want to start moving to V4
An existing site built with sections	Containers for anything new; convert old sections when you edit them

Can you mix them on one page?

Yes. Elementor supports sections and containers on the same page, and its V4 FAQ says legacy widgets and atomic elements can be combined on the same page too. That’s what makes a gradual move possible: nothing forces you to rebuild an old site in one go.

The catch is consistency. A page that mixes three layout systems is harder to edit and to hand over to someone else, so keep each page to one system where you can, and mix only while a page is part way through being moved over.

Should you convert old sections to containers?

Convert a page when you’re already editing it, not all at once. Pages built with sections keep working, so there’s no deadline, but converting gives you lighter markup and the container controls the next time the page needs work. Conversion is one way, so check each result before you delete the original.

Elementor’s converter works one section at a time:

1. Hover over the section and click its Edit Section icon.
2. Open Layout and click Convert. Elementor adds a container copy below the original section.
3. Compare the two, fix anything that moved, then delete the original section.

Padding and margins don’t always convert cleanly, and sections with percentage widths may need their widths set again. If the converted container won’t stretch the way the section did, Elementor container not full width walks through the usual causes.

Where Element UI fits

Element UI, the Elementor component library, covers both current systems. The V3 components are built with flexbox containers, and the V4 components are built with atomic elements, laid out with V4’s Flexbox and, for cards and logo walls, Grid. The V4 components use local styles only, so pasting one doesn’t add global classes or variables to the site: you can keep the local styles or connect your own.

They’re lightly styled with placeholder content, ready for your brand’s fonts, colors and images. Browse the full Elementor component library for V3 and V4 sections.