Divi Timeline Module

Another excellent product by Tortoise IT

Changelog

*
* < V1.3
* – Initial Release
*
* V1.3
* – Fixed responsive text size/line height issues
* – Added more configuration options in advanced design settings across all modules
*
* V1.4
* – Added new module for posts based timeline
* – Added title, content and gallery modules to compliment post timeline module
*
* V1.5
* – Added more styling settings for each module
* – Fixed bug whereby bullet points didn’t style properly
*

A lot of developers and designers just love the look and feel that a timeline gives you. Whether you’re presenting a step by step item, showing chronological data or just featuring some interesting content, a timeline can be the right layout of choice. I have created a couple of modules module which do just this. Simply add either of the modules and either add each timeline item, content, read more link then style it OR select where the items should come from (ie, posts, pages, portfolio items!). It couldn’t be easier.

See the excellent blog post written by Randy Brown on the Elegant Themes blog for use cases and how to use as well 

And this one written by Donjetë Vuniqii on The Elegant Themes Mini Series on how to do things with Divi.

This works responsively also. The alternating item layout in the screenshots works when in 1 column mode and in 1/4, 1/3, 1/2 etc the timeline bar is offset to the left (see screenshots). Each timeline item can have it’s own icon, colour, content and/or read more link so you can showcase your content as you see fit. You can also use Advanced Design Settings within the module to change fonts, colours, padding etc.

To use

  • Install the plugin as normal
  • Visit any page with a Divi Page Builder active
  • Add the Timeline module and configure accordingly

Best used in 1 column layout but will work well (and still responsively) in the smaller column layouts.

How the sub-layout works

Using the Posts Timeline module that comes with this plugin you can create a very flexible and configurable layout for your timeline. To make this as flexible as possible we create a layout which is used repeatedly for each item in the timeline.

Making a new layout is simple.. we first create a ‘timeline item’ template in the Divi library (Divi Library > Add new > Layout (non global)). This will feature normally an image, title and content modules.. Once that is saved you can go ahead and set up your timeline module and select in the first option the layout you just made in the Divi library. It works best with 1 or 2 cols in the sub layout but by all means have a tinker and see what you can come up with! I have included three companion modules to aid the creation of new content.. these being title, content and featured image. To make a really cool timeline with loads of extra information try my Advanced Custom Fields module plugin also available in the store here.

For any support issues, please visit this link http://docs.tortoise-it.co.uk/

Licensing

You may install this product on any number of websites that you build for yourself or your clients. You will receive 6 months support and life time updates, after which you may have to purchase a support contract in 6 month packages.

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

Licensing

You may install this product on any number of websites that you build for yourself or your clients. You will receive 6 months support and life time updates, after which you may have to purchase a support contract in 6 month packages.

A lot of developers and designers just love the look and feel that a timeline gives you. Whether you’re presenting a step by step item, showing chronological data or just featuring some interesting content, a timeline can be the right layout of choice. I have created a couple of modules module which do just this. Simply add either of the modules and either add each timeline item, content, read more link then style it OR select where the items should come from (ie, posts, pages, portfolio items!). It couldn’t be easier.

See the excellent blog post written by Randy Brown on the Elegant Themes blog for use cases and how to use as well 

And this one written by Donjetë Vuniqii on The Elegant Themes Mini Series on how to do things with Divi.

This works responsively also. The alternating item layout in the screenshots works when in 1 column mode and in 1/4, 1/3, 1/2 etc the timeline bar is offset to the left (see screenshots). Each timeline item can have it’s own icon, colour, content and/or read more link so you can showcase your content as you see fit. You can also use Advanced Design Settings within the module to change fonts, colours, padding etc.

To use

  • Install the plugin as normal
  • Visit any page with a Divi Page Builder active
  • Add the Timeline module and configure accordingly

Best used in 1 column layout but will work well (and still responsively) in the smaller column layouts.

How the sub-layout works

