---
title: "Vertical Timeline Flat Design"
url: https://cooltimeline.com/demo/vertical-timeline-flat/
date: 2025-11-06
modified: 2026-10-07
lang: en
author: "cpsatinder"
description: "Vertical Timeline (flat Design) Create Flat Vertical Timeline WordPress Check out the flat vertical timeline demo with a clean, structured layout, that works seamlessly once you add timeline stories to..."
image: https://cooltimeline.com/wp-content/uploads/2025/12/vertical_timeline_flat_pro.jpg
word_count: 253
---

# Vertical Timeline Flat Design

**Vertical Timeline (flat Design)
**

# Create Flat Vertical Timeline WordPress
Check out the flat vertical timeline demo with a clean, structured layout, that works seamlessly once you [add timeline stories](https://cooltimeline.com/doc/add-timeline-stories/) to your timeline.

![cool-timeline](https://cooltimeline.com/wp-content/uploads/2025/10/icon-cool-timeline-150x150.png)
### Cool Timeline Pro
[
Default
](/demo/vertical-timeline-default/)
[
Flat
](/demo/vertical-timeline-flat/)
[
Classic
](/demo/vertical-timeline-classic/)
[
Elegant
](/demo/vertical-timeline-elegant/)
[
Clean
](/demo/vertical-timeline-clean/)
[
Modern
](/demo/vertical-timeline-modern/)
[
Minimal
](/demo/vertical-timeline-minimal/)
[

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

Default Skin

Dark Skin

Light Skin

#### Default Skin- (Flat Design)

#### Sorry,You have not added any story yet

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

`
[[cool-timeline layout="default" designs="design-2" skin="default" category="fitness-services" based="custom" story-content="short" show-posts="4" start-on="0" compact-ele-pos="main-date" animations="fade-up" order="ASC" story-date="show" date-format="F j" icons="icon" pagination="default" pagination-style="style-3" filters="no" line-filling="true" read-more="hide" content-length="20" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="enable" equal-height="false" show-image="show" image-size="large"]]
`

#### Dark Skin - (Flat Design)

#### Sorry,You have not added any story yet

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

`
[[cool-timeline layout="default" designs="design-2" skin="dark" category="fitness-services" based="custom" story-content="short" show-posts="4" start-on="0" compact-ele-pos="main-date" animations="fade-up" order="ASC" story-date="show" date-format="F j" icons="icon" pagination="default" pagination-style="style-4" filters="no" line-filling="true" read-more="show" content-length="20" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="enable" equal-height="false" show-image="show" image-size="large"]]
`

#### Light Skin (Flat Design)

#### Sorry,You have not added any story yet

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

`
[[cool-timeline layout="default" designs="design-2" skin="light" category="fitness-services" based="custom" story-content="short" show-posts="4" start-on="0" compact-ele-pos="main-date" animations="fade-up" order="ASC" story-date="show" date-format="F j" icons="icon" pagination="off" filters="no" line-filling="true" read-more="hide" content-length="20" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="enable" equal-height="false" show-image="show" image-size="large"]]
`