banner

Squarespace Timeline: Free Vs Pro (7.0 & 7.1): Plugin Setup Guide

Squarespace Timeline: Free Vs Pro (7.0 & 7.1): Plugin Setup Guide

As a fellow designer and developer, I’ve often seen questions pop up about the effectiveness and setup of Squarespace’s timeline plugins. So, I’ve decided to put together a comprehensive guide comparing the Free and Pro versions, especially for versions 7.0 and 7.1. Whether you’re new to Squarespace or a seasoned user, this guide aims to clarify your doubts and help you make an informed choice.

Timeline plugins are fantastic tools for displaying content in a chronological order on your site. They are particularly useful for portfolios, project timelines, and event listings. I’ve seen many of you in the forums asking about their impact on website design, and I can assure you, they are quite transformative!

Free Vertical Timeline

FREE VERTICAL TIMELINE STYLE – 1

VIEW DEMO

Free Alternative Timeline

FREE ALTERNATIVE TIMELINE STYLE – 2

VIEW DEMO

Exploring the Free Timeline Plugin

First up is the free timeline plugin. It’s a great starting point for those new to Squarespace or working within a tight budget. Here’s a quick setup guide:

The free version of Squarespace’s timeline plugin offers basic functionality, allowing users to create a linear representation of events or steps. It’s simple to set up:

Add the HTML structure: To begin adding your timeline, first insert a code block in the desired location on your Squarespace page. Within this block, you’ll be using the following code structure. Replace the demo text with your own timeline content.


<div class="timeline">
    <ul>
        <li>
            <div class="timeline_header">
                <h3>January 2019 </h3>
            </div>
            <div class="timeline_content">
                <h2>Sample Text</h2>
                <p>A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly
                    journalistic styles, a paragraph can be just one sentence long.
                </p>
            </div>
        </li>
        <li>
            <div class="timeline_header">
                <h3>February 2019 </h3>
            </div>
            <div class="timeline_content">
                <h2>Sample Text</h2>
                <p>A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly
                    journalistic styles, a paragraph can be just one sentence long.
                </p>
            </div>
        </li>
        <li>
            <div class="timeline_header">
                <h3>March 2019 </h3>
            </div>
            <div class="timeline_content">
                <h2>Sample Text</h2>
                <p>A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly
                    journalistic styles, a paragraph can be just one sentence long.
                </p>
            </div>
        </li>
        <li>
            <div class="timeline_header">
                <h3>April 2019 </h3>
            </div>
            <div class="timeline_content">
                <h2>Sample Text</h2>
                <p>A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly
                    journalistic styles, a paragraph can be just one sentence long.
                </p>
            </div>
        </li>
        <li>
            <div class="timeline_header">
                <h3>May 2019 </h3>
            </div>
            <div class="timeline_content">
                <h2>Sample Text</h2>
                <p>A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly
                    journalistic styles, a paragraph can be just one sentence long.
                </p>
            </div>
        </li>
        <li>
            <div class="timeline_header">
                <h3>June 2019 </h3>
            </div>
            <div class="timeline_content">
                <h2>Sample Text</h2>
                <p>A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly
                    journalistic styles, a paragraph can be just one sentence long.
                </p>
            </div>
        </li> 
        <div style="clear:both;"></div>
    </ul>
</div>

Each <li> element represents an individual item on your timeline. If your timeline has more than six events, simply replicate the existing pattern. Copy and paste the <li></li> tags, including everything within them, and substitute your own information. Conversely, if you need fewer than six items, just remove the extra <li> sections you don’t need.

Add the CSS: After you’ve successfully added the code block, the next step is to stylize your timeline to make it visually appealing. This is where Custom CSS comes into play. To do this, head to the main menu, then go to Website → Website Tools → Custom CSS. In the box, paste in the following code:

FOR VERTICAL TIMELINE ( STYLE – 1 ) – Add This CSS.


