Stepper

Last updated 2 years ago

The Stepper media item creates an interactive experience that will step a reader through a sequence of contents, revealing one at a time. This is great for educational content, quizzes, or content that you want people to slow down and really take it in, preventing them from scrolling straight through.

The stepper is created using two media item templates. The outer parent media item uses the Stepper template and each step uses the Stepper Step template.

Basic Example

Step 1

Lorem proident eiusmod enim labore aute ipsum ad ipsum Lorem culpa minim ex. Irure laborum irure ipsum in consequat ipsum minim non amet commodo id. Cillum amet occaecat commodo consectetur ipsum eu nisi nostrud culpa qui enim ut ut. Aute laborum sit in mollit occaecat reprehenderit cupidatat cupidatat id reprehenderit dolor labore elit. Dolor id incididunt non aliquip magna mollit est deserunt eiusmod ut est eiusmod do.

1 of 3

Step 2

Dolore incididunt enim cillum veniam veniam incididunt et irure deserunt esse velit. Incididunt mollit sunt ullamco amet cupidatat. Est non velit nulla ullamco. Nulla dolore minim proident velit.

Eiusmod veniam velit consectetur nulla. Exercitation non tempor in ipsum reprehenderit ullamco id eiusmod exercitation. Nulla fugiat labore nulla ex eu Lorem eu mollit cupidatat et Lorem magna.

2 of 3

Step 3

Dolor id incididunt non aliquip magna mollit est deserunt[1] eiusmod ut est eiusmod do.

Dolore incididunt enim cillum veniam veniam incididunt et irure deserunt esse velit. Incididunt mollit sunt ullamco amet cupidatat. Est non velit nulla ullamco. Nulla dolore minim proident velit.

[1]: 

Dolor id incididunt noeniam incididunt et irure deserunt esse velit. Incididunt mollit sunt ullamco amet cupidatat. Est non velit nulla ullamco.

3 of 3

Stepper Options

  • Show Step Count - This will display a counter showing the progress through the stepper.

  • Styling - Here you can customize the colors of the stepper.

  • Reader Data - If you want to save the reader's progress then you'll turn that on here.

Advanced Usage

Showing Reader Progress

It is possible to show the reader's progress in the table of contents. You can use the Stepper page options to tell the page which steppers to listen for. Readers will then see icons showing where they have incomplete and completed steps. For this to work, you'll need to turn on reader data for the stepper.

Disabled Steps

It is possible to have a step be disabled until a user takes a particular action, such as submitting a form or clicking on a particular item.

Submit this form to enable the button to go to the next step. How was this step set up?[2]

[2]: 

There are 2 steps:

  1. Disable the step in the step's advanced options.

  2. Have the form enable the step when submitted by adding the CSS class theme-media-stepper__step-enabler to the form using the form's advanced options. I also removed the responses to the form since the action on submit is just enabling the step.

1 of 3

Clicking this button will enable the next step. How was this step set up?[3]

Enable the Next Step
[3]: 

There are 2 steps:

  1. Disable the step in the step's advanced options.

  2. Have the button enable the step when clicked by adding the CSS class theme-media-stepper__step-enabler to the button using the button's advanced options.

2 of 3

All Done! 🥳

3 of 3
Slideshow Tab-It