New Feature Alert: Position Box

Control every element’s alignment and spacing by adjusting docking, margins and padding using an intuitive visual interface.

I’m excited to share that we are gradually releasing a new Position Experience in Editor X.
Only a part of you will get these features at first, so it’s a great opportunity to share your feedback before it will be made available for all users.

All the position capabilities such as Docking, Margins and Padding that you use to adjust your elements on the canvas will remain the same but the experience will be much better!
All position capabilities such as Docking, Margins and Padding that you use to adjust your elements on the canvas will remain the same but the experience will be much better!

What’s new?

The new position box in the Inspector panel will allow you to easily adjust the alignment and spacing of elements using a visual controller which combines the settings of the element’s docking, margins, and paddings.

Additions that will make the creation process easier and faster:

  • New shortcut to center your content in just one click

  • Use tab to quickly switch and set margin or paddings on different sides

  • Hold shift to select and edit multiple sides together

  • Click the Apply to all sides’ icon to set the same margin or padding on all sides.

Control the canvas indications for docking and margins
If you want to see your design in a clean view, you can turn them off and back on at any time from the top bar ‘View’ menu, under the new ‘Canvas Indications’ category.

Read more here: https://support.wix.com/en/article/docking-margins-and-padding

We can’t wait to hear your feedback!

8 Likes

Thank you for inviting me to join you on your prior trial period the other day. Also, I apologize for my feedback being so late. I really like this new UI.

It looks like it will be a huge UX improvement. Thanks.

I hope you will also improve the rows and columns UX.
I see the reason in the new one (bringing everything in the control panel) but the result is not good and the old one was more ergonomic (we were working more efficiently).

Nice updated UI with some setbacks @lironm . Current feedback after accessing the beta:

  1. Not being able to see both margin and padding numerical values at a glance without interacting can be frustrating when trying to quickly assess a component’s properties or check for responsive issues

  2. It would be helpful to be able drag the margin or padding handles to have the values update in realtime similar to scrubbing. This looks inspired from webflow’s UI which has this benefit. Additionally, being able to also hold shift while dragging to scrub numerical the values in real time would then lock both the left/right or top/bottom values as you drag.

  3. The center button for docking is less clear now than the previous iteration. Using the center button sometimes still keeps left/right margins that have been equalized which doesn’t make sense - perhaps a bug?

hey there!
feedback was forwarded, but as for the last point could you share video example with us on centering behavior?

Available now to all users :sunflower:

Dark mode under the view menu??

it is in Alpha development version for now, so user got no access to it yet

would you like to see the dark mode?

In good step :sunglasses::crown::dizzy:

oh absolutely!!!

Me too! :slight_smile: