Prerequisites
- [ X ] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
- [ X ] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )
What problem is your feature request going to solve? Please describe.
Visual display of responsive elements in editor
Describe the solution you'd like
A clearer definition of which elements would be displayed in current responsive state and a visual indicator as to the configured state (without having to check individual elements)
Describe alternatives you've considered
Located a plugin collection that appears to add opacity options, however, this feature should not require additional costs and should be implemented in the editor by default
Additional context
Hi,
I would like to request the feature to visually identify the responsive state of an element while in the editor and also fade out (reduce opacity) of those elements that would not display in the currently selected responsive state (i.e. desktop mode)
As it currently stands if I set one element to have responsive state set to 'Hide on Desktop' (example: Tablet Section / Mobile Section) and another section to have responsive state 'Hide on Mobile) the 'hidden' mobile element still appears in the editor when in desktop mode
If I then switch into mobile mode all sections are equally still present on screen
While this may not present a big issue for a couple of elements it does become problematic if we have a large number of elements that need to be hidden / displayed for different responsive states as it becomes hard to visually identify which components to edit for the various states
What I would like to request is for the editor to 'fade out' the elements that would not be visible in the current state. For example if I am in desktop mode then any elements set to 'Hide on desktop' would be faded out to say 25% opacity
This would at least give an immediate idea of which element to work on in the current state / allow for an easier visual assessment of the overall look (which is otherwise broken up by all the 'responsive' elements being displayed at once)
The other feature that would be great and would help easily identify the actual state of responsiveness would be for the selection handle / border to be a different colour per state. For example when you moue over an element the selection handle / border is, by default, blue. If this colour could be different for each responsive state then you could easily see which of those 'faded out' elements were for which responsive state
For example when hovering over an element that is hidden on desktop and tablet the handle / border could then be red
I understand that this may be more difficult to implement due to the combination of possibilities (i.e., hidden on desktop only / hidden on desktop and tablet / hidden on tablet only / etc.) so the 'fading out' option would be more than sufficient for the required suggestion / request
I hope this request makes sense. Please feel free to ask any further questions and I will try to answer them as best as possible
Thanks
Prerequisites
What problem is your feature request going to solve? Please describe.
Visual display of responsive elements in editor
Describe the solution you'd like
A clearer definition of which elements would be displayed in current responsive state and a visual indicator as to the configured state (without having to check individual elements)
Describe alternatives you've considered
Located a plugin collection that appears to add opacity options, however, this feature should not require additional costs and should be implemented in the editor by default
Additional context
Hi,
I would like to request the feature to visually identify the responsive state of an element while in the editor and also fade out (reduce opacity) of those elements that would not display in the currently selected responsive state (i.e. desktop mode)
As it currently stands if I set one element to have responsive state set to 'Hide on Desktop' (example: Tablet Section / Mobile Section) and another section to have responsive state 'Hide on Mobile) the 'hidden' mobile element still appears in the editor when in desktop mode
If I then switch into mobile mode all sections are equally still present on screen
While this may not present a big issue for a couple of elements it does become problematic if we have a large number of elements that need to be hidden / displayed for different responsive states as it becomes hard to visually identify which components to edit for the various states
What I would like to request is for the editor to 'fade out' the elements that would not be visible in the current state. For example if I am in desktop mode then any elements set to 'Hide on desktop' would be faded out to say 25% opacity
This would at least give an immediate idea of which element to work on in the current state / allow for an easier visual assessment of the overall look (which is otherwise broken up by all the 'responsive' elements being displayed at once)
The other feature that would be great and would help easily identify the actual state of responsiveness would be for the selection handle / border to be a different colour per state. For example when you moue over an element the selection handle / border is, by default, blue. If this colour could be different for each responsive state then you could easily see which of those 'faded out' elements were for which responsive state
For example when hovering over an element that is hidden on desktop and tablet the handle / border could then be red
I understand that this may be more difficult to implement due to the combination of possibilities (i.e., hidden on desktop only / hidden on desktop and tablet / hidden on tablet only / etc.) so the 'fading out' option would be more than sufficient for the required suggestion / request
I hope this request makes sense. Please feel free to ask any further questions and I will try to answer them as best as possible
Thanks