{"id":8275,"date":"2019-06-06T08:16:05","date_gmt":"2019-06-06T08:16:05","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=8275"},"modified":"2023-01-24T18:45:12","modified_gmt":"2023-01-24T18:45:12","slug":"jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/","title":{"rendered":"Horizontal Timeline Widget Overview"},"content":{"rendered":"\n<p>With the Horizontal Timeline widget from JetElements, you can let the visitors know about events and projects showcased on your website. It is a great tool for organizing your events in an appealing way. You can add any content, icons, images, and description to the timeline.<\/p>\n\n\n\n<p>From this tutorial, you will learn how to create a really neat and easy-to-follow timeline for your website. Now, let\u2019s dive into this process!<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Enable Horizontal Timeline<\/strong><\/p>\n\n\n\n<p>Navigate to the <strong><em>JetPlugins<\/em><\/strong><em> &gt;<\/em><strong><em> JetElements Settings<\/em><\/strong><em> &gt; <\/em><strong><em>Available Widgets<\/em><\/strong> and turn on the Horizontal Timeline widget.<\/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-settings.png\" alt=\"JetElements available widgets settings\" class=\"wp-image-20122\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Add the Horizontal Timeline Widget to the page<\/strong><\/p>\n\n\n\n<p>Open the page where you want to add a horizontal timeline element and click on the &#8220;<strong>Edit with Elementor<\/strong>&#8221; button. Find the <strong>Horizontal Timeline<\/strong> widget and drag it to the section where you want to place it.<\/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\/horizontal-timeline-widget.png\" alt=\"Horizontal Timeline widget\" class=\"wp-image-13837\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Define the Settings<\/strong><\/p>\n\n\n\n<p>You\u2019ll see the basic preset of the timeline, but you can change it according to your preferences.  Let&#8217;s take a closer look at each of the settings blocks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"items-settings-block\">Items Settings Block<\/h2>\n\n\n\n<p>As you can see, the timeline consists of cards. You can freely delete and duplicate the cards. And if you need some more, it is easy to add them by clicking the &#8220;<strong>Add Item<\/strong>&#8221; button. In every card, there are options to customize both the content of the card and the appearance of the point. <\/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\/ht-item.png\" alt=\"horizontal timeline single item\" class=\"wp-image-20195\"\/><\/div>\n\n\n\n<ul>\n<li><strong>Active<\/strong>. By turning this toggle on you can make card visible to users;<\/li>\n\n\n\n<li><strong>Show Image<\/strong>. If you want to make the timeline more attractive and add some pictures &#8211; turn on this toggle. In this case, you will be able to choose the Image and its size;<\/li>\n\n\n\n<li><strong>Title<\/strong>. Here you can type in the name of the card;<\/li>\n\n\n\n<li><strong>Meta<\/strong>. In this field you can add different additional information, such as date, time or location;<\/li>\n\n\n\n<li><strong>Description<\/strong>. All the text that has to be displayed on the card has to bu written in this text area;<\/li>\n\n\n\n<li><strong>Point Content Type<\/strong>. The point can be shown as an icon and as a text. When you decide what variant fits you best, it will be possible to choose the icon or type in the text;<\/li>\n\n\n\n<li><strong>Button Text<\/strong>. If you want to add a button to the card, type in its title here;<\/li>\n\n\n\n<li><strong>Button Link<\/strong>. This is where the user who clicks the button will be led.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-settings-block\">Dynamic Settings Block<\/h2>\n\n\n\n<p>If you want the horizontal timeline to automatically show some events you create separately, you can use this settings block. Just be aware that it is only the dynamic repeater that can be used for a horizontal timeline.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"layout-settings-block\">Layout Settings Block<\/h2>\n\n\n\n<p>As it is obvious from the title, this submenu helps you to create a layout.<\/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\/ht4.png\" alt=\"Horizontal Timeline widget layout\" class=\"wp-image-8295\"\/><\/div>\n\n\n\n<ul>\n<li><strong>Columns<\/strong>. Here you can set the number of columns that will be visible for users at the same time;<\/li>\n\n\n\n<li><strong>Layout. <\/strong>With the help of those three buttons, you can define the vertical alignment of each card;<\/li>\n\n\n\n<li><strong>Alignment<\/strong>. Here are three variants of horizontal alignment;<\/li>\n\n\n\n<li><strong>Navigation Type<\/strong>. The horizontal timeline can be navigated by a scroll or arrows and here you can choose what variant is better for you.<\/li>\n<\/ul>\n\n\n\n<p>When you are done with settings, you can change the appearance of your horizontal timeline using different options in the <strong>Style<\/strong> settings section. For example, you can create something like that:<\/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\/hr-example.png\" alt=\"horizontal timeline example\" class=\"wp-image-20196\"\/><\/div>\n\n\n\n<p>The last step here is to click on the &#8220;<strong>Publish<\/strong>&#8221; button and see the result.<\/p>\n\n\n\n<p>Well done! Now you know how to create a horizontal timeline and make your website even more attractive.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial explains what steps you need to take in order to add a horizontal timeline to your website 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 a Horizontal Timeline to the Page | Crocoblock<\/title>\n<meta name=\"description\" content=\"How to create a Horizontal Timeline allowing to showcase events and projects on your website. Use a widget for Elementor and enjoy the result!\" \/>\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-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/\" \/>\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 a Horizontal Timeline to the Page | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"How to create a Horizontal Timeline allowing to showcase events and projects on your website. Use a widget for Elementor and enjoy the result!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-24T18:45:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/jetelements-available-widgets-settings.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=\"4 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-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/\",\"name\":\"JetElements: How to Add a Horizontal Timeline to the Page | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-06T08:16:05+00:00\",\"dateModified\":\"2023-01-24T18:45:12+00:00\",\"description\":\"How to create a Horizontal Timeline allowing to showcase events and projects on your website. Use a widget for Elementor and enjoy the result!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/#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\":\"Horizontal 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 a Horizontal Timeline to the Page | Crocoblock","description":"How to create a Horizontal Timeline allowing to showcase events and projects on your website. Use a widget for Elementor and enjoy the result!","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-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Add a Horizontal Timeline to the Page | Crocoblock","og_description":"How to create a Horizontal Timeline allowing to showcase events and projects on your website. Use a widget for Elementor and enjoy the result!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/","og_site_name":"Help Center","article_modified_time":"2023-01-24T18:45:12+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/jetelements-available-widgets-settings.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/","name":"JetElements: How to Add a Horizontal Timeline to the Page | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-06T08:16:05+00:00","dateModified":"2023-01-24T18:45:12+00:00","description":"How to create a Horizontal Timeline allowing to showcase events and projects on your website. Use a widget for Elementor and enjoy the result!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-horizontal-timeline-widget-how-to-add-a-project-timeline-to-your-website\/#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":"Horizontal 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\/8275"}],"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=8275"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=8275"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=8275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}