3 Timeline Components for Squarespace (and Which One to Use)

A timeline sounds like a very specific website component. But really, it’s just a clear way to show that one thing happens before another.

You can use one to show the history of your business, explain your web design process, walk clients through a photography package, or rank everyone on your team from favorite to least favorite. (Maybe keep that last one off the company website.)

Squarespace doesn’t include a native timeline block, so I built three different timeline plugins. They all help you organize content into a clear sequence, but they do it in very different ways.

Watch the 5-minute video walkthrough, or keep reading to find the right one for your site.

1. Vertical Timeline

The Vertical Timeline plugin is the best fit for a true timeline with dates.

It pulls its content from a Squarespace Blog Collection. Each blog post becomes one event in the timeline, and the post date controls the date shown with that event. The plugin then places everything along a vertical line in chronological order.

Because it uses blog posts, you have plenty of room for each item. You can include a title, date, description, image, and link without trying to squeeze everything into a tiny card.

Use this one for:

  • A company history

  • Project milestones

  • An event schedule

  • A long process with detailed steps

View the Vertical Timeline demo
password: demo

2. Horizontal Timeline

The Horizontal Timeline plugin turns a normal Squarespace List Section into a sideways scrolling timeline.

As someone scrolls down the page, the section stays in place while the timeline moves horizontally. A progress bar shows how far they’ve moved through the sequence.

The biggest benefit is how simple it is to manage. Each step is just an item in a native Squarespace List Section. You don’t need a separate collection, and your client doesn’t need to learn a strange editing process after you hand over the site.

That simple structure gives you fewer content options than the Vertical Timeline, but it also makes the component much faster to set up and edit.

Use this one for:

  • A short company timeline

  • A service process

  • A launch plan

  • Any sequence that should feel visual and interactive

View the Horizontal Timeline demo
password: demo

3. Step Flow Timeline

The Step Flow Timeline plugin also uses a Squarespace List Section, but it keeps the movement vertical.

As someone scrolls, the timeline follows them down the page and highlights the current step. That small change makes it easy for visitors to see where they are and keeps their attention on the right content.

Like the Horizontal Timeline, it’s easy to edit, customize, and hand off because the content stays inside a native List Section.

Use this one for:

  • A web design process

  • An onboarding flow

  • A client journey

  • A step-by-step service explanation

View the Step Flow Timeline demo
password: demo

Which timeline should you use?

If dates matter and each event needs more content, use the Vertical Timeline.

If you want a more interactive sequence that moves across the screen, use the Horizontal Timeline.

If you want visitors to move through a process one focused step at a time, use the Step Flow Timeline.

The other practical question is who will edit the component later. The Horizontal Timeline and Step Flow Timeline both use native Squarespace List Sections, so they’re especially easy to hand off to a client. The Vertical Timeline takes a little more setup, but gives you more space and flexibility for each event.

Could you build your own with AI?

Absolutely. In fact, I think you should try it.

The big benefit of using a finished plugin is that the fussy parts are already done. The setup is documented, the styling options are built in, and the content stays somewhere familiar inside Squarespace. That makes the plugin easier to set up, customize, and hand off to a client.

AI can still get you there, but it may take some wrangling. A browser chat can create something that looks great inside the conversation but doesn’t work well on your actual site. Even when the basic idea works, getting all the little details right can become its own project.

Robo-Will inside Will’s Toolkitgoes a step further. You can select a specific part of your Squarespace site, including a plugin, and ask for code to customize it.

There are more ways than ever to build custom things in Squarespace. That’s what makes this such a fun time to experiment.

Browse all Timeline plugins, pick the one that fits your content, or try building your own.

Keep building.


Will Myers

I support web designers and developers in Squarespace by providing resources to improve their skills. 

https://www.will-myers.com
Next
Next

More Whimsy: The Word Puzzle Plugin