Vertical Level Widget for Elementor

The Vertical Level widget builds a vertical step progress bar with manually controlled active states, icons, and descriptions for each step.

1. What It Does

Displays a vertical line of numbered steps, each with a circle marker and its own text, icon, or image content, where you manually mark which steps are active.

2. Why It Matters

A manual step progress bar works for showing a fixed process, timeline, or roadmap where the active state is a design choice rather than something tied to live data.

3. What You Get

A Style choice for the circle marker, Dot, Number, or Check Mark, plus a Levels repeater where each item can hold text, an icon, or an image with its own Active toggle.

4. Benefits

Skipped, already covered above: the value is the manually controlled vertical timeline described in Why It Matters and What You Get, restating it here would not add anything new.

5. Capabilities

• Style dropdown for the circle marker: Dot, Number, or Check Mark
• Levels repeater, each item with a Select dropdown for Text, Icon, or Image content above the circle
• Description field per item
• Active toggle per item, fills the line and, with Check Mark style, shows the checkmark
• Color controls for title, icon, and description in normal and hover states, plus dot, inner dot, and progress bar colors

6. How It Works

Each Levels item renders as a circle on the vertical line with its content above it. Enabling Active on an item fills that segment of the line, and with Style set to Check Mark, also swaps the circle’s marker to a checkmark.

7. How to Use It

1. Activate the Vertical Level widget from WDesignKit’s Ready Widgets.

1. Drag the widget onto the page and pick a circle Style: Dot, Number, or Check Mark.
2. Add items under Levels, each with its content type, description, and Active state.

1. Repeat with Add Item for as many steps as needed, then customize colors from the Style tab.

8. Use Cases

• A vertical timeline of company milestones or a project roadmap
• A step-by-step process list where finished steps are marked Active with a checkmark

9. Limitations

• Active states are set manually per item, the widget does not track real progress or update automatically.
• The circle Style, Dot, Number, or Check Mark, applies to every item at once, individual items cannot mix marker types.

10. Troubleshooting

• Checkmark does not appear on an item: enable that item’s Active toggle first, Check Mark style only shows once the item is marked Active.
• Line does not fill between steps: only Active items fill their own line segment, an inactive step in between leaves a gap.
• Icon or image is missing: confirm the Select dropdown for that item is set to Icon or Image and the corresponding field was actually filled in.