Back to Blog
GuidesWordPress

Titre traduit: How to Easily Navigate Pages in Elementor

10 Mar 2021 5 min read Guides

Share

Alt text traduit: How to easily Navigate pages in elementor

Texte traduit: In this Texte traduit: WPDesignsTexte traduit:  article, we will discuss how to easily navigate pages in Texte traduit: ElementorTexte traduit: .  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.  Texte traduit: ElementorTexte traduit:  provides two easy ways to speed up your work rate and avoid lots of clicks and new page opening through these shortcuts.

Texte traduit: How to Access Navigator & Finder

Texte traduit: The navigator can be accessed in one of three ways:

  • Texte traduit: When you right-click on any element and then choose navigator, the navigator tree panel will appear.
  • Texte traduit: By clicking on the navigator button at the bottom-left toolbar.
  • Texte traduit: You can also access the navigator using a keyboard shortcut.  For Windows: ctrl + i and for Mac: cmd + i.

Texte traduit: Finder can be accessed only by pressing ctrl + e or cmd + e

Navigate Pages in Elementor

Texte traduit: Navigate Pages in Elementor

Texte traduit: 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.

Texte traduit: 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.

Overview of right click in Elementor navigator
Texte traduit: Right click to open a popup menu

Texte traduit: What Happens If You Click?

Texte traduit: LEFT CLICK

Texte traduit: 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.

Texte traduit: RIGHT CLICK

Texte traduit: 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.

Texte traduit: You can use these options to shortcut your actions on the particular element you have selected.

How to hide and show element from Navigator
Texte traduit: You can easily hide unneeded sections using the eye symbol

Texte traduit: Show and Hide Elements with Navigator

Texte traduit: When trying to navigate pages in Texte traduit: ElementorTexte traduit:  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.

Adobe adobe adobe adobe adobe adobe.
Texte traduit: Change the name of navigator elements

Texte traduit: Give Navigator Elements a Custom Name

Texte traduit: 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.

Texte traduit: Expand/ Collapse Navigator Elements

Texte traduit: 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.

Texte traduit: 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.

Texte traduit: The opposite works for closing the selections.

Adobe adobe adobe adobe adobe adobe.
Texte traduit: Click the arrow to expand/ collapse the particular section
Top Arrow Collapse
Texte traduit: Click the top arrow to expand/ collapse all the sections

Texte traduit: Switch Pages in Elementor Using Finder

Texte traduit: 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 Texte traduit: DashboardTexte traduit: , opening up Texte traduit: Pages,Texte traduit:  and then Texte traduit: Edit with ElementorTexte traduit: .

Elementor Finder Bar Dark
Texte traduit: Type in what you need

Texte traduit: 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.

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

Texte traduit: After typing in the thing you are looking for, Texte traduit: ElementorTexte traduit:  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.

Texte traduit: 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.

We Respect Your Privacy

We use cookies to improve your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies. Cookie Policy

Powered by WPDConsent