Steps

The Steps widget allows users to create a structured sequence of steps, making it easier to outline processes or instructions in a clear, step-by-step format.

Benefits of Using the Steps Widget

• Clarity and Structure: The Steps widget organizes information in a way that is easy to follow, helping users understand complex processes or instructions.
• Multimedia Support: Each step can include various types of content, such as images, videos, and tables.
• Flexibility: Users can add, delete, and duplicate steps as needed, allowing for easy adjustments to content.
• Highlight Important Information: The option to add callouts and dividers helps emphasize critical points, ensuring that essential details are not overlooked.

How to Add a Steps Widget

1

First Step

Navigate to the point in your text where you want to insert the Steps widget.

2

Second Step

Type /Steps on a new line.

3

Third Step

Select the Steps option that appears.

Default State

When the Steps widget is first added, only the first step appears by default. A "+" icon will be visible, allowing you to add additional steps easily.

Step Management

The Steps widget offers flexible management options, allowing users to customize each step with titles, multimedia content, and easy-to-use tools for organizing and editing steps efficiently.

Add Title

• Each step has the option to add a title, providing a brief description or heading for that step.

Content Addition

Users can add various types of content to each step, including:

• Basic Text Content: Support for basic text formatting (bold, italics, bullet points, etc.).
• Callout: Add a callout box to highlight important information within a step.
• Table: Insert a table for structured data.
• Image: Upload or insert images to illustrate the step.
• Video: Embed video content relevant to the step.
• Code Block: Add code blocks with syntax highlighting for technical instructions.
• Card: Encapsulate content within a styled container for emphasis or organization.
• Divider: Insert a horizontal divider to visually separate content within the step.

Step Navigation and Editing

• Add Step: Click the "+" icon to add a new step below the existing steps.
• Delete Step:
  • An option to delete an individual step will be displayed as a trash icon on hover above each step's number.
  • You can also delete a step using the keyboard: select the entire step you want to delete and press the Delete key.
• Delete Widget: Users can delete the entire Steps widget, which will remove all steps and their content from the document.
• Duplicate Widget: Easily duplicate the entire Steps widget to reuse content or create a similar sequence of steps.