Anchoring Element
Anchor To feature in template editor
Dynamically Positioning an Element
Sometimes there is a time that you need text to be dynamically positioned next to certain element. For example, in our template below we want the price "$399" to be anchored next to "per pax" text.
Given that the price will change based on input from API, it is hard to position this statically without causing overlap especially if the price text can be very long.
Anchor To feature
To solve this problem, we added Anchor To field where you can select layer that can be set as the anchor.
This option can be found in Textbox's settings,
Field
Description
Anchor To
Layer that you want your current text box to be anchored to
Anchor X
Horizontal positioning relative to the anchor
Anchor Y
Vertical positioning relative to the anchor
Offset X
Horizontal offset to be applied
Offset Y
Vertical offset to be applied
Offset is useful to fine tune the position to the pixel.
Understanding Anchor Positioning
Anchor X - Horizontal Positioning
Anchor Y - Vertical Positioning
Testing Your Design
To make sure your design will work well with your expected inputs, you can try to generate several images through Console. Alternatively, you could also type in the text to ensure the positions are correct.
Pro tips
Anchored element position is fixed. If you are trying to anchor anything that is close to the edge, use the element nearest to the edge as the anchor. Otherwise, your text will be out of the canvas area.
Last updated
Was this helpful?