Step styling
Spruce up your steps.
Last updated
Was this helpful?
Spruce up your steps.
Last updated
Was this helpful?
Steps in your flow can be visually customized using the Style tab in the right-hand menu of the Studio. These customizations allow you to add background media, control step transitions, and adjust the appearance and placement of the Next button.
You can upload an image or video to serve as the background for a step. This is useful for adding visual impact or branding to important moments in your flow.
Keep in mind that users may access your flow on a variety of screen sizes—from small phones to large desktop monitors. When choosing size and position settings, test across viewports and use percentage-based values when possible.
Contain: Ensures the full image is always visible within its container. The image may be letterboxed and won't cover the entire element.
Cover: The image will always fill the container completely. Parts of the image may be cropped depending on its aspect ratio.
Absolute: The image uses a fixed size and position relative to the top-left of the container.
You can control where the image is placed within the container:
Absolute positioning: Enter specific offset values (e.g., 25% / 25%) to pin the image at that position from the top and left.
Keyword-based positioning: Use keywords like top, center, bottom, left, or right—or combinations such as top right—to anchor the image.
You can override the default step transition animation defined in your flow’s Theme to create custom transitions for individual steps.
This is helpful for reinforcing logic visually. For example:
Use slide in from the right for positive outcomes
Use slide in from the left for negative outcomes
Enable this setting to add celebratory confetti effects behind the step content. Great for marking success milestones or final submission steps!
Button Text
Customize the label of the Next button for this step. For example, change the default text to something like “GET STARTED” on the first step to encourage engagement.
Horizontal Alignment
Override the default horizontal placement of the Next button for this specific step (e.g., align left, center, or right).
Inline Button Placement
If you'd like to embed the Next button within the step’s content (rather than below it), use the Next Button Content block. This renders the Next button inline with other components in the step.
While the default is controlled in the Theme > Buttons section, you can customize some step-specific aspects directly in the step’s Style tab.
