--- title: "Vertical Timeline Default Design" url: https://cooltimeline.com/demo/vertical-timeline-default/ date: 2025-11-03 modified: 2026-09-28 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 [ 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- (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… [Read More](https://cooltimeline.com/timeline/apply-serum/) 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… [Read More](https://cooltimeline.com/timeline/spot-treatment/) 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… [Read More](https://cooltimeline.com/timeline/hydrate-under-eyes/) 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.… [Read More](https://cooltimeline.com/timeline/lock-with-moisturizer/) 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="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 - (Default Design) Step 5 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[![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[![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[![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="false" read-more="hide" content-length="40" timeline-width="custom" timeline-custom-width="1140" show-title="show" title-link="disable" 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 4 [Boost with Essence](https://cooltimeline.com/timeline/boost-with-essence/)[![Essence](https://cooltimeline.com/wp-content/uploads/2026/01/Essence.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Essence.jpg)Essence adds lightweight hydration and supports skin repair. It helps improve skin softness and boosts moisture levels without feeling heavy. Gently pat it into the skin to help with better absorption and overall skin comfort. Step 3 [Balance with Toner](https://cooltimeline.com/timeline/balance-with-toner/)[![Toner](https://cooltimeline.com/wp-content/uploads/2026/01/Toner.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Toner.jpg)Toner helps balance the skin’s pH and removes any leftover impurities after cleansing. It also refreshes the skin and prepares it for serums or treatments. Choose an alcohol-free toner to avoid dryness or irritation. Step 2 [Exfoliate Gently](https://cooltimeline.com/timeline/exfoliate-gently/)[![Exfoliation](https://cooltimeline.com/wp-content/uploads/2026/01/Exfoliation.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Exfoliation.jpg)Exfoliation removes dead skin cells and helps improve skin texture and glow. Use a mild exfoliator 2–3 times a week, not daily. This step helps skincare products absorb better and keeps skin looking fresh and smooth. 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="DESC" 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"]] `