Skip to content
StoreDocsSupport
Get Divi Torque

Timeline

The Timeline module shows events, milestones or steps along a vertical line. Add one Timeline Item for each entry. Items appear in the order you add them.

Content

Settings

Open the Content tab of the Timeline module and go to Settings.

  • Select Layout: Layout 1, Layout 2 or Layout 3. The default is Layout 1.
  • Item Spacing: The space between items. The default is 40px.
  • Connector Spacing: The left and right space around the connector. The default is 70px.
  • Show Date: On by default.
  • Show Time: Off by default.
  • Show Content Direction: On by default. Shows the small arrow pointing from the content box to the line.
  • Direction Arrow Position: The distance of the arrow from the top. The default is 20px.
  • Use Scrolling Line: Off by default. When on, the line is colored up to the point the visitor has scrolled to.

Timeline Item

Each entry is a child module named Timeline Item. Click Add New Item to add one.

  • Title and Subtitle: The heading and the line under it.
  • Description: The body text.
  • Upload Image and Image Alt Text: An optional image and its alternative text.
  • Date Format: January 01, 2021, Jan 01, 2021, 01 January 2021 or 01 Jan 2021.
  • Date Time: The date and time of the item, as YYYY-MM-DD HH:MM. When the date connector is off, the date is shown as text in the chosen Date Format, and the time is shown like "3 PM".
  • Use Date Connector: Off by default. When on, the circle on the line shows the day, month and year from Date Time. The connector icon is not used.
  • Use Connector Icon: On by default. When on, the circle on the line shows the icon you select. When off, it shows the uploaded connector image instead.
  • Select Connector Icon: The icon to show.
  • Upload Connector Icon: An image or SVG used as the connector when Use Connector Icon is off.

Design

The Design tab of the Timeline module has these groups: Timeline, Line, Connector, Connector Day Text, Connector Month Text, Connector Year Text, Image, Title Text, Subtitle Text, Title & Subtitle Spacing, Description Text, Date Text and Date Spacing.

  • Timeline: Content Left Width, Content Alignment, Content Background, Content Padding and Content Border Radius.
  • Line: Line Width, Line Color and Active Line Color. Active Line Color is used for the part of the line already scrolled past.
  • Connector: Offset Top, Icon Size, Icon Color, Active Icon Color, Background, Height, Width and Month Top-Bottom Spacing.
  • Image: Bottom Spacing, Height and Width.
  • Title & Subtitle Spacing: Title Top Spacing, Title Bottom Spacing and Subtitle Bottom Spacing.
  • Date Spacing: The space at the top of the date text.

Each Timeline Item also has a Content Box group in its Design tab, so you can style one item differently.