{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_help-block-stepper","screens":{"article_screen_help-block-stepper":{"id":"article_screen_help-block-stepper","name":"Stepper — 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":"Stepper — every setting"},"kind":"static","appearance":{"align":"start","fontSize":28,"fontWeight":800,"lineHeight":34,"color":"#101828"}},"subtitle":{"translations":{"en":"An auto-advancing progress bar that steps through segments — the progress layout, total playback time, the bar’s colours / thickness / padding, the media-area split, and each step’s title / subtitle / description / image styles. This guide documents every setting of the Stepper 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":"section-context","order":1,"kind":"Media","label":"Stepper 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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/context-section.png","name":"The screen editor with the Stepper section highlighted."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"section-context-cap","order":2,"kind":"Text","label":"Context caption","layout":{"heightKind":"auto"},"textContent":{"subtitle":{"translations":{"en":"Open the Stepper 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":3,"kind":"Text","label":"Applies to","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Applies to: Progress Steps screens."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":25,"color":"#344054"}}}},{"id":"g-layout-head","order":4,"kind":"Text","label":"Group: Progress layout & playback","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Progress layout & playback"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-stepper-kind","order":5,"kind":"Text","label":"Progress layout & playback · Select progress stepper layout","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Select progress stepper layout"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Determines the visual layout for progress steps. Circle displays steps as an orbital arrangement (no image container); Image Container First and Chart Container First show image/text in a container with progress bar. Defines which content elements are shown in each segment (image visibility, title, subtitle, description)."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-kind-img","order":6,"kind":"Media","label":"Select progress stepper layout","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/open-section-kind.png","name":"Where to find “Select progress stepper layout” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-timer-duration","order":7,"kind":"Text","label":"Progress layout & playback · How long the progress runs","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"How long the progress runs"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Total time, in seconds (1-120), for the progress sequence to advance through all its steps before the screen continues. Aim for about 4-8 seconds: long enough to feel like real work is happening for the user, short enough to avoid drop-off. Use the play/pause preview to test the pacing against your step text."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-timer-duration-img","order":8,"kind":"Media","label":"How long the progress runs","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/open-section-duration.png","name":"Where to find “How long the progress runs” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-bar-head","order":9,"kind":"Text","label":"Group: Progress bar styles","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Progress bar styles"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-stepper-appearance-trackcolor","order":10,"kind":"Text","label":"Progress bar styles · Color of the empty track","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Color of the empty track"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Color of the unfilled part of the progress bar — the portion not yet completed. Defaults to light gray (#E0E0E0), which works for most screens. Keep it clearly lighter than the fill color so the user can read their progress at a glance, or match your page background for a subtler look."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-appearance-trackcolor-img","order":11,"kind":"Media","label":"Color of the empty track","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-track-color.png","name":"Where to find “Color of the empty track” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-appearance-fillcolor","order":12,"kind":"Text","label":"Progress bar styles · Color of the completed portion","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Color of the completed portion"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Color of the filled part of the progress bar that grows as the sequence advances, signaling completion to the user. Defaults to green (#4CAF50). Use your brand accent or a clearly positive color, and keep strong contrast against the empty track so progress reads instantly."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-appearance-fillcolor-img","order":13,"kind":"Media","label":"Color of the completed portion","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-fill-color.png","name":"Where to find “Color of the completed portion” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-appearance-thickness","order":14,"kind":"Text","label":"Progress bar styles · How thick the progress bar is","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"How thick the progress bar is"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Height of the filled bar in pixels (0-50, default 4px). 4-8px reads as a clean, modern bar; go thicker only for a bold, attention-grabbing indicator. Set it equal to or greater than the track thickness so the fill sits flush over the track instead of looking sunken."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-appearance-thickness-img","order":15,"kind":"Media","label":"How thick the progress bar is","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-thickness.png","name":"Where to find “How thick the progress bar is” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-appearance-trackthickness","order":16,"kind":"Text","label":"Progress bar styles · How thick the empty track is","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"How thick the empty track is"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Height of the background track in pixels (0-50, default 4px). Keep it equal to the fill thickness for a standard flat bar — the safe choice for most screens. Make it larger than the fill only if you want a recessed groove look, since mismatched values change how the fill sits inside the track."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-appearance-trackthickness-img","order":17,"kind":"Media","label":"How thick the empty track is","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-track-thickness.png","name":"Where to find “How thick the empty track is” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-layout-insets","order":18,"kind":"Text","label":"Progress bar styles · Space around the progress bar","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space around the progress bar"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the empty space, in pixels, on each side of the progress bar: top, right, bottom, left. The default is usually 0 for a tight bar that sits close to your content; add top and bottom padding to give it room from the title or image above and below. On an ad funnel a progress bar with a little breathing room reads as a quick, low-effort flow, which keeps people moving forward."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-layout-insets-img","order":19,"kind":"Media","label":"Space around the progress bar","layout":{"heightKind":"fixed","heightValue":231,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-bar-padding.png","name":"Where to find “Space around the progress bar” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-container-head","order":20,"kind":"Text","label":"Group: Media area sizing","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Media area sizing"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-stepper-appearance-dimensions-heightpercentage","order":21,"kind":"Text","label":"Media area sizing · Split between media and progress","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Split between media and progress"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Percentage of the screen's vertical space (0-100, default 50%) given to the image/text area; the rest goes to the progress area. Raise it above 50% when your image or step text needs more room, or lower it to make the progress bar more prominent. This appears only for the Image First or Chart First layouts and is hidden for the orbital Circle layout."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-appearance-dimensions-heightpercentage-img","order":22,"kind":"Media","label":"Split between media and progress","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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-container-height.png","name":"Where to find “Split between media and progress” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"g-segments-head","order":23,"kind":"Text","label":"Group: Step text & image styles","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Step text & image styles"},"kind":"static","appearance":{"align":"start","fontSize":19,"fontWeight":750,"lineHeight":26,"color":"#101828"}}}},{"id":"set-stepper-items-0-content-title-appearance","order":24,"kind":"Text","label":"Step text & image styles · Configure segment title text","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Configure segment title text"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Text styling for segment titles including font size, weight, family, color, line height, and letter spacing. Title text is editable per segment with template variable support (@variable, @link, @countdown)."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-title-appearance-img","order":25,"kind":"Media","label":"Configure segment title text","layout":{"heightKind":"fixed","heightValue":524,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-title-styles.png","name":"Where to find “Configure segment title text” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-font-size","order":26,"kind":"Text","label":"Configure segment title text · Font size","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font size"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Text size (px) of the step title."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-font-weight","order":27,"kind":"Text","label":"Configure segment title text · Font weight","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font weight"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How bold the title is."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-text-color","order":28,"kind":"Text","label":"Configure segment title text · Text color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Title color."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-text-align","order":29,"kind":"Text","label":"Configure segment title text · Text align","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text align"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Left, center, or right alignment of the title."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-line-height","order":30,"kind":"Text","label":"Configure segment title text · Line height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Line height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Vertical spacing between title lines."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-background-color","order":31,"kind":"Text","label":"Configure segment title text · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fill drawn behind the title text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-background-opacity","order":32,"kind":"Text","label":"Configure segment title text · Background opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Transparency of that title background (0–100%)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-appearance-prop-background-radius","order":33,"kind":"Text","label":"Configure segment title text · Background radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Corner rounding of the title background."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-title-layout-insets","order":34,"kind":"Text","label":"Step text & image styles · Space around the title","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space around the title"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the empty space, in pixels, on each side of the step title: top, right, bottom, left. The default is usually 0; add bottom padding to separate the title from the subtitle below, or side padding to keep long titles off the screen edges. A clear, uncrowded title is the first thing visitors read, so the small spacing tweak helps them grasp the offer fast and stay in the funnel."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-title-layout-insets-img","order":35,"kind":"Media","label":"Space around the title","layout":{"heightKind":"fixed","heightValue":208,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-title-padding.png","name":"Where to find “Space around the title” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-subtitle-appearance","order":36,"kind":"Text","label":"Step text & image styles · Configure segment subtitle text","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Configure segment subtitle text"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Text styling for segment subtitles including font size, weight, family, color, line height, and letter spacing. Subtitle text is editable per segment with template variable support."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-img","order":37,"kind":"Media","label":"Configure segment subtitle text","layout":{"heightKind":"fixed","heightValue":619,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-subtitle-styles.png","name":"Where to find “Configure segment subtitle text” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-font-size","order":38,"kind":"Text","label":"Configure segment subtitle text · Font size","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font size"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Text size (px) of the step subtitle."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-font-weight","order":39,"kind":"Text","label":"Configure segment subtitle text · Font weight","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font weight"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How bold the subtitle is."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-text-color","order":40,"kind":"Text","label":"Configure segment subtitle text · Text color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Subtitle color."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-text-align","order":41,"kind":"Text","label":"Configure segment subtitle text · Text align","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text align"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Left, center, or right alignment of the subtitle."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-line-height","order":42,"kind":"Text","label":"Configure segment subtitle text · Line height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Line height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Vertical spacing between subtitle lines."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-background-color","order":43,"kind":"Text","label":"Configure segment subtitle text · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fill drawn behind the subtitle text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-background-opacity","order":44,"kind":"Text","label":"Configure segment subtitle text · Background opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Transparency of that subtitle background (0–100%)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-appearance-prop-background-radius","order":45,"kind":"Text","label":"Configure segment subtitle text · Background radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Corner rounding of the subtitle background."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-subtitle-layout-insets","order":46,"kind":"Text","label":"Step text & image styles · Space around the subtitle","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space around the subtitle"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the empty space, in pixels, on each side of the step subtitle: top, right, bottom, left. The default is usually 0; add top padding to set the subtitle off from the title above and bottom padding to separate it from the description below. Adjust it only when the subtitle feels cramped against neighboring text, so the supporting line stays easy to scan and reinforces your pitch."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-subtitle-layout-insets-img","order":47,"kind":"Media","label":"Space around the subtitle","layout":{"heightKind":"fixed","heightValue":231,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-subtitle-padding.png","name":"Where to find “Space around the subtitle” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-description-appearance","order":48,"kind":"Text","label":"Step text & image styles · Configure segment description text","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Configure segment description text"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Text styling for segment descriptions including font size, weight, family, color, line height, and letter spacing. Description text is editable per segment with template variable support."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-description-appearance-img","order":49,"kind":"Media","label":"Configure segment description text","layout":{"heightKind":"fixed","heightValue":523,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-description-styles.png","name":"Where to find “Configure segment description text” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-font-size","order":50,"kind":"Text","label":"Configure segment description text · Font size","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font size"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Text size (px) of the step description."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-font-weight","order":51,"kind":"Text","label":"Configure segment description text · Font weight","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Font weight"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How bold the description is."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-text-color","order":52,"kind":"Text","label":"Configure segment description text · Text color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Description color."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-text-align","order":53,"kind":"Text","label":"Configure segment description text · Text align","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Text align"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Left, center, or right alignment of the description."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-line-height","order":54,"kind":"Text","label":"Configure segment description text · Line height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Line height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Vertical spacing between description lines."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-background-color","order":55,"kind":"Text","label":"Configure segment description text · Background color","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background color"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Fill drawn behind the description text."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-background-opacity","order":56,"kind":"Text","label":"Configure segment description text · Background opacity","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background opacity"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Transparency of that description background (0–100%)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-appearance-prop-background-radius","order":57,"kind":"Text","label":"Configure segment description text · Background radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Background radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Corner rounding of the description background."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-description-layout-insets","order":58,"kind":"Text","label":"Step text & image styles · Space around the description","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space around the description"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the empty space, in pixels, on each side of the step description: top, right, bottom, left. The default is usually 0; add top padding to separate the description from the subtitle above, or side padding to keep multi-line text off the screen edges. Comfortable spacing makes longer copy easy to read, which keeps visitors absorbing your value and tapping through."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-description-layout-insets-img","order":59,"kind":"Media","label":"Space around the description","layout":{"heightKind":"fixed","heightValue":207,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-description-padding.png","name":"Where to find “Space around the description” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-image-appearance","order":60,"kind":"Text","label":"Step text & image styles · Style the step image","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Style the step image"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Controls how each step's image looks: how it scales (fill = cover the box and crop overflow, fit = show the whole image with possible gaps, crop, or tile to repeat), corner rounding, width and height, and tile repeat. Use fit for logos or illustrations you don't want cropped, and fill for photos that should fully cover the box. This appears only for the Image First or Chart First layouts and is hidden for the orbital Circle layout."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-image-appearance-img","order":61,"kind":"Media","label":"Style the step image","layout":{"heightKind":"fixed","heightValue":507,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-image-styles.png","name":"Where to find “Style the step image” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"set-stepper-items-0-content-image-appearance-prop-image-width","order":62,"kind":"Text","label":"Style the step image · Image width","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Image width"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Width (px) of each step's image."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-image-appearance-prop-image-height","order":63,"kind":"Text","label":"Style the step image · Image height","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Image height"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"Height (px) of each step's image."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-image-appearance-prop-scale-mode","order":64,"kind":"Text","label":"Style the step image · Scale mode","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Scale mode"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How the image fills its box: Fit shows the whole image, Fill covers the box (edges may crop), Crop trims to the box, Tile repeats it."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-image-appearance-prop-corner-radius","order":65,"kind":"Text","label":"Style the step image · Corner radius","layout":{"heightKind":"auto","margin":{"top":10}},"textContent":{"title":{"translations":{"en":"• Corner radius"},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":700,"lineHeight":21,"color":"#344054"}},"subtitle":{"translations":{"en":"How rounded the image corners are (px)."},"kind":"static","appearance":{"align":"start","fontSize":14,"fontWeight":400,"lineHeight":21,"color":"#667085"}}}},{"id":"set-stepper-items-0-content-image-layout-insets","order":66,"kind":"Text","label":"Step text & image styles · Space around the image","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Space around the image"},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":650,"lineHeight":24,"color":"#172033"}},"subtitle":{"translations":{"en":"Sets the empty space, in pixels, on each side of the step image: top, right, bottom, left. The default is usually 0; add padding so the image does not touch the title or screen edges and sits balanced in its container. A well-framed visual carries the emotional pull on an ad landing page, so adjust this when the image looks cramped or off-center. This control appears only for the Image First or Chart First layouts."},"kind":"static","appearance":{"align":"start","fontSize":15,"fontWeight":400,"lineHeight":23,"color":"#475467"}}}},{"id":"set-stepper-items-0-content-image-layout-insets-img","order":67,"kind":"Media","label":"Space around the image","layout":{"heightKind":"fixed","heightValue":231,"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-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-image-padding.png","name":"Where to find “Space around the image” in the editor."}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}}]}}}},"metadata":{"kind":"article","alias":"help-block-stepper","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":"kind","title":"Select progress stepper layout","sectionType":"stepper","group":"layout","guideKey":"screenedit-stepper-kind","editorTestId":"stepper-kind-select","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/open-section-kind.png","articleSectionId":"set-stepper-kind","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"control","humanInstruction":"Find “Select progress stepper layout”.","postconditionTestId":"stepper-kind-select"}]},{"fieldKey":"timer.duration","title":"How long the progress runs","sectionType":"stepper","group":"layout","guideKey":"screenedit-stepper-timer-duration","editorTestId":"stepper-timer-input","revealState":"open-section","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/open-section-duration.png","articleSectionId":"set-stepper-timer-duration","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"control","humanInstruction":"Find “How long the progress runs”.","postconditionTestId":"stepper-timer-input"}]},{"fieldKey":"appearance.trackColor","title":"Color of the empty track","sectionType":"stepper","group":"bar","guideKey":"screenedit-stepper-track-color","editorTestId":"field-content.stepper.appearance.trackColor","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-track-color.png","articleSectionId":"set-stepper-appearance-trackcolor","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Color of the empty track”.","postconditionTestId":"field-content.stepper.appearance.trackColor"}]},{"fieldKey":"appearance.fillColor","title":"Color of the completed portion","sectionType":"stepper","group":"bar","guideKey":"screenedit-stepper-fill-color","editorTestId":"field-content.stepper.appearance.fillColor","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-fill-color.png","articleSectionId":"set-stepper-appearance-fillcolor","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Color of the completed portion”.","postconditionTestId":"field-content.stepper.appearance.fillColor"}]},{"fieldKey":"appearance.thickness","title":"How thick the progress bar is","sectionType":"stepper","group":"bar","guideKey":"screenedit-stepper-thickness","editorTestId":"field-content.stepper.appearance.thickness","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-thickness.png","articleSectionId":"set-stepper-appearance-thickness","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “How thick the progress bar is”.","postconditionTestId":"field-content.stepper.appearance.thickness"}]},{"fieldKey":"appearance.trackThickness","title":"How thick the empty track is","sectionType":"stepper","group":"bar","guideKey":"screenedit-stepper-track-thickness","editorTestId":"field-content.stepper.appearance.trackThickness","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-track-thickness.png","articleSectionId":"set-stepper-appearance-trackthickness","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “How thick the empty track is”.","postconditionTestId":"field-content.stepper.appearance.trackThickness"}]},{"fieldKey":"layout.insets","title":"Space around the progress bar","sectionType":"stepper","group":"bar","guideKey":"screenedit-stepper-progress-bar-padding","editorTestId":"padding-content.stepper.layout.insets","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-bar-padding.png","articleSectionId":"set-stepper-layout-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Space around the progress bar”.","postconditionTestId":"padding-content.stepper.layout.insets"}]},{"fieldKey":"appearance.dimensions.heightPercentage","title":"Split between media and progress","sectionType":"stepper","group":"container","guideKey":"screenedit-stepper-container-height","editorTestId":"field-content.stepper.appearance.dimensions.heightPercentage","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-container-height.png","articleSectionId":"set-stepper-appearance-dimensions-heightpercentage","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Split between media and progress”.","postconditionTestId":"field-content.stepper.appearance.dimensions.heightPercentage"}]},{"fieldKey":"items.0.content.title.appearance","title":"Configure segment title text","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-title-styles","editorTestId":"style-section-titleStyles","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-title-styles.png","articleSectionId":"set-stepper-items-0-content-title-appearance","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Configure segment title text”.","postconditionTestId":"style-section-titleStyles"}]},{"fieldKey":"items.0.content.title.layout.insets","title":"Space around the title","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-title-padding","editorTestId":"padding-content.stepper.items.0.content.title.layout.insets","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-title-padding.png","articleSectionId":"set-stepper-items-0-content-title-layout-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Space around the title”.","postconditionTestId":"padding-content.stepper.items.0.content.title.layout.insets"}]},{"fieldKey":"items.0.content.subtitle.appearance","title":"Configure segment subtitle text","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-subtitle-styles","editorTestId":"style-section-subtitleStyles","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-subtitle-styles.png","articleSectionId":"set-stepper-items-0-content-subtitle-appearance","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Configure segment subtitle text”.","postconditionTestId":"style-section-subtitleStyles"}]},{"fieldKey":"items.0.content.subtitle.layout.insets","title":"Space around the subtitle","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-subtitle-padding","editorTestId":"padding-content.stepper.items.0.content.subtitle.layout.insets","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-subtitle-padding.png","articleSectionId":"set-stepper-items-0-content-subtitle-layout-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Space around the subtitle”.","postconditionTestId":"padding-content.stepper.items.0.content.subtitle.layout.insets"}]},{"fieldKey":"items.0.content.description.appearance","title":"Configure segment description text","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-description-styles","editorTestId":"style-section-descriptionStyles","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-description-styles.png","articleSectionId":"set-stepper-items-0-content-description-appearance","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Configure segment description text”.","postconditionTestId":"style-section-descriptionStyles"}]},{"fieldKey":"items.0.content.description.layout.insets","title":"Space around the description","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-description-padding","editorTestId":"padding-content.stepper.items.0.content.description.layout.insets","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-description-padding.png","articleSectionId":"set-stepper-items-0-content-description-layout-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Space around the description”.","postconditionTestId":"padding-content.stepper.items.0.content.description.layout.insets"}]},{"fieldKey":"items.0.content.image.appearance","title":"Style the step image","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-image-styles","editorTestId":"style-section-imageStyles","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-image-styles.png","articleSectionId":"set-stepper-items-0-content-image-appearance","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Style the step image”.","postconditionTestId":"style-section-imageStyles"}]},{"fieldKey":"items.0.content.image.layout.insets","title":"Space around the image","sectionType":"stepper","group":"segments","guideKey":"screenedit-stepper-image-padding","editorTestId":"padding-content.stepper.items.0.content.image.layout.insets","revealState":"gear","imageUrl":"https://api.segmently.ai/assets/support-flow/local/configure-stepper-section/0.2.0/configure-stepper-section-2026-06-24T15-51-52-390Z-88e276be/gear-image-padding.png","articleSectionId":"set-stepper-items-0-content-image-layout-insets","route":[{"to":"screen-editor","humanInstruction":"Open the screen in the editor.","postconditionTestId":"editor-modal-v2-container"},{"to":"section","humanInstruction":"Open a Progress Steps screen and find the Progress Steps section (set the progress screen kind at the top).","postconditionTestId":"stepper-kind-select"},{"to":"panel","humanInstruction":"Open the style settings (the Tune gear next to the progress screen kind), then expand each style subsection.","postconditionTestId":"stepper-styles-gear"},{"to":"control","humanInstruction":"Find “Space around the image”.","postconditionTestId":"padding-content.stepper.items.0.content.image.layout.insets"}]}],"projectId":"arswew63RwQr6V4Ekb1Z","articleId":"help-block-stepper"},"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"}]}}