.timeline {
    --timeline-color: #3b70ef;
    --timeline-text: #333333;
    --timeline-header-shadow: rgba(59, 112, 239, 0.3);
    --timeline-shadow: rgba(59, 112, 239, 0.2);
}
.timeline::before {
    content: '';
    position: absolute;
    height: 100%;
    left: 0%;
    width: 2px;
    top: -20px;
    background: var(--timeline-color);
    z-index: 1;
}
.timeline {
    position: relative;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 0px;
    background: var(--timeline-background);
}
.timeline ul {
    margin: 0;
    padding: 0;
}
.timeline ul li {
    list-style: none;
    box-sizing: border-box;
    line-height: normal;
    position: relative;
    width: 100%;
    padding: 30px 70px 100px 70px;
}
.timeline ul li {
    float: left;
    text-align: left;
    clear: both;
} 
.timeline li p {
    font-size: 18px;
    color: var(--timeline-text);
}
.timeline ul li .timeline_content h2 {
    color: var(--timeline-color);
    font-size: 38px;
    margin-top: 15px;
    margin-bottom: 30px;
}
.timeline ul li .timeline_header h3 {
    margin: 0;
    font-size: 22px;
}
.timeline_header {
    padding-bottom: 20px;
}
.timeline ul li::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--timeline-color);
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--timeline-shadow);
    left: -6.5px;
    top: 24px;
}
.timeline ul li .timeline_header {
    position: absolute;
    top: -30px;
    left: 70px;
    margin: 0;
    padding: 5px 20px;
    box-shadow: 0 0 0 3px var(--timeline-header-shadow);
    border-radius: 18px;
}
@media (max-width: 767px) {
    .timeline {
        padding-bottom: 0;
    }
    .timeline ul li {
        padding: 30px 15px 80px 0px;
    }
    .timeline:before {
        left: 20px;
    }
    .timeline ul li {
        padding-left: 50px;
    }
    .timeline ul li:before {
        top: -18px;
        left: 13.5px;

    }
    .timeline ul li .timeline_header {
        top: -30px;
        left: 50px;
        right: inherit;
    }
}

FOR ALTERNATIVE TIMELINE ( STYLE – 2 ) – Add This CSS.


     .timeline {
         --timeline-color: #3b70ef;
         --timeline-text: #333333;
         --timeline-month-shadow: rgba(59, 112, 239, 0.3);
         --timeline-shadow: rgba(59, 112, 239, 0.2);
     }


     .timeline::before {
         content: '';
         position: absolute;
         height: 100%;
         left: 50%;
         width: 2px;
         top: -20px;
         background: var(--timeline-color);
         z-index: 1;
     }

     .timeline {
         position: relative;
         width: 100%;
         padding-top: 50px;
         padding-bottom: 50px;
         background: var(--timeline-background);
     }

     .timeline ul {
         margin: 0;
         padding: 0;
     }

     .timeline ul li {
         list-style: none;
         box-sizing: border-box;
         line-height: normal;
         position: relative;
         width: 50%;
         padding: 40px 70px;
     }

     .timeline li p {
         font-size: 18px;
         color: var(--timeline-text);
     }

     .timeline ul li .timeline_content h2 {
         color: var(--timeline-color);
         font-size: 38px;
         margin-top: 15px;
         margin-bottom: 30px;
     }

     .timeline ul li .timeline_header h3 {
         margin: 0;
         font-size: 22px;
     }

     .timeline ul li:nth-child(odd) {
         float: left;
         text-align: right;
         clear: both;
     }

     .timeline ul li:nth-child(even) {
         float: right;
         text-align: left;
         clear: both;
     }

     .timeline_header {
         padding-bottom: 20px;
     }

     .timeline ul li:nth-child(odd):before {
         content: '';
         position: absolute;
         width: 15px;
         height: 15px;
         background: var(--timeline-color);
         border-radius: 50%;
         box-shadow: 0 0 0 3px var(--timeline-shadow);
         right: -8.5px;
         top: 24px;
         z-index: 1;
     }

     .timeline ul li:nth-child(2n)::before {
         content: '';
         position: absolute;
         width: 15px;
         height: 15px;
         background: var(--timeline-color);
         border-radius: 50%;
         box-shadow: 0 0 0 3px var(--timeline-shadow);
         left: -6.5px;
         top: 24px;
     }

     .timeline ul li:nth-child(2n+1) .timeline_header {
         position: absolute;
         right: 70px;
         top: -30px;
         padding: 5px 20px;
         box-shadow: 0 0 0 3px var(--timeline-month-shadow);
         border-radius: 18px;
     }

     .timeline ul li:nth-child(2n) .timeline_header {
         position: absolute;
         top: -30px;
         left: 70px;
         margin: 0;
         padding: 5px 20px;
         box-shadow: 0 0 0 3px var(--timeline-month-shadow);
         border-radius: 18px;
     }

     @media (max-width: 767px) {
         .timeline {
             padding-bottom: 0;
         }

         .timeline ul li {
             padding: 30px 15px 80px 0px;
         }

         .timeline:before {
             left: 20px;
         }

         .timeline ul li:nth-child(odd),
         .timeline ul li:nth-child(even) {
             width: 100%;
             text-align: left;
             padding-left: 50px;
         }

         .timeline ul li:nth-child(odd):before {
             top: -18px;
             left: 13.5px;

         }

         .timeline ul li:nth-child(even):before {
             top: -18px;
             left: 13.5px;
         }

         .timeline ul li:nth-child(odd) .timeline_header,
         .timeline ul li:nth-child(even) .timeline_header {
             top: -30px;
             left: 50px;
             right: inherit;
         }


     }

