Elementor: How to Move Sections

Moving sections is rarely just cosmetic; it usually has a clear purpose behind it. The most common reason is improving conversions by placing key elements where people actually see them. Pulling a call-to-action above the fold, for example, means visitors act on it before they scroll away. Layout changes are another trigger: when you redesign part of a page, a section often ends up in the wrong order and needs shifting back into place.

There are several other practical reasons to move sections around:

• Reordering for mobile: a layout that reads well on desktop can feel jumbled on phones, so you may want a different stacking order.
• A/B testing: trying two different layouts to see which one performs better with real visitors.
• Grouping related content: moving related sections next to each other so the page tells a clearer story and flows logically from top to bottom.

The Navigator gives you the most precise control over moving sections, especially on complex pages where click-dragging on the canvas can be fiddly. It shows a tree of every element on the page, from sections and containers down to individual widgets, so you can see the full structure at a glance.

You can open the Navigator in three ways:

• Click the Navigator button in the footer of the editing panel.
• Press Cmd+I on Mac, or Ctrl+I on Windows.
• Right-click any element and choose Navigator from the menu.

Once it’s open, find the section you want to move in the tree, then click and drag it up or down to its new position. Because you are working with the structured list rather than the live canvas, it’s easy to drop the section in exactly the right spot without nudging anything else by accident. This method works identically for Containers, so you can reorder modern Flexbox and Grid layouts the same way.

The fastest way to move a section directly on the canvas is by its handle. The handle is the small dotted or labeled tab that sits at the top-center of each section or container when you hover over it or select it. Click and hold that handle, then drag the section toward its new position.

As you drag, Elementor shows a blue insertion line that marks exactly where the section will land when you release the mouse. Once the blue line sits where you want the section to go, let go and the section drops into place.

A quick tip: if the section is very large, the blue line can be hard to see because you may need to scroll while dragging. In that case, zoom out in your browser first, or switch to the Navigator method, which avoids the problem entirely. The same handle approach works for Containers too, so you can drag modern containers around the canvas exactly as you would a classic section.