--- title: "Vertical Timeline Default Design" url: https://cooltimeline.com/demo/vertical-timeline-default/ date: 2025-11-03 modified: 2026-09-21 lang: en author: "cpsatinder" description: "Vertical Timeline (Default Design) Vertical Timeline Layout (Default Design) Explore this default vertical timeline demo displaying stories from top to bottom, with a vertical timeline shortcode option to add the..." image: https://cooltimeline.com/wp-content/uploads/2025/12/vertical_timeline_default_pro.jpg word_count: 259 --- # Vertical Timeline Default Design **Vertical Timeline (Default Design) ** # Vertical Timeline Layout (Default Design) Explore this default vertical timeline demo displaying stories from top to bottom, with a [vertical timeline shortcode](https://cooltimeline.com/doc/vertical-timeline-shortcode/) option to add the same layout anywhere on your website. ![cool-timeline](https://cooltimeline.com/wp-content/uploads/2025/10/icon-cool-timeline-150x150.png) ### Cool Timeline Pro [ Deafult ](/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- (Default Design) Step 5 [Apply Serum](https://cooltimeline.com/timeline/apply-serum/)[![Serum](https://cooltimeline.com/wp-content/uploads/2026/01/Serum.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Serum.jpg)Serums deliver targeted ingredients to address specific concerns like dullness, dryness, acne, or fine lines. Use only a few drops and gently spread it across your face. This step helps improve skin health over time. Step 6 [Spot Treatment](https://cooltimeline.com/timeline/spot-treatment/)[![Spot Treatment](https://cooltimeline.com/wp-content/uploads/2026/01/Spot-Treatment.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Spot-Treatment.jpg)Apply spot treatment only on areas with acne, dark spots, or blemishes. This step targets problem areas without affecting the rest of the skin. Use a small amount and allow it to absorb properly before moving on. Step 7 [Hydrate Under Eyes](https://cooltimeline.com/timeline/hydrate-under-eyes/)[![Eye Cream](https://cooltimeline.com/wp-content/uploads/2026/01/Eye-Cream.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Eye-Cream.jpg)Eye cream helps hydrate the delicate under-eye area and reduce dryness, puffiness, or fine lines. Use a small amount and gently tap it around the eyes. Avoid rubbing to protect this sensitive skin. Step 8 [Lock with Moisturizer](https://cooltimeline.com/timeline/lock-with-moisturizer/)[![Moisturizer](https://cooltimeline.com/wp-content/uploads/2026/01/Moisturizer.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Moisturizer.jpg)Moisturizer locks in hydration and keeps the skin soft and balanced. It strengthens the skin barrier and prevents moisture loss. Choose a lightweight or rich formula based on your skin type and apply evenly. Page 2 of 3 [**](https://cooltimeline.com/demo/vertical-timeline-default/page/1/) [1](https://cooltimeline.com/demo/vertical-timeline-default/page/1/) 2 [3](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) [**](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) **Shortcode** (Above timeline uses this shortcode) :- ` [[cool-timeline layout="default" designs="design-1" skin="default" category="skin-care" 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-1" filters="no" line-filling="true" read-more="show" content-length="50" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="enable" equal-height="false" show-image="show" image-size="large"]] ` #### Dark Skin - (Default Design) Step 5 [Apply Serum](https://cooltimeline.com/timeline/apply-serum/)[![Serum](https://cooltimeline.com/wp-content/uploads/2026/01/Serum.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Serum.jpg)Serums deliver targeted ingredients to address specific concerns like dullness, dryness, acne, or fine lines. Use only a few drops and gently spread it across your face. This step helps improve skin health over time. Step 6 [Spot Treatment](https://cooltimeline.com/timeline/spot-treatment/)[![Spot Treatment](https://cooltimeline.com/wp-content/uploads/2026/01/Spot-Treatment.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Spot-Treatment.jpg)Apply spot treatment only on areas with acne, dark spots, or blemishes. This step targets problem areas without affecting the rest of the skin. Use a small amount and allow it to absorb properly before moving on. Step 7 [Hydrate Under Eyes](https://cooltimeline.com/timeline/hydrate-under-eyes/)[![Eye Cream](https://cooltimeline.com/wp-content/uploads/2026/01/Eye-Cream.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Eye-Cream.jpg)Eye cream helps hydrate the delicate under-eye area and reduce dryness, puffiness, or fine lines. Use a small amount and gently tap it around the eyes. Avoid rubbing to protect this sensitive skin. Step 8 [Lock with Moisturizer](https://cooltimeline.com/timeline/lock-with-moisturizer/)[![Moisturizer](https://cooltimeline.com/wp-content/uploads/2026/01/Moisturizer.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Moisturizer.jpg)Moisturizer locks in hydration and keeps the skin soft and balanced. It strengthens the skin barrier and prevents moisture loss. Choose a lightweight or rich formula based on your skin type and apply evenly. Page 2 of 3 [**](https://cooltimeline.com/demo/vertical-timeline-default/page/1/) [1](https://cooltimeline.com/demo/vertical-timeline-default/page/1/) 2 [3](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) [**](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) **Shortcode** (Above timeline uses this shortcode) :- ` [[cool-timeline layout="default" designs="design-1" skin="dark" category="skin-care" 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-1" filters="no" line-filling="true" read-more="show" content-length="50" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="enable" equal-height="false" show-image="show" image-size="large"]] ` #### Light Skin (Default Design) Step 5 [Apply Serum](https://cooltimeline.com/timeline/apply-serum/)[![Serum](https://cooltimeline.com/wp-content/uploads/2026/01/Serum.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Serum.jpg)Serums deliver targeted ingredients to address specific concerns like dullness, dryness, acne, or fine lines. Use only a few drops and gently spread it across your face. This step helps improve skin health over time. Step 6 [Spot Treatment](https://cooltimeline.com/timeline/spot-treatment/)[![Spot Treatment](https://cooltimeline.com/wp-content/uploads/2026/01/Spot-Treatment.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Spot-Treatment.jpg)Apply spot treatment only on areas with acne, dark spots, or blemishes. This step targets problem areas without affecting the rest of the skin. Use a small amount and allow it to absorb properly before moving on. Step 7 [Hydrate Under Eyes](https://cooltimeline.com/timeline/hydrate-under-eyes/)[![Eye Cream](https://cooltimeline.com/wp-content/uploads/2026/01/Eye-Cream.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Eye-Cream.jpg)Eye cream helps hydrate the delicate under-eye area and reduce dryness, puffiness, or fine lines. Use a small amount and gently tap it around the eyes. Avoid rubbing to protect this sensitive skin. Step 8 [Lock with Moisturizer](https://cooltimeline.com/timeline/lock-with-moisturizer/)[![Moisturizer](https://cooltimeline.com/wp-content/uploads/2026/01/Moisturizer.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Moisturizer.jpg)Moisturizer locks in hydration and keeps the skin soft and balanced. It strengthens the skin barrier and prevents moisture loss. Choose a lightweight or rich formula based on your skin type and apply evenly. Page 2 of 3 [**](https://cooltimeline.com/demo/vertical-timeline-default/page/1/) [1](https://cooltimeline.com/demo/vertical-timeline-default/page/1/) 2 [3](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) [**](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) **Shortcode** (Above timeline uses this shortcode) :- ` [[cool-timeline layout="default" designs="design-1" skin="light" category="skin-care" 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-1" filters="no" line-filling="true" read-more="show" content-length="50" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="enable" equal-height="false" show-image="show" image-size="large"]] `