Studio Editor: Stacking Elements

5 min read

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.

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

In this article, learn how to:

Dealing with overlapping elements?

Review our troubleshooting video to learn what to check and how to resolve this issue.

Applying a stack

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.

Dragging the spaces between stack items to increase margins

Tip:

You can also create negative margins to make elements overlap intentionally.

Dragging the stack margins to the opposite direction to create an overlap between the image and text

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.

An example of a horizontal stack turned to vertical, the elements are now in a vertical 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:

Select the relevant stack.
Choose what to do next:

Add an element to the stack

Detach an element from the stack

Reorder elements in the stack

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:

Select the relevant stack.
Click the Open Inspector arrow at the top right of the Editor.
Scroll down to Design.
Design the stack using the available options:
- 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.