This module is included in the DonDivi Builder plugin, enabling you to create engaging timelines.
Installation
Install and activate the Divi Theme.
Go to WordPress Dashboard → Plugins.
Click on the Add New Plugin button.
Click on the Upload Plugin button.
Choose the dondivi-builder.zip file.
Click on the Install Now button.
Once the builder is installed, a new module named DonDivi Timeline will appear in the Divi Builder.
Overview
The DonDivi Timeline module displays a series of events along a vertical or horizontal line. It's useful for showcasing milestones, historical overviews, or project phases in chronological order.
Naming Convention
The screenshot below illustrates the terminology used by the timeline elements (lines, markers, labels, etc.). Familiarizing yourself with these terms will help you follow this documentation.
Add a Timeline Event:
Open the Timeline module's settings
In the Content Tab, click on the Add New Event button
Add the event's details such as Label, Title, Content, Button, Button link, and more
Event Settings
Event Content Tab
Label: Add the event's label text. This label appears on the timeline and in the module's event list.
Style the label under the Design Tab → Label. For advanced tweaks, use Advanced Tab → Custom CSS → Label.Marker: Select whether the marker displays any content. You can choose an icon, image, or text. If you do, extra style settings appear in Design under Marker Text or Marker Image & Icon.
Card: Let's you add and style custom card content:
Image/Icon: Select Image, Icon, or None. This field is responsive, allowing you to choose different elements or hide them on specific devices. If you select Image or Icon, you will see the Design Tab → Card Image & Icon.
Title: Add a Card Title (Responsive). If desired, you can link it and choose whether to open in the same tab or a new one.
Body: Add main body text. It's responsive, so you can include different text or hide it completely on certain device sizes.
Button: Insert responsive button text here. In the Button Link URL field, add a URL to display the button.
Event Design Tab
Label: You can select the event's label text styles, including the font family, style, font color, text size, and more.
Marker Image & Icon: Select the size of the marker image and icon.
Card: Select the card styles, including arrow color, background options, text alignment, and spacing.
Card Image & Icon: Select the card's animation, icon color, icon/image placement, and spacing.
Card Body: Style the Title and Body text. You can pick heading levels, fonts, colors, letter spacing, and more.
Card Button: Enable custom styles for the button. Align it left, right, or center.
Card Animation: Choose the type of animation and the animation duration.
Border: Choose the card's border styles.
Filters: Choose the card's coloring filters.
Transform: Choose the card's translate, scale, and rotation effects.
Timeline settings
Let's explore how to build and style your timeline:
Overall Timeline Design: First, you'll set up the module's basic layout and style the global timeline elements.
Individual Events: Next, you'll add and style each event.
Timeline Content Tab
Under the content tab, you will find options that will allow you to set different Scroll animations, card positions, and more.
Scroll Animation: Enable this to animate the timeline on scroll, creating a sense of progress as users move through the page. To customize the scroll colors, head over to the Design Tab → Timeline.
Card Location: This field determines the position of cards relative to the timeline line. It supports responsive settings, allowing you to arrange cards differently on desktop, tablet, or phone:
Alternate:
The line is centered. Cards and labels appear on opposite sides.
Positions alternate for each consecutive event (left, then right, and so on).
The label appears opposite the card.
Right
Cards always appear to the right of the line.
You can offset the line under Design Tab → Markers → Offset.
The label is shown inside the card.
Center
Both the line and the cards are centered.
The label is shown inside the card.
Left
Cards always appear to the left of the line.
You can offset the line under Design Tab → Markers → Offset.
The label is shown inside the card.
Show Arrow: Toggle this to display an arrow on each card. When enabled, additional settings under the Design tab will appear, allowing you to customize the arrow's style. All of these have responsive options.
Timeline Design Tab
Timeline:
Line Color: Change the color of the timeline line. This setting is responsive.
Line Width: Adjust the thickness of the timeline line. Also responsive.
Labels:
Background Color: Assign a background color to the labels.
Alignment: Align label text (Left, Right, Center) when labels are placed inside cards. Not available in Alternate mode.
Font Fields: Customize labels' font family, weight, color, and more.
Label Margin & Padding: Add spacing around labels, which is helpful if you've added a background color. Padding increases the label's interior space; margin shifts its position.
Box Shadow (Labels): Apply a shadow effect to highlight labels.
Markers:
Container Width: Controls the space reserved for markers. A higher value increases the distance between the line and the cards or labels. The default is 100px.
Background Color: Change the background color of markers. This is responsive as well.
Offset: Available if Card Location is Left or Right. Sets the distance from the module edge to the timeline line. Responsive, with a default of 0.
Border and Padding: Add a custom border, adjust border radius, and set marker padding.
Box Shadow (Markers): Add shadows to the markers.
Cards:
Background Color: Change card backgrounds. Responsive field.
Width: Adjust card width. The default value is 100%.
Arrow Color & Width: Appears if the arrow is enabled. Both are responsive fields.
Border and Padding: Add borders, set border radius, and customize padding around the card's content.
Box Shadow (Cards): Add a shadow effect to cards.