Visual screen layout editor
Size and Positioning
You can change the size and position of any object right in the workspace of the layout. To change its proportions, click on the object in the workspace and drag the green anchor point while holding down the left mouse key (LKM). To change its position, select an object and drag it with the LKM pressed to a required area.
If you need precise settings for dimensions and coordinates, use the side settings panel:
- Select a required object and click on the Settings tab, if it is not already open. You can quickly open the settings of any object by double-clicking on the object.
- Enter required values in the Size and Position fields, values are specified in percent.
- When you are finished with the layout, do not forget to click the Save button on the page navigation bar.
Visual Hierarchy
Objects can overlap each other. This can cause a situation when it becomes necessary to place an object above or below another object. To do this, use the moving buttons in the toolbar above the selected object or drag the object in the list of layers while holding LKM.
Multiple selection
To select multiple objects at once, hold Shift and select them in the workspace or in the layers list. After that, you can manipulate all selected objects at the same time
Alignment
Alignment controls become available in the right settings panel once an object is selected on the canvas.
Single object. The element can be aligned in six directions relative to the canvas or its parent container.
Multiple objects. Selecting several elements aligns them relative to their shared bounding box. When more than two objects are selected, two extra options become available:
- Distribute horizontally — spaces objects evenly on the horizontal axis, anchoring the leftmost and rightmost elements in position.
- Distribute vertically — applies the same logic along the vertical axis.
Lock Object
To protect an element from being accidentally moved or resized, you can lock it in place.
Click the Lock icon in the floating toolbar or use the shortcut Cmd+Shift+L (Mac) / Ctrl+Shift+L (Windows) to lock an object.
To remove the lock, click the lock icon beside the corresponding layer in the layers panel.