---
title: "Step By Step Vertical Timeline"
url: https://cooltimeline.com/demo/step-by-step-vertical-timeline/
date: 2025-11-11
modified: 2026-02-17
lang: en
author: "cpsatinder"
description: "Step By Step Vertical Timeline Vertical Timeline Layout To Show Step-by-Step Process Display your step-by-step process in a structured vertical timeline layout and easily add timeline in Divi and Elementor..."
image: https://cooltimeline.com/wp-content/uploads/2025/12/step_by_step-vertical_timeline.jpg
word_count: 129
---

# Step By Step Vertical Timeline

**Step By Step Vertical Timeline**

# Vertical Timeline Layout To Show Step-by-Step Process
Display your step-by-step process in a structured vertical timeline layout and easily add [timeline in Divi](https://cooltimeline.com/doc/timeline-in-divi/) and Elementor using this shortcode.

![cool-timeline](https://cooltimeline.com/wp-content/uploads/2025/10/icon-cool-timeline-150x150.png)
### Cool Timeline Pro
[
Vertical
](/demo/step-by-step-vertical-timeline/)
[
Compact
](/demo/step-by-step-compact-timeline/)
[
One side
](/demo/step-by-step-one-side-timeline/)
[
Horizontal
](/demo/step-by-step-horizontal-timeline/)
[

Buy Plugin
](/plugin/cool-timeline-pro/#pricing)

#### Vertical Layout- (Default Design)

## PROCESS TIMELINE

Step 5Final Words!
[Final Words!](https://cooltimeline.com/timeline/final-words/)If you are facing any difficulty in wordpress plugin installation then you can hire our expert developers team. We provide full wordpress support. Contact here – [contact@cooltimeline.com](mailto:contact@coolplugins.net)

Page 2 of 2 [**](https://cooltimeline.com/demo/step-by-step-vertical-timeline/page/1/)
[1](https://cooltimeline.com/demo/step-by-step-vertical-timeline/page/1/)
2

**Shortcode** (Above timeline uses this shortcode) :-

`
[[cool-timeline layout="default" designs="design-1" skin="default" category="howto-timeline" show-posts="4" order="ASC" icons="icon" animations="fade-up" story-content="full" based="custom" compact-ele-pos="main-date" pagination="default" filters="no" timeline-title=" PROCESS TIMELINE" year-label="hide"]]
`

#### Vertical Layout- (Classic Design)

Step 5Final Words!
[Final Words!](https://cooltimeline.com/timeline/final-words/)If you are facing any difficulty in wordpress plugin installation then you can hire our expert developers team. We provide full wordpress support. Contact here – [contact@cooltimeline.com](mailto:contact@coolplugins.net)

Page 2 of 2 [**](https://cooltimeline.com/demo/step-by-step-vertical-timeline/page/1/)
[1](https://cooltimeline.com/demo/step-by-step-vertical-timeline/page/1/)
2

**Shortcode** (Above timeline uses this shortcode) :-

`
[[cool-timeline layout="default" designs="design-3" skin="default" category="howto-timeline" show-posts="4" order="ASC" icons="icon" animations="fade-up" story-content="full" based="custom" compact-ele-pos="main-date" pagination="default" filters="no" year-label="hide"]]
`