Steps component

create a step by step tutorial with the Steps component

  • visually appealing manuals
  • type: list
  • type: steps

With the Steps component it is possible to create visually appealing manuals that catch the viewers attention.

on this page:
Component settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window

Introduction

Use the Steps component to create a visually appealing manual for your viewers. There are two types of layouts, steps and list, for whatever fits your needs best. The textual context of the Steps is written in a Rich Text Editor (RTE), which allows you to style your text, add hyperlinks or even use the HTML view to add additional content, like images or tabels. The component itself doesn't need much configuartion and after it is set up, you add multiple Step Items inside the Steps component.

Glossary:

Example From Erste Bank AT:

1

2

3

Example:

1

2

3

Component settings

tab: General

In the General tab of the Steps component, its headline, Steps type and theme can be set up.

tab: Spacing

After adding and configuring the Steps component, the Step Items need to be set up. Once the Steps component is placed the Step Items are available in the Steps Menu in the Sidekick.

Double click on the blank Step Item to configure it.

tab: General

In the General tab of the Step Item, its type, its headline and the text underneath can be set up.

tab: Image

This tab is only available if the Step Type is set to Image in the General tab of the Step Item.

tab: Links

Front-end examples

Component Steps Type: Steps  |  Item Step Type: Text  |  Theme: Light Grey

Step only

Step + Link

Step + Text

Overflow Step Items  |  Component Steps Type: Steps  |  Item Step Type: Text  |  Theme: Light Grey

1. Item

2. Item

3. Item

4. Item

5. Item

Component Steps Type: Steps  |  Item Step Type: Image  |  Theme: Light Grey

1. Item

2. Item

3. Item

Overflow Step Items  |  Component Steps Type: Steps  |  Item Step Type: Image  |  Theme: Light Grey

1. Item

2. Item

3. Item

4. Item

5. Item

Mixed  |  Component Steps Type: Steps  | Item Step Type: Image + Text  |  Theme: Light Grey

1.

2. Item

2.

Component Steps Type: List  |  Item Step Type: Text  |  Theme: Light Grey

1. Item

2. Item

3. Item

4. Item

5. Item

6. Item

7. Item

Component Steps Type: List  |  Item Step Type: Image  |  Theme: Light Grey

1. Item

2. Item

3. Item

2. Item

1. Item

Mixed  |  Component Steps Type: List  | Item Step Type: Image + Text  |  Theme: Light Grey

1

2. Item

2

Step by step

1

2

3

Related topics

Used recurring elements