--- title: "How to Create Vertical Process Steps in Elementor?" url: https://theplusaddons.com/docs/create-vertical-process-steps-in-elementor/ date: 2024-06-13 modified: 2026-09-21 lang: en author: "Aditya Sharma" description: "A vertical process list reads like a timeline: one step under the next, joined by a line. It suits a long workflow, a sidebar, or any narrow column where a..." image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Create-Vertical-Process-Steps-in-Elementor_-1024x536.jpg word_count: 540 --- # How to Create Vertical Process Steps in Elementor? ## - The Plus Addons for Elementor Process Steps widget creates a vertical process list with one setting, and Style is set to Vertical by default in the Content tab’s Layout section. - The widget is part of The Plus Addons for Elementor Free edition, and it requires Elementor (free) installed and active; the widget is enabled under The Plus Addons > Widgets by turning on Process Steps. - Default Active ships set to 1, so the first step is highlighted on page load unless it is changed to None; the vertical layout also hides Circle Alignment, Content Alignment, and Horizontal Background options. A vertical process list reads like a timeline: one step under the next, joined by a line. It suits a long workflow, a sidebar, or any narrow column where a row of steps would be cramped. The **Process Steps** widget in The Plus Addons for Elementor does this with one setting. For everything else the widget can do, see the [full Process Steps settings overview](https://theplusaddons.com/docs/add-process-steps-in-elementor/). ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/process-steps/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Free**. Nothing on this page needs Pro.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Process Steps** and turn its toggle on. ## Steps - Drag **Process/Steps** onto the page.- In the **Content** tab, open the **Layout** section and set **Style** to **Vertical**. This is already the shipped default, so a brand-new widget is vertical until you change it.- Still in **Layout**, turn **Display Counter** on if you want the steps numbered, then choose a **Counter Style**.- Open the **Content** section and fill in the **Process/Steps** repeater: a **Title** and a **Description** per step, and whatever you want in the circle through **Select Icon**. ![Screenshot: Open the Content section and fill in the Process/Steps repeater: a Title and a Description per step, and whatever you want in th](https://theplusaddons.com/wp-content/uploads/2024/06/process-steps-vertical-new.gif) ## What you get on the page Each step becomes a full-width block, stacked under the one before it, with a vertical line running through the step circles. On a 1200px page with a 1100px container, three steps measured 1100 pixels wide each, at the same left edge, 150 pixels apart top to bottom. ![The same three steps with Style set to Vertical: stacked, joined by a line, step 1 active by default.](https://theplusaddons.com/wp-content/uploads/2026/09/processsteps-result-vertical.webp) Notice that the first circle is already drawn in its active state. That is **Default Active**, which ships set to **1**. Set it to **None** if you want all three to start plain. ## Settings used here | Setting | What it does | Default | | ------- | ------------ | ------- | | **Style** | Vertical stacks the steps; Horizontal puts them in a row | Vertical | | **Display Counter** | Numbers or labels each step | Hide | | **Counter Style** | Normal, Decimal Leading Zero, Upper Alpha, Lower Alpha, Lower Roman, Upper Roman, Lower Greek or Custom Text | Normal | | **Default Active** | Which step is highlighted on page load | 1 | ## Limitations - **Normal Layout In Mobile, Circle Alignment and Content Alignment are not available in the vertical layout.** All three are tied to **Style** = **Horizontal**.- **Horizontal Background** in the **Style** tab is likewise hidden while **Style** is **Vertical**.- **Lottie step icons need Pro**, and only work when the first step is the one using them. ## Troubleshooting ### The steps are in a row, not a column **Style** is set to **Horizontal**. Switch it back to **Vertical** in the **Layout** section of the **Content** tab. ### The first step looks different from the others That is **Default Active**, which ships on **1**. Choose **None** to switch the highlight off. ### No connecting line between the circles The line is styled in **Style > Separator/Line Style**. If its colour matches the section background it will be there but invisible. ## Not verified So you know exactly what has and has not been checked: - Only the desktop layout was measured, at 1200 pixels wide. Nothing here describes how the vertical layout reflows on a phone.- The **Separator/Line Style** controls were not exercised; only the section name is known.- **Special Background** was not rendered in the vertical layout. ## Related Docs - [How to Add Process Steps in Elementor? (Vertical & Horizontal)](https://theplusaddons.com/docs/add-process-steps-in-elementor/)- [How to Add Lottie Animation to Process Steps in Elementor?](https://theplusaddons.com/docs/add-lottie-animation-to-process-steps-in-elementor/) ## Frequently Asked Questions **Q: What do I need before creating vertical process steps in Elementor?** A: Elementor free needs to be installed and active, and the Process Steps widget has to be enabled under The Plus Addons > Widgets. The page also says this tutorial uses the Free edition, so nothing here depends on Pro. That matters because the vertical layout is controlled inside the widget itself, not by a separate add-on or paid setting. **Q: How do I make a process steps list stack vertically instead of in a row?** A: The key setting is Style = Vertical in the Layout section of the Content tab. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH ships that as the default, so a new widget starts vertical unless you change it. If your steps end up side by side, that usually means Style was switched to Horizontal. **Q: Why does the first step look highlighted compared with the others?** A: That comes from Default Active, which ships set to 1. The first circle is drawn in its active state on page load, so it stands out from the rest by design. If you want every step to start plain, set Default Active to None. That is the cleanest fix when you want a neutral timeline instead of a preselected first item. **Q: Can I use vertical process steps for a narrow sidebar or long workflow?** A: That is exactly the use case this layout is meant for. A vertical process list reads like a timeline, with one step under the next and a line joining them, so it fits a long workflow, a sidebar, or any narrow column where a row would feel cramped. The Plus Addons for Elementor makes that layout available through the Process Steps widget inside Elementor. **Q: Why is there no connecting line between the step circles?** A: The line is controlled in Style > Separator/Line Style. If its colour matches the section background, it can still be there but look invisible. That usually means the layout is fine and only the line styling needs attention. This is worth checking before changing anything else because missing lines are often just low-contrast styling, not a broken widget. **Q: What are the main limits of vertical process steps in this widget?** A: Vertical mode has a few hard limits: Circle Alignment and Content Alignment are not available on mobile in the vertical layout because they are tied to Style = Horizontal, and Horizontal Background in the Style tab is hidden while Style is Vertical. Lottie step icons also need Pro and only work when the first step uses them. That makes vertical best for simple stacked timelines rather than heavily customized icon layouts.