Step styling

Spruce up your steps.

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.

There are various options available in this menu

---

Image or video background

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.

Background image sizing options

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.

The background image positioning editor

Background image positioning

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.

---

Step transition animations

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

---

Show confetti in background

Enable this setting to add celebratory confetti effects behind the step content. Great for marking success milestones or final submission steps!

Hooray!

---

Next button overrides

While the default Next button styling is controlled in the Theme > Buttons section, you can customize some step-specific aspects directly in the step’s Style tab.

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.