Studio Editor: Stacking Elements
6 min
In this article
- Applying a stack
- Changing the stack direction
- Managing a stack
- Designing a stack
- Adjusting the stack layout
A stack is a flexbox container that "hugs" a group of elements – whether they are in a vertical or horizontal order. It ensures the elements stay in order, with the spacing you define, and never overlap.
Having said that, you can use negative margins to make elements overlap intentionally.
Dealing with overlapping elements?
Review our troubleshooting video to learn what to check and how to resolve this issue.
Applying a stack
Stacking elements is a quick way to organize your design with consistent spacing, creating a clean and polished layout. When selecting multiple elements that are next to each other (in the same parent element), the option to stack them pops up.
To apply a stack:
- Go to your editor.
- Click an element that you want to be in the stack.
- Hold down the Shift key and select the other stack elements.
- Click Stack.
- (Optional) Drag the line between the elements to set margins.
Tip:
You can also create negative margins to make elements overlap intentionally.
Changing the stack direction
When you stack elements, the direction is automatically determined by the order of the elements. If the elements are arranged vertically, for example, the stack will be vertical.
Either way, you can always switch the direction using the drop-down. This automatically rearranges the elements so they're in the right order.
Managing a stack
You can customize the stack to match new content and requirements. Add more elements to the stack, move them around in a click of a button, and detach elements that are no longer needed.
To manage a stack:
- Go to your editor.
- Select the relevant stack.
- Choose what to do next:
Add an element to the stack
Detach an element from the stack
. Then, click Detach from Stack.
Reorder elements in the stack
/ Move Down 
, or the Move Left 
/ Move Right 
icons.
Unstack elements
Designing a stack
The stack does not have to be transparent – you can design it to make the content stand out on the page. Add a background color, border and shadow. You can also make the stack corners more round or square.
To design a stack:
- Go to your editor.
- Select the relevant stack.
- Click the Open Inspector icon
at the top right of the editor.
- Use the available options under Design to customize the stack:
- Set the background color and its opacity.
- Add a border to frame the stack.
- Choose a radius for the corners.
- Enable shadow and manage settings like its angle, distance, size, etc.
Adjusting the stack layout
Adjust the stack layout to ensure that every element is spaced, aligned, and padded in a way that suits your creative vision or client’s needs.
To adjust the stack layout:
- Go to your editor.
- Select the relevant stack.
- Click the Open Inspector icon at the top right of the editor.
- Scroll down to Layout.
- Use the available options to adjust the stack layout:
- Switch the direction from Horizontal to Vertical or vice versa.
- Enter a value under Item spacing to create equal margins between the stack elements (i.e. items).
- Choose an alignment for the stack items: Left, Right, Center or Justified.
- Add padding to the sides.
Did you know?
You can adjust the padding and spacing directly on the canvas. Drag the line between elements, or double-click the line if you prefer entering a precise value. You can even switch the size unit if needed.
