How to Easily Navigate Pages in Elementor - WPDesigns

How to Easily Navigate Pages in Elementor

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
How to easily Navigate pages in elementor

This article may contain affiliate links, if you use one there is no extra charge to you but the company may recognise my contribution and give a bonus.

Elementor Logo

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.

Table of Contents

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.

Overview Of Right Click In Elementor Navigator
Right click to open a popup menu
How To Hide And Show Element From Navigator
You can easily hide unneeded sections using the eye symbol

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.

Rename Navigator
Change the name of navigator elements

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.

Section Arrow Collapse
Click the arrow to expand/ collapse the particular section
Top Arrow Collapse
Click the top arrow to expand/ collapse all the sections

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.

Elementor Finder Bar Dark
Type in what you need

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.

Elementor Finder Options Dark
Search for the page/ post or template you need

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.