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.

Alignment & Justification

Alignment

Alignment refers to the way elements are uniformly distributed at the top, center or bottom (when direction is vertical) or left, center, right (when direction is horizontal).

To change alignment of elements, select an element and toggle the blue symbols that appear on its top and left border.

Justification

Justification refers to the way elements are uniformly spaced on their main axis (horizontal when direction is horizontal, vertical when their direction is vertical).

To change alignment of elements, select an element and toggle the blue symbols that appear on its top and left border.

 

Below is a comparison of Alignment & justification with vertical and horizontal direction.

Horizontal boxes: 

Vertical boxes:

 

Grouping: Two directions 

What about when you don’t want all boxes to be on the same line, or the same direction? 

You can achieve this by simply dragging and dropping the element next to another one.

When you drag & drop, you are automatically grouping the two elements in a new container (or parent) box, as you can see from the layers panel on the right.

Learn more about the box model & parent-child box relationship.

Grouping: Two alignments

When you align elements, you will notice it is only possible to position them uniformly. For example, it is not possible to position two boxes on the left and one on the right. 

To do so, once again you will need to create a container box and group the elements you want to align differently. You can quickly group them by selecting more than one element (SHIFT + select) and then press Command + G (or CTRL + G). 

Finally, to create extra space in between elements, margin and padding is used. Read about margin & padding here.

Did this answer your question?