What is the Navigator in Elementor

Effective design with Elementor: step-by-step guide to using the Navigator

In the Elementor version 2.2, an extremely useful design function "Navigator", which is specially designed to make the design of your pages even more effective.

The Elementor Navigator is much more than just a navigation tree window - it's your key to a seamless and efficient editing experience. With a single click, you get direct access to every element in your editor, taking the navigation and editing of your page to a new level. Using this feature allows users to drag and edit elements across the page not only quickly, but also in an extremely straightforward way.

Whether you are creating complex designs with multiple layers or combining elements with different style properties, the Elementor Navigator simplifies the process considerably. By using the function Elementor Navigator makes handling Z-index, minus margin, absolute positioning and similar features an effortless task. This means you always have full control over even the most complex design elements.

How do I access the Elementor Navigator?

You can access the Navigator in three simple ways:

1. Right-click on any element and then select "Navigator". This will automatically take you to the corresponding element in the navigation tree.
2. Click on the "Elements" button in the footer of the panel.
3. Use the key combination Cmd/Ctrl + I.

Select an element for editing

A simple click on any element takes you directly to the editing window.

Rearranging elements with the Elementor Navigator

Drag an element up or down and place it in front of or behind another element.

Right-click options

Right-click on an element to access all the normal context menu options, such as Edit, Duplicate, Copy, Paste, etc.

Show/hide elements with the Navigator

By clicking on the "View" button of the element, you can show or hide it to better focus on the design. Please note that this has no effect on the frontend of your website.

Elementor Navigator name elements

By double-clicking on the element name, the area will be highlighted in blue, indicating that you are in insert/edit mode. Enter a user-defined name to make it easier to identify the element later.

Reduce/expand an element with the Navigator

Click on the arrow button of an individual element to expand or collapse it.

Show/hide all elements

Click on the button with the up or down arrow at the top left of the navigator window to expand or collapse all elements simultaneously.

Position navigator panel

Float (float): Drag the Navigator control panel to any position on the page.

Dock: Attach the Navigator control panel to the side of the screen by placing it within the vertical blue storage zone. This appears when the control panel is dragged close to the right-hand side of the screen.

Now you have learned how to use the Elementor Navigator effectively to optimize the design of your pages and eliminate clutter.

Discover the limitless possibilities offered by Elementor and WordPress. If you have any questions or need support we are here to help you!