Style
Spruce up your steps.
Last updated
Was this helpful?
Spruce up your steps.
Last updated
Was this helpful?
There are some extra style settings available for Steps in the Style tab of the right-hand menu.
This allows uploading an image or video to be used as the background of a step.
See below for more information on how to position an image.
Keep in mind that your responders will go through your flows in a variety of viewport sizes, ranging from small phones to large desktops, so it is wise to test image positions on a variety of viewports and to prefer using percentages rather than pixel distances if not using sizing or positioning keywords.
Contain: With contain, the image will always be contained within its element and always be visible, but potentially smaller and not covering the entirety of the element.
Cover: With cover, the image will always cover the entirety of its element. Depending on the relative aspect ratios of the image and element, parts of the image may be cut off.
Absolute: When a background image is absolutely positioned, it will always take precisely that size.
Absolute: If an image position is specified absolutely, the image will always be offset from the top-left by that position. For example, if the absolute position is 25% and 25%, the image will appear a quarter of the way from the left and a quarter of the way from the top.
Top, Right, Bottom, Left, Center are all valid keywords for background image positions - the image will be placed in the respective position within the element, which can differ between the X and Y axis.
This is useful for enforcing logic through physical animation - for example, sliding in a positive-outcome step from the right, while animating in a negative-outcome step from the left.
When this is enabled, the step will rain confetti in the background. Great for celebrating!
Changes the label of the Next button on the Step. If you would like your first step Next button to say something like "GET STARTED" instead of the default text, this is where you would change it.
Overrides the horizontal placement of the next button on this step.
Defines a step that is applied to this step. This will override the transition that is defined in your flow-wide Theme settings.
For consistency across your flow, buttons are styled within the section of the style editor, but specific aspects of the next button can be modified at the level of a step.
If you'd like to place the next button within the content of a step, see the content. When a Next button is added as content, it renders the next button inline with the rest of your content inside of a step.
