Jump to content

Adding Vertical timeline on Squarespace

Go to solution Solved by Sam0smith,

Recommended Posts

I am looking for some advice on how to create a vertical timeline on Squarespace. I have read other topics about it here on the forum. But, they are a mess with so many comments. I don't understand what to do.

I have searched online for some tutorials too. They explain how to create timeline on Squarespace. But, I have not found any that suit my needs. Some of them require custom code, which I am not very familiar with. I am wondering if there is a simpler way to make a vertical timeline on Squarespace. A detailed guideline is not too complex to understand. I need straight forward solution, please.

If you have ideas or experience, please share how to make a vertical timeline on Squarespace. I would appreciate your input.

Link to comment
Posted (edited)

Here is a timeline that you can add on your website. It's a vertical timeline that i found on codepen.

Add these code in a code block on your site. HTML: 
 

<div class="timeline">
    <ul>
        <li>
            <div class="right_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>
            <div class="left_content">
                <h3>January 2019 </h3>
            </div>
        </li>
        <li>
            <div class="right_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>
            <div class="left_content">
                <h3>February 2019 </h3>
            </div>
        </li>
        <li>
            <div class="right_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>
            <div class="left_content">
                <h3>July 2019 </h3>
            </div>
        </li>
        <li>
            <div class="right_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>
            <div class="left_content">
                <h3>August 2019 </h3>
            </div>
        </li>
        <div style="clear:both;"></div>
    </ul>
</div>

Then add some CSS : You can add this code to Website > Website Tools > Custom CSS
 

.timeline:before {
    content: '';
    position: absolute;
    height: 100%;
    left: 50%;
    width: 2px;
    top: -20px;
    background: #fff;
    z-index: 1;
}
.timeline {
    position: relative;
    margin: 50px auto;
    width: 1000px;
    padding: 50px 0;
}
.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 ul li .right_content h2 {
    color: rgba(59, 112, 239, 1);
    padding: 0px 2px 18px 0px;
}
.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;
}
.left_content {
    padding-bottom: 20px;
}
.timeline ul li:nth-child(odd):before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(59, 112, 239, 1);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(58, 112, 239, 0.2);
    right: -6px;
    top: 24px;
    z-index: 1;
}
.timeline ul li:nth-child(even):before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(59, 112, 239, 1);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(58, 112, 239, 0.2);
    left: -6px;
    top: 24px;
}
.timeline ul li:nth-child(odd) .left_content {
    position: absolute;
    top: 12px;
    right: -165px;
    margin: 0;
    padding: 8px 16px;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 112, 239, 0.3);
    border-radius: 18px;

}
.timeline ul li:nth-child(even) .left_content {
    position: absolute;
    top: 12px;
    left: -165px;
    margin: 0;
    padding: 8px 16px;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 112, 239, 0.3);
    border-radius: 18px;
}
@media (max-width: 1000px) {
    .timeline {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .timeline {
        width: 100%;
    }
    .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: 16px;
    }
    .timeline ul li:nth-child(even):before {
        top: -18px;
        left: 16px;
    }
    .timeline ul li:nth-child(odd) .left_content,
    .timeline ul li:nth-child(even) .left_content {
        top: -30px;
        left: 50px;
        right: inherit;
    }
}

You just need to change the html text with yours. It is very easy if you are familiar with html.

Edited by DavidStewart
Link to comment
  • Solution

I've recently tried a vertical timeline plugin. It might be what you're looking for. It's work like a charm on both Squarespace 7.0 and 7.1. And you don't need to know custom code.

I gave them a whirl on my own site, and I have to say, I'm impressed. You can tweak everything from colors and fonts to icons and sizes. Plus, they look slick on any device, so no worries there.

link to the squarespace vertical timeline pluign.

and squarespace alternative vertical timeline pluign.

Check out the timeline screenshot on my website :

vertical.thumb.png.fba83e389da29faf63f60389b0bd8d2a.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.