Sections, columns & widgets explained

Understand sections, columns, and widgets, the building blocks of Elementor's older (legacy) page layout, and how they fit together.

Pages built with Elementor's older layout system are made up of three types of building blocks: sections, columns, and widgets. Newer pages use containers in place of sections and columns. Understanding what each one does makes editing much easier.

Quick summary

Sections are the horizontal 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

The Sections → Columns → Widgets structure described here is Elementor's older (legacy) layout. Containers are now Elementor's default layout element: on a site with containers turned on, every new layout element you add is a container. Older pages often still use sections, and a single page can contain both. See Containers explained if you see "Container" labels in your editor.

Sections

A section is a horizontal row on your page. In this layout, a 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, its handle appears: a blue tab at the top of the section. You can use the handle to open the section's settings, drag the handle to move the section, or click its X icon to delete the section.

Section settings

Click the section's handle to open the section settings in the left panel. Here you can:

Change the background (color, image, or video)
Set the content 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, it shows its own handle, separate from the section's handle.

Column widths

You set a column's width in its settings: click the column's handle, and on the Layout tab change Column Width (%). A common layout is 50/50 (two equal columns) or 33/33/33 (three equal columns), but you can set other ratios too.

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
Icon Box	An icon with a title and text

See The most useful Elementor widgets for a fuller guide.

To open the list of widgets, click Add Element (the + icon) in the top bar. Then drag a widget from the panel onto a column on the canvas. Or select a spot on the canvas first, then click the widget in the panel.

Click any widget on the canvas. The left panel switches to show that widget's settings in three tabs: Content, Style, and Advanced. (Elementor's newer V4 elements have two tabs instead: General and Style.)

How they nest together

A section is one horizontal row of the page. Its columns divide that row left to right, and the widgets inside them are the pieces that hold the content you actually see.

Read this as text

An Elementor page is a stack of horizontal rows called sections, one above the next. Drawn here is a single section — the hero banner at the top, say, or the contact area near the bottom.

Inside that section sit two columns, side by side, dividing the row from left to right: text on the left, an image on the right. The left column holds a Heading widget with a Text Editor widget beneath it. The right column holds a single Image widget.

The widgets are the pieces that hold the content you see on the page. The section and the columns drawn around them hold and arrange other elements instead. That is why, in the legacy structure, a widget cannot sit directly in a section without a column: every widget sits inside a column, and every column inside a section.

The structure always follows this order:

Section — the full row
Column — a vertical slice inside the section
Widget — the actual content inside the column

In the legacy structure, a widget always sits inside a column, not directly in a section. To put a section inside a column, use the Inner Section widget (see below).

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

How do I tell sections, columns, and widgets apart in the editor?

Right-click the element's handle. The first item on the menu names it: Edit Section, Edit Column, or Edit followed by the widget's name (for example, Edit Heading). The Structure window (Ctrl+I / Cmd+I) also shows every element on the page in a tree.

Can I have a section with no columns?

In the legacy structure, no. A section holds its content in columns. When you add a new section, Elementor asks you to choose a column structure first.

What is the difference between inner sections and regular sections?

An inner section is a section nested inside a column, added with the Inner Section widget (now labeled Legacy). This lets you create grid-within-grid layouts. A new inner section starts with two columns, and you can't put an inner section inside another inner section. On sites that use containers, the Inner Section widget isn't available: you nest one container inside another instead.

My site shows 'Container' instead of 'Section' — why?

Your site uses containers, which are now Elementor's default layout element. There are two kinds, Flexbox containers and Grid containers. Containers replace sections, columns, and inner sections, although older sections can still sit on the same page. See Containers explained for details.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.