[{"data":1,"prerenderedAt":428},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool":3},{"id":4,"title":5,"body":6,"category":405,"description":406,"extension":407,"keywords":408,"meta":418,"navigation":419,"order":420,"path":421,"published":422,"rawbody":423,"seo":424,"stem":425,"updated":426,"__hash__":427},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool.md","Dynamic layouts with the anchoring tool",{"type":7,"value":8,"toc":398},"minimark",[9,18,21,51,56,210,224,228,282,286,345,359,370],[10,11,12,13,17],"p",{},"In the ",[14,15,16],"place",{},"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.",[10,19,20],{},"The tool has two modes, and you can change every connection afterwards:",[22,23,24,37,46],"ol",{},[25,26,27,28,31,32,36],"li",{},"Connect one edge to another edge on the ",[14,29,30],{},"canvas"," with ",[33,34,35],"strong",{},"Edges",".",[25,38,39,40,31,42,45],{},"Fit one element exactly onto another on the ",[14,41,30],{},[33,43,44],{},"Surfaces",", such as a background behind a text.",[25,47,48,49,36],{},"Change or remove a connection on the ",[14,50,30],{},[52,53,55],"h2",{"id":54},"connect-edge-to-edge","Connect edge to edge",[22,57,58,81,122,184,195,203],{},[25,59,60,64,65,68,69,71,72,75],{},[61,62,63],"click",{},"Click"," the anchor icon in the middle of the ",[14,66,67],{},"toolbar",". This is the anchoring tool. A bar appears at the top of the ",[14,70,30],{}," with the hint \"Select an element to use the anchoring tool\".",[73,74],"br",{},[76,77],"img",{"alt":78,"src":79,"width":80},"Toolbar with the anchoring tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-03\u002Fpublic",632,[25,82,83,85,86,88,89,92,93,95,96,98,99,101,102,115,117],{},[61,84,63],{}," the element that should move along. You can click it on the ",[14,87,30],{}," or in the ",[14,90,91],{},"layers panel",". ",[33,94,35],{}," and ",[33,97,44],{}," appear in the bar, and ",[33,100,35],{}," is already active. A small diamond now sits in the middle of each edge of your element.",[103,104,106],"trouble",{"symptom":105},"Edges and Surfaces don't appear?",[10,107,108,109,111,112,114],{},"The tool needs exactly one selected element. ",[61,110,63],{}," an element that is not selected in the ",[14,113,91],{}," first, then click your element.",[73,116],{},[76,118],{"alt":119,"src":120,"width":121},"Anchoring tool in Edges mode: a diamond sits in the middle of each edge of the selected name.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-05\u002Fpublic?v=9637848f",894,[25,123,124,128,129,131,132,136,137,140,141,178,180],{},[125,126,127],"drag",{},"Drag"," the diamond on one edge of your element onto an edge of another element or of the ",[14,130,30],{},". 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 ",[133,134,135],"code",{},".frame",", for example ",[133,138,139],{},"headline.frame.bottom",", it is the frame.",[103,142,144],{"symptom":143},"Your element doesn't connect?",[10,145,146,147,150,151,154,155,158,159,162,163,168,169,171,172,174,175,177],{},"Paths, masks and groups with ",[33,148,149],{},"Layout Mode"," ",[33,152,153],{},"None"," can't be anchored. Elements in a group with ",[33,156,157],{},"Column"," or ",[33,160,161],{},"Row"," are arranged by the group itself, so they can't be anchored either. More on this in ",[164,165,167],"a",{"href":166},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements","Group elements",". If your element sits in another group, a click on the ",[14,170,30],{}," selected the whole group: ",[61,173,61],{}," the element itself in the ",[14,176,91],{},". If the other element already follows your element, the tool doesn't offer its edges, because connections can't go in a circle.",[73,179],{},[76,181],{"alt":182,"src":183,"width":121},"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:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-04\u002Fpublic?v=ba6d549c",[25,185,186,188,189,191],{},[125,187,127],{}," 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.",[73,190],{},[76,192],{"alt":193,"src":194,"width":121},"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:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-06\u002Fpublic?v=3ee0a2c0",[25,196,197,150,199,202],{},[61,198,63],{},[33,200,201],{},"Cancel"," in the bar at the top. The anchoring tool is off again.",[25,204,205,209],{},[206,207,208],"look",{},"Check"," that your element behaves the way you want. For example, change the text or the size of the other element.",[211,212,213],"tip",{},[10,214,215,216,219,220,223],{},"Hold ",[33,217,218],{},"Alt"," (",[33,221,222],{},"Option"," on a Mac) to switch the anchoring tool on briefly. When you let go of the key, it switches off again.",[52,225,227],{"id":226},"fit-an-element-exactly-onto-another","Fit an element exactly onto another",[22,229,230,237,242,249,259,264,276],{},[25,231,232,64,234,236],{},[61,233,63],{},[14,235,67],{},". The anchoring tool is on.",[25,238,239,241],{},[61,240,63],{}," the element that should adapt, for example a rectangle as a background.",[25,243,244,150,246,248],{},[61,245,63],{},[33,247,44],{}," in the bar at the top.",[25,250,251,253,254,256,257,36],{},[125,252,127],{}," 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 ",[14,255,30],{},", it fills the whole canvas. Whether it sits in front of or behind the other element depends on the order in the ",[14,258,91],{},[25,260,261,263],{},[125,262,127],{}," a green handle on one of the edges to set the padding. All edges with a closed lock change together.",[25,265,266,268,269,271],{},[61,267,63],{}," 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.",[73,270],{},[76,272],{"alt":273,"src":274,"width":275},"Surfaces connection on the canvas: the box with green handles and lock icons on its edges.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-02\u002Fpublic",840,[25,277,278,150,280,202],{},[61,279,63],{},[33,281,201],{},[52,283,285],{"id":284},"change-or-remove-a-connection","Change or remove a connection",[22,287,288,293,303],{},[25,289,290,292],{},[61,291,63],{}," 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.",[25,294,295,299,300,302],{},[296,297,298],"hover",{},"Hover"," over the green handle. The gap appears next to it as a number, together with a trash can. With ",[33,301,44],{},", every edge has its own number and its own trash can.",[25,304,305,306],{},"Depending on what you want to change:",[307,308,309,328,336],"ul",{},[25,310,311,314,315,317,318,321,322,150,325,36],{},[312,313],"right",{}," Change the gap: ",[61,316,61],{}," the number, ",[319,320,319],"type",{}," a new value and ",[323,324,323],"press",{},[33,326,327],{},"Enter",[25,329,330,332,333,335],{},[312,331],{}," Remove the connection: ",[61,334,61],{}," the trash can. Your element stays where it is but no longer follows the other element.",[25,337,338,340,341,344],{},[312,339],{}," See the expression: ",[61,342,343],{},"double-click"," the green handle. The expression editor opens.",[10,346,347,348,95,351,354,355,358],{},"You also change the gap when you type a number into the ",[33,349,350],{},"X",[33,352,353],{},"Y"," fields in the ",[14,356,357],{},"properties panel",". The connection stays in place.",[10,360,361,362,365,366,369],{},"Every connection is an expression behind the scenes. 20 pixels below the bottom edge of ",[133,363,364],{},"headline"," looks like this: ",[133,367,368],{},"ADD(headline.bottom, 20)",". If you write such an expression yourself, the tool shows it as a connection too.",[371,372,373],"related",{},[307,374,375,381,386,392],{},[25,376,377],{},[164,378,380],{"href":379},"\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts","Dynamic text layouts with expressions",[25,382,383],{},[164,384,385],{"href":166},"Group elements: move and arrange them together",[25,387,388],{},[164,389,391],{"href":390},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayout-grid","Use the layout grid: line up elements on guide lines",[25,393,394],{},[164,395,397],{"href":396},"\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-tool","Use the expression editor",{"title":399,"searchDepth":400,"depth":400,"links":401},"",2,[402,403,404],{"id":54,"depth":400,"text":55},{"id":226,"depth":400,"text":227},{"id":284,"depth":400,"text":285},"design-elements-and-tools","Connect elements so they move along when text or sizes change.","md",[409,410,411,35,44,412,413,414,415,416,417],"anchor","Anchoring tool","anchoring tool","gap","padding","connection","dynamic layout","Abstand","Verankerung",{},true,45,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fanchoring-tool","2026-09-17","---\ntitle: \"Dynamic layouts with the anchoring tool\"\ndescription: \"Connect elements so they move along when text or sizes change.\"\ncategory: design-elements-and-tools\norder: 45\nkeywords: [\"anchor\", \"Anchoring tool\", \"anchoring tool\", \"Edges\", \"Surfaces\", \"gap\", \"padding\", \"connection\", \"dynamic layout\", \"Abstand\", \"Verankerung\"]\n---\n\nIn the :place[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.\n\nThe tool has two modes, and you can change every connection afterwards:\n\n1. Connect one edge to another edge on the :place[canvas] with **Edges**.\n2. Fit one element exactly onto another on the :place[canvas] with **Surfaces**, such as a background behind a text.\n3. Change or remove a connection on the :place[canvas].\n\n\n## Connect edge to edge\n\n1. :click[Click] the anchor icon in the middle of the :place[toolbar]. This is the anchoring tool. A bar appears at the top of the :place[canvas] with the hint \"Select an element to use the anchoring tool\".\n\n   ![Toolbar with the anchoring tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-03\u002Fpublic){width=\"632\"}\n\n2. :click[Click] the element that should move along. You can click it on the :place[canvas] or in the :place[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.\n\n   ::trouble{symptom=\"Edges and Surfaces don't appear?\"}\n   The tool needs exactly one selected element. :click[Click] an element that is not selected in the :place[layers panel] first, then click your element.\n   ::\n\n   ![Anchoring tool in Edges mode: a diamond sits in the middle of each edge of the selected name.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-05\u002Fpublic?v=9637848f){width=\"894\"}\n\n3. :drag[Drag] the diamond on one edge of your element onto an edge of another element or of the :place[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.\n\n   ::trouble{symptom=\"Your element doesn't connect?\"}\n   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](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements). If your element sits in another group, a click on the :place[canvas] selected the whole group: :click[click] the element itself in the :place[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.\n   ::\n\n   ![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:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-04\u002Fpublic?v=ba6d549c){width=\"894\"}\n\n4. :drag[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.\n\n   ![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:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-06\u002Fpublic?v=3ee0a2c0){width=\"894\"}\n\n5. :click[Click] **Cancel** in the bar at the top. The anchoring tool is off again.\n6. :look[Check] that your element behaves the way you want. For example, change the text or the size of the other element.\n\n::tip\nHold **Alt** (**Option** on a Mac) to switch the anchoring tool on briefly. When you let go of the key, it switches off again.\n::\n\n## Fit an element exactly onto another\n\n1. :click[Click] the anchor icon in the middle of the :place[toolbar]. The anchoring tool is on.\n2. :click[Click] the element that should adapt, for example a rectangle as a background.\n3. :click[Click] **Surfaces** in the bar at the top.\n4. :drag[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 :place[canvas], it fills the whole canvas. Whether it sits in front of or behind the other element depends on the order in the :place[layers panel].\n5. :drag[Drag] a green handle on one of the edges to set the padding. All edges with a closed lock change together.\n6. :click[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.\n\n   ![Surfaces connection on the canvas: the box with green handles and lock icons on its edges.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-anchoring-tool-02\u002Fpublic){width=\"840\"}\n\n7. :click[Click] **Cancel** in the bar at the top. The anchoring tool is off again.\n\n## Change or remove a connection\n\n1. :click[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.\n2. :hover[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.\n3. Depending on what you want to change:\n\n   - :right Change the gap: :click[click] the number, :type[type] a new value and :press[press] **Enter**.\n   - :right Remove the connection: :click[click] the trash can. Your element stays where it is but no longer follows the other element.\n   - :right See the expression: :click[double-click] the green handle. The expression editor opens.\n\nYou also change the gap when you type a number into the **X** and **Y** fields in the :place[properties panel]. The connection stays in place.\n\nEvery 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.\n\n::related\n- [Dynamic text layouts with expressions](\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts)\n- [Group elements: move and arrange them together](\u002Fhelp\u002Fdesign-elements-and-tools\u002Fgroup-elements)\n- [Use the layout grid: line up elements on guide lines](\u002Fhelp\u002Fdesign-elements-and-tools\u002Flayout-grid)\n- [Use the expression editor](\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-tool)\n::\n",{"title":5,"description":406},"help\u002Fdesign-elements-and-tools\u002Fanchoring-tool","2026-10-22","uwAxNL13XogqChC5JWYkHd3K_QHyhYNN1imCwWD9n6o",1792680561343]