How to Design a Divi Timeline Layout with Scroll Effects

How to Design a Divi Timeline Layout with Scroll Effects

A timeline layout can come in handy for a lot of different applications on a website, especially if it looks great on mobile. You can use it for showcasing a sequence of milestones on an about page, featuring the steps of a process, and much more. And with Divi’s scroll effects, you can make a timeline design come alive!

In this tutorial, we’ll show you how to design a complete Divi timeline layout with scroll effects. The timeline layout is versatile, elegant, and responsive. And, the scroll effect features a running dot that leads the user down the timeline, highlighting each event as the user scrolls.

Check it out!

Sneak Peek

Download the Divi Timeline Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and drag the JSON file into the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.
  4. Then search for and select the Brewery Layout Pack under the premade layouts tab. Then select the Brewery About Page layout and click the “Use This Layout” button.
    Divi Timeline Layout with Scroll Effects

After that, you are ready to start designing in Divi.

Creating a Timeline Layout with Scroll Effects in Divi

This timeline layout design includes two main parts – the header section and the timeline

[…]

 



This article was written by Jason Champagne and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top