Cool Timeline Pro

⌘K
  2. Home
  4. Docs
  6. Cool Timeline Pro
  8. Shortcodes
  10. Vertical Shortcode

Vertical Shortcode

Vertical Timeline

				
					[cool-timeline  layout="default" designs="design-1" skin="default" show-posts="10" story-date="show" date-format="F j"  icons="dot" animation="none" story-content="short" based="default" compact-ele-pos="main-date" pagination="default" year-label="show" year-navigation="hide" navigation-position=""  navigation-style="style-1" filters="no"  line-filling="false" read-more="show" content-length="50" order="DESC" ]
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 Layouts layout="default" Select your Vertical Timeline Layout from a dropdown.
Timeline Designs designs="design-1" 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="F J"
  • 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
  • off off Pagination
Choose your Vertical Timeline Layout Pagination Type.
Icons icons="dot"
  • icon
  • dot
  • none
 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 a 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 position compact-ele-pos="main-date"
  • main-date On top date/label below title
  • main-title On top title below date/label
 This settings only work with Compact layout
Use these settings to change compact timeline layout date and title elements position
Timeline title timeline-title Dynamic value You have the flexibility to add a title for each timeline.
Year Label year-label="show show OR hide You can enable and disable the year label
Year Navigation year-navigation="hide" show OR hide enable or disable year navigation
Navigation Position navigation-position left, right, bottom adjust the navigation position for your timeline
Line Filling line-filling="false" true OR false enable or disable line filling for the timeline
Animation animation="none"
  • none
  • fade
  • zoom-in
  • flip-right
  • zoom-out
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left
  • flip-up
  • flip-down
  • flip-left
  • slide-up
  • slide-left
  • slide-right
  • zoom-in-up
  • zoom-in-down
  • slide-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right
 Add Animations Effect Inside Timeline. You Can Check Effects Demo From Animate.css.
Story Date story date="show" show or hide You can enable and disable show the date.
story content story-content="short" short or full You can show a brief description of your story or a full description of your story
Read More read-more="show" show or hide You can enable and disable Show Read More button
Navigation style navigation-style="style-1"
  • style-1
  • style-2
  • style-3
 You can apply any style to your navigation bar
Content Length content-length="50" Fill any value You can fill in any values to display the content of your story
Navigation Position navigation-position left, right, bottom adjust the navigation position for your timeline

Vertical Post Timeline

				
					[cool-content-timeline post-type="post"  taxonomy="category"  layout="default" designs="design-1" skin="default" show-posts="10" story-date="show" date-format="F j" custom-date-format="icons="dot" animation="none" story-content="short" compact-ele-pos="main-date" pagination="default" year-label="show" year-navigation="hide" navigation-position="" navigation-style="style-1" filters="no" filter-categories="" line-filling="false" read-more="show" content-length="50" post-meta="hide" meta-key="" order="DESC"]
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.
Meta Key meta-key Dynamic value Enter your meta key here
Post Meta post-meta show OR hide enable of disable post meta from post timeline
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 a 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 a 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 the timeline.
Then just select a 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 the title
  • main-title top title below date/label
 This settings only work with Compact layout
Use this setting to change a compact timeline layout date and title elements position
Timeline title timeline-title Dynamic value You have the flexibility to add a title for each timeline.
Year Label year-label show OR hide You can enable and disable the year label
Year Navigation year-navigation show OR hide enable or disable year navigation
Navigation Position navigation-position left, right, bottom adjust the navigation position for your timeline
Line Filling line-filling true OR false enable or disable line filling for the timeline
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.
Story Date story date="show" show or hide You can enable and disable show the date.
Icons icons="dot"
  • icon
  • dot
  • none
 Display Icons In Timeline Stories. By default Is Dot.