Customize Squarespace Blog Pagination: A Step-by-Step Tutorial for Better Previous and Next Links
Ready to give your Squarespace blog some serious style points? In this tutorial, we're diving into the world of custom pagination! I'll show you how to transform those boring "Previous" and "Next" links into eye-catching design elements.
We'll start with changing fonts (no code needed, I promise!), then move on to adding some snazzy "Previous/Next Article" text. Then we'll play with colors for the background, text, and icons, and even swap out those default arrows for your own custom images. To finish things up, we'll stack these lovely new links on mobile.
I've got timestamps for you below along with the code you need. Be sure to check out the original blog post for more info.
🔗 Related content Links:
Original Tutorial Post: https://tutorials.squarespace.com/cod...
Basic CSS for Squarespace - save 10% with promo code YOUTUBE: https://insidethesquare.co/learn
Subscribe to my channel for new Squarespace videos every week: / @insidethesquare
⏱️ Important Timestamps:
00:57 Change blog pagination font (no code)
02:27 Add text above links
03:58 Add a background color to the pagination links
04:22 Change link and icon colors (no code)
05:51 Replace the icon with your own image
07:20 stack pagination on mobile
08:27 add the code to an individual blog
🖥 Tutorial Code
/* code from insidethesquare.co - Add text above the links */
.item-pagination[data-collection-type^="blog"] .item-pagination-title:before{
content: "Previous Article \A";
white-space:pre;
font-size:15px;
text-transform:uppercase;
letter-spacing:5px;
color:red
}
.item-pagination[data-collection-type^="blog"] .item-pagination-link--next .item-pagination-title:before{
content:"Next article \A"
}
/** add a background to the pagination */
.item-pagination[data-collection-type^="blog"] {
background:#e5f5f6 }
/* replace the arrow icon: left */
.item-pagination[data-collection-type^="blog"] .item-pagination-link .item-pagination-icon svg{
stroke:transparent!important;
background-image:url(image-url-here);
background-size:cover;
width:180%
}
/** replace the arrow icon: right */
.item-pagination[data-collection-type^="blog"] .item-pagination-link--next .item-pagination-icon svg{
background-image:url(image-url-here);
}
/* stack links on mobile */
@media only screen and(max-width: 640px){
.item-pagination--prev-next {
flex-direction: column!important;
}
.item-pagination-link{
max-width:100%;
margin-bottom: 40px
}
.item-pagination-link--next{
margin-bottom:0px!important
}
}
- -
Need help with customizing your site? Here are my current support options: https://www.insidethesquare.co/code-help
- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #SquarespaceCustomization #WebDesignTips #CSSforBeginners #squarespacetutorial #SquarespaceCSS
