InsideTheSquare.co

View Original

How to hide blog pagination in Squarespace 7.1

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to hide the pagination on a blog in Squarespace 7.1

Pagination is the text at the bottom of a blog post that displays the title of the previous and next articles along with big arrow icons.

A few things to note before you use the codes below:

✨ This is specific for portfolios in version 7.1 and wont work for older versions of Squarespace like Brine & Bedford sites built on version 7. 

👩🏼‍💻You can install this code on a single blog post using a code block on that block. The video will show you exactly how to install it that way, placing the code between two style brackets. If you are on a personal subscription plan, you can install this in custom CSS, but this is the only way to install this code for a single blog post on your Squarespace site.

🤔 If you are not sure if you want to build a blog with posts or a portfolio with projects, click this link to watch a free training video I created that will walk you through the differences.

Here are the codes from this tutorial:

Hide both links:

.item-pagination-link{display: none}

Hide the text, leave the arrows:

.pagination-title-wrapper {display: none}

Hide the arrows, leave the text:

.item-pagination-icon{display: none}

Want to isolate one link at a time? Try these codes!

Hide only the left link:

.item-pagination-link--prev {display: none}

Hide only the right link:

.item-pagination-link--next{display: none}