← Expressions & Logik

Dynamische Textlayouts mit Expressions

Zuletzt aktualisiert 22. Oktober 2026

Im Template-Editor verbindest du mit einer Expression die Position eines Elements mit einer Überschrift darüber. Wird die Überschrift im Design-Generator länger, rutscht das Element mit, und der Abstand bleibt gleich.

Das geht in zwei Schritten:

  1. Verbinde die Position mit der Überschrift im Template-Editor.
  2. Teste das Layout im Design-Generator.

Position mit der Überschrift verbinden

  1. Schau im Layers-Panel nach dem Namen der Überschrift. In dieser Anleitung heißt sie headline. Wie du einen Namen änderst, steht in Das Layers-Panel.
  2. Klicke auf dem Canvas oder im Layers-Panel auf das Element, das unter der Überschrift stehen soll, zum Beispiel eine Caption. Das Properties-Panel zeigt seine Eigenschaften.
  3. Klicke im Properties-Panel unter Origin auf Origin Top. Das ist im zweiten Block das erste Symbol. Y gibt jetzt die Oberkante des Elements an.
    Position & Size eines ausgewählten Textes: Origin mit seinen zwei Button-Gruppen, darunter Position X / Y; Origin Top, der erste Button der zweiten Gruppe, ist markiert.
  4. Gib unter Position bei Y headline.bottom + 20 ein. Das Element sitzt jetzt 20 Pixel unter der Unterkante der Überschrift und rutscht mit, wenn sie länger wird.
    Die Eigenschaft wird rot?

    Während du tippst, ist das normal. Bleibt sie am Ende rot, findet Bluepic einen Namen nicht. Die Meldung daneben nennt ihn, zum Beispiel „headlin is not defined“. Achte auf Groß- und Kleinschreibung. Klickst du woanders hin, steht bei Y wieder der alte Wert.

    Das Element landet an einer ganz anderen Stelle?

    Liegen die beiden Elemente in verschiedenen Gruppen, misst jedes seine Werte von seiner eigenen Gruppe aus. Lege beide in dieselbe Gruppe oder beide außerhalb von Gruppen. Oder verbinde sie mit dem Anchoring-Werkzeug. Es rechnet Gruppen selbst ein.


    Canvas: Der untere Text ist mit Abstand an die Unterkante des oberen Textes gebunden.

Den Abstand änderst du in der Expression, zum Beispiel auf headline.bottom + 40. Für ein drittes Element nimmst du caption.bottom + 20, wenn das zweite caption heißt.

headline.bottom folgt den sichtbaren Textzeilen. Willst du dem Textrahmen folgen, den du aufgezogen hast, nimm headline.frame.bottom. Welche Werte es noch gibt, steht in Werte von Elementen in Expressions.

Layout im Design-Generator testen

Der Design-Generator ist die Seite, auf der Nutzer dein Template ausfüllen und ihr Design exportieren können. Hier testest du gefahrlos, wie das Layout auf lange und kurze Texte reagiert. Dafür braucht die Überschrift ein Input-Feld. Wie du eines erstellst, steht in Input-Feld erstellen: Text oder Bild änderbar machen.

  1. Klicke oben rechts auf Share und dann auf Publish Template Link. Ein Popup mit den Share-Einstellungen öffnet sich. Dein Template ist jetzt über einen Link erreichbar.
  2. Klicke auf Copy URL und öffne den Link in einem neuen Browser-Tab. Der Design-Generator öffnet sich.
  3. Gib in das Input-Feld der Überschrift einen langen Text ein, der über mehrere Zeilen geht. Prüfe, ob das Element darunter mitrutscht und der Abstand gleich bleibt.
  4. Gib einen kurzen Text ein. Prüfe, ob das Element wieder nach oben rückt.