Using the Posts Timeline module that comes with this plugin you can create a very flexible and configurable layout for your timeline. To make this as flexible as possible we create a layout which is used repeatedly for each item in the timeline.

Making a new layout is simple.. we first create a ‘timeline item’ template in the Divi library (Divi Library > Add new > Layout (non global)). This will feature normally an image, title and content modules.. Once that is saved you can go ahead and set up your timeline module and select in the first option the layout you just made in the Divi library. It works best with 1 or 2 cols in the sub layout but by all means have a tinker and see what you can come up with! I have included three companion modules to aid the creation of new content.. these being title, content and featured image. To make a really cool timeline with loads of extra information try my Advanced Custom Fields module plugin also available in the store here.

For any support issues, please visit this link http://docs.tortoise-it.co.uk/

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

You may also like these items

47 Comments

  1. gianfranco ruggeri

    hi there, i have one question and one problem with timeline.
    Why have different timeline? I don’t find documentation about the settings of the other timeline.

    The problem is if i’d like to add a gallery, it doesn’t work.
    If i use the gallery of wordpress, inside the text in every single label of the timeline, in front end the picture are visible but i cannot open and watch them in lightbox.
    If I use the divi gallery shortcode inside the text, the gallery is visible but the text is no more editable, so i have to restart everything from scratch.
    Can someone have my same problems?
    Thx
    gian

  2. PHILIPPE ALBRAND

    This plugin seems great but not compatible with “Divi – Filterable Blog Module”.

    When both are enable, media library don’t work (no media display, upload not possible) and it’s impossible to delete any plugin.

    When one is enable and other one disable there is no problem.

    How can i fix it ?

    • PHILIPPE ALBRAND

      i fix this problem by changing

      function sb_dtm_init()
      {
      add_action(‘init’, ‘sb_dtm_theme_setup’, 9999);
      add_action(‘admin_head’, ‘sb_dtm_admin_head’, 9999);
      add_action(‘wp_enqueue_scripts’, ‘sb_dtm_enqueue’, 9999);
      }

      to

      function sb_dtm_init()
      {
      add_action(‘init’, ‘sb_dtm_theme_setup’);
      add_action(‘admin_head’, ‘sb_dtm_admin_head’);
      add_action(‘wp_enqueue_scripts’, ‘sb_dtm_enqueue’);
      }

      in the main plugin file.

      It works now !

  3. David

    Purchased this plugin, but I have an issue with it. I’ve used ‘Timeline – Vertical Modul’ and I can’t change its ‘Timeline item’s. I can create them, but after some time, I can’t open them. Are there anybody who experienced this issue? Do you know the solution?

    • Gabriel Marusca

      I got the same problem. Sad to see that isn’t resolve since last year. Just bought the Plugin today….

  4. anne marie ben-yehuda

    My timeline is showing full width background colors vs just a color in the box. Pls advise how to fix it. annebenyehuda@gmail.com

  5. soufyan amenzou

    Hi guys, !

    I’ve just purchase the plugin and it doesn’t work.

    I need, timeline – content.

    When I open it, then click “add new vertical timeline item” it only open the color picker on the same window.
    Then when I click on a color I got a big content with that color. (see => https://ibb.co/n7VDL6)

    I also notice a JS error (color-picker.min.js?ver=4.9:1 Uncaught TypeError: Cannot read property ‘removeClass’ of undefined), see => https://ibb.co/dEKUtR

    I’m using Chrome 62 on mac os. I also tried in private navigation.

    Any help please ?

    Thank you

  6. Heriberto Noguera

    Hi! Is there a way to reverse the order in the post-based timeline? I mean, to show older posts first.
    Thank you

  7. Stephen R. Smith

    I’ve just started trying to use this plugin, and a couple of things don’t make any sense.

    There’s a ‘Timeline – Post Title’ module that has all the configuration for font size etc., but nowhere to enter any text for the title. The ‘Timeline – Content’ module is the same. I can pick a background image, choose ‘Excerpt only’ and enable ‘Read more’, but there’s nowhere to enter any actual content.

    Is this a bug with the current Divi theme? Or with the current version of WordPress (the site is at WordPress 4.8.3)

    I purchased this for a project I need to get done this weekend based on the Elegant Themes review of the plugin, and it doesn’t appear to work.

    • Stephen R Smith

      For anyone else that stumbles over this in the future having the same problem:

      From William Hale on the support forum: “The modules you mentioned above are for use with the loop archive module for showing posts from a post type. You need to create a layout containing the loop item modules which will be used in each post of the timeline. Then add the timeline loop archive module wherever you wish on your site, selecting the loop item layout you have previously created and select the post type you’d like to be included in your loop archive. ”

      This makes sense, but I didn’t find this clearly explained in the documentation – I’ve been able to get a basic timeline working now

  8. HanJoon Kim

    I’ve just installed the plugin, but the module is not created on the divi builder…

    How can I fix this problem?

  9. Miguel Boccalon

    Hello. Can I limit the itmes shown? Cause I do not have too much space to show, So, I need to show (let say five items) out of 15 I have, and then have arrows or controls to let user to navigate to the rest of the items. If I can do so, I will buy it, since it look prety cool and it seems to fill my needs.
    Thanks

  10. Vale

    Hello! If I purchase this plugin, will I receive lifetime updates? (I understand that support is limited after 6 months, but not sure about updates.

    • Andrew Palmer

      Yes, support is limited to 6 months and all updates on this product are for lifetime.

  11. Esteban

    I’d like to know if you can add videos to the the Timeline?

    Thanks

    • Sean

      Yes you should be able to add them easily enough

  12. K C Nelson

    I’ve been playing with the Divi Timeline all morning, so far it meets my needs. The Timeline Vertical is self adjusting on iPhone, iPad and my Laptop. I have no regrets.

  13. Katie

    Is it possible to adjust the module so it displays as it does on a mobile or tablet on desktop as well. Meaning all the items in the timeline are stacked as opposed to some on the right and some on the left?

  14. Andrew Hochheimer

    Is there a demo page for the Timeline Module? I wanted to see how it looks as I could use a timeline module..

  15. Suzanne S.

    I’m finding a weird breakpoint on the timeline module:

    I setup the timeline on three different rows – one for desktop, one for tablet, one for phone

    Desktop – fine
    iPhone – fine
    iPad (mini and regular) – PORTRAIT – fine
    iPad (mini and regular) – LANDSCAPE – BAD… the timeline module displays as stacked single row (instead of alternating) and uses the code for the desktop row (instead of the tablet row)

    Any suggestions on how to fix this?

    • Seema

      I’m having a similar issue of too much white space between two events. I wrote to the customer support a week ago but haven’t heard back. Did you manage to reduce the spacing?

  16. Katie

    Hello, Is there a way to scrunch each timeline item so there is not so much white space between each item? For example, move item 1 and 3 closer together on the right side and items 2 and 4 closer together on the left?

    Thanks

  17. Broadway

    Is there a way to create a timeline in which the events all appear on the same side of the timeline, rather than alternating left and right?

  18. Belen

    Hello, are updates for life or do I have to renew license each 6 months to get them? Thank you.

  19. Connie

    I, as a registered user, submitted a support ticket at the developer’s site 7 days before, 1st of May, and until now NO ANSWER / NO HELP

    I don’t think this is customer support.

    By the way, the captcha here is very stupid, I know that 5+2 = 7, but the CAPTCHA doesn’t ;=(

  20. Josh

    The timeline ID and class tags do nothing. Would be nice if they worked because I would like to anchor link to different boxes on the timeline.

  21. Connie

    I would need an explanation how to use “Filters” which are subtitled as “for advanced users”… I am quite an advanced user, but I have no idea how to enter a query to filter for example “post type = page and category = Italy”

    there is no documentation and no screeenshot, so I feel lost, and I think Roba Morena has the same question ;=)

    • Andy Lear

      make
      Include Taxonomy Only: category
      and
      Include Taxonomy Terms: The slug name of the category

      • Roba Morena

        Thanks Andy. I’m new at this, where do the Taxonomy’s appear?

        Please & thanks 🙂

      • Connie

        @Andy,

        pages have no category by default …
        so maybe my example was a little bit unclear.
        I will try to find whether I can use “custom fields”

        Let’s see, thank you for now!

        • Connie

          1) added categories to pages via plugin
          2) entered query, category + slug of that category
          3) no result at all, nothing found

          this timeline is not working with query and pages

          plus:

          how to have the timeline sorted ASC and not DESC??

  22. Roba Morena

    Hi 🙂
    How can I only post a Timeline of a certain category?

    Please & Thanks 🙂

  23. Roba Morena

    Hi. PayPal is very limited in my country (Panama). Is there a way to buy it via credit card?
    Please & thanks 🙂

    • Andrew Palmer

      We are sorry but not currently. You may pay by credit card through paypal though.

      • Roba Morena

        Thanks a lot, got it 🙂

  24. Zoltán

    Hello, could you tell me how can i use Timeline (Posts) – Vertical, if i only want to show one post category? What I need to write into the “Include Taxonomy Only:” part? The category ID not work, the category name same not, what I have to write into this part to the timeline plugin Only show me my “news” category post elements? Thank you.

  25. Zoltán

    Hello,

    We found a bug, if I choose in “Timeline (Posts) – Vertical” to show pagination, then in builder my sidebar module go below the timeline, but if I turn off “show pagination”, than it’s ok, and stay each other “timeline (in left) | sidebar (in right)”. Please see, what you can do with it, thank you.

    And another thing, is there any way to add meta fields to my blog time line (date, author, categories, comments)?

    Thank you for your help.

  26. YesPapa

    Hi,

    Sweet module! Perhaps you could add some features like :
    – Possibility to align the Timeline Title (left, center, right) ;
    – Possibility to aligne the Item Text too (left, center, right) ;
    – Possibility to change the size of the central line and the size of the circle.

    I have an issue when I put the same color to the central line and the icon background. I have a little circle between us.

    Thank you.

    • Lisa

      Is it possible to have an image on the opposite site of the timeline center line that goes with the text of a specific item?

      • Suzanne S.

        I figured out a way to “cheat” the system:

        I created a background image where the left is transparent and the right side is the picture. Then I uploaded this as the background image. (for the second timeline item I put the transparent on the right and picture on the left).
        Add this css to the main element:
        background: no-repeat;

        For tablets and iphone, I copied the timeline to a new row and removed the background images, and put the images with the text using the MEDIA button

        EXAMPLE HERE:

        http://dfwmedicalspas.com/welcome/services/lets-talk-faces/

        I also figured out how to add text over the image. Add this css to your child theme or globally in Divi
        It will make the label text larger and add a semi-transparent white background

        /*————————————————*/
        /*—[Divi TImeline Module – LABEL]—*/
        /*————————————————*/

        .cd-date {
        font-size: 40px;
        text-align: left;
        background-color: rgba(255, 255, 255, 0.84)
        }

        • Stephen R. Smith

          Your site looks great! How did you get the timeline posts to span the whole width? I can only get them to alternate on the left and right side of the center line.

Submit a Comment

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items. Please be aware that you will need an amount of experience in WordPress to take advantage of our themes and plugins. Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads. We do not offer refunds under any circumstances. If you feel that there is an issue with a product please get in touch with the developer of the product through their contact details which can be found within the plugins Dashboard, themes and documents we sell on their behalf. Rudeness to our developers or support staff will not be tolerated and support may be refused. By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - we send out around two emails a week to keep you informed of product updates, WordPress News and Developer advice. You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email. (Amended. February 6th 2018)

Get the latest news!

Join our mailing list to receive the latest news and updates from our team.

Thanks, we appreciate your support

Pin It on Pinterest