Sections, Columns & Widgets Explained (Building Blocks of a Page)
Elementor gives you the flexibility to design pages using building blocks. Traditionally, pages were built with Sections → Columns → Widgets, but with the latest versions, Elementor has introduced Flexbox Containers — a more modern, lightweight, and flexible way to structure layouts.
Let’s break both approaches down so you understand how they work.
Option 1: Classic Structure (Sections, Columns & Widgets)
Sections (the outer wrapper)
- Large horizontal blocks that form the main structure of your page.
- Control the background (colour, image, video), width (boxed or full width), and spacing.
- Example: A hero banner section at the top of your page.
Columns (dividing sections)
- Each section can be split into one or more vertical columns.
- Columns allow you to place content side by side (e.g., an image on the left, text on the right).
Widgets (your content)
- The smallest building block — the actual content elements (headings, text, images, buttons, forms, etc.).
- Drag from the sidebar into a column.
👉 Hierarchy: Section → Column → Widget.
This system is simple, but limited when creating complex, flexible layouts.
Option 2: Modern Structure (Flexbox Containers)
What are Containers?
Containers replace sections & columns by using flexbox technology (the same system modern websites use for layout).
Instead of being forced into rigid rows and columns, containers let you nest layouts more freely.
Key Benefits:
- Lighter, faster code → improves performance.
- Flexible layouts → you can align, space, and order items however you want.
- Nested containers → add containers inside containers for more complex designs.
How they work:
- Add a Container → this is your main wrapper.
- Inside it, add child containers (instead of columns).
- Place widgets inside containers.
👉 Hierarchy: Container → Container (nested if needed) → Widget.
Example:
- One parent container holds two child containers.
- Left child: Image widget.
- Right child: Heading + Text + Button widgets.
- Flexbox lets you control alignment (e.g., centre vertically, space evenly, reverse order on mobile).
Which Should You Use?
- New projects: Containers are recommended — they’re faster, more flexible, and the future of Elementor.
- Existing sites: If your site was built with Sections & Columns, you can keep using them. Elementor supports both systems.
Quick Recap
- Old method: Section → Column → Widget (simple but less flexible).
- New method: Container → (nested) Container → Widget (modern, faster, more powerful).
- Both systems let you drag and drop widgets into place.
- Containers give you full control over spacing, alignment, and responsive layouts.
Next Tutorial
Now that you know the difference between Sections, Columns, and Containers, the next step is Adding Content in Elementor — where we’ll start placing headings, text, images, and buttons into your layout.