The Divi Timeline Module in Divi Builder is designed to visually represent a sequence of events or milestones in a clear, organized manner. It appears in a vertical format and is ideal for showcasing historical timelines, project phases, or any chronological data.
Live demo of the Timeline module
Content
The Content tab allows you to add and customize individual timeline items, including titles, descriptions, dates, icons, and images for each event.
Add Timeline Item
Click the plus (+) icon to add a Timeline Item. The following options will be visible in the Timeline Item settings:
- Use Date Connector – This toggle allows you to display a connector line associated with the date, enhancing the visual connection between the timeline items and their respective dates.
- Use Connector Icon – Enabling this toggle adds an icon at the connector points, providing a visual cue that can enhance the aesthetic of the timeline.
- Title – Input the main title for each timeline item, serving as a focal point for users to quickly understand the significance of the event.
- Subtitle – Provide a secondary heading under the main title, allowing for additional context or information about the timeline item.
- Upload Image – Add an image for each timeline entry, enriching the content visually and making it more engaging for viewers.
- Image Alt Text – Enter alternative text for the uploaded image to improve accessibility and provide context for search engines.
- Description – Use this plain text field to write a detailed explanation of the timeline item, giving users more in-depth information about the event.
- Date Format – Choose the format in which the date is displayed, allowing you to customize it to match your design preferences or regional standards.
- Date Time – Specify the exact date and time for each timeline item, providing precise context for the events being showcased.
Layout
- Select Layout – The Select Layout option allows you to choose from three different layouts for the timeline, offering flexibility in how the timeline items are displayed visually.
Timeline
- Item Spacing – Adjust the spacing between individual timeline items to improve readability and visual flow.
- Connector Spacing – Customize the spacing of the connector lines between timeline items, enhancing the overall layout and design.
- Show Date – Toggle this option to display the date associated with each timeline item, providing essential context for users.
- Show Time – Enable this option to include the specific time for each timeline event, adding more detail to the timeline presentation.
- Show Content Direction – This option determines the direction in which the content of the timeline items will appear, whether left or right.
- Direction Arrow Position – Specify the placement of direction arrows, which can guide users through the timeline or indicate navigation.
- Use Scrolling Position – Enable this option to incorporate scrolling effects that dynamically position timeline items as the user scrolls down the page.
- Use Scrolling Line – This option allows for the inclusion of a scrolling line that visually connects the timeline items, enhancing the user’s experience as they navigate through the timeline.
Design
The Design tab enables you to style the timeline’s appearance, adjusting elements like alignment, spacing, colors, and backgrounds to match your overall theme.
Timeline
Customize the overall style of the timeline, including its layout and alignment, to create a visually appealing presentation.
Line
Adjust the appearance of the vertical line that connects the timeline items, including color, thickness, and style to enhance visibility.
Connector Text
Style the text associated with the timeline’s connection points, allowing for greater flexibility in presenting additional information.
Image
Modify the styling options for images used in the timeline, including size, alignment, and spacing, to ensure they integrate well with the design.
Title & Subtitle
Customize the appearance of titles and subtitles for each timeline item, including font, size, and color, to improve readability and aesthetic appeal.
Description
Style the text of the timeline descriptions, adjusting font size, color, and spacing to enhance clarity and engagement.
Date Text
Configure the styling options for the date text associated with each timeline item, including font size and color, to maintain a cohesive look.