Introducing Navigator: Manage Your Entire Layout From One Place

Navigator is here! Get an overview of your entire page from one place and easily switch between sections, columns, and widgets.

Elementor has become the standard for WordPress visual design. While this managed to remove a lot of the guesswork for designers, it presented new challenges when dealing with long-form pages and posts.

The longer the content – the more challenging it is to navigate through the different sections, move elements around, and grasp the entire page design.

This is why we developed a new UI feature, aimed to solve this exact challenge.

What is Navigator?

Navigator is a navigation tree window that provides easy access to every element in the editor. It enables the user to drag elements throughout the page and edit them, quickly and easily.

Navigator is particularly useful for long pages or pages with complex multi-layered designs, as well as for elements combining Z-Index, negative margin, position absolute, etc. It enables you to gain full control over the entire editing process.

Here are some of the advantages of Navigator:

Manage Your Entire Layout From One Place

Navigator displays a condensed view of your entire page. All sections, columns, and widgets are seen in one panel, giving you much better control over the layout of the page. 

Grab any section, column or widget and move it around, changing the order of elements as you like. Navigator offers the most value when dealing with long pages, composed of 10 or more different sections.

You can choose to hide elements from the editing screen. This will only affect the editing display, giving you more focus when you design. The elements you hide from the editing screen will still be visible when you preview the page.

Custom Name for Every Element

When dealing with a long page, it sometimes gets confusing to differentiate between the different elements in the Navigator.

This is why we added the option to easily customize each element name. Just double-click on any Navigator item to give it a custom name. This way, you can quickly identify and edit each element. 

The right-click options are also functional for the elements appearing in the Navigator, so you can copy, paste or delete elements from the same panel.

Put It Anywhere You Like

You can drag the Navigator anywhere on the page, change its height and width, or pin it to the side of the screen. 

Your Navigator preferences are always saved on your browser. You can exit the page, open a new page, the Navigator panel will remain in the same position, so you can continue just where you left off.

How It Works

You have three simple options to open the Navigator window:

  1. Right-click any element and then click on Navigator. This automatically redirects you to the specific element in the navigation tree.
  2. Click on the layers icon in the footer of the panel.
  3. Use the keyboard shortcut Cmd/Ctrl + I.

#elementor Navigator: View and Edit the Entire Page Layout in One Place

Other New Features

Autocomplete URL for Internal Linking

Play Video

From now on, all Elementor widgets include autocomplete URL links, letting you add internal links to all URL fields in the panel in the simplest way possible.

Once you start typing in the URL field, the system searches for the text throughout all pages, posts, and media files in your WordPress. Then all that’s left to do is choose the relevant links from the search results.

This feature is actually one of the oldest feature requests, going on already for 2 years, would you believe it? We are happy to finally release it and thank everyone who kept pushing for this feature.

Show Editing Handles

Play Video

In the previous version, we changed the way elements are edited. We replaced the old edit buttons with a right-click to provide more advanced editing capabilities — including adding access to copy/paste and direct access to the navigator.

Shortly after the release, we received several requests to restore the previous edit buttons. Therefore, in this version, we provide the option to show them beside the right click.

This means that if you want to work with both methods, you can set the display of these buttons under Settings > Advanced > Editing Handles > Enable.

Debug Bar: Your "Theme Building Detective"

In this version, we added the ability to better debug the pages you load. The Debugger helps you understand why a particular template or theme file is loading, or whether they conflict with each other.

Enabling the Debugger is helpful for users in the process of building their site using Elementor’s Theme Builder

Often, a page is composed of different parts: header, footer, single and other templates. Using Debugger, you will better understand the hierarchy of files and locations that generate the page. 

How to activate the Debugger

The Debugger is located in the admin bar throughout your WordPress site.

If you are working in a development environment with the setting:

