---
title: "How to Add Process Steps in WordPress? (Vertical & Horizontal)"
url: https://nexterwp.com/docs/add-process-steps-in-wordpress-vertical-amp-horizontal/
date: 2024-12-04
modified: 2026-08-18
author: "Aditya Sharma"
description: "Adding a process step is an excellent way to visually represent a workflow or series of steps, helping users easily follow and understand the process. This not only provides clear..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Process-Steps-in-WordPress_-Vertical-Horizontal-1024x519.jpg
word_count: 801
---

# How to Add Process Steps in WordPress? (Vertical & Horizontal)

## Key Takeaways

- Nexter Blocks requires the default WordPress Block editor, the Nexter Blocks plugin, and the PRO version to activate the Process Steps block under Nexter → Blocks.
- Process Steps offers two layout styles, horizontal and vertical, so it presents workflows in either direction.
- Process Steps supports four Icon Type options in the step circle: None, Icon, Image, and Text.
- Remote Sync Connection connects Process Steps with the Carousel Anything block, and Vertical In Tablet plus Normal Layout In Mobile change the layout on tablet and mobile screens.

Adding a process step is an excellent way to visually represent a workflow or series of steps, helping users easily follow and understand the process. This not only provides clear guidance but also improves the overall user experience by making complex information more digestible and organized.

With the Process Steps block from Nexter Blocks, you can easily create beautiful process steps in your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-process-steps/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Process Steps block is activated, to verify this visit Nexter → Blocks → and Search for Process Steps and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=2K1PGrmmHH4

## How to activate the Process Steps Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/process-steps-activation-new-1.png)

## Key Features

- **Two Layout Styles** - You can select from horizontal and vertical styles.

- **Display Counter** - You can show different types of counters on the steps.

- **Carousel Anything Connection** - You can easily sync with the Carousel Anything block.

## How to Use the Process Steps Block?

Add the Process Steps block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/process-steps-design-type-1024x189.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Content

From the **Style** section, you have to select the layout style. Here you’ll find two options -

- **Vertical** - To [create vertical process steps](https://nexterwp.com/docs/create-vertical-process-steps-in-wordpress/).

- **Horizontal** - To create horizontal process steps.

Select the options as per your requirements, let’s select Horizontal here.

Then from the **Steps** section, you have to add the process step content. By default, you’ll find two repeater items, open one item.

In the **Title** field, you have to add the step title.

Then in the **Description** section, you can add the step content.

From the **Icon Type** section, you can select the content type you want to add to the step circle. Here you’ll find four options - 

- **None** - To keep the step circle blank.

- **Icon** - To add an icon to the step circle.

- **Image** - To add an image to the step circle.

- **Text** - To add text to the step circle.

You’ll see different options to add content based on your selection. 

Select the option as per your requirements, let’s select Icon here.

From the **Select Icon **section, you can add an icon.

In the **Link** field, you can add a custom link to the step item.

Then, from the **Normal** and **Hover** tabs, you can add backgrounds for the normal and hover states of the step circle.

You can set a height for the particular step, from the **Height of Content** section.

Following this process, you can edit the other items.

You can click on the **+ Add Step **button to add more steps.

### Counter

By enabling the **Counter** toggle, you can add a step counter.

From the **Counter Type **dropdown, you can select different types of counter styles.

> *Note: When you select the Custom Text option, you’ll get an option to add a custom label in each repeater item.*

### Extra Options

In this tab, you’ll find some extra options.

By enabling the **Remote Sync Connection** toggle, you can [connect the steps with the Carousel Anything block](https://nexterwp.com/docs/connect-process-steps-with-carousel-anything-in-wordpress/).

![](https://nexterwp.com/wp-content/uploads/2024/12/process-steps-extra-options-new.png)

Then, by enabling the **Vertical In Tablet** toggle, you can convert the horizontal steps to vertical steps in tablet screens.

By enabling the **Normal Layout In Mobile** toggle, you can show the steps as normal blocks on mobile screens, but if disabled it will turn to vertical steps on mobile screens.

From the **Default Active** dropdown, you can select which step to set as active, this will add hover color to the selected step.

Then, you can add a ripple type background from the **Rings Background** toggle.

![](https://nexterwp.com/wp-content/uploads/2024/12/process-steps-content-horizontal-demo.png)

## How to Style the Process Steps Block?

To style the Process Steps block, you’ll find all the options in the Style tab. 

**Title **- From here, you can style the step title.

![](https://nexterwp.com/wp-content/uploads/2024/12/process-steps-style-new.png)

**Description **- From here, you can style the step description. 

**Icon Area** - From here, you can manage the style of icon and image in the step circle.

**Connecting Line **- From here, you can style the connecting lines.

**Counter Area** - You’ll see this option only when the display counter toggle is enabled in the content tab. From here, you can style the counter in the step circle.

**Content Background **- From here, you can style the step content area.

**Repeater Background** - From here, you can style the repeater items.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before adding process steps in WordPress?**
A: Nexter Blocks, POSIMYTH Nexter's Process Steps block, needs the default WordPress Block editor active and the Nexter Blocks plugin installed and activated. It is also a Premium block, so the PRO version of Nexter Blocks is required. One easy thing to miss is activation inside Nexter → Blocks, where you search for Process Steps and turn it on before it appears in the editor.

**Q: Why is the Process Steps block not showing in my WordPress editor?**
A: The block usually stays hidden until it is activated in Nexter → Blocks. The page says to search for Process Steps there and switch it on, and that only works if the default WordPress Block editor is active and Nexter Blocks is installed. If those pieces are missing, the block will not be available to add to a page.

**Q: Should I use horizontal or vertical process steps on a website?**
A: Horizontal works best when you want a compact sequence across the page, while vertical is better when each step needs more breathing room. Nexter Blocks offers both layout styles in the Process Steps block, so the choice comes down to content density and screen space. The page also notes that vertical can be used on tablet screens through the Vertical In Tablet option.

**Q: Can I connect process steps with a carousel in WordPress?**
A: Nexter Blocks supports a Remote Sync Connection that lets the Process Steps block connect with the Carousel Anything block. That matters when you want the steps and carousel content to stay in sync instead of behaving like separate elements. The page also lists Carousel Anything Connection as one of the key features, so this is built into the workflow.

**Q: How do I add step numbers or custom labels to process steps?**
A: The Counter toggle adds step counters, and the Counter Type dropdown controls which counter style appears. If you pick Custom Text, each repeater item gets its own custom label field, which is useful when numbers are not enough and you want names like phases or milestones. That makes the sequence easier to scan than plain numbered steps.

**Q: How do I make process steps look good on mobile and tablet?**
A: The Extra Options tab handles responsive behavior for the Process Steps block. Vertical In Tablet converts horizontal steps into vertical ones on tablet screens, while Normal Layout In Mobile keeps them as normal blocks on mobile unless you disable it, which switches mobile back to vertical. That gives you control over whether readability or compactness matters more on smaller screens.