How to add a new section in Elementor
Learn how to add a new content section (or container) to any page in Elementor, choose a column layout, and fill it with widgets.
Adding a new section lets you insert a new content area anywhere on your page. This is how you add a new row, whether for a new service, a testimonial block, or a call-to-action banner.
Sections and columns (legacy)
Add one
Click the + icon on the canvas and choose a column structure.
Nest one
Drag an Inner Section widget into a column.
Steps
Containers (modern)
Add one
Hover over a container and click the plus sign in its tab, then choose Flexbox or Grid.
Nest one
Drag a Container into your new container, and set Direction to Row for side by side.
Steps
What you'll need
- The Elementor editor open
How to add a new section (legacy structure)
Use these steps if your site still uses sections and columns.
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.
Click the + icon on the canvas. It sits beside the folder icon, which opens the template library instead.
Choose a column structure. For example, pick a two-column layout if you want text on the left and an image on the right.
The new section is added to the page with empty columns, and the left panel switches to the section's settings.
Drag widgets from the left panel into the empty columns to fill the section with content. If the panel is showing settings, click the + (Add Element) icon in the top bar to see the widget list.
Move the section into place if it isn't where you want it on the page. See Moving a section below.
Style and configure the section as needed, then click Update or Publish.
How to add a new container (modern structure)
If your site uses Containers rather than Sections, the process is slightly different.
Hover over the container you want the new one to sit above. A tab appears above it.
Click the plus sign in the tab. Space for a new container opens above the existing one.
Click the plus sign in that space and choose Flexbox (or Grid, for an even layout of rows and columns). A choice of layouts appears.
Pick a layout. Some layouts create several containers inside the new one.
Drag widgets into the new container from the left panel.
To add inner containers (for side-by-side columns), drag a Container from the left panel into your new container, or right-click it and choose Add New Container. To place them side by side, set the outer container's Direction to Row in its Layout tab.
Adding a section at the top or bottom of the page
You can also add sections at the very top or bottom of the page:
- At the bottom: Make sure nothing on the canvas is selected, open the widget list (the + icon in the top bar), and click a widget. Elementor adds it in a new section (or container) at the bottom of the page.
- At the top: On a site that uses containers, hover over the first container and click the plus sign in its tab. On a site that uses sections, add the section, then drag it to the top.
Moving a section
To move a new section (or any existing section) to a different position:
Hover over the section you want to move until its handle (the blue tab at the top) appears.
Click and hold the handle.
Drag the section up or down to its new position. Release when the blue line shows where it will land.
On a long page, it can be easier to drag the section in the Structure window instead, so you don't have to drag far up or down the canvas. Open it from the Structure icon in the top bar, or press Ctrl+I (Cmd+I on a Mac).
If something looks wrong after a move
Undo straight away with Ctrl+Z / Cmd+Z and try again, or use the revision history to go back to an earlier save.
Filling a section with content
After adding a new section, add widgets by:
- Scrolling so the empty column (or container) is visible on the canvas
- Opening the widget list in the left panel (click the + icon in the top bar if the panel is showing settings)
- Dragging the widget into the empty area, or clicking the empty area first and then clicking the widget in the panel
See The most useful Elementor widgets for guidance on which widget to use.
Common questions
I can't see a + button to add a new section, where is it?
Look on the canvas for the + icon, beside the folder icon that opens the template library. Or, with nothing selected on the canvas, click a widget in the left panel: Elementor adds it in a new section (or container) at the bottom of the page. On a site that uses containers, you can also hover over any container: the tab that appears above it has its own plus sign. If a section's handle is hidden behind other elements, open the Structure window (Ctrl+I or Cmd+I) to reach it.
How do I add a section inside a column (nested section)?
In the widget list, search for "Inner Section" and drag it into a column. This creates a section nested inside your column, which lets you build grid-within-grid layouts. You can't place an Inner Section inside another Inner Section.
Elementor now labels this widget "Legacy", and it isn't available on sites that use containers. On those sites, drag a Container inside another container instead.
Can I copy a section from another page?
Yes. Right-click the section's handle and choose Save as Template. Then, on the other page, open the template library (the folder icon on the canvas), find the section among your saved templates, and click Insert. See Saving & reusing your own templates.
How do I change the number of columns after adding a section?
Right-click a column's handle. Choose Duplicate to add another column, or Delete to remove one. To change how wide a column is, open its settings (right-click its handle, then Edit Column) and set Column Width (%) on its Layout tab.
Related guides
Learn more
Was this page helpful?
Go deeper on chykalophia.com
- Website careThe Boring StuffOur care plan: updates, backups, security and speed, looked after for you.
- Our approachWebsite optimizationTesting, performance work and analytics hygiene that keep your site earning.
- Our approachWeb developmentBuilds with the monitoring, testing and handoff your team will want.
Need a hand?
Stuck? We'll help.
Email us with your website address and a screenshot if you can, and we’ll take it from there.
Last updated