Timeline

Columbia Sites can display interactive timelines on Landing Pages. 

See an example of the timeline functionality

  • Select Add Timeline from the content menu

    add timeline from the content menu
  • Optional, add a Heading for the timeline

    The Heading is always visible as the user scrolls through the timeline.

    heading field
    sample of headline display
  • Add an Introductory Slide for the Timeline

    If wanted, add a first slide that introduces the timeline. If not, skip to the next step.

    timeline title slide button
    Expand the Text and Media sections to add in content:
    • Text section allows for a Headline and Text to appear on the slide
    • Media section allows for an image or video embed to appear on the slide
    text/media field

    Enter in text as needed.

    interface for adding text
    how the headline and text fields display on webpage

    Enter in media - images or video - URLs as needed.

    IMPORTANT: Make sure to add the URL for the image or video. There is no way to link to an uploaded image file here.

    URL field
    image displays

    Enter in the caption and/or credit for the media URL just entered.

    enter caption and credit information
    example how the caption and credit display on the timeline
  • Enter a timeline event

    Enter the Date for the timeline event.

    These fields create both the timeline slide and the date on the bottom axis to access the slide.

     

    field for entering date
    how date displays on the slide
    Enter text and/or media

    See above for instructions

    Within the media section, enter a Thumbnail for the event

    The Thumbnail displays on the bottom axis of the timeline.

     

    enter in thumb image
    how the thumbnail displays on the bottom axis
    Add a background image if needed

    This image will span the entire slide. Anything added in the text and media tabs appears on top of this background image.

     

    background image button
  • Click Add Timeline Event for additional timeline slides

    Use this button for each separate slide in the timeline. Repeat the process above.

    timeline event button
  • If necessary, add Eras

    Eras refer to categories of time within the timeline.

    E.g., if your timeline details a person's life eras could be:

    • Childhood
    • Teenage Years
    • Adult
    • Later Years

    Eras appear on the bottom axis under the years listed.