Suggestion - Advanced - Navigator Panel

[pingram3541]

This addresses many issues reported regarding the fact that editor controls are inline with the actual preview content DOM and often there are themes, plugins, or just plain desired website designs that will break edit-ability.

Furthermore, it addresses the current drag and drop experience outside of those examples where the default behavior leaves more to be desired. I've had frustrations as recent as today just trying to drag an image widget from one column to the next.

Here is a screenshot of how webflow provides a tree like navigator that lets you move elements up/down/in/out while also being able to change the css class assigned to that element completely outside the preview.

[WPDevHQ]

This suggestion/enhancement gets my vote. +1

[dasigna]

second vote +1 from my side.
but it seems to me , that this should possibly going hand in hand with some highlighting of current choosen element (would sometimes be great anyway - maybe ability to toggle on or off ?)

[pingram3541]

@dasigna Yes, that is a great suggestion. If I understand correctly, what you propose is while one hovers over or has selected, a section, column, or widget in the navigator panel, the preview area highlights that particular item for easy identification of the desired element to adjust?

Maybe even a scrollTop function if that element is not in the view port?

Great enhancements but I fear asking too much might put this on the back burner when we really need this asap because the drag and drop troubles are really time consuming to deal with. I really hope they like this one even though I know they are trying to keep it from having too many overwhelming controls. IMO, usability should come slightly before that consideration but that's me. =)

[dasigna]

... completely correct understanding.

i know things like these may easy go too far and get things overcomplicated very easy... tweaking drag'n'drop might come first, but highlighting is a great idea anyway - sometimes having lots of items in view and suddenly seeing myself searching for the choosen one (often clicking again to be sure :-) )
so this might come at some later point.

in the end there may be many things that might be possible as well as helpful - and to let the user (or developer) choose if needed or want to use it, it might be still another good idea to toggle those items on or off from a settings page.

[pingram3541]

Yes and I'm even ok with a "development mode" flag in functions.php or similar so the general public get's the easy peezy editor while the pro's get the tools they really desire =)

[arielk]

Very interesting 👍

[ehausen]

Example from Pinegrow website editor

They have a online demo of their old version:

[ehausen]

Also the mentioned GrapeJs has a decent element navigator http://grapesjs.com/demo.html

[pingram3541]

@ehausen I also like how grapge.js and pinegrow both provide a way to toggle the visibility of each block too, maybe that could be tied in with some kind of exclude if left invisible. This would allow us to a/b test very easily by toggling whether the item loads on the front end, keeping things lean while also allowing you to preserve that element's placement in the design.

I can't tell you how many times I have been asked to try a different look or idea but we still weren't sure if we were going to actually can the original idea or not and being able to toggle it on/off would be an exceptional solution allowing us to preserve our work. I can see this as a valuable Pro feature set that most one-siter's would likely never use but site developers would use all the time.

[camilosw]

Flatsome theme has a builder with that feature, but unfortunately their builder can't be used with other themes. I just started using Elementor and I like it, and also want to see this feature implemented.

[Fxcrafter]

I've attempted to create an add-on plugin for this. I'm about 50% there, but struggling with the js side of things, if anyone with backbone/marionette experience wants to help me out, it won't take much effort at all to get a basic version out.

[black-eye]

+1 This would be really handy

[tristanleboss]

+1 @Fxcrafter Did you manage to finish your work? The JS of Elementor is a nightmare to work with due to the lack of action/filter hook points.

[Fxcrafter]

@tristanleboss yes I've started working on this again in the past week and have progressed to 90% done. As you mention the lack of hooks (2 js editor hooks) makes it difficult but I've resorted to some hackish ways. I'm hoping to have an initial release tomorrow (plus review process time), the only variable being how many features it gets shipped with but currently it is in a workable state, just not as user friendly as I want it.

[Fxcrafter]

@tristanleboss Here is the plugin I hope it helps.

[joelbqz]

@Fxcrafter just made a prototype of this: https://jumpshare.com/v/GRRp6nrkOmAgLWEj7CWd feel free to use my design if you find it useful! :) Cheers.

[joelbqz]

@bainternet is this feature really on your roadmap? This issue has more than 1 year, most of us thinks this feature is must for any page builder.

[themedleb]

+1

[ArekZw]

+1

[parfilov]

Hooray! It's already in beta =)

[Clubware]

Show / hide elements on button click.
Show/hide elements after time.
Clickfunnels has this feature built in. Surely Elementor can do it.