Adding process steps

The Process Steps element shows a numbered set of steps, such as how an order reaches your customer. Each step has a badge, a title, a short description and an optional button. A connector line runs between the steps so the order is clear.

Considerations

• Steps are numbered for you, in the order they appear. You can type your own number or label on any step.
• Steps run across the page by default. On a phone they stack into a column, unless you turn off Collapse to Vertical on Mobile.

Add the element

1. Open the page in the page builder.
2. In the toolbox on the far left, click Elements.
3. Find Process Steps in the Basic group, or search for it.
4. Drag it onto the canvas and drop it where you want it. The settings panel opens on Editing Process Steps.

Add and edit a step

1. With the element selected, open the Content tab.
2. Click a step to open it. The blocks are named Step 1, Step 2 and so on.
3. In Badge Type, choose Number, Icon or Image.
4. Type a Title and a Description.
5. To put a button on the step, type the Button Text, then click Button Link and set where it goes.
6. Click Add Step for the next step. Use Move Up, Move Down and Remove to reorder or delete one.

Content settings

• Badge Type: what sits at the top of the step, a Number, an Icon or an Image.
• Number (leave empty to auto-number): your own number or short label. Leave it empty and Orbit numbers the step by its position.
• Icon or Image: what to show instead of a number. For an image, paste an address or click Browse.
• Title: the name of the step.
• Description: one short line under the title.
• Button Text: adds a button to the step. Leave it empty to hide the button.
• Button Link: where that button takes the customer.

Design settings

Open the Design tab to change the look. The groups are Layout, Badge, Connector, Typography, Card, Border, Button Style and Spacing.

Related guides

• Adding a timeline
• Adding a feature list
• Adding and arranging elements
• Using the element settings panel