Creating a vertical timeline with Acquia Site Studio

Using a vertical timeline is one of the best methods to display information over a period of time. With the help of it, you can easily share your information with others. As a use-case, you can state the history of politics, famous people, company profile and personally easily etc.

Let's explore how to create a vertical timeline in Site Studio containing a heading, description at the top, and place any Site Studio component as content to the left and right side with auto-increment serial number in the middle. Here's an example:

To achieve the above timeline we need to create two Site Studio components:

1. Timeline
2. Timeline item

By navigating Site Studio > Components > Components > + Add components (admin/cohesion/components/components)

Timeline: This will act as a container component and the site manager/content editor can drop timeline items inside. This will have the following things,

1. Timeline heading
2. Timeline description
3. Component dropzone for timeline item
4. Select padding - Top and Bottom from Layout & style tab
5. Help text (if needed)

Timeline item: This will act as a single item component and the site manager/content editor can drop/add multiple items. Site managers can also set timeline item positions as per requirement on the left or right side of the middle bar. This will have the following things,

1. Component dropzone for Site Studio component
2. Option to set timeline item position (Left or Right)
3. Help text (if needed)

When we build Timeline it will look like:

When we build the Timeline item it will look like:

Styling of heading, description, vertical middle bar, auto-increment counter and then items positions left/right all are done inside these components only. We have taken a timeline reference from Super Simple Timeline.

Thank you for reading!