How to use anchors
Use anchors to control how an element behaves when its parent container is resized. Anchors help keep elements aligned, positioned, or resized consistently inside screens, containers, and groups.
Before you start
- Make sure you have permission to edit the board.
- Anchors work best when the selected element is inside a parent container, such as a screen or group.
How anchors work
Anchors define how an element stays connected to its parent when the parent is resized. You can set anchors horizontally or vertically:
- Horizontal anchors: Control how the element behaves from left to right.
- Vertical anchors: Control how the element behaves from top to bottom.
Depending on the anchors you choose, the element can stay fixed to one side, remain centered, or resize together with its parent.
You can set multiple anchors to an element. For instance, setting left and right anchors to a button will let it expand or shrink horizontally as you resize its parent. If you set left-right and top-bottom anchors to an image, it will be resized accordingly as you resize the parent vertically or horizontally.
Set anchors for an element
- Open the board where you want to adjust the layout.
- Select the element you want to anchor, then open the Layout properties panel.
- In the Anchor section, choose the anchor direction using one of these options:
- Click directly on the anchor point
- Select an option from the horizontal or vertical anchor dropdown
- Resize the parent container to preview how the element behaves.
- Adjust the anchor settings if needed.
You can use anchors to create more flexible layouts, such as:
- Keep a button aligned to the bottom-right corner of a screen.
- Keep a header element fixed to the top of a screen.
- Keep an icon centered inside a container.
- Let an image resize when its parent container is resized.
- Let a button expand or shrink horizontally with its parent.
How to view anchor settings of an element
To check if an element on the design has been set with an anchor or not, select and observe that element on the canvas. If it has been anchored, there will be purple dashed lines to indicate its fixed margin to its parent container or screen.
Note
- If an element does not behave as expected, check that it is placed inside the correct parent container.
- Setting anchors on both opposite sides, such as left and right, may cause the element to resize with its parent.
- Use anchors together with alignment and spacing settings to keep your layout consistent.
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.
Related Articles
How to use Image elements
Use Image elements to add uploaded images, stock photos, AI-generated visuals, or placeholders to your designs. Before you start Make sure you have permission to edit the board. The availability of workspace images and some AI features may depend on ...How to use Omni Search
Use Omni Search in Visily to quickly find boards, folders, commands, features, and helpful resources from one search box. You can open Omni Search from both the workspace homepage and the board editor. What you can search With Omni Search, you can ...How to use Paste to replace
Use Paste to replace when you want to replace an existing design element with another copied element while keeping it in the same position on the canvas. This is useful when you want to quickly swap content, update a design variation, or replace a ...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 AI Plan mode
This article explains how to use AI Plan Mode in Visily. Plan Mode helps you create a structured design plan before generating the actual design. Access and use AI Plan mode In the Visily AI chat box, choose Plan Mode. Enter a prompt describing what ...