# Dynamische Layouts mit dem Anchoring-Werkzeug

> Verbinde Elemente miteinander, damit sie sich mitbewegen, wenn sich Texte oder Größen ändern.

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

Im Template-Editor verbindest du mit dem Anchoring-Werkzeug ein Element mit einem anderen. Wird das andere Element größer oder verschiebt es sich, bewegt sich dein Element mit. So bleibt zum Beispiel der Abstand zwischen zwei Texten gleich, auch wenn ein Text länger wird.

Das Werkzeug hat zwei Modi, und jede Verbindung kannst du danach ändern:

1. Verbinde auf dem Canvas mit **Edges** eine Kante mit einer anderen Kante.
2. Lege auf dem Canvas mit **Surfaces** ein Element passgenau auf ein anderes, etwa einen Hintergrund hinter einen Text.
3. Ändere oder löse eine Verbindung auf dem Canvas.


## Kante an Kante verbinden

1. Klicke in der Mitte der Toolbar auf das Anker-Symbol. Das ist das Anchoring-Werkzeug. Oben auf dem Canvas erscheint eine Leiste mit dem Hinweis „Select an element to use the anchoring tool“.

   ![Toolbar mit markiertem Anchoring-Werkzeug.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-03/public){width="632"}

2. Klicke auf das Element, das sich mitbewegen soll. Das geht auf dem Canvas oder im Layers-Panel. In der Leiste erscheinen **Edges** und **Surfaces**, und **Edges** ist schon aktiv. In der Mitte jeder Kante deines Elements sitzt jetzt eine kleine Raute.

   > **Edges und Surfaces erscheinen nicht?** Das Werkzeug braucht genau ein ausgewähltes Element. Klicke im Layers-Panel erst auf ein Element, das nicht ausgewählt ist, und dann auf dein Element.

   ![Anchoring-Werkzeug im Modus Edges: am ausgewählten Namen sitzt in der Mitte jeder Kante eine Raute.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-05/public?v=9637848f){width="894"}

