1. Home
  2. Cool Timeline Pro
  3. Create Horizontal Timeline

Create Horizontal Timeline

With Gutenberg

  • To create a vertical time line Goto Pages/Post >> Add new page/Post >> Choose story  timeline shortcode.
  • From the timeline setting on the right menu bar choose the layout for the timeline.
  • There are multiple layout options to create a vertical layout choose the “Horizontal” option.


With Default Classic Editor

In the default editor, click on the “^” arrow on the editor menu bar, and choose Horizontal timeline. 

See the below image for a better understanding. 


Using Shortcode

For more details, check below mentioned shortcode settings table: 

Example code:  

[cool-timeline layout=”horizontal” category=”history” skin=”default” designs=”default” show-posts=”20″ order=”DESC” items=”” icons=”NO” story-content=”short” date-format=”default” based=”default” autoplay=”false” start-on=”0″]

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


Shortcode Attribute/Settings Default Value Available Options Description
Timeline Categories category=”timeline-stories” Dynamic Categories List Create Category Specific Timeline (By Default – All Categories)
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.
Story Per View show-posts=”3″ 3 You Can Show Pagination After These Posts In Vertical Timeline.
Autoplay Settings autoplay=”false”
  • false
  • true
Enables Autoplay slide show on your timeline stories
Timeline Starting from Story e.g(2) start-on=”0″ 0
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)
Was this article helpful to you? Yes No 5

How can we help?

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *