• Home
  • Templates
  • Page builder
  • Support
  • Blog
  • Home
  • Templates
  • Page builder
  • Support
  • Blog

     

    Easy-to-Use & Customizable

    Horizontal timeline widget 

     

    bg-dark hs-fullwidth has-no-gutter color-white

    style01

    1. Vestibulum volutpat pretium libero. Ut id nisl quis enim dignissim sagittis. Vivamus aliquet elit ac nisl. Pellentesque posuere. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    2. Etiam feugiat lorem non metus. Proin faucibus arcu quis ante. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
    3. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
    4. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
    5. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
    6. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here ...

    <style type="text/css"> /*<![CDATA[*/ .events-content ol { list-style-type: none; } #cc-inner .horizontal-timeline .events-content li { width: auto; left: 0; top: 0; margin: auto; padding: 20px; background: #f0f0f0; border-radius: 5px; font-size: inherit; text-align: left; } #cc-inner .horizontal-timeline .filling-line, #cc-inner .horizontal-timeline .events a.older-event::after, #cc-inner .horizontal-timeline .events a.selected::after{ background-color: #003be0; } #cc-inner .horizontal-timeline .events, #cc-inner .horizontal-timeline .events a::after{ background:#000; } #cc-inner .timeline-navigation a:hover { color: inherit; border-color: inherit; } /*]]>*/ </style>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/css/horizontal_timeline.2.0.min.css" /> <script src="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/JavaScript/horizontal_timeline.2.0.min.js"></script> <script src="https://unpkg.com/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script>
    <div class="horizontal-timeline" id="myTimeline"> <div class="events-content"> <ol> <li class="selected" data-horizontal-timeline='{"date": "12/12/2012", "customDisplay": "Sunday"}'>Vestibulum volutpat pretium libero. Ut id nisl quis enim dignissim sagittis. Vivamus aliquet elit ac nisl. Pellentesque posuere. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </li> <li data-horizontal-timeline='{"date": "12/12/2016", "customDisplay": "Monday"}'>Etiam feugiat lorem non metus. Proin faucibus arcu quis ante. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. </li> <li data-horizontal-timeline='{"date": "12/12/2017", "customDisplay": "Tuesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna. </li> <li data-horizontal-timeline='{"date": "12/12/2018", "customDisplay": "Wednesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna. </li> <li data-horizontal-timeline='{"date": "12/12/2019", "customDisplay": "Thursday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna. </li> <li data-horizontal-timeline='{"date": "12/12/2020", "customDisplay": "Friday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here ... </li> </ol> </div> </div> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { // timeline $(function(){ $('#myTimeline').horizontalTimeline({ // ! Deprecate these individual options in favour of the object options. // desktopDateIntervals: 200, //************\\ tabletDateIntervals: 150, // Minimum: 120 \\ mobileDateIntervals: 120, //****************\\ minimalFirstDateInterval: true, dateIntervals: { "desktop": 200, //************\\ "tablet": 150, // Minimum: 120 \\ "mobile": 120, //****************\\ "minimal": true }, // display type: dateTime, date, time, dayMonth, monthYear, year dateDisplay: "dateTime", // normal, reverse dateOrder: "normal", // enable/disable autoplay autoplay: false, // autoplay speed in seconds autoplaySpeed: 8, // pause hover autoplayPause_onHover: false, // enable/disable touchSwipe plugin useTouchSwipe: true, // enable/disable keyboard interactions useKeyboardKeys: false, // auto load required resources addRequiredFile: false, // enable nav buttons useNavBtns: true, // enable scroll buttons useScrollBtns: false, // Font Awesome icons useFontAwesomeIcons: true, // ! Deprecate these individual options in favour of the object options. // iconBaseClass: "fa fa-3x", // Space separated class names scrollLeft_iconClass: "fa-chevron-circle-left", scrollRight_iconClass: "fa-chevron-circle-right", prev_iconClass: "fa-arrow-circle-left", next_iconClass: "fa-arrow-circle-right", pause_iconClass: "fa-pause-circle", play_iconClass: "fa-play-circle", animation_baseClass: "animationSpeed", // Space separated class names enter_animationClass: { "left": "enter-left", "right": "enter-right" }, exit_animationClass: { "left": "exit-left", "right": "exit-right" }, iconClass: { "base": "fa fa-3x", // Space separated class names "scrollLeft": "fa-chevron-circle-left", "scrollRight": "fa-chevron-circle-right", "prev": "fa-arrow-circle-left", "next": "fa-arrow-circle-right", "pause": "fa-pause-circle", "play": "fa-play-circle" } }); }); }); })(jQuery); //]]> </script>

    style02

    1. Vestibulum volutpat pretium libero. Ut id nisl quis enim dignissim sagittis. Vivamus aliquet elit ac nisl. Pellentesque posuere. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    2. Etiam feugiat lorem non metus. Proin faucibus arcu quis ante. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.
    3. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
    4. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
    5. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
    6. Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here ...
    hs-fullwidth color-white bg-dark


    <style type="text/css"> /*<![CDATA[*/ .events-content ol { list-style-type: none; } #cc-inner .horizontal-timeline.has-dark-style .events-content li { width: auto; left: 0; top: 0; margin: auto; padding: 20px; background: #222; border-radius: 5px; font-size: inherit; text-align: left; } #cc-inner .horizontal-timeline.has-dark-style .filling-line, #cc-inner .horizontal-timeline.has-dark-style .events a.older-event::after, #cc-inner .horizontal-timeline.has-dark-style .events a.selected::after{ background-color: #eca825; } #cc-inner .horizontal-timeline.has-dark-style .events, #cc-inner .horizontal-timeline.has-dark-style .events a::after{ background:#fff; } #cc-inner .horizontal-timeline.has-dark-style .timeline-navigation a, #cc-inner .horizontal-timeline.has-dark-style .events a { color: #fff; } #cc-inner .timeline-navigation a:hover { color: inherit; border-color: inherit; } /*]]>*/ </style><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/css/horizontal_timeline.2.0.min.css" /> <script src="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/JavaScript/horizontal_timeline.2.0.min.js"></script> <script src="https://unpkg.com/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script> <div class="horizontal-timeline has-dark-style" id="myTimeline2"> <div class="events-content"> <ol> <li class="selected" data-horizontal-timeline='{"date": "12/12/2012", "customDisplay": "Sunday"}'>Vestibulum volutpat pretium libero. Ut id nisl quis enim dignissim sagittis. Vivamus aliquet elit ac nisl. Pellentesque posuere. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </li> <li data-horizontal-timeline='{"date": "12/12/2016", "customDisplay": "Monday"}'>Etiam feugiat lorem non metus. Proin faucibus arcu quis ante. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. </li> <li data-horizontal-timeline='{"date": "12/12/2017", "customDisplay": "Tuesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna. </li> <li data-horizontal-timeline='{"date": "12/12/2018", "customDisplay": "Wednesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna. </li> <li data-horizontal-timeline='{"date": "12/12/2019", "customDisplay": "Thursday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna. </li> <li data-horizontal-timeline='{"date": "12/12/2020", "customDisplay": "Friday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here ... </li> </ol> </div> </div> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { // timeline $(function(){ $('#myTimeline2').horizontalTimeline({ // ! Deprecate these individual options in favour of the object options. // desktopDateIntervals: 200, //************\\ tabletDateIntervals: 150, // Minimum: 120 \\ mobileDateIntervals: 120, //****************\\ minimalFirstDateInterval: true, dateIntervals: { "desktop": 200, //************\\ "tablet": 150, // Minimum: 120 \\ "mobile": 120, //****************\\ "minimal": true }, // display type: dateTime, date, time, dayMonth, monthYear, year dateDisplay: "dateTime", // normal, reverse dateOrder: "normal", // enable/disable autoplay autoplay: false, // autoplay speed in seconds autoplaySpeed: 8, // pause hover autoplayPause_onHover: false, // enable/disable touchSwipe plugin useTouchSwipe: true, // enable/disable keyboard interactions useKeyboardKeys: false, // auto load required resources addRequiredFile: false, // enable nav buttons useNavBtns: true, // enable scroll buttons useScrollBtns: false, // Font Awesome icons useFontAwesomeIcons: true, // ! Deprecate these individual options in favour of the object options. // iconBaseClass: "fa fa-3x", // Space separated class names scrollLeft_iconClass: "fa-chevron-circle-left", scrollRight_iconClass: "fa-chevron-circle-right", prev_iconClass: "fa-arrow-circle-left", next_iconClass: "fa-arrow-circle-right", pause_iconClass: "fa-pause-circle", play_iconClass: "fa-play-circle", animation_baseClass: "animationSpeed", // Space separated class names enter_animationClass: { "left": "enter-left", "right": "enter-right" }, exit_animationClass: { "left": "exit-left", "right": "exit-right" }, iconClass: { "base": "fa fa-3x", // Space separated class names "scrollLeft": "fa-chevron-circle-left", "scrollRight": "fa-chevron-circle-right", "prev": "fa-arrow-circle-left", "next": "fa-arrow-circle-right", "pause": "fa-pause-circle", "play": "fa-play-circle" } }); }); }); })(jQuery); //]]> </script>

    How to add a custom widget to your Jimdo website

    1. Click the Matrix Themes admin menu and select the 'Shortcodes' section.

     

    2. Choose any custom widget using the copy button.

     

    3. Paste the widget code to your website inside the 'Widget/HTML' module.

     

    4. Customize it by adding your own text and images.

    hs-fullwidth bg-lightgray
    How to add a custom widget to Jimdo website

    Make your own website

    with built-in tools to grow your business online.

    Select a template
    bg-dark color-white hs-fullwidth

    Support

    • Docs
    • Guides
    • Style Editor
    • Global Updates
    • Theme Updates
    • Common support issues

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Matrix Themes for Agencies
    • Matrix Themes for Web Designers
    • Small Business websites
    • Create a new website
    • Pricing
    hide-in-doc-page

    draggable-logo

    Showcase

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
     
    has-center-nav g-font has-large-header
     
    Navigation styles
     
    size-15 weight-400 snip-nav --line01 is-uppercase
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white

     

    Typography

    Heading H1
    weight-600 is-uppercase
     
    Heading H2
    weight-400 is-uppercase
     
    Heading H3
    weight-600 is-uppercase
     
    Buttons
    weight-600 is-uppercase
     
    Animations
     

    Note:
    All changes made here will be applied to your entire website.
    is-switcher

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Created with Jimdo
    Log in Log out | Edit
    • Scroll to top
    Close