Studio Editor: Positioning Elements

8 min read

In an ever-changing world of devices, it’s important to control your elements' position so they look just as you want on different screen sizes. In the Studio Editor, elements are automatically docked to make sure that happens.

This gives you the freedom to move elements around, without having to worry about positioning across breakpoints. However, you can always set the position, docking and margins on your own from the Inspector panel.

Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.

In this article, learn more about:

Positioning elements on the canvas

Using drag and drop, you can set your element's position directly on the canvas, separately for each breakpoint. This allows you to ensure that the element truly looks in place on every screen.

As long as the element remains within the same parent (e.g. section, cell), you can move it around and it does not affect other breakpoints. If you move an element to a different parent (reparent), it applies to all breakpoints.

A screenshot of an element being dragged to another parent cell, and a notification that it affects all breakpoints

X and Y coordinates in the Inspector

You can check your element's X and Y coordinates to see its exact position on the current canvas size.

X: The horizontal plane, from the left edge to the right edge of the parent element (e.g. section, container, stack).
Y: The vertical plane, from the top to the bottom of the parent element.

In the example below, you can see the px* value turn negative as we're moving the text element outside of its parent element - the cell.

A GIF showing a text element moved outside of its parent cell, creating a negative X value in the Inspector

What's px*?

px* is a unit of measure in the Studio Editor, showing you the "pixels on canvas". The px* value you see is the pixel equivalent, relevant to your current canvas size. Switch to a different breakpoint to see how the px* value changes automatically.

Automatic and manual docking

When adding a new element in the editor, it's automatically docked to ensure it stays in place on all screens and devices. However, you can always disable auto docking and choose the docking points manually.

Click a topic below to learn more.

Automatic docking in the editor

Adjusting the docking manually

Using margins when docking elements

When an element is docked, margins help keep a set distance between the element and the edges of its parent. You can add margins to the sides that aren't docked as well. Margins act as a buffer, preventing overlaps with other elements.

In the example below, the text element is docked to the top and right sides of the cell. Hovering over the margins in the Inspector panel highlights them on the canvas:

A GIF showing a cursor hovering over the top and right margins in the Inspector, and the way they are highlighted on canvas

To create or edit a margin:

Select the relevant element.
Click the Open Inspector icon at the top right of the editor.

A screenshot of opening the Inspector panel in the Studio Editor.

Scroll down to Position.
Click a margin (e.g. top, left) under Docking, margins and padding.
(Optional) Click the Edit individually icon to only edit the side you selected.
Enter a value for the margin.
Tip: Click the measurement (e.g. px*, %) to change it.

A screenshot of the Position box, where you can create margins around an element

Margin units:

Margins can be set in px*, pixels (px), percentage (%), viewport height (vh) and viewport width (vw). Each unit has a different outcome when the screen is resized. See the difference in the behavior of the units by dragging your canvas to resize it.

Adding padding around an element

Add padding to containers to create a space between the edges (top, bottom or sides) and the content inside. Padding can be added to all types of responsive containers, including basic containers, stacks, flexboxes, repeaters, cells, sections and pages.

To add padding around an element:

Select the relevant element.
Click the Open Inspector icon at the top right of the editor.

Click the Padding box under Docking, margins and padding.

The padding box in the Inspector panel in the Studio Editor

Click the side you want to adjust.
Enter a value in %, px, px*, vh or vw.
Tip: Click the current size unit to select a different one.
(Optional) Click the Apply to all sides icon .

Adding 4% padding to all sides of a Stack element in the Studio Editor

Padding units:

Padding can be set in px*, pixels (px), percentage (%), viewport height (vh) and viewport width (vw). Each unit has a different outcome when the screen is resized. See the difference in the behavior of the units by dragging your canvas to resize it.

Preventing elements from overlapping

When positioning elements, it's important to make sure they don't overlap on smaller breakpoints. To prevent this from happening, check out our tips below.

Docking to the top