Element: Timeline

Milestones That Shape the Bobcat Experience

At Ohio University, our legacy is built on innovation, impact, and the unmistakable Bobcat spirit. Use the timeline element to showcase key milestones, events, and achievements that shape our vibrant university community.  From groundbreaking research and campus expansions to student celebrations and academic excellence, the timeline element captures the moments that define who we are.

Features

This element contains many optional features to get the look that you want to achieve. You can create a timeline with only a year and short title, only text, or images with optional text in various column width layouts.

Recommended Image Sizes

There aren't specific image size recommendations, but editors should size accordingly to how the image is being used on the page. Make sure that the image is high enough resolution for the configuration selected. For example we wouldn't want a smaller image (ex. 300x500) to be used in the full width image option since it would be stretched out and likely pixelated. Even so, full width images do not need to be wider than 1800px. Every image should still follow the general image guidelines for optimization. Overall the element is quite flexible and will accommodate the various size images editors may want to add.

View Instruction Details

  1. Open the dropdown menu next to Add Page Content Row [Advanced].
  1. Select the option to Add Timeline.
Add timeline
  1. There are three different feature sections that can be added to a timeline element. You can add more than one feature to the same timeline.
    1. Notable Moments
    2. Timeline - Images with Optional text
    3. Text only
screenshot of timeline feature options

Notable Moments

  1. Add Start and End Date of Timeline

    Screenshot of start and end dates
  2. Add Notable Year: Each Notable Year should have a corresponding Notable Description.

    Screenshot of Year fields
  3. Add Notable Description

    Screenshot of notable moments descriptions fields
  4. Add another timeline feature if needed. 

    Screenshot of three timeline feature options

Add Timeline - Image with Optional Text

  1. Choose Layout: There are seven different image layout options to choose from:
    1. One Image
    2. Half Image Left & Half Text Right
    3. Half Text Left & Half Image Right
    4. Narrow Text Left & Wide Image Right
    5. Wide Image Left & Narrow Text Right
    6. Narrow Image Left & Wide Image Right
    7. Wide Image Left & Narrow Image Right
Screenshot of the image and text layout options
  1. Add the image(s)

    Add the media for the timeline element
  2. Add optional image captions.

    Screenshot of image caption field
  3. When applicable add the event year, event heading, and body content.

    screenshot of body content fields if using only text option

Add Timeline - Text

Add body content in the text editor box using the normal editing options.

Screenshot of body content text editor

Example of Timeline Usage

View an example of the timeline being used in a News Story

In Full Bloom News Story

Screenshot of an example timeline used on the website
View Site in Mobile | Classic
Share by: