Sections, columns & widgets explained
Understand the three building blocks of every Elementor page — sections, columns, and widgets — and how they fit together.
Every page built with Elementor is made up of three types of building blocks: sections, columns, and widgets. Understanding what each one does makes editing much easier.
Quick summary
Sections are the full-width rows that divide your page top-to-bottom. Columns sit inside sections and divide the content left-to-right. Widgets are the actual content pieces — text, images, buttons, etc. — that live inside columns.
Legacy structure vs. Containers
Older Elementor sites use the Sections → Columns → Widgets structure described here. Newer sites may use Containers instead, which are more flexible. Your site uses one or the other — not both. See Containers explained if you see "Container" labels in your editor.
Sections
A section is a full-width horizontal row on your page. Every page is built from a stack of sections from top to bottom.
Examples of sections on a typical page:
- The hero banner at the top
- A "What we do" row in the middle
- A contact form section near the bottom
- The area just above the footer
When you hover over a section in the Elementor editor, you will see a blue border appear around the whole row. A small grey handle appears at the top with icons for editing, moving, and deleting.
Section settings
Click the grey handle to open the section settings in the left panel. Here you can:
- Change the background (color, image, or video)
- Set the section width (boxed or full-width)
- Adjust the spacing and padding
Columns
Inside each section, you can have one or more columns. Columns divide the section's width into side-by-side areas.
A section with two columns might show text on the left and an image on the right. A section with three columns might show three team member cards side by side.
When you hover over a column, its blue border lights up separately from the section border.
Column widths
Columns can be any width — you drag the handle between columns to resize them. A common layout is 50/50 (two equal columns) or 33/33/33 (three equal columns), but any ratio works.
Widgets
Widgets are the actual content pieces — the things you see on the page. Every heading, image, button, and paragraph is a widget.
Common widgets include:
| Widget | What it does |
|---|---|
| Heading | Displays a title or subheading |
| Text Editor | Shows a block of body text |
| Image | Shows a single image |
| Button | A clickable button |
| Video | Embeds a YouTube or Vimeo video |
| Icon | Shows a small icon |
| Spacer | Adds blank vertical space |
| Divider | Draws a horizontal line |
| Image Box | An image with a title and text beneath |
| Icon Box | An icon with a title and text beneath |
See The most useful Elementor widgets for a fuller guide.
Adding a widget
To add a widget, drag it from the left panel onto a column on the canvas. Or click a small + icon that appears inside an empty column.
Editing a widget
Click any widget on the canvas. The left panel immediately switches to show that widget's Content, Style, and Advanced settings.
How they nest together
The structure always follows this order:
- Section — the full row
- Column — a vertical slice inside the section
- Widget — the actual content inside the column
You cannot place a widget directly in a section without a column (in the legacy structure). You cannot place a section inside a column.
A helpful mental model
Think of sections as rows of shelves on a wall. Columns are the individual compartments within each shelf. Widgets are the objects you place on each compartment.
Common questions
Related guides
- Containers (the modern layout) explained
- How to add a new section
- Working with columns
- The most useful Elementor widgets
- A tour of the Elementor interface
Need a hand?
Learn more
A tour of the Elementor interface
Learn what every part of the Elementor editor does — the panel, the canvas, the top bar, and the right-click menu.
Containers (the modern layout) explained
Understand Elementor's Flexbox Container system — the modern replacement for sections and columns on newer sites.