---
title: "Step By Step One Side Timeline"
url: https://cooltimeline.com/demo/step-by-step-one-side-timeline/
date: 2026-01-15
modified: 2026-01-15
lang: en
author: "cpsatinder"
description: "Step By Step One Side Timeline One-Side Vertical Step By Step Timeline Demo Cool Timeline Pro Vertical Compact One side Horizontal Buy Plugin One Side Layout- (Classic Design) Shortcode (Above..."
word_count: 105
---

# Step By Step One Side Timeline

**Step By Step One Side Timeline**

# One-Side Vertical Step By Step Timeline Demo
![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)

#### One Side 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-one-side-timeline/page/1/)
[1](https://cooltimeline.com/demo/step-by-step-one-side-timeline/page/1/)
2

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

`
[[cool-timeline layout="one-side" 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"]]
`

#### One Side Layout- (Flat 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-one-side-timeline/page/1/)
[1](https://cooltimeline.com/demo/step-by-step-one-side-timeline/page/1/)
2

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

`
[[cool-timeline layout="one-side" designs="design-2" 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"]]
`