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

Comments

Projects
None yet
@pingram3541
Copy link
Contributor

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

This comment has been minimized.

Copy link

commented Jan 12, 2017

This suggestion/enhancement gets my vote. +1

@dasigna

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2017

Very interesting 👍

@ehausen

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Mar 11, 2017

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

@pingram3541

This comment has been minimized.

Copy link
Contributor Author

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Feb 25, 2018

+1 This would be really handy

@tristanleboss

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Apr 28, 2018

@tristanleboss Here is the plugin I hope it helps.

@joelbqz

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented May 26, 2018

+1

@ArekZw

This comment has been minimized.

Copy link

commented Jul 17, 2018

+1

@parfilov

This comment has been minimized.

Copy link

commented Aug 21, 2018

Hooray! It's already in beta =)

@bainternet bainternet closed this Aug 28, 2018

@Clubware

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.