--- title: "Vertical Timeline Default Design" url: https://cooltimeline.com/demo/vertical-timeline-default/ date: 2025-11-03 modified: 2026-09-22 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 1 [Cleanse Skin](https://cooltimeline.com/timeline/cleanse-skin/)[![face-cleanser](https://cooltimeline.com/wp-content/uploads/2026/01/face-cleanser.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/face-cleanser.jpg)Start with a gentle cleanser to remove dirt, oil, sweat, and makeup from your skin. Cleansing helps keep pores clean… [Read More](https://cooltimeline.com/timeline/cleanse-skin/) 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,… [Read More](https://cooltimeline.com/timeline/exfoliate-gently/) 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… [Read More](https://cooltimeline.com/timeline/balance-with-toner/) 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.… [Read More](https://cooltimeline.com/timeline/boost-with-essence/) Page 1 of 3 1 [2](https://cooltimeline.com/demo/vertical-timeline-default/page/2/) [3](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) [**](https://cooltimeline.com/demo/vertical-timeline-default/page/2/) **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 1 Cleanse Skin[![face-cleanser](https://cooltimeline.com/wp-content/uploads/2026/01/face-cleanser.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/face-cleanser.jpg)Start with a gentle cleanser to remove dirt, oil, sweat, and makeup from your skin. Cleansing helps keep pores clean and prepares your skin for the next steps. Use a mild cleanser that suits your skin type and avoid harsh Step 2 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. Step 3 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 4 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. Page 1 of 3 1 [2](https://cooltimeline.com/demo/vertical-timeline-default/page/2/) [3](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) [**](https://cooltimeline.com/demo/vertical-timeline-default/page/2/) **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 9 [Sun Protection & Night Care](https://cooltimeline.com/timeline/sun-protection-night-care/)[![Sun Protection & Night Care](https://cooltimeline.com/wp-content/uploads/2026/01/Sun-Protection-Night-Care.jpg)](https://cooltimeline.com/wp-content/uploads/2026/01/Sun-Protection-Night-Care.jpg)During the day, apply sunscreen as the final step to protect your skin from harmful UV rays and prevent aging and dark spots. At night, skip sunscreen and focus on repair using a nourishing night cream or sleeping mask to support skin recovery while you sleep. 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. 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 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. Page 1 of 3 1 [2](https://cooltimeline.com/demo/vertical-timeline-default/page/2/) [3](https://cooltimeline.com/demo/vertical-timeline-default/page/3/) [**](https://cooltimeline.com/demo/vertical-timeline-default/page/2/) **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"]] `