How to adjust element position, size, and layer order

Use the Layout Properties panel to precisely position and resize elements or change which elements appear in front of or behind others.

Before you start

Make sure you have permission to edit the board and are in design editing mode.

Access Layout Properties

Select element(s), then open Layout Properties from the right sidebar. From this panel, you can adjust the element’s position and size or change its layer order.

Adjust an element’s position

Instead of dragging an element on the canvas, enter its exact coordinates in the position settings:

1. X: Sets the element’s horizontal position.
2. Y: Sets the element’s vertical position.

The coordinates represent the top-left corner of the element’s bounding box and are relative to its parent screen. The values update automatically when you move the element on the canvas.

Adjust an element’s size

Enter exact dimensions in the size settings:

1. W: Sets the element’s width.
2. H: Sets the element’s height.

Each element has a minimum supported width and height. If you enter a smaller value, Visily automatically applies the nearest valid size.

Use the Constrain proportions lock to control whether the width-to-height ratio is maintained. When locked, changing one dimension automatically adjusts the other to maintain the ratio.

Rotate an element

Enter an angle in the Rotation field to rotate the selected element precisely. Rotation is not currently available for containers.

Use formulas in numeric fields

You can enter simple formulas in the X, Y, W, H, and Rotation fields to calculate a new value. This helps you adjust positions and dimensions without calculating the result separately.

Adjust the space between objects

Use Space between to set the exact spacing, in pixels, between selected objects. You can also use it to apply equal spacing across multiple objects.

The available setting depends on how the selected objects are arranged:

1. Horizontal spacing: Use when the objects are arranged in a row.
2. Vertical spacing: Use when the objects are arranged in a column.

Arrange layers

Each object is placed on its own layer. When elements overlap, their order determines which element appears in front.

Select an element, then use one of the following layer arrangement options:

1. Bring forward: Moves the element one layer above its current position.
2. Bring to front: Moves the element above all other elements within the same parent.
3. Send backward: Moves the element one layer below its current position.
4. Send to back: Moves the element below all other elements within the same parent.

Changing the layer order does not affect the element’s position on the canvas. Elements can only be reordered within their immediate parent screen or container.

Need more help?

If this does not solve your issue, contact support and include a screenshot if possible.

• Related Articles

• How to share element and screen

  Share a direct link to a specific screen or element when you want collaborators to focus on a particular part of your board. Before you start Make sure both you and the recipients have permission to access the board, as links to screens or elements ...

• How to use Buttons and Form Controls

  Use buttons and form controls to represent actions, collect user input, and create realistic interface designs. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access buttons and form controls ...

• How to navigate and organize your design with Layers

  Use the Layers panel to view every object on your board, understand how elements are nested, and quickly select or organize complex designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Access the ...

• How to use Text and Link elements

  Use Text and Link elements to add headings, descriptions, labels, and clickable text to your designs. Before you start Make sure you have permission to edit the board and are in design editing mode. Text element types Visily provides the following ...

• How to use Table elements

  Use Table elements to organize information into rows and columns. You can create a blank table, import existing data, paste content from a spreadsheet, or generate sample data with AI. Before you start Make sure you have permission to edit the board ...