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.



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

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”

    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,

    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.

    Get your Free timeline layout!

    [gravityform id=11 title=false description=false]

    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


    1. Name *Lukas

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

    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.

      • Manas Mitra

        Putting the CSS in Divi Theme Options works okay.

    3. Julien

      Thanks for that! Happy Easter!

    4. Andreas Röck

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

      • 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?

    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!

    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?

      • 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?


    Submit a Comment

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