Positioning elements

Position your elements inside parent elements or beside sibling elements using drag and drop.

Drag and Drop
Flex Containers
Freestyle Positioning

1. Drag and drop

We already saw how to add elements in a previous lesson by dragging them from the elements panel and dropping them in the Canvas. From here we can move elements around by dragging and dropping them inside or next to other elements. You will see blue indicators showing you where the elements will be placed. Note that there are some restrictions here because not all elements support children nodes, like media, text or input elements.

Placing inside empty containers

You might have noticed that by default container elements have a dashed grey border as well as a fixed width and height. This is a temporary style that helps with the visibility of the container and it will be removed once we add elements inside.

Placing Elements inside images

Another nifty features is adding elements inside images. This is actually a trick because HTML doesn't allow us to add children elements to images, so we transform the image into a container instead with a background image.

Clone with drag & drop

You can quickly make clones of elements by dragging to the desired place while keeping alt pressed and dropping.

2. Flex Containers

Flex containers are something special! Our containers have flex display by default so that you can enjoy all the benefits of flex.
When adding an element inside an empty flex container with drag and drop you will notice a blue square indicating the position where you can drop that element. This is achieved through flex specific properties and will not work on other types of containers.



Positioning multiple elements is also made easier using flex. You are able to position elements in relation to another target by dragging it in the desired direction.

Two things can happen here. If the target element has no other siblings, the flex direction of the parent can be changed to attain the desired effect.

But if the target node has siblings and we want to position our element in another direction than the existing one then we will automatically group the two elements and set the desired direction on the newly created parent container.



Changing the position of elements inside of a flex container can be done through the Inner layout section of the Right panel. From here you can change a container from a row to a column and vice versa as well as change the way the elements are aligned inside of the container and the way that spacing is distributed between elements.

3. Freestyle Positioning

If you want the feel of a design tool without any restrictions enable the Freestyle Positioning mode from the Visual Inspector.
You will be able to move the elements around freely around the canvas relatively to the parent's position.

You will see dashed blue lines that indicate the distance in pixels from the initial position of the element.
If you want to move the element only on the vertical or horizontal axis and need more control, just press shift and drag it in the desired direction.

Updated on: 20/04/2023