editing obscured elements with Elementor Pro

[nbi]

A situation I keep encountering repeatedly is that the rendering of some widgets is obscured by others. The problem this creates is that in the GUI editor is that the obscured elements cannot be edited (blue context) because they are effectively hidden (blue context only seen for topmost element). This happens particularly frequently when "inner sections" with/without columns are used. This makes editing extremely difficult because one often needs to rip apart the layout in order to get to elements.

Is there a graceful way to handle this? If so please let me know. If there isn't then this should be a top priority for the editor since I've found numerous complaints about this issue.

The solution is conceptually simple. When the pointer hovers over stacked (i.e. obscuring one another) elements the editor displays a list of stacked elements allowing the user to select the element to be edited. If there are no obscured/stacked elements then the editor just shows the blue edit context as usual. In my 30+ years in IT I've seen this sort of capability in graphical editors on various platforms. Seems like a feature that ought to have been part of the editor from the start.

 

[sms-design]

There is such a thing built into Elementor called navigator, we all sometimes miss the obvious especially when it's late @ night

 

[nbi]

That has a lot of problems:

1. It forces user to go off the edit display area.
2. It isn't dynamic - navigator pane isn't updated as pointer location changes.
3. The schema shown doesn't make sense - I have multiple sections, but it only shows one. I'm guessing this is class based so that all children of all sections are shown under one section. Logical, but a horrible interface design decision because it makes it difficult to track which children belong to which sections. The displayed hierarchy should be strictly tree based.
4. It changes the screen location of an element if the eye is clicked in the navigator panel. I have no idea what the purpose of this is as it's completely non-intuitive.

I tried using this navigator when I first started playing with Elementor, but I never could make sense of it and just forgot about it.

 

[sms-design]

There is good little video that may offer some more insight it to its structure

 

[nbi]

Thanks, I'll take a look, but doesn't this underscore my point? If you have to watch a video then how intuitive is it?

Ok, I watched the video which is useful as I learned a few things:

1. One can assign names to the sections.
2. The appearance can be changed by reordering the sections.
3. The schema is indeed tree based as I thought it should be.
4. The eye is for hiding a component. This is backwards logic though - we want it to move a selected component to the foreground. Imagine if you had 4 stacked components - you'd need to hide 3 in order to work on one - why not select the one of interest and automatically hide the rest??

My bad - Navigator does seem to work correctly, it's just that I have an unusual page layout. I would still like to see the features I suggested, but it will suffice for now in coping with the stacked/hidden/obscured issue .