Studio.Design uses a "box model" approach to layout, where you stack boxes or place them inside one another. This lets you create everything from simple layouts to complex nested structures.
In Studio.Design, you create nested structures by setting up parent-child relationships between boxes. You can check these relationships in the Layers panel on the left side of the screen.
How to add a box inside another box
There are two ways to add a box inside another box: working directly on the editor canvas, or using the Layers panel.
Working on the editor canvas
Drag the box you want to make a child and move it into the parent box.
Make sure the orange drop shadow appears inside the parent box, then release to drop it.
If the child box is larger than the parent box, you won't be able to add it inside. Resize the box first, or use the Layers panel method instead.
Tips: Adding a child element without dragging
You can also add a child element without dragging. This is helpful when dragging doesn't place the element where you want it.
Select the parent box on the screen.
In the Add panel
on the left side of the screen, hold Shift and click the element you want to add.
Using the Layers panel
Click the Layers panel in the left-side navigation of the design editor.
Drag the layer of the box you want to move and drop it onto the layer of the box you want to make its parent.