[{"data":1,"prerenderedAt":105},["ShallowReactive",2],{"help-article-\u002Fde\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts":3},{"id":4,"title":5,"body":6,"category":92,"description":93,"extension":94,"keywords":95,"meta":96,"navigation":97,"order":98,"path":99,"rawbody":100,"seo":101,"stem":102,"updated":103,"__hash__":104},"helpDe\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts.de.md","Guide: Dynamische Text-Layouts",{"type":7,"value":8,"toc":89},"minimark",[9,19,27,33,60,63,70],[10,11,12,13,18],"p",{},"Text in Bluepic passt seine Größe an und bricht um, um in seine Box zu passen, sodass du bei Inhalten aus einem ",[14,15,17],"a",{"href":16},"\u002Fhelp\u002Finput-fields\u002Ftext-input-fields","Inputfeld"," selten die endgültige Größe kennst. Expressions lassen den Rest des Layouts mitwandern, sodass sich nichts überlappt und die Abstände gleichmäßig bleiben.",[10,20,21,22,26],{},"Der Trick ist, Elemente relativ zueinander über ",[14,23,25],{"href":24},"\u002Fhelp\u002Fexpressions-and-logic\u002Felement-metadata-subproperties","Element-Maße"," zu positionieren, statt über feste Koordinaten.",[10,28,29],{},[30,31,32],"strong",{},"Beispiel: eine Caption, die einer Headline folgt.",[34,35,36,40,52],"ol",{},[37,38,39],"li",{},"Platziere deine Headline- und Caption-Textelemente.",[37,41,42,43,47,48,51],{},"Wähle die Caption aus und öffne das ",[14,44,46],{"href":45},"\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-tool","Expression-Tool"," auf ihrer ",[30,49,50],{},"Y","-Position.",[37,53,54,55,59],{},"Setze sie auf ",[56,57,58],"code",{},"headline.bottom + 20",".",[10,61,62],{},"Jetzt sitzt die Caption immer 20 Pixel unterhalb der Headline. Eine lange Headline schiebt die Caption nach unten, eine kurze zieht sie nach oben, und der Abstand bleibt gleich.",[10,64,65],{},[66,67],"img",{"alt":68,"src":69},"","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F8aba5b9e-8ba3-46c7-0f1b-c0be7f85ef00\u002Fmax",[10,71,72,73,76,77,80,81,84,85,88],{},"Du kannst das verketten: Gib einem dritten Element eine Y von ",[56,74,75],{},"caption.bottom + 20",", und der ganze Stapel fließt zusammen um. Dasselbe Prinzip funktioniert seitlich mit ",[56,78,79],{},"left"," und ",[56,82,83],{},"right",", zum Beispiel um ein Badge bei ",[56,86,87],{},"title.right + 10"," zu platzieren.",{"title":68,"searchDepth":90,"depth":90,"links":91},2,[],"expressions-and-logic","Baue Layouts, die automatisch umfließen, wenn Text länger oder kürzer wird.","md",[],{},true,70,"\u002Fhelp\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts.de","---\ntitle: \"Guide: Dynamische Text-Layouts\"\ndescription: \"Baue Layouts, die automatisch umfließen, wenn Text länger oder kürzer wird.\"\ncategory: expressions-and-logic\norder: 70\nkeywords: []\n---\nText in Bluepic passt seine Größe an und bricht um, um in seine Box zu passen, sodass du bei Inhalten aus einem [Inputfeld](\u002Fhelp\u002Finput-fields\u002Ftext-input-fields) selten die endgültige Größe kennst. Expressions lassen den Rest des Layouts mitwandern, sodass sich nichts überlappt und die Abstände gleichmäßig bleiben.\n\nDer Trick ist, Elemente relativ zueinander über [Element-Maße](\u002Fhelp\u002Fexpressions-and-logic\u002Felement-metadata-subproperties) zu positionieren, statt über feste Koordinaten.\n\n**Beispiel: eine Caption, die einer Headline folgt.**\n\n1. Platziere deine Headline- und Caption-Textelemente.\n2. Wähle die Caption aus und öffne das [Expression-Tool](\u002Fhelp\u002Fexpressions-and-logic\u002Fexpression-tool) auf ihrer **Y**-Position.\n3. Setze sie auf `headline.bottom + 20`.\n\nJetzt sitzt die Caption immer 20 Pixel unterhalb der Headline. Eine lange Headline schiebt die Caption nach unten, eine kurze zieht sie nach oben, und der Abstand bleibt gleich.\n\n![](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002F8aba5b9e-8ba3-46c7-0f1b-c0be7f85ef00\u002Fmax)\n\nDu kannst das verketten: Gib einem dritten Element eine Y von `caption.bottom + 20`, und der ganze Stapel fließt zusammen um. Dasselbe Prinzip funktioniert seitlich mit `left` und `right`, zum Beispiel um ein Badge bei `title.right + 10` zu platzieren.\n",{"title":5,"description":93},"help\u002Fexpressions-and-logic\u002Fguide-dynamic-text-layouts.de","2026-06-16","hktUM1LWNUmcwDZzBpP2Fi7_mUmd9lbDX3SGhI-29vY",1789381384535]