Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion - Advanced - Navigator Panel #1165

Closed
pingram3541 opened this issue Jan 12, 2017 · 21 comments
Closed

Suggestion - Advanced - Navigator Panel #1165

pingram3541 opened this issue Jan 12, 2017 · 21 comments

Comments

@pingram3541
Copy link
Contributor

@pingram3541 pingram3541 commented Jan 12, 2017

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.

navigator

@WPDevHQ
Copy link

@WPDevHQ WPDevHQ commented Jan 12, 2017

This suggestion/enhancement gets my vote. +1

@dasigna
Copy link

@dasigna dasigna commented Jan 12, 2017

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
Copy link
Contributor Author

@pingram3541 pingram3541 commented Jan 12, 2017

@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
Copy link

@dasigna dasigna commented Jan 12, 2017

... 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
Copy link
Contributor Author

@pingram3541 pingram3541 commented Jan 12, 2017

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
Copy link
Contributor

@arielk arielk commented Jan 16, 2017

Very interesting 👍

@ehausen
Copy link

@ehausen ehausen commented Mar 11, 2017

Example from Pinegrow website editor

They have a online demo of their old version:

screen shot 2017-03-11 at 16 03 48

@ehausen
Copy link

@ehausen ehausen commented Mar 11, 2017

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

@pingram3541
Copy link
Contributor Author

@pingram3541 pingram3541 commented Mar 11, 2017

@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
Copy link

@camilosw camilosw commented Jul 21, 2017

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.

image

@Fxcrafter
Copy link

@Fxcrafter Fxcrafter commented Feb 19, 2018

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
Copy link

@black-eye black-eye commented Feb 25, 2018

+1 This would be really handy

@tristanleboss
Copy link

@tristanleboss tristanleboss commented Apr 22, 2018

+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
Copy link

@Fxcrafter Fxcrafter commented Apr 22, 2018

@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
Copy link

@Fxcrafter Fxcrafter commented Apr 28, 2018

@tristanleboss Here is the plugin I hope it helps.

@joelbqz
Copy link

@joelbqz joelbqz commented May 15, 2018

@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
Copy link

@joelbqz joelbqz commented May 25, 2018

@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
Copy link

@themedleb themedleb commented May 26, 2018

+1

@ArekZw
Copy link

@ArekZw ArekZw commented Jul 17, 2018

+1

@parfilov
Copy link

@parfilov parfilov commented Aug 21, 2018

Hooray! It's already in beta =)

@bainternet bainternet closed this Aug 28, 2018
@Clubware
Copy link

@Clubware Clubware commented May 18, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet