Adding a timeline to your Squarespace website can be a great way of showcasing a lot of information in an easy and engaging way.

In this tutorial, I’ll take you through the steps to adding a timeline to your Squarespace website.

Watch the video

Check out the YouTube video below 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

Add a code block and place it in the center of your section. Add the following code to a code block to add the vertical line to the center of your timeline:

<div class="vertical-line"></div>

<style>

.vertical-line {

background: #fff;

width: 2px;

height: 1000px;

margin: 0 auto;

}

</style>

This line will be the spine of your timeline. To add the shoots of your timeline, aka the lines that come off it, add a line block and drag it into place.

Duplicate this line for all of your timeline items and drag the lines into their position on the timeline.

Next you want to add your text blocks. Add a text block for each element on your timeline and add the text that you want to appear on the page. Again, drag and drop these blocks to line up with each line coming from the central spine.

You can play around with formatting the text to look how you want it, and you can add other elements to each timeline section, such as buttons. To do this simply add a button block and drag it to where you want it on the page.

Once you’ve added all of your timeline elements and you’re happy with how it looks on desktop, don’t forget to check how it looks on mobile view and resize and rearrange your timeline elements accordingly.

When you’re happy hit save and you’ll have added a timeline to your Squarespace website.

Timelines can look super effective on websites and adding one is simply a case of a few blocks and dragging and dropping them in place. Easy!