Stencil Documentation
  • General
  • API
    • Authentication
      • Account
    • Pagination
    • Status Code and Throttling
    • Endpoints
      • Projects
      • Templates
      • Images
      • Collections
      • PDFs
      • Airtable
    • Charts
  • Using Stencil
    • Template Editor (New)
    • Template Editor (Legacy)
      • Limited Markdown Supports
      • Anchoring Element
      • Using Custom Font
      • Circular Text Positioning
    • White Label for Business
      • Setting Up Your First Client
      • DNS Setup with Cloudflare
  • Guides
    • Airtable Integration
      • Basic
    • Integromat Integration
      • Connection
      • Instant Trigger
    • Zapier Integration
      • Authentication
      • Trigger - New Image
      • Action - Create Image
    • Secure Signed Image
      • Basic
    • Query String Integration
      • Basic
      • Cache
    • Forms Integration
    • Case Studies
      • Generate Instagram Post from WooCommerce
      • Generate Open Graph Image for WordPress
      • Generate Personalized SendGrid Email Campaigns
      • Sending Charts to Twitter
      • Generate Instagram Post from Shopify
      • Automating Webflow Open Graph Image
      • Generate certificate of accomplishment
      • Automate Candidate's Certificate Generation
  • LINKS
    • Back to Stencil
    • Got bug?
    • Need feature?
    • Blog
Powered by GitBook
On this page
  • Dynamically Positioning an Element
  • Anchor To feature
  • Understanding Anchor Positioning
  • Anchor X - Horizontal Positioning
  • Anchor Y - Vertical Positioning
  • Testing Your Design

Was this helpful?

  1. Using Stencil
  2. Template Editor (Legacy)

Anchoring Element

Anchor To feature in template editor

PreviousLimited Markdown SupportsNextUsing Custom Font

Last updated 3 years ago

Was this helpful?

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.

Currently this option is only available for Text but you can anchor it to any other elements. It will be available on other components soon.

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.

More options will pop out when anchor is selected
✅ Use per pax as the anchor of the price. The price can expand while per pax is fixed
❌ Bad choice of anchor can cause item to overflow unexpectedly