--- title: "How to Add Process Steps in Elementor? (Vertical & Horizontal)" url: https://theplusaddons.com/docs/add-process-steps-in-elementor/ date: 2024-06-13 modified: 2026-09-21 lang: en author: "Aditya Sharma" description: "A process-steps block walks a visitor through a workflow one step at a time: sign up, upload, publish. The Process Steps widget in The Plus Addons for Elementor builds that..." image: https://theplusaddons.com/wp-content/uploads/2024/06/How-to-Add-Process-Steps-in-Elementor_-Vertical-Horizontal-1024x536.jpg word_count: 1023 --- # How to Add Process Steps in Elementor? (Vertical & Horizontal) ## - The Plus Addons for Elementor Process Steps widget ships in the free plugin and renders fully without Pro, but Carousel Anything Connection, the Icons Mind ( PRO ) icon library, and Lottie step icons need Pro. - Process Steps offers two layouts, Vertical and Horizontal, and it ships set to Vertical with Default Active on 1 so the first step is highlighted on page load. - The repeater ships with three items, and each step can show Title, Description, and a Select Icon choice of None, Icon, Image, Text, or Lottie. - Carousel Anything Connection links Process Steps to a Carousel Anything widget with a matching Connection Carousel ID, and its Effect setting ships on Hover with Click also available. A process-steps block walks a visitor through a workflow one step at a time: sign up, upload, publish. The [Process Steps widget](https://theplusaddons.com/elementor-widget/process-steps/) in The Plus Addons for Elementor builds that block, in a row or in a column, with an icon, an image, text or a Lottie animation in each step circle. This page covers the whole widget: the two layouts, the step counter, the step content and the parts that need Pro. Every setting below was checked against the running widget on Elementor 4.2.3 with The Plus Addons 6.5.0. ***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**. The widget ships in the free plugin and renders fully without Pro. Three things inside it do need Pro: **Carousel Anything Connection**, the **Icons Mind ( PRO )** icon library, and **Lottie** step icons.- **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. ![Screenshot: Widget to enable: go to The Plus Addons > Widgets, search for Process Steps and turn its toggle on](https://theplusaddons.com/wp-content/uploads/2024/06/process-steps.png) ## Choose the layout Drag **Process/Steps** onto the page. Everything in this section is in the **Layout** section of the **Content** tab. - **Style** picks the layout. It has two choices, **Vertical** and **Horizontal**, and it ships set to **Vertical**.- **Display Counter** (Show / Hide, off by default) numbers the steps. With it on, **Counter Style** appears: **Normal**, **Decimal Leading Zero**, **Upper Alpha**, **Lower Alpha**, **Lower Roman**, **Upper Roman**, **Lower Greek** and **Custom Text**.- **Special Background** (Show / Hide, off by default) adds a decorative background behind the step circles.- **Default Active** decides which step is highlighted when the page loads. It ships on **1**, so the first step is already highlighted; choose **None** if you would rather nothing was. ![The Layout section of the Process Steps widget, with the Style choice highlighted.](https://theplusaddons.com/wp-content/uploads/2026/09/processsteps-layout.webp) > ***Normal Layout In Mobile**, **Circle Alignment** and **Content Alignment** only appear when **Style** is set to **Horizontal**, and the two alignment controls need **Normal Layout In Mobile** switched on as well. They change the mobile layout only.* ## Add the steps Open the **Content** section. The repeater inside it is called **Process/Steps** and it ships with three items. Open one: - **Title** and **Description** are the step text.- **Select Icon** decides what sits in the step circle: **None**, **Icon** (the default), **Image**, **Text** or **Lottie**.- With **Icon** selected, **Icon Font** offers **Font Awesome** and **Icons Mind ( PRO )**. Pick the library, then the icon itself in **Icon Library**.- **Icon Link** (Show / Hide) turns the circle into a link and reveals a **Link** field.- **Normal Background Option** and **Hover Background Option** set the circle's background in each state.- If **Counter Style** is **Custom Text**, **Display Counter Custom Text** and **Custom Text** let each step carry its own label instead of a number. ![A Process/Steps repeater item opened, showing Title, Description and the Select Icon dropdown.](https://theplusaddons.com/wp-content/uploads/2026/09/processsteps-content-item.webp) Use **+ Add Item** for more steps. Below the repeater, **Carousel Anything Connection** links the steps to a Carousel Anything widget so that clicking or hovering a step moves the carousel. ![Screenshot: Use + Add Item for more steps. Below the repeater, Carousel Anything Connection links the steps to a Carousel Anything widget so](https://theplusaddons.com/wp-content/uploads/2024/06/process-steps-content-new.gif) ## What you get on the page With **Style** set to **Horizontal** and three steps, the three step blocks sit in one row at the same height, each taking a third of the container width, joined by a connecting line. With **Display Counter** on and **Counter Style** left at **Normal** they are numbered 1, 2, 3. ![Three horizontal process steps on the front end, numbered 1 to 3 by Display Counter.](https://theplusaddons.com/wp-content/uploads/2026/09/processsteps-result-horizontal.webp) ![Screenshot: With Style set to Horizontal and three steps, the three step blocks sit in one row at the same height, each taking a third of th](https://theplusaddons.com/wp-content/uploads/2024/06/process-steps-horizontal-new.gif) ## Settings that matter most | Setting | What it does | Default | | ------- | ------------ | ------- | | **Style** | Vertical (stacked) or Horizontal (one row) | Vertical | | **Display Counter** | Numbers or labels each step | Hide | | **Counter Style** | Number, letter, roman, greek or your own text | Normal | | **Special Background** | Decorative background behind the step circles | Hide | | **Normal Layout In Mobile** | On mobile, shows the steps as plain blocks instead of a vertical sequence (Horizontal only) | Hide | | **Default Active** | Which step is highlighted on page load | 1 | | **Select Icon** (per step) | None, Icon, Image, Text or Lottie | Icon | | **Icon Font** (per step) | Font Awesome, or Icons Mind ( PRO ) | Font Awesome | | **Carousel Anything Connection** | Links the steps to a Carousel Anything widget (Pro) | Hide | ## Styling The **Style** tab holds **Title Style**, **Description Style**, **Icon/Image Style**, **Lottie**, **Separator/Line Style**, **Display Counter Style**, **Content Background Style** and **Horizontal Background**. **Display Counter Style** only appears while **Display Counter** is on, and **Horizontal Background** only while **Style** is **Horizontal**. ## Connecting the steps to a carousel **Carousel Anything Connection** is a **Pro** feature. In the free plugin the toggle is there, but switching it on shows an upgrade notice instead of the settings. With Pro you get **Connection Carousel ID**, which must match the ID you set on the Carousel Anything widget, and **Effect on**, which is **Hover** or **Click** and ships on **Hover**. ![Screenshot: Carousel Anything Connection is a Pro feature. In the free plugin the toggle is there, but switching it on shows an upgrade noti](https://theplusaddons.com/wp-content/uploads/2024/06/carousel-anything-and-process-step.gif) https://www.youtube.com/watch?v=Fxnqm5O8Qnw ## Limitations - **Carousel Anything Connection needs Pro.** The toggle is visible in the free plugin but only reveals an upgrade notice.- **Icons Mind needs Pro.** The dropdown says so in the option label itself.- **Lottie step icons need Pro, and only work on the first step.** The script that draws a Lottie is only loaded when the *first* repeater item is set to **Lottie**. Put it on step two and nothing appears. See the Lottie guide below.- **Circle Alignment and Content Alignment are mobile-only.** They need **Horizontal** plus **Normal Layout In Mobile**, and their styling applies to the mobile layout. ## Troubleshooting ### The steps stack instead of sitting in a row **Style** is still on **Vertical**, which is the shipped default. Switch it to **Horizontal**. ### No numbers on the steps **Display Counter** is off. Turn it on, then pick a **Counter Style**. ### The first step looks highlighted and I did not do that **Default Active** ships on **1**. Set it to **None** if you want every step to start in its normal state. ### I cannot find Circle Alignment It only shows with **Style** on **Horizontal** and **Normal Layout In Mobile** switched on. ## Not verified So you know exactly what has and has not been checked: - **Special Background** was never rendered, so this page does not describe what it looks like.- The whole **Style** tab - only the section names are listed here, none of the controls inside them were exercised.- **Select Icon** set to **Image** or **Text**, and the **Icon Link** / background options, were not rendered.- A working **Carousel Anything Connection** was never built, so nothing here describes how the connected carousel behaves in practice.- Nothing was measured at tablet or mobile widths. ## Related Docs - [How to Create Vertical Process Steps in Elementor?](https://theplusaddons.com/docs/create-vertical-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/)- [On Scroll View Animation](https://theplusaddons.com/docs/on-scroll-view-animation/) ## Frequently Asked Questions **Q: What do I need before adding process steps in Elementor?** A: Elementor free has to be installed and active, and the Process Steps widget has to be enabled under The Plus Addons > Widgets. The widget ships in the free plugin and renders fully without Pro, which makes it easy to test the layout before worrying about paid extras. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this widget as part of the addon set. **Q: Why are my process steps stacking instead of showing in one row?** A: That usually means Style is still set to Vertical, which is the default. Switch Style to Horizontal if you want the steps side by side. This matters because the widget only shows Circle Alignment and Content Alignment when Horizontal is selected, and those controls also depend on Normal Layout In Mobile being turned on. **Q: Can I use process steps as a carousel trigger?** A: Carousel Anything Connection is built into the widget as a Pro feature, so it can link each step to a Carousel Anything widget. In Pro, the key setting is Connection Carousel ID, which has to match the ID on the carousel widget, and Effect on lets you choose Hover or Click. In the free plugin, turning that toggle on only shows an upgrade notice. **Q: What are the main limitations of process steps in this widget?** A: The biggest limits are tied to Pro and to where certain options work. Carousel Anything Connection needs Pro, Icons Mind needs Pro, and Lottie step icons need Pro too. Lottie also only works on the first step because the script loads only when the first repeater item is set to Lottie. Circle Alignment and Content Alignment are mobile-only and require Horizontal plus Normal Layout In Mobile. **Q: Why does the first step look highlighted when I did not set that?** A: Default Active ships on 1, so the first step is highlighted as soon as the page loads. That default is useful when you want a clear starting point in a workflow, but it can look like an accidental style choice if you were expecting every step to start neutral. Set Default Active to None if you want no step highlighted at load time.