Studio Two Editor: Adjusting Position and Spacing

Adjust the way elements sit inside a section or container with vertical spacing, docking, and margins. Set spacing to automatic to keep elements clear of each other across breakpoints, or switch to manual for exact control over docking and margins.

Then, choose how an element behaves as visitors scroll the page: keep its default position, make it stick to the viewport, or pin it in place.

In Studio Two Editor, sections and containers include a vertical spacing setting that helps keep the elements inside them in place across breakpoints. You can choose whether vertical spacing is set automatically or manually.

By default, vertical spacing is set to Automatic, so the editor handles the vertical spacing for you. This saves you from docking each child element to the top or bottom, and from adjusting top and bottom margins on every breakpoint to maintain the layout.

1. Go to your editor.

2. Click the Desktop icon at the top.

3. Select the relevant parent element (i.e. section, container).

4. Click the Open Inspector icon at the top right of the editor.

5. (In the Inspector) Scroll down to Vertical spacing under Layout.

6. Select the relevant option from the Vertical spacing dropdown:

   • Automatic: The vertical spacing between elements in the section / container is automatically preserved across all screen sizes.

   • Manual: You set the exact docking and margins of each element in the section / container to ensure they're spaced out correctly across all screen sizes.

When you add new elements to the page, they're set to automatically dock to the nearest corners. This means you can drag elements around the canvas without worrying about redocking them. However, you can always switch to manual docking if you want full control over their docking points.

After deciding on the docking, add margins to control the space around an element and keep a consistent distance from the edges of its parent.

1. Go to your editor.

2. Select the relevant element.

3. Click the Open Inspector icon  at the top right of the editor.

1. (If not already open) Click the Design tab and scroll down to Position.

2. Choose how to set the element's docking:

   • Automatically: Keep the checkbox next to Element auto docks selected.

   • Manually: De-select the checkbox next to Element auto docks. Then, click the relevant docking point to dock or undock the element: Left , Right , Top or Bottom

3. (Optional) Enter a value for margins where the element is docked (left, right, top or bottom).
   Note: The top and bottom margins are disabled if the element's parent (i.e. container, cell) has vertical spacing set to automatic. This means the element's vertical margins depend on the element's position on the canvas.

Choose how an element or section behaves as visitors scroll up and down the page. You can keep it in its regular position, pin it to the viewport, or make it stick while visitors move through the page.

1. Go to your editor.
2. Select the relevant element or section.
3. Click the All design options icon on the action bar.
4. (In the Inspector) Select the Position type from the dropdown and set it up:

Click a question below to learn more.