0.4Structure: containers & widgets
The essentials in 30 seconds
- Container = the "box" that structures the page and holds elements; widget = the content element (heading, text, image…) placed inside.
- Containers can be nested (a box inside a box) for rich layouts.
- Flexbox containers (recent, flexible, light) replace the old sections/columns system.
Through-line — Nadia structures the home page
Nadia wants a clear home page: a banner, then a row of 3 projects side by side, then a call to action. If she drops everything "loosely," nothing lines up. This section teaches her to think in boxes (containers) that hold elements (widgets) — the foundation of any layout.
Continues case 0.3 — Nadia moves from "where is what" to "how to organize".
1. Containers and widgets
Elementor distinguishes two natures of elements. Containers are boxes that structure and organize the page; they don't "show" anything by themselves, they hold. Widgets are the concrete content elements — heading, text, image, button, icon — placed inside a container. Simple rule: containers structure, widgets display.
Containers can be nested: a "row" container (horizontal) can hold three "column" containers (vertical), each with its widgets. That's how Nadia gets her 3 projects lined up side by side, each with image + title + button.
2. Flexbox vs sections/columns
Historically, Elementor organized pages into sections holding columns. The modern model, Flexbox containers, replaces that system: more flexible (finely adjustable direction, alignment, spacing) and lighter (cleaner code, better for performance).
For a new site like the joiner's, Nadia goes straight to containers. She'll only touch sections/columns if she takes over an old site that still has them.
🔎 Concrete example — Three projects lined up (Nadia's case)
"Row" container (horizontal direction)
├─ "Column" container → image + title + button (Kitchen)
├─ "Column" container → image + title + button (Wardrobe)
└─ "Column" container → image + title + button (Staircase)
→ Result: 3 cards lined up, easy to make responsive.Result: a clear, reusable structure.
Lesson: think in boxes before thinking in content.
Section vocabulary
- Container
- A box that structures the page and holds other elements (widgets or containers).
Simple example: Nadia creates a "row" container to line up 3 projects.
What it is not: seeing it as a visible content element like a heading.
Reflex: the container holds; it has no content of its own.
- Widget
- A concrete content element placed in a container: heading, text, image, button, icon.
Simple example: in each column, Nadia places image + title + button.
What it is not: confusing the widget with the box that holds it.
Reflex: if it displays content, it's a widget.
- Nesting
- Placing a container inside a container for complex layouts.
Simple example: a row holding three columns, each with its widgets.
What it is not: stacking useless containers for no reason.
Reflex: nest only when the layout requires it.
- Flexbox containers
- The modern, flexible and light way to structure Elementor pages.
Simple example: Nadia sets a container's direction, alignment and spacing.
What it is not: manually recreating what Flexbox handles on its own.
Reflex: new site → Flexbox containers by default.
- Sections / columns (old)
- The old system (sections holding columns), replaced by containers.
Simple example: Nadia only meets them on old sites she takes over.
What it is not: starting a new site with sections/columns.
Reflex: old site → maybe sections/columns; new → containers.
In practice — Structuring a page with containers
- Sketch the page as "boxes" on paper: banner, row of 3, call to action.
- In Elementor, create a "row" container and set its direction to horizontal.
- Add 3 "column" containers inside (nesting).
- Drop the chosen widgets into each column (image, title, button).
Ready-to-say script — explain the structure to the client (30 s)
"I build your page like neatly arranged boxes: one box for the banner, one box that lines up your three projects, one box for the contact button. In each box, I place the content — image, text, button. That tidy arrangement is what makes the page clean and mobile-friendly."
The "boxes" image speaks to everyone, even non-technical people.
Copy-paste template — page structure plan
PAGE: _______________
BOX 1 (container): _______________ → widgets: _______________
BOX 2 (container): _______________ → widgets: _______________
└─ nested? columns: _______________
BOX 3 (container): _______________ → widgets: _______________
MODEL: containers (Flexbox), not sections/columns (new site)New site
All in Flexbox containers: flexibility and light code from the start.
Old site taken over
Sections/columns still present: leave them or gradually migrate to containers.
Simple layout
A vertical container stacking widgets is enough: don't over-nest.
Rich layout
Rows holding columns: nest just enough to line things up.
✓ Best practices
- Think "containers (structure)" before "widgets (content)".
- Nest only when the layout requires it.
- Go with Flexbox containers for any new site.
✗ Common pitfalls
- Confusing a container (box) with a widget (content).
- Over-nesting useless containers.
- Starting a new site with sections/columns.
Key takeaways
- Container = box that structures; widget = displayed content.
- Containers nest (row → columns → widgets).
- Flexbox containers replace sections/columns.
- Structure first, content next.
48h challenge — apply tomorrow
Reproduce a row of 3 cards (image + title + button) with a "row" container holding 3 "column" containers. Check that everything lines up. 20 minutes.
- I tell a container (structure) from a widget (content) apart.
- I can nest a row and columns.
- I go with Flexbox containers for a new site.
Frequently asked questions
Should I use sections/columns or containers?
For any new site, containers (Flexbox): more flexible and lighter. Sections/columns are only found on old sites.
How much container nesting is reasonable?
As little as possible to get the layout you want. Too much nesting (boxes in boxes for no reason) complicates maintenance and responsive (see 5.2).
Can a widget hold another widget?
No: widgets hold content, not other elements. To group elements, use a container.
Nadia wants 3 projects side by side, each with image + title + button. Which structure should she choose?