Timeline

The Timeline widget offers a great way to put events or milestones on display. Once you’ve entered your event information into the widget panel, the widget displays events in an interactive visual timeline. Users can explore the timeline, clicking events to reveal more information. Great for your about page or project development roadmaps.

Preview: https://demo.wocode.com/timeline

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the timeline to appear.
  • If you need to resize the widget, the width may be adjusted with the blue grab handle in the bottom right. However, keep in mind that the timeline itself is adjusted manually. If you resize the widget, it may be necessary to resize the timeline: Design tab > Timeline Styling > Timeline Width.
  • As content is added, the widget may auto-expand, based on sizing and padding settings.

CONTENT SETTINGS

  • Unique ID: If you use multiple widgets on the same page, be sure to use unique IDs for each widget.
  • Events: Use these list items to add your event content. Within each event list item, you will find several options:
    • Event Date: This sets an event date to be displayed. If the Label Type option is set to Date, this entry must use the mm/dd/yyyy format.
    • Label Type: You may choose from two different label types: Date or Custom. Date uses the date entered in the Event Date field above. Custom uses whatever text you enter in the Custom Label field below.
    • Event Title: Sets the title of the event.
    • Event Subtitle: Sets the subtitle of the event. The subtitle appears just below the title. You may leave this field blank if you have no subtitles.
    • Event Description: This sets the description for the event.
  • Click the Add Event link to add more events. Repeat as necessary.

DESIGN SETTINGS

Front Box Styling / Back Box Styling:

There are numerous options that allow you to style all of the elements of the timeline, including title, subtitle, description, timeline and navigation dots. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory. However, we will share a few notes:

  • There are numerous padding and margin options in the Design section. Use these to add and control spacing around various elements.
  • Use the Timeline Width setting to control the width of the actual timeline.
  • The timeline places events on the timeline based on the actual date you enter in the content section. If you have events that are close to one another, the labels may overlap. Consider using condensed fonts or shortening label text content if you have overlapping text.
  • The dots on the timeline provide the timeline navigation for site visitors. When styling the dots, be sure that they are easily clickable.