← Expressions & logic

Dynamic text layouts with expressions

Last updated October 22, 2026

In the template editor, you use an expression to connect an element's position to a headline above it. When the headline gets longer in the design generator, the element moves along and the gap stays the same.

This takes two steps:

  1. Connect the position to the headline in the template editor.
  2. Test the layout in the design generator.

Connect the position to the headline

  1. Look up the headline's name in the layers panel. In this guide it is called headline. How to change a name is explained in The layers panel.
  2. Click the element that should sit below the headline, for example a caption, on the canvas or in the layers panel. The properties panel shows its properties.
  3. Click Origin Top under Origin in the properties panel. It is the first icon in the second block. Y now gives the top edge of the element.
    Position & Size of a selected text: Origin with its two button groups and Position X / Y below; Origin Top, the first button of the second group, is highlighted.
  4. Type headline.bottom + 20 into Y under Position. The element now sits 20 pixels below the bottom of the headline and moves along when the headline gets longer.
    The property turns red?

    While you type, that is normal. If it stays red at the end, Bluepic can't find a name. The message next to it names it, for example "headlin is not defined". Check upper and lower case. When you click somewhere else, Y shows the old value again.

    The element lands somewhere else entirely?

    If the two elements sit in different groups, each one measures its values from its own group. Put both in the same group, or both outside of groups. Or connect them with the anchoring tool. It takes groups into account by itself.


    Canvas: the lower text is connected to the bottom of the upper text with a gap.

You change the gap in the expression, for example to headline.bottom + 40. For a third element, use caption.bottom + 20 if the second one is called caption.

headline.bottom follows the visible text lines. To follow the text frame you drew instead, use headline.frame.bottom. Which other values there are is listed in Element values in expressions.

Test the layout in the design generator

The design generator is the page where users fill in your template and export their design. Here you can safely test how the layout reacts to long and short texts. For that, the headline needs an input field. How to create one is explained in Create an input field: let users change a text or image.

  1. Click Share at the top right and then Publish Template Link. A popup with the share settings opens. Your template can now be reached through a link.
  2. Click Copy URL and open the link in a new browser tab. The design generator opens.
  3. Type a long text that runs over several lines into the headline's input field. Check that the element below moves along and the gap stays the same.
  4. Type a short text. Check that the element moves back up.