This tutorial will take you from the basics of positioning elements on STUDIO up to creating any kind of layout you want.
Moving a single element
When you add the first element on the canvas, you’ll be able to drag and position it in 9 basic positions: left, center, right of each border and center of the page.
Placing an element inside another(nesting)
You can place an element inside another one(as long as there is enough space to contain it).
The inside element is called child box. The container element is called parent box.
You can place the child box in the same 9 position as above, relative to the parent box.
You can see the hierarchy of elements from the right side layers panel.
Child elements nest below parent boxes.
‘Base’ is the highest level layer.
Two Elements
When adding a second element outside the element already on the canvas, the new element can be dragged and placed in 4 positions relative to the element already on the canvas: top, left, right and bottom.
These two elements will be called sibling boxes as they are on the same layer and have the same parent box.
Once again you can check the hierarchy from the side panel.
Direction & Order
By default, the direction of elements on STUDIO is top down.
To change direction or order, select one of the elements of a row.
Then, move your mouse on the arrow that appears near the edge of the parent box and change the row’s direction.
Wrapping
The zig zag arrow refers to the wrapping property. Wrapping allows elements to automatically break into multiple lines if there is not enough space available in the parent box.
NB: When using wrapping, the width and height of elements should be set to pixel, not to % otherwise they will shrink along with their parent box.
Moving a single element
Placing an element inside another (nesting)
Two Elements
Direction & Order