1. Home
  2. Cool Timeline Pro
  3. Create Vertical Content Timeline

Create Vertical Content Timeline

Vertical content timeline used to create story timeline from the existing post, you can easily Integrate Timeline of WordPress Default posts or custom posts using below-mentioned methods:

  • Using shortcodes:
  1. Just Copy Shortcode from the Demo website and Paste to your Page or Post.
  2. You can also generate shortcodes using Shortcodes Generator.
  • Using Gutenberg Timeline Story Block.
  • Using Visual Composer Timeline Stories Addon.
  • You can use Elementor addons to add a story timeline

You can easily Create Vertical  Content Timeline Using Below mentioned Methods

With Gutenberg:
  • To create a vertical time line Goto Pages/Post >> Add new page/Post >> Choose Content Timeline shortcode.
  • From the timeline setting on the right menu bar select the layout for the timeline.
  • There are multiple layout options to create a vertical layout choose the “Vertical” option.
  • Choose Required Setting Options and Publish the Page.

See the below image for a better understanding.

With Default Classic Editor:

Step 1:

  • To create a vertical Timeline Goto Pages/Post >> Add new page/Post >> Click Add Timeline shortcode.

Step 2:

  • From the Top Select Box Option choose the Post Timeline.
  • Click on select layout option and Choose Vertical Option From Dropdown.
  • Select Required Settings from the Options and Click on Insert Shortcode.

Using Shortcode

For more details, check the below-mentioned shortcode settings table.
Example code:

[cool-content-timeline post-type=”post” post-category=”” tags=”” story-content=”short” taxonomy=”category” layout=”default” designs=”default” skin=”default” show-posts=”10″ order=”DESC” icons=”NO” animations=”bounceInUp” date-format=”default” pagination=”default” filters=”no”]

Change the values from the below-mentioned table to create your custom timeline.

Shortcode Attribute/Settings Default Value Available Options Description
Content Post Type post-type=”post” post Don’t Change This If You Are Creating Blog Posts Timeline or Define Content Type Of Your Timeline Like:- Posts
Taxonomy Name taxonomy=”category” category Don’t Change This If You Are Creating Blog Posts Timeline or Define Content Type Taxonomy.
Specific category(s) (Add category(s) slug – comma separated) post-category=”” Add Dynamic category Slug Show Category Specific Blog Posts. Like For cooltimeline.com/category/fb-history/ it will be fb-history
Specific tags(add tags slug) tags=”” Add Dynamic tag Slug Show Tag Specific Blog Posts. Like For cooltimeline.com/tag/fb-history/ it will be fb-history.
Timeline Layouts layout=”default” Select your Vertical Timeline Layout from dropdown.
Timeline Designs designs=”default” View Demos and Choose your timeline layout design from these design.
Timeline skins skin=”default” Create Light, Dark or Colorful Timeline
Date Formats date-format=”default”
  • F j January 1 (F j)
  • F j Y January 1 2019 (F j Y)
  • Y-m-d 2019-01-01 (Y-m-d)
  • m/d/Y 01/01/2019 (m/d/Y)
  • d/m/Y 01/01/2019 (d/m/Y)
  • F j Y g:i A January 1 2019 11:10 AM (F j Y g:i A)
  • Y 2019(Y)
  • custom Custom
Select Timeline Stories dates custom formats.
Timeline Based On based=”default”
  • default For Date Based Timeline
  • custom For Custom Order based Timeline
Show either Story Dates or custom label/text along with timeline stories.
Stories Per Page show-posts=”10″ 10 You Can Show Pagination After These Posts In Vertical Timeline.
Pagination Settings pagination=”default”
  • default Default Numbered
  • ajax-load-more Ajax Load More
Choose your Vertical Timeline Layout Pagination Type.
Icons icons=”NO”
  • no
  • Yes
Display Icons In Timeline Stories. By default Is Dot.
Stories Description story-content=”short”
  • short: Display small description of timeline Stories
  • full:- Display Full Description with HTML of timeline Stories.
Timeline Stories content settings.If you would like to show HTML and All content on timeline.
Then just select full option of content settings.
Stories Order order=”DESC”
  • DESC: DESC(2017-1900)
  • ASC:- ASC(1900-2017)
Timeline Stories order like:- DESC(2017-1900) , ASC(1900-2017)
Category Filters Settings filters=”no”
  • no
  • Yes
Compact Layout Date&Title positon compact-ele-pos=”main-date”
  • main-date On top date/label below title
  • main-titleOn top title below date/label
This settings only works with Compact layout
Use this settings to change compact timeline layout date and title elements position
Animation animation=”none”
  • bounceInUp
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • slideInDown
  • slideInUp
  • bounceIn
  • slideInLeft
  • slideInRight
  • shake
  • wobble
  • swing
  • jello
  • flip
  • fadein
  • rotatein
  • zoomIn
Add Animations Effect Inside Timeline. You Can Check Effects Demo From Animate.css.