Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

Timeline

With Divi Plus Timeline modules, you can create a timeline that helps you tell your success story, achievable moments, and much more special happening in your life stylishly and impressively.

divi-timeline

How to Add Timeline Module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the DP Timeline module.
timeline-module

Content Options

  1. Click on Add New Timeline Item to insert the timeline item. Similarly, you can add multiple timeline items according to your needs.
  2. To customize the timeline item, click the gear icon available on the New Item.timeline
  3. Here you get the Content, Design, and Advanced settings for individual timeline items.
  4. Inside the Timeline Content setting, input text for Timeline Title and Content.
  5. If you want to display time on the timeline, go to the Timeline Time setting and toggle the “Display Time,” as “YES.”
  6. Here you can either enter custom time manually or choose the date from the calendar. If you want to choose a date, then click the Custom Time from the Time Input Method, and choose Datepicker from the dropdown list.
  7. As soon as you select the Datepicker option, it will open a calendar. And another option, “Time Format,” to help you select the format you want to display.
  8. If you want to use an image or icon, rather than the default circular shape of the timeline element.
  9. Go to the Timeline Icon/Image>>Add Image to use a picture or Use Icon as “YES,” to go with the icon instead.
divi-timeline
timeline

Customize all timeline items globally

1.Click the Return icon above the Content tab.

2. Layout: To choose a different layout, go to the parent Design tab of the module. Inside the Select Layout option of the Timeline Layout setting, choose any from available layouts.

3. In this same setting, you get the option “Select Option” that allows you to choose a different placement style for the timeline and its content. Choose any of the available options.

4. Customize the timeline icon or image, go to Timeline Icon/Image Styling and apply appropriate customization.

5. Customize the vertical line or timeline stem, go to Timeline Stem Styling and apply appropriate customization.

timeline-layout

6. Inside the Timeline Item Styling setting, you get the option to customize the background of the timeline time by adding color, gradient, image, and adjusting padding.

7. To customize the timeline title, go to the Timeline Heading setting in the Design tab, and apply customizations.

8. Date setting available in the Design tab of the module allows you to customize the appearance of the timeline date.

9. Timeline text setting further allows you to customize the content available in the timeline items.

Was this article helpful?
0.5 out Of 5 Stars

3 ratings

5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous Button
Next Blog Timeline