How to Create a Divi Timeline + Free Layout

There are plenty of options in Divi to display content besides your standard modules, and being creative with them can pay off. One of the more interesting approaches you can use is to display your content is using timeline.

Timelines are perfect for telling stories and visualizing processes. You can use a timeline to give an overview of events, to highlight important points in time, and reveal things that people might have missed.

 

Result

Here is a preview of the timeline you can use in your projects.

  • Google+
  • Facebook
  • Twitter

How to Import the Layout

 

Step 1. Download Layout

 

  1. Fill out the form below and from received email download the .zip file. 
  2. Unpack File.

Step 2. Import Layout

  1. Create New Page
  2. Click Import/Export
  3. Choose Divi Space Timeline.json file
  4. Click “Import Divi Builder Layout”
    • Google+
    • Facebook
    • Twitter

    Step 3. Add CSS

    Divi users can choose between five different methods to add custom CSS to their websitesIn this case, we recommend adding CSS to your divi child theme or using Divi Builder Page Settings of an individual page.

     

    1. Open up the Divi Page Settings console,
    • Google+
    • Facebook
    • Twitter

    2. Go to the Advanced Tab and scroll to the Custom CSS box.
    3. Copy CSS from “Timeline CSS” file and paste to the Custom CSS Box.

    • Google+
    • Facebook
    • Twitter

    Get your Free timeline layout!

    There you have it, with just 3 step you can present your story in the timeline! If you have any questions or suggestions, make sure you leave a comment in the comment section below!

    Previous post
    Next post

    15 Comments

    1. Name *Lukas

      This is a great guide I was looking for and often wondered how to do it. Thanks, Super Anna
      greetings
      Pozdrawiam Lukas Wien

      Reply
    2. Brian Kasen

      Entered CSS code in the main element window of the Divi Builder Section after uploading the json file. Doesn’t work. Please advise.

      Reply
      • Manas Mitra

        Putting the CSS in Divi Theme Options works okay.

    3. Julien

      Thanks for that! Happy Easter!

      Reply
    4. Andreas Röck

      the system says “success” but i do not get a email.
      i have tried it 2 times …

      Reply
      • Anna Kurowska

        Hello, I have sent you an email with a link yesterday. Please check SPAM.

    5. Connie

      I really don’t need the 100th vertical timeline, I need a horizontal one.

      The only realisation I saw until now is an Elementor Element … but in DIVI?

      Reply
    6. Victor

      Thanks a lot for sharing! A live demo link (to test it in different devices) would be nice. Keep up the good work!

      Reply
    7. Kevin

      Anna this is great! I seem to be having a problem with the vertical line. It looks normal when viewing inside of the Divi builder. But when I view the page, the top line is missing down past the first dot, which also makes the spacing below the first dot look off. Any idea what could be the problem?

      Reply
      • Kevin

        Disregard my previous comment. When I added a row above the timeline, it fixed the problem. Great stuff! Thanks again.

    8. Brian

      Is there a way to make this Horizontal instead of Vertical?

      Reply
    9. Brett

      Can’t get the json file to upload. Tried chrome and safari browsers, have cleared caches on both.

      Site running on wpengine.

      Anyone run into this before? Ideas? 🙂

      Note, I am trying to load this into a brand new page. It fails to load with no warnings/error messages.

      I did also try loading it straight to the library but got a warning message that this was not a json file that could be loaded into the library.

      Reply
      • Anna Kurowska

        Hi Brett, please make sure you are uploading .json file, not .zip file. You need to extract zip file 🙂 Let me know if that fixes your problem.

    10. Joko Ruwhof

      This is great! Thank you very much!

      Reply
    11. webjoko

      This is a great solution. Also it looks beautiful like that. Thank you!

      Reply

    Submit a Comment

    Your email address will not be published. Required fields are marked *

    Receive notifications about our new blog posts.