In Elementor, sections and columns are the old layout system: a section holds columns, and columns hold widgets. Containers replaced them in 2023 (version 3.16 made them the default). A container is a single flexible box that uses CSS flexbox or grid, can be nested, and holds widgets directly. Use containers for every new page; leave working section-based pages alone until you rebuild them.
- Section, column and widget wrappers produce four layers of HTML; a container produces one.
- Containers give you direction, wrap, gap, alignment and grid controls.
- Widgets are the content inside any layout: heading, image, button.
- Elementor can convert sections to containers, but not the other way round. Back up first.
- The Atomic Editor (Elementor 4) adds Flexbox and Div Block elements for even cleaner markup.
What are sections, columns and widgets?
This was the original Elementor structure, similar to a table:
- Section: a full-width horizontal band on the page.
- Column: a vertical slice inside a section. One section could hold up to ten columns.
- Inner section: a section placed inside a column for more complex layouts.
- Widget: the actual content, placed inside a column.
It was easy to understand, but every widget ended up wrapped in several layers of HTML, and columns stacked automatically on mobile whether you wanted it or not.
What is an Elementor container?
A container is one box that arranges whatever you put inside it. Set it to flexbox and choose a direction (row or column), wrap, alignment and gap; or set it to grid and choose the number of columns and rows. Containers can sit inside containers, so one element does the job that sections, columns and inner sections did before.
| Sections and columns | Containers | |
|---|---|---|
| HTML layers per widget | Around four | One per container |
| Layout model | Fixed columns | Flexbox or CSS grid |
| Spacing | Column and widget margins | Gap setting |
| Mobile behaviour | Columns stack automatically | You choose direction per device |
| Link a whole block | No | Yes (container link) |
| Status in 2026 | Legacy, still supported | Default |
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
How do widgets fit into containers?
Drop widgets straight into a container; there is no column layer in between. A typical “image beside text” block is one row container holding two child containers: one with an Image widget, one with a Heading, Text and Button. For a deeper tutorial see Elementor containers and flexbox and the grid container tutorial.
Should you convert old section pages to containers?
- Convert when you are already redesigning a page or template, when a page has layout bugs on mobile, or when speed matters and the page is heavily nested.
- Leave it when the page works, nothing is broken and converting would be paid rework.
- Never mix both models on the same page unless you have to; it makes spacing unpredictable.
- Back up the site or work on a staging copy.
- Open the page in Elementor and use the converter offered for legacy sections (right-click a section or use the prompt in the editor).
- Check each converted block on desktop, tablet and mobile; custom padding and margins may need fixing.
- Search your custom CSS for .elementor-section and .elementor-column selectors and update them.
- Publish and clear caches.
What changes in the Atomic Editor?
Elementor 4 introduced Atomic layout elements, Flexbox and Div Block, with leaner HTML and a shared Style tab, plus Atomic Grid since 4.2. The ideas are the same as containers, but styling moves to reusable Classes and Variables. If you understand containers, you already understand Atomic layouts.
Want to learn Elementor faster, live and 1-to-1?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
Are Elementor sections deprecated?
They are legacy. Containers have been the default since Elementor 3.16 in 2023, but section pages still work.
Can I use sections and containers on the same page?
It is possible in some setups but not recommended. Pick one model per page.
Can I convert containers back to sections?
No. Elementor converts sections to containers, not the reverse, so back up before converting.
Are containers faster than sections?
Usually yes, because they output fewer HTML layers. Deeply nested containers can still be slow.
What is the difference between a container and a widget?
A container arranges content. A widget is the content itself, such as a heading or image.
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Rather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