Customizing the Color Scheme of Your Timeline

Look for the .timeline class at the beginning of your CSS code. You’ll see the variables listed there. Change the color values of these variables to match your desired color scheme. Colors can be defined in various formats such as hex codes (e.g., #3b70ef), RGB (e.g., rgb(59, 112, 239)), or RGBA for transparent colors (e.g., rgba(59, 112, 239, 0.3)).

For example, to change the main color to a soft green, you would update –timeline-color:

–timeline-color: #6dbf8b; // a soft green color

  • –timeline-color: This controls the main color of the timeline, including the line and the circles.
  • –timeline-text: This is the color of the text within your timeline.
  • –timeline-month-shadow: This represents the shadow color around the date tabs.
  • –timeline-shadow: This is the shadow color for the circles on the timeline.

Pro Timeline Plugin – Friendly No Code Block Plugin

While effective for basic needs, the free version has limitations in customization and interactivity, which the pro versions aim to address. The Pro versions of the Squarespace timeline plugins really shine, addressing the limitations you might find in the free version.

  • No Code Block Requirement: Unlike the free version, the Pro plugin doesn’t require any HTML or CSS coding. This makes it incredibly user-friendly, especially for those not familiar with coding.
  • Versatile Compatibility: It works seamlessly with both Squarespace 7.0 and 7.1, including the Blank Classic Editor, and is fully editable in a Fluid Engine section.
  • Direct Editing in Squarespace Editor: One of the biggest advantages is the ability to edit everything directly in the Squarespace editor. This means you can change the design, text, and adapt the timeline to your brand colors without touching a single line of code.
Paid Vertical Timeline Plugin

PRO VERTICAL TIMELINE STYLE – 1

VIEW DEMOBUY HERE

Paid Alternative Timeline Plugin

PRO ALTERNATIVE TIMELINE STYLE – 2

VIEW HEREBUY HERE

Both the Free and Pro Squarespace timeline plugins offer valuable features for different needs. The free version caters to simplicity and basic functionality, while the Pro version elevates your site with advanced customization options and user-friendly, code-free editing.

Shadmon M.

Need a hand in website design? It's cool; we're here to help. Just by providing enough information we require, you can sit back and relax. We'll handle the rest. Contact Us

Leave a Reply

Comment
Full Name
Work email
Website
Company Name