# Dynamic layouts with the anchoring tool

> Connect elements so they move along when text or sizes change.

Source: https://bluepic.io/help/design-elements-and-tools/anchoring-tool  
Language: en  
Category: design-elements-and-tools  
Last updated: 2026-10-22

In the template editor, the anchoring tool connects one element to another. When the other element grows or moves, your element moves with it. For example, the gap between two texts stays the same even when one text gets longer.

The tool has two modes, and you can change every connection afterwards:

1. Connect one edge to another edge on the canvas with **Edges**.
2. Fit one element exactly onto another on the canvas with **Surfaces**, such as a background behind a text.
3. Change or remove a connection on the canvas.


## Connect edge to edge

1. Click the anchor icon in the middle of the toolbar. This is the anchoring tool. A bar appears at the top of the canvas with the hint "Select an element to use the anchoring tool".

   ![Toolbar with the anchoring tool highlighted.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-03/public){width="632"}

2. Click the element that should move along. You can click it on the canvas or in the layers panel. **Edges** and **Surfaces** appear in the bar, and **Edges** is already active. A small diamond now sits in the middle of each edge of your element.

   > **Edges and Surfaces don't appear?** The tool needs exactly one selected element. Click an element that is not selected in the layers panel first, then click your element.

   ![Anchoring tool in Edges mode: a diamond sits in the middle of each edge of the selected name.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-05/public?v=9637848f){width="894"}

3. Drag the diamond on one edge of your element onto an edge of another element or of the canvas. While you drag, the edge you are about to hit lights up and a label names it. When you let go, your element jumps to that edge. It now follows the edge whenever the other element moves or grows. For a text, you can connect to its lines or to its text frame. If the label contains `.frame`, for example `headline.frame.bottom`, it is the frame.

   > **Your element doesn't connect?** Paths, masks and groups with **Layout Mode** **None** can't be anchored. Elements in a group with **Column** or **Row** are arranged by the group itself, so they can't be anchored either. More on this in [Group elements](https://bluepic.io/help/design-elements-and-tools/group-elements). If your element sits in another group, a click on the canvas selected the whole group: click the element itself in the layers panel. If the other element already follows your element, the tool doesn't offer its edges, because connections can't go in a circle.

   ![Anchoring tool in Edges mode while the name's bottom diamond is dragged: the top edge of the role lights up green, with its name text8.top next to it.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-04/public?v=ba6d549c){width="894"}

4. Drag the green handle between the two elements to set the gap. From now on the gap stays the same, even when the other element grows.

   ![Name anchored to the top edge of the role: the green handle in between, the gap −16 on its left, the trash can on its right and the drag hint below.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-06/public?v=3ee0a2c0){width="894"}

5. Click **Cancel** in the bar at the top. The anchoring tool is off again.
6. Check that your element behaves the way you want. For example, change the text or the size of the other element.

> **Tip:** Hold **Alt** (**Option** on a Mac) to switch the anchoring tool on briefly. When you let go of the key, it switches off again.

## Fit an element exactly onto another

1. Click the anchor icon in the middle of the toolbar. The anchoring tool is on.
2. Click the element that should adapt, for example a rectangle as a background.
3. Click **Surfaces** in the bar at the top.
4. Drag your element onto another element, for example onto a text. Your element now takes on the other element's position and size and adapts whenever it changes. If you let go over an empty spot of the canvas, it fills the whole canvas. Whether it sits in front of or behind the other element depends on the order in the layers panel.
5. Drag a green handle on one of the edges to set the padding. All edges with a closed lock change together.
6. Click the lock on an edge if only that edge should get its own padding. The lock opens, and you can now set that edge on its own.

   ![Surfaces connection on the canvas: the box with green handles and lock icons on its edges.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-02/public){width="840"}

7. Click **Cancel** in the bar at the top. The anchoring tool is off again.

## Change or remove a connection

1. Click the connected element. The anchoring tool doesn't need to be on for this. You see the green handle of the connection between the elements.
2. Hover over the green handle. The gap appears next to it as a number, together with a trash can. With **Surfaces**, every edge has its own number and its own trash can.
3. Depending on what you want to change:

   - Change the gap: click the number, type a new value and press **Enter**.
   - Remove the connection: click the trash can. Your element stays where it is but no longer follows the other element.
   - See the expression: double-click the green handle. The expression editor opens.

You also change the gap when you type a number into the **X** and **Y** fields in the properties panel. The connection stays in place.

Every connection is an expression behind the scenes. 20 pixels below the bottom edge of `headline` looks like this: `ADD(headline.bottom, 20)`. If you write such an expression yourself, the tool shows it as a connection too.

## Related articles

- [Dynamic text layouts with expressions](https://bluepic.io/help/expressions-and-logic/guide-dynamic-text-layouts)
- [Group elements: move and arrange them together](https://bluepic.io/help/design-elements-and-tools/group-elements)
- [Use the layout grid: line up elements on guide lines](https://bluepic.io/help/design-elements-and-tools/layout-grid)
- [Use the expression editor](https://bluepic.io/help/expressions-and-logic/expression-tool)