{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_help-block-flexible-sections","screens":{"article_screen_help-block-flexible-sections":{"id":"article_screen_help-block-flexible-sections","name":"Flexible Sections — all settings","tags":["article"],"screenType":"FlexibleLayout","position":{"x":0,"y":0},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#F7F8FA"}},"insets":{"top":0,"end":0,"bottom":0,"start":0},"webViewBackgroundColor":"#F7F8FA"},"animated":false,"offlineFirst":true,"flexibleLayout":{"scrollable":true,"insets":{"top":44,"end":28,"bottom":56,"start":28},"sections":[{"id":"intro","order":0,"kind":"Text","label":"Intro","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Flexible Sections — every setting"},"kind":"static","appearance":{"align":"start","fontSize":28,"fontWeight":800,"lineHeight":34,"color":"#101828"}},"subtitle":{"translations":{"en":"The build-your-own screen — you stack sections (text, media, product catalog, buttons, lists…) and arrange them: add / reorder / rename / delete, set each section’s size, fill, alignment, border, padding and margin, control whole-screen scroll and padding, and link a button to a section (e.g. a Purchase Button to a Product Catalog). Each section type’s own content and styling lives in its dedicated block article. This guide documents every setting of the Flexible Sections block, grouped by area. Each setting matches a real control in the screen editor."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"fl-how-head","order":1,"kind":"Text","label":"How a Flexible Layout screen works","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"How a Flexible Layout screen works"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"fl-how-intro","order":2,"kind":"Text","label":"Composition intro","layout":{"heightKind":"auto","margin":{"top":4}},"textContent":{"subtitle":{"translations":{"en":"A Flexible Layout screen is one you build yourself: you add sections — text, media, a product catalog, buttons, lists and more — then stack, size and align them however you like. The settings below cover what is unique to assembling the screen; each section type’s own content and styling lives in its own guide (see the note at the end)."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"fl-link","order":3,"kind":"Text","label":"Link a button to a section","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Link a button to a section"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Some sections work together. For a paywall, add a Product Catalog section (the plans) and a Purchase Button section, then open the Purchase Button and pick the catalog in its “Linked to section” dropdown — now the button buys the plan the visitor selected in that catalog."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"fl-link-img","order":4,"kind":"Media","label":"Linking a Purchase Button to a Product Catalog","layout":{"heightKind":"fixed","heightValue":120,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/link-purchase-to-catalog.png","name":"The Purchase Button’s “Linked to section” dropdown, set to the Product Catalog section."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"fl-blocks-head","order":5,"kind":"Text","label":"Each section type has its own guide","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Each section type has its own guide"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"fl-blocks-note","order":6,"kind":"Text","label":"Embedded block links","layout":{"heightKind":"auto","margin":{"top":4}},"textContent":{"subtitle":{"translations":{"en":"A section’s own content and styling — Text, Media, Buttons, Options, Product Catalog and the rest — are documented once in their own articles and reused everywhere they appear, so nothing is duplicated. Links to each of those guides will be added here. The rest of this article covers only what is specific to a Flexible Layout screen: managing sections, their per-section layout, the whole-screen layout, and the sticky bar."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"section-context","order":7,"kind":"Media","label":"Flexible Sections in the editor","layout":{"heightKind":"fixed","heightValue":360,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/context-section.png","name":"The screen editor with the Flexible Sections section highlighted."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"section-context-cap","order":8,"kind":"Text","label":"Context caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Open the Flexible Sections section in the screen editor to configure its settings."},"kind":"static","appearance":{"align":"start","fontSize":13,"fontWeight":500,"lineHeight":19,"color":"#667085"}}}},{"id":"article-first-applies-to","order":9,"kind":"Text","label":"Applies to","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Applies to: Flexible Layout screens."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":25,"color":"#344054"}}}},{"id":"g-management-head","order":10,"kind":"Text","label":"Group: Building & arranging sections","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Building & arranging sections"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-flexiblesections-management-addsection","order":11,"kind":"Text","label":"Building & arranging sections · Add a new section","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Add a new section"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Use + Add to choose what kind of block to place on this FlexibleLayout screen: text, media, product catalog, button, purchase button, list, custom embed, text field, spacer, header, footer, or paywall header. Add sections in the same order a visitor should read them, then drag to reorder if the screen flow changes. Start with the biggest structure first — for example header, hero text/media, products, and CTA — then tune layout settings inside each section."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-management-addsection-img","order":12,"kind":"Media","label":"Add a new section","layout":{"heightKind":"fixed","heightValue":604,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/add-menu-add-section.png","name":"Where to find “Add a new section” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-management-screensettings","order":13,"kind":"Text","label":"Building & arranging sections · Open screen-level layout settings","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Open screen-level layout settings"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"The gear beside the Sections title opens settings for the whole FlexibleLayout screen, not for one individual section. Use it to control whether the full screen scrolls and how much padding the whole stack has from the screen edges. Open this before editing individual section padding when the entire screen feels too close to the phone edge or when you need a fixed, non-scrolling composition."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-management-screensettings-img","order":14,"kind":"Media","label":"Open screen-level layout settings","layout":{"heightKind":"fixed","heightValue":368,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-screen-settings.png","name":"Where to find “Open screen-level layout settings” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-management-reordersections","order":15,"kind":"Text","label":"Building & arranging sections · Reorder sections","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Reorder sections"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Drag the handle beside a section name to change the vertical reading order on the screen. The order here is the order visitors see in the preview and published flow, so keep the persuasion sequence clear: context first, offer/details next, then the CTA. After reordering, recheck fixed-height and flex settings because a section that worked in one position may need different spacing in another."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-management-reordersections-img","order":16,"kind":"Media","label":"Reorder sections","layout":{"heightKind":"fixed","heightValue":110,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-reorder.png","name":"Where to find “Reorder sections” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-management-sectionname","order":17,"kind":"Text","label":"Building & arranging sections · Rename a section for editing","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Rename a section for editing"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Click the pencil beside a section name to give it a clear internal label, such as Hero headline, Annual plan list, or Bottom CTA. This name helps editors understand the structure and is not shown to visitors. Rename repeated sections immediately so it is obvious which block you are opening, especially when several Text or Button sections exist on the same screen."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-management-sectionname-img","order":18,"kind":"Media","label":"Rename a section for editing","layout":{"heightKind":"fixed","heightValue":338,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-section-name.png","name":"Where to find “Rename a section for editing” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-management-deletesection","order":19,"kind":"Text","label":"Building & arranging sections · Delete a section","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Delete a section"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Use the trash icon to remove a section from the screen. Deleting also removes that section's content and can affect buttons linked to it, so confirm only after checking the preview and any parent-section links. If you are unsure, rename the section first or move it lower in the order while you verify the layout instead of deleting it immediately."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-management-deletesection-img","order":20,"kind":"Media","label":"Delete a section","layout":{"heightKind":"fixed","heightValue":338,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-delete.png","name":"Where to find “Delete a section” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-management-opensectionsettings","order":21,"kind":"Text","label":"Building & arranging sections · Open one section's settings","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Open one section's settings"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Click the gear inside a section card to open that section's own settings. The first panel controls the section container — height, flex, scrollability, background, borders, alignment, padding, and margin — and the panel below controls the section's content, such as text, media, products, or button styling. This is the main place to tune how one block looks and behaves."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-management-opensectionsettings-img","order":22,"kind":"Media","label":"Open one section's settings","layout":{"heightKind":"fixed","heightValue":366,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-open-settings.png","name":"Where to find “Open one section's settings” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-screen-head","order":23,"kind":"Text","label":"Group: Whole-screen layout","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Whole-screen layout"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-flexiblesections-content-flexiblelayout-scrollable","order":24,"kind":"Text","label":"Whole-screen layout · Let the whole screen scroll","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Let the whole screen scroll"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"When Scrollable screen is on, sections stack vertically and the visitor can scroll through them. Use this for long paywalls, product catalogs, benefit lists, or any screen with more content than fits on a phone. When it is off, the screen uses flexGrow and flexShrink to distribute sections inside one viewport, which is better for fixed hero layouts where the CTA should stay visible without scrolling."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-content-flexiblelayout-scrollable-img","order":25,"kind":"Media","label":"Let the whole screen scroll","layout":{"heightKind":"fixed","heightValue":264,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/screen-settings-scrollable.png","name":"Where to find “Let the whole screen scroll” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-content-flexiblelayout-insets","order":26,"kind":"Text","label":"Whole-screen layout · Space around the whole section stack","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space around the whole section stack"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Container padding adds space between the phone edges and all sections on the screen. It is different from Section padding: container padding moves the entire stack inward, while section padding adds space inside one selected section. Use container padding first when every block feels too close to the screen edge, then use per-section padding only where a specific block needs more breathing room."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-content-flexiblelayout-insets-img","order":27,"kind":"Media","label":"Space around the whole section stack","layout":{"heightKind":"fixed","heightValue":120,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/screen-settings-container-padding.png","name":"Where to find “Space around the whole section stack” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-layout-head","order":28,"kind":"Text","label":"Group: Per-section layout","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Per-section layout"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-flexiblesections-layout-heightkind","order":29,"kind":"Text","label":"Per-section layout · How tall this section is","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"How tall this section is"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Decides how the section's height is calculated. Auto (the safe default) makes it exactly as tall as its content, which is right for most text and buttons. Fixed lets you type an exact pixel height, and Percent sets it to a share of the screen, handy for a hero image that should always fill, say, the top 40 percent. Your pick also decides which value box below applies."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-heightkind-img","order":30,"kind":"Media","label":"How tall this section is","layout":{"heightKind":"fixed","heightValue":105,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-height-mode.png","name":"Where to find “How tall this section is” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-heightvalue","order":31,"kind":"Text","label":"Per-section layout · The height number","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"The height number"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"This is the number that pairs with your height mode. With Fixed mode, type pixels (0 to 1000, for example 320 for a tall hero); with Percent mode, type a share of the screen (0 to 100, for example 40). The box is ignored in Auto mode. For a scrollable section, this also sets the visible window the content scrolls inside."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-heightvalue-img","order":32,"kind":"Media","label":"The height number","layout":{"heightKind":"fixed","heightValue":102,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-height-value.png","name":"Where to find “The height number” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-flexgrow","order":33,"kind":"Text","label":"Per-section layout · Stretch to fill empty space","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Stretch to fill empty space"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Controls how much leftover vertical space a section soaks up so the screen has no awkward gap. 0 keeps a section at its natural size (the default for text and buttons); 1 or more lets it stretch, and a section set to 2 takes twice the extra space as one set to 1. Raise this on your image or hero section to push the button down to a comfortable spot. Only applies when the section isn't set to scroll."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-flexgrow-img","order":34,"kind":"Media","label":"Stretch to fill empty space","layout":{"heightKind":"fixed","heightValue":102,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-flex-grow.png","name":"Where to find “Stretch to fill empty space” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-flexshrink","order":35,"kind":"Text","label":"Per-section layout · Let it shrink on small screens","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Let it shrink on small screens"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Controls which section gives up height first when everything can't fit on a small phone. Higher numbers shrink sooner; 0 means never shrink this one. The default of 1 lets sections shrink evenly. Set 0 on must-stay pieces like the button or logo, and raise it on a less important section like a tall image, so the key content survives intact on the smallest screens."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-flexshrink-img","order":36,"kind":"Media","label":"Let it shrink on small screens","layout":{"heightKind":"fixed","heightValue":102,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-flex-shrink.png","name":"Where to find “Let it shrink on small screens” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-scrollable","order":37,"kind":"Text","label":"Per-section layout · Let this section scroll on its own","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Let this section scroll on its own"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Turn on to let a section scroll independently when its content is taller than the height you set (works only with a Fixed or Percent height, not Auto). Use it for a long list of terms or bullets you want capped inside a fixed window while the rest of the screen stays put. Leave off (the default) for normal sections that just sit in the layout."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-scrollable-img","order":38,"kind":"Media","label":"Let this section scroll on its own","layout":{"heightKind":"fixed","heightValue":105,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-scrollable.png","name":"Where to find “Let this section scroll on its own” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-zindex","order":39,"kind":"Text","label":"Per-section layout · Which section sits in front","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Which section sits in front"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"When two sections overlap, this decides which one shows on top. A higher number wins; the default 0 is fine as long as nothing overlaps. You only need it when you've deliberately layered sections, like a headline placed over a background image, so give the part you want visible the higher number."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-zindex-img","order":40,"kind":"Media","label":"Which section sits in front","layout":{"heightKind":"fixed","heightValue":102,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-z-index.png","name":"Where to find “Which section sits in front” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-background-kind","order":41,"kind":"Text","label":"Per-section layout · Solid color or image behind","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Solid color or image behind"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets what fills the area behind this section's content. Solid (the default) uses one color you pick below; Media places an image behind the content for a richer, ad-style look. If you go with Media and put text on top, keep the text readable with a darker image or an overlay so your value proposition doesn't get lost."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-background-kind-img","order":42,"kind":"Media","label":"Solid color or image behind","layout":{"heightKind":"fixed","heightValue":105,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-background-type.png","name":"Where to find “Solid color or image behind” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-background-color","order":43,"kind":"Text","label":"Per-section layout · Background fill color","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Background fill color"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the color behind this section's content, used when the background type is Solid. The default is white. Enter a hex code or pick a swatch, and keep it in line with your theme so the screen feels on-brand, with enough contrast against the text on top to stay readable."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-background-color-img","order":44,"kind":"Media","label":"Background fill color","layout":{"heightKind":"fixed","heightValue":128,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-background-color.png","name":"Where to find “Background fill color” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-cornerradius-uniform","order":45,"kind":"Text","label":"Per-section layout · Round the section corners","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Round the section corners"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Rounds all four corners of the section. The default 0 keeps them sharp and square; higher values (try 8 to 16) give a soft card look that pairs well with a solid background or border to make the section stand out as its own block. The range is 0 to 50 pixels."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-cornerradius-uniform-img","order":46,"kind":"Media","label":"Round the section corners","layout":{"heightKind":"fixed","heightValue":102,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-corner-radius.png","name":"Where to find “Round the section corners” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-border-width","order":47,"kind":"Text","label":"Per-section layout · Outline thickness","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Outline thickness"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Draws an outline around the section. The default 0 means no border; 1 to 2 pixels gives a subtle frame that makes a section read as a self-contained card or highlights an offer. Set this above 0 first, then pick the border color below."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-border-width-img","order":48,"kind":"Media","label":"Outline thickness","layout":{"heightKind":"fixed","heightValue":102,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-border-width.png","name":"Where to find “Outline thickness” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-border-color","order":49,"kind":"Text","label":"Per-section layout · Outline color","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Outline color"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the color of the section's outline. The default is black, and it only shows when the border thickness is above 0, so set a width first. Match it to one of your theme's accent colors for a clean, on-brand frame around the section."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-border-color-img","order":50,"kind":"Media","label":"Outline color","layout":{"heightKind":"fixed","heightValue":108,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-border-color.png","name":"Where to find “Outline color” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-alignment","order":51,"kind":"Text","label":"Per-section layout · Top, center, or bottom","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Top, center, or bottom"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Pins the content to the Top, Center, or Bottom of the section. It only changes anything when the section is taller than its content, for example with a Fixed or Percent height or a section stretched to fill space. Use Center to vertically center a headline in a tall hero, or Bottom to push a caption to the base of an image."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-alignment-img","order":52,"kind":"Media","label":"Top, center, or bottom","layout":{"heightKind":"fixed","heightValue":105,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-vertical-alignment.png","name":"Where to find “Top, center, or bottom” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-horizontalalignment","order":53,"kind":"Text","label":"Per-section layout · Left, center, or right","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Left, center, or right"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Positions the content along the section's width: Left, Center, or Right. Center is the usual choice for headlines and buttons, while Left reads more naturally for longer body copy. (Left and right follow text direction, so they flip on right-to-left languages.)"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-horizontalalignment-img","order":54,"kind":"Media","label":"Left, center, or right","layout":{"heightKind":"fixed","heightValue":105,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-horizontal-alignment.png","name":"Where to find “Left, center, or right” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-padding","order":55,"kind":"Text","label":"Per-section layout · Breathing room inside the section","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Breathing room inside the section"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Padding is the space inside a section, between its edges and the content sitting in it. Set Top, Bottom, Left, and Right independently, starting from 0. Add some so text and buttons don't crowd the section border or a background image; 16-24 px all around is a comfortable, readable starting point."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-padding-img","order":56,"kind":"Media","label":"Breathing room inside the section","layout":{"heightKind":"fixed","heightValue":189,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-padding.png","name":"Where to find “Breathing room inside the section” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-flexiblesections-layout-margin","order":57,"kind":"Text","label":"Per-section layout · Space between sections","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space between sections"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Margin is the gap outside a section, between it and the sections next to it. Set Top, Bottom, Left, and Right independently, using positive values to push sections apart. A negative top margin pulls a section up so it overlaps the one above — for example, a headline resting on a hero image; pair that with stacking order to control what sits in front."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-flexiblesections-layout-margin-img","order":58,"kind":"Media","label":"Space between sections","layout":{"heightKind":"fixed","heightValue":120,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-margin.png","name":"Where to find “Space between sections” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}}]}}}},"metadata":{"kind":"article","alias":"help-block-flexible-sections","articlePresentation":{"version":1,"profiles":{"standard":{"containerMaxWidth":640,"contentInsets":{"top":44,"end":28,"bottom":56,"start":28},"sectionPaddingScale":1,"textScale":1},"laptop":{"containerMaxWidth":620,"contentInsets":{"top":40,"end":28,"bottom":52,"start":28},"sectionPaddingScale":0.98,"textScale":0.98},"tablet":{"containerMaxWidth":560,"contentInsets":{"top":36,"end":24,"bottom":44,"start":24},"sectionPaddingScale":0.94,"textScale":0.95},"phone":{"containerMaxWidth":"100%","contentInsets":{"top":28,"end":16,"bottom":36,"start":16},"sectionPaddingScale":0.86,"textScale":0.9,"titleTextScale":0.86}}},"settingsMap":[{"fieldKey":"management.addSection","title":"Add a new section","sectionType":"flexibleSections","group":"management","guideKey":"screenedit-flexible-sections-add-section","editorTestId":"sections-add-menu","revealState":"add-menu","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/add-menu-add-section.png","articleSectionId":"set-flexiblesections-management-addsection","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Click \"+ Add\" to open the section-type menu.","postconditionTestId":"sections-add-menu"},{"to":"control","humanInstruction":"Find “Add a new section”.","postconditionTestId":"sections-add-menu"}]},{"fieldKey":"management.screenSettings","title":"Open screen-level layout settings","sectionType":"flexibleSections","group":"management","guideKey":"screenedit-flexible-sections-screen-settings","editorTestId":"flex-screen-settings-gear","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-screen-settings.png","articleSectionId":"set-flexiblesections-management-screensettings","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"control","humanInstruction":"Find “Open screen-level layout settings”.","postconditionTestId":"flex-screen-settings-gear"}]},{"fieldKey":"management.reorderSections","title":"Reorder sections","sectionType":"flexibleSections","group":"management","guideKey":"screenedit-flexible-sections-reorder-sections","editorTestId":"section-row-section-mqt9xu1x-gjdjp","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-reorder.png","articleSectionId":"set-flexiblesections-management-reordersections","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"control","humanInstruction":"Find “Reorder sections”.","postconditionTestId":"section-row-section-mqt9xu1x-gjdjp"}]},{"fieldKey":"management.sectionName","title":"Rename a section for editing","sectionType":"flexibleSections","group":"management","guideKey":"screenedit-flexible-sections-section-name","editorTestId":"section-row-edit-section-mqt9xu1x-gjdjp","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-section-name.png","articleSectionId":"set-flexiblesections-management-sectionname","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"control","humanInstruction":"Find “Rename a section for editing”.","postconditionTestId":"section-row-edit-section-mqt9xu1x-gjdjp"}]},{"fieldKey":"management.deleteSection","title":"Delete a section","sectionType":"flexibleSections","group":"management","guideKey":"screenedit-flexible-sections-delete-section","editorTestId":"section-row-delete-section-mqt9xu1x-gjdjp","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-delete.png","articleSectionId":"set-flexiblesections-management-deletesection","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"control","humanInstruction":"Find “Delete a section”.","postconditionTestId":"section-row-delete-section-mqt9xu1x-gjdjp"}]},{"fieldKey":"management.openSectionSettings","title":"Open one section's settings","sectionType":"flexibleSections","group":"management","guideKey":"screenedit-flexible-sections-open-section-settings","editorTestId":"section-row-settings-section-mqt9xu1x-gjdjp","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/open-section-open-settings.png","articleSectionId":"set-flexiblesections-management-opensectionsettings","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"control","humanInstruction":"Find “Open one section's settings”.","postconditionTestId":"section-row-settings-section-mqt9xu1x-gjdjp"}]},{"fieldKey":"content.flexibleLayout.scrollable","title":"Let the whole screen scroll","sectionType":"flexibleSections","group":"screen","guideKey":"screenedit-flexible-sections-screen-scrollable","editorTestId":"flex-screen-scrollable-toggle","revealState":"screen-settings","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/screen-settings-scrollable.png","articleSectionId":"set-flexiblesections-content-flexiblelayout-scrollable","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open the screen settings (the gear at the top of Flexible Sections).","postconditionTestId":"flex-screen-scrollable-toggle"},{"to":"control","humanInstruction":"Find “Let the whole screen scroll”.","postconditionTestId":"flex-screen-scrollable-toggle"}]},{"fieldKey":"content.flexibleLayout.insets","title":"Space around the whole section stack","sectionType":"flexibleSections","group":"screen","guideKey":"screenedit-flexible-sections-container-padding","editorTestId":"flex-screen-container-padding","revealState":"screen-settings","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/screen-settings-container-padding.png","articleSectionId":"set-flexiblesections-content-flexiblelayout-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open the screen settings (the gear at the top of Flexible Sections).","postconditionTestId":"flex-screen-scrollable-toggle"},{"to":"control","humanInstruction":"Find “Space around the whole section stack”.","postconditionTestId":"flex-screen-container-padding"}]},{"fieldKey":"layout.heightKind","title":"How tall this section is","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-height-mode","editorTestId":"layout-heightKind","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-height-mode.png","articleSectionId":"set-flexiblesections-layout-heightkind","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “How tall this section is”.","postconditionTestId":"layout-heightKind"}]},{"fieldKey":"layout.heightValue","title":"The height number","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-height-value","editorTestId":"layout-heightValue","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-height-value.png","articleSectionId":"set-flexiblesections-layout-heightvalue","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “The height number”.","postconditionTestId":"layout-heightValue"}]},{"fieldKey":"layout.flexGrow","title":"Stretch to fill empty space","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-flex-grow","editorTestId":"layout-flexGrow","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-flex-grow.png","articleSectionId":"set-flexiblesections-layout-flexgrow","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Stretch to fill empty space”.","postconditionTestId":"layout-flexGrow"}]},{"fieldKey":"layout.flexShrink","title":"Let it shrink on small screens","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-flex-shrink","editorTestId":"layout-flexShrink","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-flex-shrink.png","articleSectionId":"set-flexiblesections-layout-flexshrink","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Let it shrink on small screens”.","postconditionTestId":"layout-flexShrink"}]},{"fieldKey":"layout.scrollable","title":"Let this section scroll on its own","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-scrollable","editorTestId":"layout-scrollable","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-scrollable.png","articleSectionId":"set-flexiblesections-layout-scrollable","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Let this section scroll on its own”.","postconditionTestId":"layout-scrollable"}]},{"fieldKey":"layout.zIndex","title":"Which section sits in front","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-z-index","editorTestId":"layout-zIndex","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-z-index.png","articleSectionId":"set-flexiblesections-layout-zindex","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Which section sits in front”.","postconditionTestId":"layout-zIndex"}]},{"fieldKey":"layout.background.kind","title":"Solid color or image behind","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-background-type","editorTestId":"layout-background-kind","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-background-type.png","articleSectionId":"set-flexiblesections-layout-background-kind","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Solid color or image behind”.","postconditionTestId":"layout-background-kind"}]},{"fieldKey":"layout.background.color","title":"Background fill color","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-background-color","editorTestId":"field-layout.background.color","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-background-color.png","articleSectionId":"set-flexiblesections-layout-background-color","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Background fill color”.","postconditionTestId":"field-layout.background.color"}]},{"fieldKey":"layout.cornerRadius.uniform","title":"Round the section corners","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-corner-radius","editorTestId":"layout-cornerRadius-uniform","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-corner-radius.png","articleSectionId":"set-flexiblesections-layout-cornerradius-uniform","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Round the section corners”.","postconditionTestId":"layout-cornerRadius-uniform"}]},{"fieldKey":"layout.border.width","title":"Outline thickness","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-border-width","editorTestId":"layout-border-width","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-border-width.png","articleSectionId":"set-flexiblesections-layout-border-width","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Outline thickness”.","postconditionTestId":"layout-border-width"}]},{"fieldKey":"layout.border.color","title":"Outline color","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-border-color","editorTestId":"layout-border-color","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-border-color.png","articleSectionId":"set-flexiblesections-layout-border-color","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Outline color”.","postconditionTestId":"layout-border-color"}]},{"fieldKey":"layout.alignment","title":"Top, center, or bottom","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-vertical-alignment","editorTestId":"layout-alignment","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-vertical-alignment.png","articleSectionId":"set-flexiblesections-layout-alignment","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Top, center, or bottom”.","postconditionTestId":"layout-alignment"}]},{"fieldKey":"layout.horizontalAlignment","title":"Left, center, or right","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-horizontal-alignment","editorTestId":"layout-horizontalAlignment","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-horizontal-alignment.png","articleSectionId":"set-flexiblesections-layout-horizontalalignment","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Left, center, or right”.","postconditionTestId":"layout-horizontalAlignment"}]},{"fieldKey":"layout.padding","title":"Breathing room inside the section","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-padding","editorTestId":"flexible-section-layout-padding","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-padding.png","articleSectionId":"set-flexiblesections-layout-padding","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Breathing room inside the section”.","postconditionTestId":"flexible-section-layout-padding"}]},{"fieldKey":"layout.margin","title":"Space between sections","sectionType":"flexibleSections","group":"layout","guideKey":"screenedit-flexible-sections-margin","editorTestId":"flexible-section-layout-margin","revealState":"section-layout","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-flexible-sections-section/0.2.0/configure-flexible-sections-section-2026-06-25T11-45-54-259Z-f59098f0/section-layout-margin.png","articleSectionId":"set-flexiblesections-layout-margin","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Flexible Layout screen and find the Flexible Sections panel (the + Add button and the section list).","postconditionTestId":"sections-add-btn"},{"to":"panel","humanInstruction":"Open a section row gear and expand the Size & Flex / Appearance / Spacing & Alignment groups.","postconditionTestId":"layout-heightKind"},{"to":"control","humanInstruction":"Find “Space between sections”.","postconditionTestId":"flexible-section-layout-margin"}]}],"projectId":"arswew63RwQr6V4Ekb1Z","articleId":"help-block-flexible-sections"},"webViewDefaultBackgroundColor":"#F7F8FA","projectAnalytics":{"consentManagement":{"enabled":true,"bannerText":"We use cookies to improve your experience and analyze site usage.","privacyPolicyUrl":"","defaultConsent":"denied"},"integrations":[{"platform":"segmently_internal","name":"Segmently Analytics","enabled":true,"config":{"mode":"http"},"createdAt":"2026-05-26T13:53:00.398Z","updatedAt":"2026-05-26T13:53:00.398Z","id":"int_mpmp3jsm_aij2kz"}]}}