Step By Step Timeline Designs
Design Compact Step By Step Timeline Using Cool Timeline Pro
Compact Layout (Default Design – Light Skin)
Shortcode (Above timeline uses this shortcode) :-
<div class="ctl-wrapper" role="region" aria-label="Timeline">
<div id="cool_timeline_3" class="cool-timeline-wrapper ctl-both-sided ctl-vertical-wrapper ctl-compact-wrapper ctl-default light-skin" data-nav="show" data-line-filling="false" data-nav-pos="right" data-nav-style="style-1">
<div class="ctl-start"></div>
<div class="ctl-timeline ctl-timeline-container" data-animation="fade-up" aria-live="polite">
<div class="ctl-inner-line" role="presentation"></div>
<div id="ctl-story-15881" class="ctl-story ctl-story-icon odd ctl-story-right ctl-no-media ctl-main-date" data-story-index="1" role="article"><span class="scrollable-section ctl-year-container" data-section-title="2016"></span><div class="ctl-icon"><i class= "fa fa-check" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-15881" role="heading" aria-level="2"><a target="_blank" title="Final Words!" href="https://staging2.cooltimeline.com/timeline/final-words/" class="story-link">Final Words!</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 5</div><div class="ctl-label-small">Final Words!</div></div><div class="ctl-description"><p>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 – <a href="mailto:contact@coolplugins.net">contact@staging2.cooltimeline.com</a></p>
</div></div></div> </div>
<div class="ctl-end"></div>
<nav class="ctl-pagination" aria-label="Timeline Navigation"><span class="page-numbers ctl-page-num" role="status"> Page 2 of 2</span> <a class="prev page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/1/"><i class="fas fa-angle-double-left"></i></a>
<a aria-label="Page 1" class="page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/1/">1</a>
<span aria-label="Page 2" aria-current="page" class="page-numbers current">2</span></nav> <style id="cool_timeline_3-styles" type="text/css">.ctl-wrapper .cool-timeline-wrapper.ctl-compact-wrapper.ctl-default {--ctw-cbx-title-color: #666666;} /* Specific Story Style Start *//* Specific Story Style End */</style></div>
</div>
Compact Layout (Default Design)
Shortcode (Above timeline uses this shortcode) :-
<div class="ctl-wrapper" role="region" aria-label="Timeline">
<div id="cool_timeline_4" class="cool-timeline-wrapper ctl-both-sided ctl-vertical-wrapper ctl-compact-wrapper ctl-default" data-nav="show" data-line-filling="false" data-nav-pos="right" data-nav-style="style-1">
<div class="ctl-start"></div>
<div class="ctl-timeline ctl-timeline-container" data-animation="fade-in" aria-live="polite">
<div class="ctl-inner-line" role="presentation"></div>
<div id="ctl-story-15881" class="ctl-story ctl-story-icon odd ctl-story-right ctl-no-media ctl-main-date" data-story-index="1" role="article"><span class="scrollable-section ctl-year-container" data-section-title="2016"></span><div class="ctl-icon"><i class= "fa fa-check" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-15881" role="heading" aria-level="2"><a target="_blank" title="Final Words!" href="https://staging2.cooltimeline.com/timeline/final-words/" class="story-link">Final Words!</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 5</div><div class="ctl-label-small">Final Words!</div></div><div class="ctl-description"><p>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 – <a href="mailto:contact@coolplugins.net">contact@staging2.cooltimeline.com</a></p>
</div></div></div> </div>
<div class="ctl-end"></div>
<nav class="ctl-pagination" aria-label="Timeline Navigation"><span class="page-numbers ctl-page-num" role="status"> Page 2 of 2</span> <a class="prev page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/1/"><i class="fas fa-angle-double-left"></i></a>
<a aria-label="Page 1" class="page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/1/">1</a>
<span aria-label="Page 2" aria-current="page" class="page-numbers current">2</span></nav> <style id="cool_timeline_4-styles" type="text/css">.ctl-wrapper .cool-timeline-wrapper.ctl-compact-wrapper.ctl-default {--ctw-cbx-title-color: #666666;} /* Specific Story Style Start *//* Specific Story Style End */</style></div>
</div>
