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-1513" 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 far fa-bell" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-1513" role="heading" aria-level="2"><a target="_blank" title="Basic Knowledge for WordPress dummies" href="https://staging2.cooltimeline.com/timeline/basic-knowledge-wordpress-dummies/" class="story-link">Basic Knowledge for WordPress dummies</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 1</div><div class="ctl-label-small">Getting Started</div></div><div class="ctl-description"><p>Before Starting we want to tell you that you can install a plugin in WordPress 3 way –</p>
<ul>
<li>Direct WordPress plugin search</li>
<li>Upload a plugin inside WordPress</li>
<li>By using FTP to upload a plugin.</li>
</ul>
</div></div></div><div id="ctl-story-15879" class="ctl-story ctl-story-icon even ctl-story-left ctl-no-media ctl-main-date" data-story-index="2" role="article"><div class="ctl-icon"><i class= "fa fa-search" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-15879" role="heading" aria-level="2"><a target="_blank" title="Install via direct WordPress plugin search" href="https://staging2.cooltimeline.com/timeline/install-via-direct-wordpress-plugin-search/" class="story-link">Install via direct WordPress plugin search</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 2</div><div class="ctl-label-small">Search & Install Plugin</div></div><div class="ctl-description"><p>First thing you need to do is go to your WordPress admin area and click on Plugins » Add New. Then search any plugin and click on install button. But from here you can only install free plugins that are available in WordPress plugin directory. Click on image left from more info.</p>
</div></div></div><div id="ctl-story-15880" class="ctl-story ctl-story-icon odd ctl-story-right ctl-no-media ctl-main-date" data-story-index="3" role="article"><div class="ctl-icon"><i class= "fa fa-arrow-circle-o-up" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-15880" role="heading" aria-level="2"><a target="_blank" title="Upload a plugin in WordPress" href="https://staging2.cooltimeline.com/timeline/upload-plugin-wordpress/" class="story-link">Upload a plugin in WordPress</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 3</div><div class="ctl-label-small">Upload a Plugin</div></div><div class="ctl-description"><p>Paid plugins are not listed in WordPress directory so you can upload them via WordPress upload plugin option. First, you need to download the plugin from the source (which will be a zip file). Next, you need to go to WordPress admin area and visit Plugins » Add New page. Then upload plugin & activate it.</p>
</div></div></div><div id="ctl-story-1521" class="ctl-story ctl-story-icon even ctl-story-left ctl-no-media ctl-main-date" data-story-index="4" role="article"><div class="ctl-icon"><i class= "fa fa-inbox" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-1521" role="heading" aria-level="2"><a target="_blank" title="Manually FTP Upload A WordPress Plugin" href="https://staging2.cooltimeline.com/timeline/manually-ftp-upload-wordpress-plugin/" class="story-link">Manually FTP Upload A WordPress Plugin</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 4</div><div class="ctl-label-small">Manually FTP Upload</div></div><div class="ctl-description"><p>For this first you need to extract plugin zip file. Now Open the FTP client on your computer and connect. Once connected, you need to access the path /wp-content/plugins/ Next, upload the folder you extracted from the zip file to the /wp-content/plugins/ folder on your web server. Then you can activate your plugin from installed plugins list in WordPress dashboard.</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 1 of 2</span> <span aria-label="Page 1" aria-current="page" class="page-numbers current">1</span>
<a aria-label="Page 2" class="page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/2/">2</a>
<a class="next page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/2/"><i class="fas fa-angle-double-right"></i></a></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-1513" 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 far fa-bell" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-1513" role="heading" aria-level="2"><a target="_blank" title="Basic Knowledge for WordPress dummies" href="https://staging2.cooltimeline.com/timeline/basic-knowledge-wordpress-dummies/" class="story-link">Basic Knowledge for WordPress dummies</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 1</div><div class="ctl-label-small">Getting Started</div></div><div class="ctl-description"><p>Before Starting we want to tell you that you can install a plugin in WordPress 3 way –</p>
<ul>
<li>Direct WordPress plugin search</li>
<li>Upload a plugin inside WordPress</li>
<li>By using FTP to upload a plugin.</li>
</ul>
</div></div></div><div id="ctl-story-15879" class="ctl-story ctl-story-icon even ctl-story-left ctl-no-media ctl-main-date" data-story-index="2" role="article"><div class="ctl-icon"><i class= "fa fa-search" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-15879" role="heading" aria-level="2"><a target="_blank" title="Install via direct WordPress plugin search" href="https://staging2.cooltimeline.com/timeline/install-via-direct-wordpress-plugin-search/" class="story-link">Install via direct WordPress plugin search</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 2</div><div class="ctl-label-small">Search & Install Plugin</div></div><div class="ctl-description"><p>First thing you need to do is go to your WordPress admin area and click on Plugins » Add New. Then search any plugin and click on install button. But from here you can only install free plugins that are available in WordPress plugin directory. Click on image left from more info.</p>
</div></div></div><div id="ctl-story-15880" class="ctl-story ctl-story-icon odd ctl-story-right ctl-no-media ctl-main-date" data-story-index="3" role="article"><div class="ctl-icon"><i class= "fa fa-arrow-circle-o-up" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-15880" role="heading" aria-level="2"><a target="_blank" title="Upload a plugin in WordPress" href="https://staging2.cooltimeline.com/timeline/upload-plugin-wordpress/" class="story-link">Upload a plugin in WordPress</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 3</div><div class="ctl-label-small">Upload a Plugin</div></div><div class="ctl-description"><p>Paid plugins are not listed in WordPress directory so you can upload them via WordPress upload plugin option. First, you need to download the plugin from the source (which will be a zip file). Next, you need to go to WordPress admin area and visit Plugins » Add New page. Then upload plugin & activate it.</p>
</div></div></div><div id="ctl-story-1521" class="ctl-story ctl-story-icon even ctl-story-left ctl-no-media ctl-main-date" data-story-index="4" role="article"><div class="ctl-icon"><i class= "fa fa-inbox" aria-hidden ="true" ></i></div> <div class="ctl-arrow"></div>
<div class="ctl-content"> <div class="ctl-title story-1521" role="heading" aria-level="2"><a target="_blank" title="Manually FTP Upload A WordPress Plugin" href="https://staging2.cooltimeline.com/timeline/manually-ftp-upload-wordpress-plugin/" class="story-link">Manually FTP Upload A WordPress Plugin</a></div><div class="ctl-labels ctl-label-full"><div class="ctl-label-big">Step 4</div><div class="ctl-label-small">Manually FTP Upload</div></div><div class="ctl-description"><p>For this first you need to extract plugin zip file. Now Open the FTP client on your computer and connect. Once connected, you need to access the path /wp-content/plugins/ Next, upload the folder you extracted from the zip file to the /wp-content/plugins/ folder on your web server. Then you can activate your plugin from installed plugins list in WordPress dashboard.</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 1 of 2</span> <span aria-label="Page 1" aria-current="page" class="page-numbers current">1</span>
<a aria-label="Page 2" class="page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/2/">2</a>
<a class="next page-numbers" href="https://staging2.cooltimeline.com/demo/cool-timeline-pro/step-by-step-compact-timeline/page/2/"><i class="fas fa-angle-double-right"></i></a></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>
