{"id":8067,"date":"2019-06-06T08:47:28","date_gmt":"2019-06-06T08:47:28","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8067"},"modified":"2023-01-24T18:53:07","modified_gmt":"2023-01-24T18:53:07","slug":"jetelements-vertical-timeline-widget-how-to-add-a-project-timeline","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/","title":{"rendered":"Vertical Timeline Widget Overview"},"content":{"rendered":"\n<p>The Vertical Timeline widget is a great option for creating attractive timelines for projects, roadmaps, and upcoming and ongoing events. It shows what phases are already in the past, what is in progress now, and what is supposed to be finished in the future.<\/p>\n\n\n\n<p>From this tutorial, you will learn how to create an accurate project timeline with the help of the JetElements <strong>Vertical Timeline<\/strong> widget. Let\u2019s commence!<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Enable Vertical Timeline widget<\/strong><\/p>\n\n\n\n<p>First of all, make sure that you\u2019ve activated the <strong>Vertical Timeline<\/strong> widget. You can check it by navigating to the <strong><em>Crocoblock<\/em><\/strong><em> &gt; <\/em><strong><em>JetPlugins Settings<\/em><\/strong><em> &gt;  <\/em><strong><em>JetElements Settings<\/em><\/strong><em> &gt; <\/em><strong><em>Available Widgets<\/em><\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/jetelements-available-widgets.png\" alt=\"JetElements available widgets\" class=\"wp-image-20779\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Add the widget to the page<\/strong><\/p>\n\n\n\n<p>Open any page or post to which you want to add your timeline and drag-n-drop the <strong>Vertical Timeline<\/strong> widget to the needed section.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/vertical-timeline-widget-1.png\" alt=\"Vertical Timeline widget\" class=\"wp-image-20781\"\/><\/div>\n\n\n\n<p>You\u2019ll start with a basic style preset, and this is pretty great because you\u2019ve already got a design to work with, so you don\u2019t have to create stuff from scratch.<\/p>\n\n\n\n<p>Let\u2019s have a look at the cards in the <strong>Content<\/strong> tab. Here goes the number of items that you can add to your timeline. You can add as many items as you need. Inside every item, you\u2019re able to add an <strong>Image<\/strong>, change the <strong>Title<\/strong> of your card, add <strong>Meta<\/strong> and <strong>Description<\/strong>.<\/p>\n\n\n\n<p>Also, every card has a point, so you can choose an icon that will be displayed in it or a text.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/05\/vt3.png\" alt=\"Vertical Timeline content\" class=\"wp-image-8076\"\/><\/div>\n\n\n\n<p>Now, let\u2019s move on to the <strong>Layout<\/strong> tab. First off, you can animate cards, so they will appear on your page with an animation effect. There\u2019s also an option to choose between horizontal and vertical alignment.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/05\/vt5.png\" alt=\"Vertical Timeline widget layout\" class=\"wp-image-8078\"\/><\/div>\n\n\n\n<p>The next step here is the <strong>Style <\/strong>settings section, where you can change the appearance of your timeline according to your preferences and needs.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/timeline-example.png\" alt=\"Vertical Timeline example\" class=\"wp-image-20780\"\/><\/div>\n\n\n\n<p>So, this is actually all you need to do to create a timeline for your project or any event. Click on the &#8220;<strong>Publish<\/strong>&#8221; button and preview the results!<\/p>\n\n\n\n<p>Now you know how to create a project timeline with the <strong>JetElements Vertical Timeline<\/strong> widget. This is quite easy to do, but the result is amazing. Hope this tutorial was useful and you\u2019ll enjoy the result!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains what steps you have to take in order to add the Vertical Timeline widget to your website&#8217;s page using the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[517],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: How to Add Vertical Timeline | Crocoblock<\/title>\n<meta name=\"description\" content=\"Check how to use Vertical Timeline widget for creating stylish timelines for projects, upcoming and ongoing events and roadmaps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Add Vertical Timeline | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Check how to use Vertical Timeline widget for creating stylish timelines for projects, upcoming and ongoing events and roadmaps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-24T18:53:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/jetelements-available-widgets.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/\",\"name\":\"JetElements: How to Add Vertical Timeline | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-06T08:47:28+00:00\",\"dateModified\":\"2023-01-24T18:53:07+00:00\",\"description\":\"Check how to use Vertical Timeline widget for creating stylish timelines for projects, upcoming and ongoing events and roadmaps.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Vertical Timeline Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Add Vertical Timeline | Crocoblock","description":"Check how to use Vertical Timeline widget for creating stylish timelines for projects, upcoming and ongoing events and roadmaps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Add Vertical Timeline | Crocoblock","og_description":"Check how to use Vertical Timeline widget for creating stylish timelines for projects, upcoming and ongoing events and roadmaps.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/","og_site_name":"Help Center","article_modified_time":"2023-01-24T18:53:07+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/jetelements-available-widgets.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/","name":"JetElements: How to Add Vertical Timeline | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-06T08:47:28+00:00","dateModified":"2023-01-24T18:53:07+00:00","description":"Check how to use Vertical Timeline widget for creating stylish timelines for projects, upcoming and ongoing events and roadmaps.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-vertical-timeline-widget-how-to-add-a-project-timeline\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Vertical Timeline Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/8067"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=8067"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8067"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}