> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How it works / Steps

> Walk visitors through your process in numbered steps, across a row or down a timeline.

The **How it works / Steps** section walks visitors through your process, one numbered step at a time. Lay the steps across a row, or stack them down a timeline.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![A Steps section as visitors see it: eyebrow "How it works", heading, intro line, and four numbered steps across one row linked by a connector line.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/steps/guides-sections-steps-overview-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=9f471b42a79a747290aefa59f5b56cb9)

Four numbered steps in a row, linked by a line.

## When to use it

* To explain how to get started with you, from first contact to done.
* To set expectations for a first visit, an order or a project.
* To show a timeline, such as your history or a program's weeks.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Content** → **How it works / Steps**. A new Steps section starts with four sample steps, so replace them with your own.

You can also add it inside a column of a **Layout** section, and in the body of a blog post.

![The Add Content menu open on the Content group, with the How it works / Steps tile ringed.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/steps/guides-sections-steps-add-menu-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=abc65535a353369704dc90c56437faf9)

How it works / Steps lives in the Content group.

## What you can change

Select the section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has five tabs: **Steps**, **Background**, **Fonts**, **Button** and **CSS**.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Steps editor open on the Steps tab beside the live section, with Layout, Show connector line and Step style ringed.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/steps/guides-sections-steps-editor-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=e7ba891096623a6503b65fabbdd5b863)

The Steps editor, with the page updating beside it.

> [accordion] Steps
>
> Everything about the header, the layout, the markers and the steps themselves. Some options appear only for the layout or style they belong to.
>
> **Header**
>
> * **Show eyebrow** and **Eyebrow**: a small line above the heading, "How it works" to start.
> * **Heading** and **Intro line**: an optional heading and a short sentence under it. Clearing the heading hides only the heading. To show just the steps, also turn off **Show eyebrow** and clear the intro line.
> * **Heading size** and **Intro size** go from **Small** up to **Huge**. Each part also has its own weight.
>
> **Layout**
>
> * **Layout**: **Horizontal (row)** lays the steps side by side with the marker on top. **Vertical (timeline)** stacks them with the marker on the left.
> * **Steps per row**: for a row only. **Auto (fit to width)** fits as many as look good, or lock **2 per row**, **3 per row** or **4 per row**.
> * **Gap between steps**: **Tight**, **Normal** or **Roomy**.
> * **Alignment**: **Center** or **Left**, for a row. A timeline always lines up on the left, beside its markers.
> * **Show connector line**: a line that links the markers, across a row or down a timeline. It shows only with the **Plain** step style.
>
> **Step style**
>
> * **Step style**: **Plain — no chrome** keeps just the marker and text, linked by the connector line. Every other style puts each step in a box, such as **Raised — lit soft card** or **Outline — plaque frame**.
> * **Card corners**: how rounded each box is.
> * **Hover effect**: what a boxed step does when a visitor points at it, such as **Lift — rises, shadow deepens**. It isn't offered for **Plain**.
>
> **Marker** (the badge on each step)
>
> * **Step marker**: **Number** counts 1, 2, 3 for you. **Icon** shows each step's icon instead, and uses the number for a step with no icon. **None** hides the badge.
> * **Marker style**: **Soft (tinted)**, **Filled** or **Outline**.
> * **Marker shape** and **Marker size**: **Circle**, **Rounded** or **Square**, at **Small**, **Medium** or **Large**.
> * **Accent color**: colors the markers and the connector line. Leave it empty to use your site's accent color.
>
> **Titles and text**
>
> * **Title size**, **Title weight**, **Body size** and **Body weight** apply to every step, so they stay consistent.
>
> **Steps** (one row per step)
>
> * **Title**: the step's name, such as "Book a visit". It's required.
> * **Body**: an optional sentence or two under the title.
> * **Icon name**: an optional icon, such as paw or calendar-check, shown in the marker when **Step marker** is **Icon**. Find names at [fontawesome.com/icons](https://fontawesome.com/icons) and type them without "fa-". Pick its look with **Icon family**.
> * **Marker label (optional)**: replaces the automatic number for this step, such as "01" or "A".
>
> Steps show in the order of the list. Drag them to reorder, and the automatic numbers follow. A **Marker label (optional)** stays with its step, so after reordering, update any labels you typed, such as "01" and "02". To add, reorder or remove steps, see [Lists of items](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md#lists-of-items).
>
> Every color can be set separately for the dark and light themes. Leave colors empty to use your site's colors.

> [accordion] Background
>
> A background color for the whole section, set separately for the dark and light themes. It starts as **Transparent (page background)**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the step titles. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> One optional button under the steps, such as "Book a visit". It uses your site's main button look, with an arrow after the label. It shows only when it has both a **Button label** and a **Button link**. To learn every button option, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A vertical timeline of four steps, markers on the left joined by a connector line, filled circle markers, left-aligned text.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/steps/guides-sections-steps-timeline-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=1ed5b377d2ca5ad7a76e637c1bc7ef1f)

A vertical timeline with filled markers.

**A timeline.** Set **Layout** to **Vertical (timeline)** and **Marker style** to **Filled**.

![Three boxed steps in a row, each with an icon in a rounded marker, Raised card style, one card lifted under the pointer.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/steps/guides-sections-steps-boxed-icons-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=dbfeea4547760035b33d89afe846dc6c)

Boxed steps with icons that lift on hover.

**Boxed steps with icons.** Set **Step style** to **Raised — lit soft card**, **Step marker** to **Icon**, and give each step an icon.

![Four steps in a row with outline square markers labeled "01" to "04", left-aligned, a "Book a visit" button underneath.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/steps/guides-sections-steps-custom-labels-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=5aeade48512c8083e6763f68930ec89e)

Your own marker labels and a button to finish.

**Numbered your way.** Type "01", "02" and so on in each step's **Marker label (optional)**, and add a button on the **Button** tab.

## Good to know

> [!WARNING]
>
> **Check the connector line on phones and tablets.** Preview the page at a phone or tablet size (see [Preview on phones and tablets](https://docs.fetchski-attract.com/guides/build-pages/preview-on-devices.md)). If the steps wrap onto a second line, the last step of each line draws a short line toward nothing. To fix it, choose a **Steps per row** that fits on one line, turn off **Show connector line**, or use **Vertical (timeline)**.

* **Headings stay in order.** The section heading is a subheading on the page, and each step title sits one level below it.
* **Hover effects that follow the pointer** need site animations on. See [Motion](https://docs.fetchski-attract.com/guides/site-design/motion.md).
* **Animations play for visitors only.** While you edit, the steps show their finished state. Visitors who prefer less motion also see them without animation.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Feature Cards](https://docs.fetchski-attract.com/guides/sections/feature-cards.md)
>
> cards for features or services.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every card style and hover effect.

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> put steps beside other content.

> [card] [Final CTA](https://docs.fetchski-attract.com/guides/sections/final-cta.md)
>
> end the page with a clear next step.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.