Quick visual view of padding and margin

[danbalaban]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• 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.

Consistency is a huge issue and not having a quick visual representation of applied margins and paddings is a big problem with junior designers.

Describe the solution you'd like

It would be very handy if a quick visual overview is available for margins and paddings. Think of it as the Computed tab in the Chrome inspect tool but for containers.

Describe alternatives you've considered

No response

Additional context

No response

[m1ga]

[danbalaban]

No because there are no values shown. It's a good start but we miss a quick glance with the mouse over and see all values visually applied so the QA or devs can do revisions much faster and catch inconsistencies. I don't want to use the inspect tool every time or go through 3 or even more clicks on every section to see what was done.

[m1ga]

Ah I see, you want to see those values right in the page!

Might be interesting but I think it will be very had to see later on, devtools are doing a great job and is very quick (e.g. ctrl + shift + c and hover around).
Should be an option to switch on/off if it will be implemented. Also that would include lots of JS and additional elements in the page for the editor. But let's see 😄

[dsolimini]

+1. It would be great to have the ability to see the area and value of margin and padding on the page, though I agree it needn't be always visible. I would also add that there is additional information which could be very useful in a similar fashion.

As our site gets more complicated and more users are involved in development, maintaining consistency is increasingly a challenge. A method of quickly reviewing a page for use of the tools Elementor provides for consistency would be an incredibly useful and time-saving feature. This needn't be limited to margin/padding.

A potential implementation could, when a shortcut key is held down...

• Highlight the margin of the element under the cursor in a semi-transparent green
• highlight the padding of the element under the cursor in a semi-transparent magenta
• Show the values of the margin/padding fields in the highlighted areas
• Show the global font name assigned to parts of the element (or, if not, a hex)
• Show the global color name assigned to parts of the element

Together these would make reviewing your work, or the work of a team member, much easier/faster.

D

[danbalaban]

You and i are 100% on the same page. This alone would cut down revision time significantly. We spend a bunch of time on that and it's a real pain.