In this WPDesigns article, we will discuss how to easily navigate pages in Elementor. Whether you are wanting to move quickly between two different pages or move quickly down one long page, we will show you how to do that. Elementor provides two easy ways to speed up your work rate and avoid lots of clicks and new page opening through these shortcuts.
How to Access Navigator & Finder
The navigator can be accessed in one of three ways:
- When you right-click on any element and then choose navigator, the navigator tree panel will appear.
- By clicking on the navigator button at the bottom-left toolbar.
- You can also access the navigator using a keyboard shortcut. For Windows: ctrl + i and for Mac: cmd + i.
Finder can be accessed only by pressing ctrl + e or cmd + e
Navigate Pages in Elementor
The Navigator panel is a navigation tree that allows you to quickly move through all of the elements on a page/ post or template. It also allows the user to quickly and easily drag and drop items around the screen then edit them without having to scroll long distances to the exact location on screen.
Long pages or pages with complicated multi-layered formats, as well as elements combining Z-Index, negative margin, position absolute, and other features, benefit greatly from Navigator. You will have complete control over the whole editing process for it.
What Happens If You Click?
LEFT CLICK
If you left-click on an element you will either open it up by clicking the arrow, if it is a column or section or you will be taken down the page to the location of that particular element.
RIGHT CLICK
When you right-click on a navigator feature, a popup menu appears with options such as Edit Column, Duplicate, Add New Column, Copy, Paste, Paste Style, Reset Style and Delete.
You can use these options to shortcut your actions on the particular element you have selected.
Show and Hide Elements with Navigator
When trying to navigate pages in Elementor and work your way around them, it is easy to show and hide the elements you would like by clicking on the eye symbol; this is useful if you need to remove something temporarily and not actually make the changes on the front end. You can use this to help get a better focus on the design without navigating around extra layers – perhaps a layer that is only visible on mobile and not needed on desktop. This can be especially good when sorting out desktop and mobile-specific headers and footers, as layers will often overlap and get in the way.
Give Navigator Elements a Custom Name
To make finding specific elements easier, Elementor now has a feature that allows you to assign a custom name quickly. That way, you’ll be able to quickly identify an element in the list without having to click on the wrong one first. To edit the name, double-click on the element name and you can change the name.
Expand/ Collapse Navigator Elements
To expand the navigator sections and columns, you can click the arrow, and it will drop down so you can see all the elements in the section.
If you click the arrow at the top, it will open them all; if you click the arrow on the section, it will open that particular selection.
The opposite works for closing the selections.
Switch Pages in Elementor Using Finder
Finder allows you to navigate between pages, posts, and templates without having to exit the Elementor page you are currently on. This is very useful and saves a lot of time rather than exiting; going to the Dashboard, opening up Pages, and then Edit with Elementor.
Finder is accessible using ctrl + e on a Windows PC and using cmd + e on a Mac. Doing this will bring up a small box in which you can type the name of the page, post, template, or anything else you need.
After typing in the thing you are looking for, Elementor will search and bring up everything related to the term. You can then click on the item, and it will open it in editor mode. If you wish to stay on your current page, you can right-click and open the other page in a new window.
When you have a larger site with lots of posts and pages, Finder can have issues finding the relevant page as it will bring up everything related and not just the page you need.