define( 'WP_DEBUG', true ); in wp-config.php` then the Debugger will automatically be activated.

To manually activate the Debugger, go to the settings area of Elementor, and under Tools > Debug Bar, set it to Enable.

Columns Widget Now Renamed Inner Section

In this version, we renamed the ‘Columns’ widget to the ‘Inner-Section’ widget.

We have made the change because, after a continuous period of user-research, we found a disturbing common mistake made by users across all levels. When users needed to add a column to an existing section, instead of just right-clicking, users mistakenly dragged in a Columns widget.

This mistake adds unnecessary markup code to the page and may cause various unexpected behaviors.

We hope the name change clarifies what the widget is meant to do, which is to add an inner section to a current section, in order to build more advanced layouts.

See It in Action

Conclusion

The new version is a great testament to our continuous efforts to improve Elementor’s UI and designer workflow, and our dedication to providing you with the best possible design experience.

I encourage you to take this version for a spin and see how it impacts your workflow and ability to design faster.

I’d love to know what you think about this release in the comments below.

Liked This Article?

We have a lot more where that came from! Join 617,967 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

79 Responses

      1. When it is hidden, is it just css hidden or is it removed from the loop entirely so it doesn’t add to the page load process on the front end?

  1. I can’t wait to read the post of the end of year showing all the timeline updates haha. You guys rocks!

    PS: Popups before Christmas would be my dream haha 🙂

    1. PopBox for Elementor is free in the meantime. It makes a new custom post type that you can edit normally or edit as an Elementor design, and then back on the page you want it to reveal on, you can drag a new Elementor widget that the plugin supplies to either have it load after a certain amount of time, or come up after someone clicks a trigger button.

      I am not affiliated with it in any way, I just stayed away from it thinking it might be complicated and wanting some built-in mechanism and, well, I missed out. It is reaaally easy to set up, and since you can do Elementor designs on the custom post, the content of the pop-up will be responsive as well!

  2. I’ve used the hide on desktop/tablet/mobile feature for this (which you probably have, too). In addition, I would like to make some sections ‘time sensitive’ so you can schedule a start/stop date for certain sections (special deals, new content, etc.)

    1. You are referring to a different hide. Hide Desktop / tablet / mobile hides elements from the live site. The hide in the Navigator only affects the editing area and not the live site.

    2. You can use “Timed Content” plugin then call your “Sensitive Template Library” using shortcode element just something like this[timed-content-server show=”2018-09-01 00:00:00 +0700″ hide=”2018-09-30 00:00:00 +0700″][elementor-template id="xxx"][/timed-content-server]

  3. great….does this version finally address the lacking sticky header transition options? Say you want a transparent header with white font but when scrolling down you want a white background and black font? Currently there isnt any font options at all for that so …Probably Not.

    1. For the time being, we just use the custom CSS area for the header section to address those styles with the class that gets added when it’s sticky.

        1. The class might depend on your exact version, and the styles would depend on what changes you’d make. After the last one I did they changed how the code operates so that may have shifted. We did things like change the background transparency.

  4. Navigator is a huge, time-saving addition! I always hated hunting and pecking to get at stuff. Nice work, and the other updates are great too! You. Guys. Rock.

  5. This is dumb. What is the purpose? You’re trying to add an inferior text based editor just to save some scroll time?

    1. I mean, you don’t -have- to use it. But the crux of what you’re asking is basically the first thing that gets addressed in the post: it’s going to have more value if you have a more elaborate design. Scrolls and searches and clicks add up when you have to do them a hundred times.

      Think of it like building something complex in Photoshop, except you don’t get to use layers. –That– is dumb.

  6. So happy you included this. It was the first thought I had when I first read about the navigator when it was in beta:

    “This is why we added the option to easily customize each element name. Just double-click on any Navigator item to give it a custom name. This way, you can quickly identify and edit each element.”

  7. This is brilliant. It’s similar to one of the few features I love on Shopify homepage editor and is going to save a heap of scrolling once I get used to it.

  8. hello
    I am an inspiring Elementor user with the Pro version. However, I have the feeling that the paying customers are a little neglected with new features.

    Extend per element with new functions, e.g.
    – IMPORTANT: Role manager with finer rights
    – at Image FocusPoint Brizy,
    – more possibilities at galleries,
    – Logic for forms,
    – Universal CSS for H+-H6, etc.
    – more integration of third parties
    – edit other pages or posts or even create new ones from within the elementor.

    1. Just in point of fact, if the page-wide CSS doesn’t float your boat, add that stuff to the theme CSS file and hit the option in Elementor settings to ignore the defaults for fonts. I just added new sections to a big clunky ThemeForest theme that happened to have really cool fonts in it for a friend of mine, and it makes things blend into the existing design perfectly. We’ve been getting pretty dang major updates every, what, three or four weeks since February for 49 bucks. Neglect isn’t the word I’d use.

  9. Ben, you and your team rock! This is great stuff. I build a lot of sites I would otherwise have to write custom html/php/css templates to achieve results within Elementor that I cannot produce because the editor controls are mixed within the DOM, i.e. things like absolute positions, pseudo selectors etc.

    Now I can access the controls again where otherwise these customizations used to break the editor interface…right-click + navigator = awesomeness!

    (I use body:not(.elementor-editor-active) way too much!)

    Next up, add the ability to detach to left editor control pane and have full control over the viewport window…with it docked, one doesn’t ever really get a true front end desktop view without toggling preview mode (which I have my fingers on the shortcut CMD+P toggling ALL the time).

    Another cool thing to have would be to see the keyboard shortcuts within the editor instead of having to refer to the Elementor website every time. I have most in my memory banks but I am sure this list will continue to grow and it’d be nice to have a button to open a modal pop-up “help” window.

    1. Hi Philip,
      Your suggestions are always welcomed, and have influenced us a lot – so thanks for everything you’ve done.
      Shortcuts suggestions – we have plans to add this already
      Detach – good idea, will pass this along

  10. Can’t wait to try this, it looks exciting. Typing an internal URL was a pain and seemed old fashioned, I’m glad I won’t have to do that again, hopefully it is as versatile as the default WP editor’s link search, if not better (by better I mean inculde media on search results)

    Well done Elementor team. ??

  11. These are great new features!

    Any chance the widget toolbox will get the option to float on the page the way Navigator does? Or just be able to collapse the toolbox like the current preview but still be able to edit?

    Also, will we see dynamic images for sections in the Navigator so we can see the section and not have to rename them to know what they are?

  12. YEEESSSSSSS!!! Luckily the feature, that made me think about OXYGENE – now available in ELEMENTOR!!! Great! Thanks guys!!

    Just a thought for an upcoming update: would it be possible to stay in the actual attribute panel while i’m select another section in the frontend editor? It would be easier to check the same properties on different elements…

    and how did you create that “floating” navigation menu here on this site? I mean that “shrinking” effect? Would be glad to know that!

  13. Great work Ben. The columns widget has always been confusing so I’m glad you renamed it. Too bad Elementor doesn’t fork WordPress and ditch Gutenberg and offer an Elementor version of WordPress.

  14. Yea! All great stuff!
    Super happy to finally see Taxonomies in the Post-Nav widget!!
    (Only request for it now would be an option to tell it to loop from ‘end to first’ post.. but can’t over complain with it now.) THX!!!

  15. Love all the new updates.. Navigator has already been super useful! I had made that column mistake many times, so it is good that its fixed. I think I found a bug though. When you make an inner section sticky, you can’t make it stay within its container element/ column. It’s important for me be I dont want one element to be sticky, I want all the elements in it to be sticky until I leave that section. Anyone have a workaround? I know there is a line in the HTML that is “Sticky-parent” for regular sticky elements but I don’t know if there is any way through CSS.

    Any thoughts?

  16. Great stuff, fantastic progress this year. Now on the subject of confusingly-named items – when are Elementor “Widgets” going to be renamed ummmm…Elements?

  17. Awesome! I’ve got a few sections where no part of it is clickable, so the navigator will save a lot of time using my workaround!

    Now my feature request 😉 – would love to see Single page templates be able to be recursively applied to children in the Display Conditions.

  18. ABSOLUTELY FANTASTIC!!! LOVE IT One comment though. On Mac / Safari (re)naming sections in navigator does not work. I disabled all plugins and still no. Chrome works fine. Something for you guys to check . Thx

  19. Very helpful! In fact, I had just written to support (which is very responsive, BTW) asking how to better pinpoint a particular element in a complex layout, and it was great to get back the answer that 2.2 would resolve this. But now can you make a way to pinpoint an aspect of design/styling within a complex widget? Such as, in a CTA or flip box widget, sometimes there are several places to make a border, or place an image, or change margins, etc.and it’s not always easy to see where it is in order to edit it. Thanks!!!

  20. Hello I am novice even pre novice if there is such a thing. But I have to say in the small amount of experience I do have building sites elementor is by far the best resource out there. So a big thanks your hard work is appreciated.

  21. With this update you’ve earned a five-star plugin review (my first review was only three stars). Elementor has grown so much this year. I’m pretty sure global styling is not too far away…

    Unfortunately, it seems I’ve fallen out of the e-mail loop. I no longer receive the e-mail notifications on updates so apparently I’ve missed out for a few weeks. I guess I’d better resubscribe.

  22. Very nice! Stylistically, if you could just make the “empty” elements nudge in a little more to the right when the parent node is expanded, that might look a little better.

  23. Hi – I downloaded the free plugins for wordpress to see how they worked then deactivated them so I could create a page with fusion builder again but fusion builder was not restored – how can I URGENTLY get this fixed?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 617,967 Elementors, and get a weekly roundup of our best skill-enhancing content.