How to create a horizontal timeline in Squarespace // Squarespace timeline tutorial

Timelines are a popular design choice for all kinds of websites, but Squarespace doesn’t have that feature built into their program. Luckily, this tutorial will teach you how to make your own using a list section in Squarespace 7.1 and a little bit of custom CSS!
- -
Brand new to CSS for Squarespace? Check out my free training → https://insidethesquare.co/learn
- -
In this free Squarespace tutorial, you’ll learn how to turn a list section into a horizontal timeline. We’ll add the section and our content, then use the list section settings to adjust the size and padding of the list cards. After that, I’ll show you two unique codes that you can use to turn your list cards into different shapes that point to the next event and to a timeline.

Here are the codes from this tutorial. Be sure to change the borders and custom colors to match your site style!

Create left arrow shapes:
.list-item{clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);}

Create a bottom line with pointing cards:
.list-item {clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 10% 90%, 0 100%); padding-bottom:3rem!important}
.user-items-list-carousel__gutter{border-bottom:3px solid #fff;}


- -
🔗 Related Links 🔗
Creating border codes: https://insidethesquare.co/borders
Coding in color: https://insidethesquare.co/colors
Squarespace Fluid Engine: https://insidethesquare.co/fluid
- -
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
- -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
- -
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
- -
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare  
👍 FACEBOOK →   / insidethesquare  
📌 PINTEREST →   / insidethesquare  
---