3. Ziehe die Raute an einer Kante deines Elements auf eine Kante eines anderen Elements oder des Canvas. Beim Ziehen leuchtet die Kante auf, die du gerade triffst, und ein Label nennt sie. Lässt du los, springt dein Element an diese Kante. Es folgt ihr jetzt, wenn sich das andere Element bewegt oder größer wird. Bei einem Text kannst du an die Textzeilen oder an den Textrahmen anbinden. Enthält das Label `.frame`, zum Beispiel `headline.frame.bottom`, ist es der Rahmen.

   > **Dein Element verbindet sich nicht?** Pfade, Masken und Gruppen mit **Layout Mode** **None** kannst du nicht verankern. Elemente in einer Gruppe mit **Column** oder **Row** ordnet die Gruppe selbst an, deshalb lassen auch sie sich nicht verankern. Mehr dazu in [Elemente gruppieren](https://bluepic.io/de/help/design-elements-and-tools/group-elements). Liegt dein Element in einer anderen Gruppe, hat ein Klick auf dem Canvas die ganze Gruppe ausgewählt: Klicke im Layers-Panel auf das Element selbst. Folgt das andere Element schon deinem Element, bietet das Werkzeug seine Kanten nicht an, denn Verbindungen im Kreis gehen nicht.

   ![Anchoring-Werkzeug im Modus Edges, während die untere Raute des Namens gezogen wird: Die Oberkante der Rolle leuchtet grün auf, daneben steht ihr Name text8.top.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-04/public?v=ba6d549c){width="894"}

4. Ziehe am grünen Griff zwischen den beiden Elementen, um den Abstand einzustellen. Der Abstand bleibt ab jetzt gleich, auch wenn das andere Element wächst.

   ![Name an der Oberkante der Rolle verankert: dazwischen der grüne Griff, links davon der Abstand −16, rechts der Papierkorb, darunter der Hinweis zum Ziehen.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-06/public?v=3ee0a2c0){width="894"}

5. Klicke oben in der Leiste auf **Cancel**. Das Anchoring-Werkzeug ist wieder aus.
6. Prüfe, ob sich dein Element wie gewünscht verhält. Ändere dazu zum Beispiel den Text oder die Größe des anderen Elements.

> **Tipp:** Halte **Alt** (auf dem Mac **Option**) gedrückt, um das Anchoring-Werkzeug kurz einzuschalten. Lässt du die Taste los, ist es wieder aus.

## Element passgenau auf ein anderes legen

1. Klicke in der Mitte der Toolbar auf das Anker-Symbol. Das Anchoring-Werkzeug ist eingeschaltet.
2. Klicke auf das Element, das sich anpassen soll, zum Beispiel ein Rechteck als Hintergrund.
3. Klicke oben in der Leiste auf **Surfaces**.
4. Ziehe dein Element auf ein anderes Element, zum Beispiel auf einen Text. Dein Element übernimmt jetzt Position und Größe des anderen Elements und passt sich an, wenn es sich ändert. Lässt du es auf einer freien Stelle des Canvas los, füllt es den ganzen Canvas. Ob es vor oder hinter dem anderen Element liegt, bestimmt die Reihenfolge im Layers-Panel.
5. Ziehe an einem grünen Griff an einer Kante, um den Innenabstand (Padding) einzustellen. Alle Kanten mit geschlossenem Schloss ändern sich gemeinsam.
6. Klicke auf das Schloss an einer Kante, wenn nur diese Kante einen eigenen Abstand bekommen soll. Das Schloss öffnet sich, und die Kante lässt sich jetzt einzeln einstellen.

   ![Surfaces-Verbindung auf dem Canvas: die Fläche mit grünen Griffen und Schloss-Symbolen an den Kanten.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-anchoring-tool-02/public){width="840"}

7. Klicke oben in der Leiste auf **Cancel**. Das Anchoring-Werkzeug ist wieder aus.

## Verbindung ändern oder lösen

1. Klicke auf das verbundene Element. Das Anchoring-Werkzeug muss dafür nicht eingeschaltet sein. Zwischen den Elementen siehst du den grünen Griff der Verbindung.
2. Fahre mit der Maus über den grünen Griff. Daneben erscheinen der Abstand als Zahl und ein Papierkorb. Bei **Surfaces** hat jede Kante ihre eigene Zahl und ihren eigenen Papierkorb.
3. Je nachdem, was du ändern willst:

   - Abstand ändern: Klicke auf die Zahl, gib einen neuen Wert ein und drücke **Enter**.
   - Verbindung lösen: Klicke auf den Papierkorb. Dein Element bleibt, wo es ist, folgt dem anderen Element aber nicht mehr.
   - Expression ansehen: Doppelklicke auf den grünen Griff. Der Expression-Editor öffnet sich.

Den Abstand änderst du auch, wenn du in die Felder **X** und **Y** im Properties-Panel eine Zahl eingibst. Die Verbindung bleibt dabei erhalten.

Hinter jeder Verbindung steht eine Expression. 20 Pixel unter der Unterkante von `headline` sieht zum Beispiel so aus: `ADD(headline.bottom, 20)`. Schreibst du eine solche Expression selbst, zeigt das Werkzeug sie ebenfalls als Verbindung an.

## Mehr dazu

- [Dynamische Textlayouts mit Expressions](https://bluepic.io/de/help/expressions-and-logic/guide-dynamic-text-layouts)
- [Elemente gruppieren: zusammen bewegen und anordnen](https://bluepic.io/de/help/design-elements-and-tools/group-elements)
- [Layout-Raster nutzen: Elemente an Hilfslinien ausrichten](https://bluepic.io/de/help/design-elements-and-tools/layout-grid)
- [Expression-Editor verwenden](https://bluepic.io/de/help/expressions-and-logic/expression-tool)