> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# "Anchor: Keep Layers Positioned Relative to Each Other"

When you send text of different lengths via the API, a text layer can grow or shrink. Layers placed below or next to it do not move by themselves, so they can overlap or leave a big gap.

**Anchor** solves this. You attach a layer (for example a subtitle, a button or a price) to a **target layer** (for example a title). When the target changes size, the anchored layer moves with it and keeps the same spacing.

Anchor is in **beta**. Results may vary with complex layouts, so test with short and long texts.

## Common uses

- A subtitle that always sits right **below** a title with autofit or variable length.
- A price tag or button that stays **below** a product description.
- An icon or label that stays **next to** a text that changes width.
- Two blocks of text (for example two languages) stacked with a fixed gap.

## How to anchor a layer

1. In the editor, select the layer that should move (for example `subtitle`).
2. Click the **anchor icon** in the toolbar ("Anchor Element").
3. Turn on the **Anchor Element** switch.
4. In **Target Element**, choose the layer it should follow (for example `title`).
5. In **Position**, choose where to place it relative to the target. There are 9 positions:
   - top-left, top-center, top-right
   - middle-left, center, middle-right
   - bottom-left, bottom-center (default), bottom-right
   For example, **bottom-center** places the layer below the target, centered horizontally.
6. Optional: set **Offset** (X Offset and Y Offset, in pixels) to add extra space. Use negative values to overlap.
7. Save the template.

Now test it: render the template with a longer and a shorter text for the target layer (Playground or API). The anchored layer follows the target.

To remove the anchor, select the layer, open the anchor menu and turn off the switch.

## Match font size (text layers)

When you anchor a text layer to another text layer **above or below** it (a top or bottom position), you also see **Match font size**. It resizes both text blocks to the same font size, fit to width, while keeping the fixed gap. This is useful for multi-language variants where both texts should look the same size.

## Rules and limits

- **The target must be a layer** on the same page (text, image, shape, vector, QR code and so on). You cannot anchor to a page or to a group, and you cannot anchor a group.
- **You can chain anchors.** For example: `subtitle` anchored below `title`, and `button` anchored below `subtitle`. When the title grows, both move down.
- **Anchor does not center a block on the page.** It keeps layers positioned relative to each other, not relative to the page. Vertically centering a whole group of variable-height layers on the page is not supported.
- Anchor follows the target's size and position. It works best together with text **autofit** on the target (see "Text That Grows: Autofit, Text Highlight and Partial Formatting").

## Using anchor with the API

You do not need any extra parameter. Set up the anchor once in the editor and save. Then send your texts as usual:

```json
{
  "template": "YOUR_TEMPLATE_ID",
  "layers": {
    "title": { "text": "A much longer title that wraps onto two lines" },
    "subtitle": { "text": "The subtitle stays right below the title" }
  }
}
```

## Troubleshooting

- **The anchored layer does not move:** check that the anchor switch is on and a Target Element is selected. Save the template and render again.
- **Layers overlap:** increase the Y Offset (for positions below) or X Offset (for positions to the side).
- **The target grows past the page:** limit the target text with autofit and `max_font_size`, or make the target layer box larger.
- **The result looks different from what you expected:** anchor is in beta. Send us the template ID and the payload in the chat and we will take a look.

## FAQ

Q: How do I keep a text below another text that changes size?
A: Select the lower layer, click the anchor icon in the toolbar, turn on Anchor Element, pick the upper layer as Target Element and choose bottom-center.

Q: Can I anchor a layer to a group or to the page?
A: No. The target must be a single layer on the same page.

Q: Can I anchor several layers in a chain?
A: Yes. Anchor each layer to the one above it.

Q: Can I vertically center a block of text on the page with anchor?
A: No. Anchor positions layers relative to another layer, not to the page.

Q: Do I need to send anything special in the API for anchor to work?
A: No. Configure it in the editor and send your layers as usual.