{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_help-screen-flexiblelayout","screens":{"article_screen_help-screen-flexiblelayout":{"id":"article_screen_help-screen-flexiblelayout","name":"Flexible Layout screen","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 Layout screen"},"kind":"static","appearance":{"align":"start","fontSize":28,"fontWeight":800,"lineHeight":34,"color":"#101828"}},"subtitle":{"translations":{"en":"The Flexible Layout screen is built from the sections below. This overview shows what each section does and links to its full guide — open any section’s guide to see every setting it offers."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"block-flexiblesections-head","order":1,"kind":"Text","label":"Section: Flexible Sections","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Flexible Sections<sep>  —  </sep><detail>@details</detail>"},"kind":"static","appearance":{"align":"start","fontSize":22,"fontWeight":750,"lineHeight":28,"color":"#101828"},"templateParams":{"links":{"details":"https://help.segmently.ai/help-block-flexible-sections"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}},{"id":"block-flexiblesections-summary","order":2,"kind":"Text","label":"Flexible Sections summary","layout":{"heightKind":"auto","margin":{"top":4}},"textContent":{"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 product-aware sections (for example Text or Purchase Button) to a Product Catalog so labels and purchases follow the selected product. Each section type’s own content and styling lives in its dedicated block article."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"block-flexiblesections-thumb","order":3,"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 Flexible Sections section in the screen editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"block-backdrop-head","order":4,"kind":"Text","label":"Section: Background","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Background<sep>  —  </sep><detail>@details</detail>"},"kind":"static","appearance":{"align":"start","fontSize":22,"fontWeight":750,"lineHeight":28,"color":"#101828"},"templateParams":{"links":{"details":"https://help.segmently.ai/help-block-background"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}},{"id":"block-backdrop-summary","order":5,"kind":"Text","label":"Background summary","layout":{"heightKind":"auto","margin":{"top":4}},"textContent":{"subtitle":{"translations":{"en":"What fills the whole screen behind your content: a solid color, a photo, or a looping video."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"block-backdrop-thumb","order":6,"kind":"Media","label":"Background 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-backdrop-section/0.2.0/configure-backdrop-section-2026-06-22T18-40-09-187Z-2fd3bd10/context-section.png","name":"The Background section in the screen editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"block-stickycontainer-head","order":7,"kind":"Text","label":"Section: Sticky Container","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Sticky Container<sep>  —  </sep><detail>@details</detail>"},"kind":"static","appearance":{"align":"start","fontSize":22,"fontWeight":750,"lineHeight":28,"color":"#101828"},"templateParams":{"links":{"details":"https://help.segmently.ai/help-block-sticky-container"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}},{"id":"block-stickycontainer-summary","order":8,"kind":"Text","label":"Sticky Container summary","layout":{"heightKind":"auto","margin":{"top":4}},"textContent":{"subtitle":{"translations":{"en":"A floating bar pinned to the bottom of a Flexible Layout screen so the main button stays visible and tappable while content scrolls — its background bar (colour, opacity, corner radius, outline), the spacing from the edges and around the button, and whether it holds a standard or purchase button."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"block-stickycontainer-thumb","order":9,"kind":"Media","label":"Sticky Container 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-sticky-container-section/0.2.0/configure-sticky-container-section-2026-06-25T09-27-11-795Z-a7e51f3e/context-section.png","name":"The Sticky Container section in the screen editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"block-animation-head","order":10,"kind":"Text","label":"Section: Animation","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Animation<sep>  —  </sep><detail>@details</detail>"},"kind":"static","appearance":{"align":"start","fontSize":22,"fontWeight":750,"lineHeight":28,"color":"#101828"},"templateParams":{"links":{"details":"https://help.segmently.ai/help-block-animation"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}},{"id":"block-animation-summary","order":11,"kind":"Text","label":"Animation summary","layout":{"heightKind":"auto","margin":{"top":4}},"textContent":{"subtitle":{"translations":{"en":"How the screen's standard elements (header, image or video, title and subtitle, choices or bullets, paywall products, action bar) animate in when it opens — style, speed, stagger, easing, and per-element overrides, which take priority over the theme's default motion."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"block-animation-thumb","order":12,"kind":"Media","label":"Animation 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-animation-section/0.1.0/configure-animation-section-2026-09-29T22-11-34-795Z-8a4f394c/context-section.png","name":"The Animation section in the screen editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}}]}}}},"metadata":{"kind":"article","alias":"help-screen-flexiblelayout","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}}},"projectId":"arswew63RwQr6V4Ekb1Z","articleId":"help-screen-flexiblelayout","seo":{"publisherName":"Segmently"}},"webViewDefaultBackgroundColor":"#F7F8FA","articleRuntime":{"siteOrigin":"https://help.segmently.ai","byline":{"name":"Segmently","datePublished":"2026-09-30T00:42:32.860Z","dateModified":"2026-09-30T00:42:32.860Z","readingMinutes":2}},"projectAnalytics":{"integrations":[{"enabled":true,"config":{"mode":"http"},"platform":"segmently_internal","createdAt":"2026-05-26T13:53:00.398Z","name":"Segmently Analytics","updatedAt":"2026-09-27T21:22:36.598Z","id":"int_mpmp3jsm_aij2kz"}],"consentManagement":{"privacyPolicyUrl":"","bannerText":"We use cookies to improve your experience and analyze site usage.","defaultConsent":"denied","enabled":true}}}