What Is the Elementor Navigator and What's It For?
How the Navigator Works
Opened via the small icon at the bottom of the editor (or a keyboard shortcut), the Navigator mirrors the page's actual nesting structure as a collapsible tree, with each row representing one container, section, column, or widget. Clicking a row selects that element on the canvas and opens its settings panel, exactly as clicking it directly would, but without needing to locate and click the actual element visually first.
What It's Most Useful For
- Selecting elements that are difficult to click directly, such as an empty container, an element hidden behind another, or one with zero height/width currently.
- Reordering elements by dragging rows within the tree, often more precise than dragging on the visual canvas for a complex nested structure.
- Renaming elements to something more descriptive than the generic default, making a complex page's structure easier to navigate later.
- Temporarily hiding an element during editing without deleting it, using the visibility toggle available on each row.
- Understanding an unfamiliar page's structure quickly, especially useful when inheriting someone else's Elementor build.
Using the Navigator Effectively
- Open the Navigator from its icon in the editor's bottom toolbar.
- Rename key elements as you build, making later navigation and handoffs easier.
- Use it to select and reorder elements that are awkward to work with directly on canvas.
Need help navigating or restructuring a complex existing build? See Elementor customization.