# Step styling

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.

<figure><img src="/files/WfpdxJiVXPIRE4d0R3XJ" alt=""><figcaption><p> There are various options available in this menu</p></figcaption></figure>

***

### 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.

<div align="left"><figure><img src="/files/NXJuyd3SbUAtr7dJU8ba" alt="" width="563"><figcaption><p>The background image positioning editor </p></figcaption></figure></div>

#### 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!&#x20;

<div align="left"><figure><img src="/files/ZzGalBaHeZdloErNB0Od" alt=""><figcaption><p>Hooray!</p></figcaption></figure></div>

***

## Next button overrides

While the default [Next button styling](/styling/customizing-appearance/buttons.md#next-button) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.formsort.com/css-and-advanced-styling/step-style.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.