Using Squarespace’s Pinned Feature to Create Interactive Backgrounds
Hello, everyone! It’s Tom here from Tenji Digital, bringing you the latest tips, tricks, workarounds, and new features from Squarespace. In today’s post, I’m going to show you how to use one of the newer features in Squarespace—pinned blocks.
Pinned blocks have been around for a couple of months now, but I wasn’t always sure how to use them effectively. In fact, I often clicked on the pinned icon by mistake and couldn’t figure out why my blocks were behaving oddly. Then I remembered a website I built for a client on Wix a few years ago that used a similar pinning feature, and I decided to see if I could replicate that in Squarespace.
What Are Pinned Blocks?
Pinned blocks allow you to make elements “stick” on the page while other content scrolls past them. This creates a visually engaging effect, especially for highlighting key content like images or text.
For this tutorial, I’ve created a demo site for a classic car club to show you how pinned blocks work. As you scroll down the page, you’ll notice the image of the Porsche stays in place while the rest of the content moves over it. It’s a fantastic visual effect… and the best part? You can do it without writing any code! While there are plugins that offer similar functionality, it’s great that Squarespace now provides this feature natively.
How to Use Pinned Blocks in Squarespace
Let’s get started with how to use this feature in Squarespace.
1. Enter Edit Mode in Squarespace
Once you’re in edit mode, hover over the image or block you want to pin. You’ll notice a pin icon appear next to the image. If you look at a text block, you won’t see this icon, as text blocks aren’t pinned by default. When you click the pin icon on the image block, it becomes “filled in,” indicating that the block is now pinned.
Click on the Pin icon to pin the highlighted block.
2. Understand the Pin Settings
The Pin Settings available.
After pinning the block, you’ll see some settings. To be honest, I haven’t fully explored all of these options yet, but they seem to relate to the starting position of the pinned element. The tooltip provides some hints, but I didn’t notice any significant effect when adjusting them.
However, one option you’ll find useful is Remove Pin. Clicking this will unpin the block, allowing it to scroll normally with the rest of the content.
Key Considerations
There are two important points to keep in mind when using pinned blocks:
1. Pinned Blocks Must Be in One Section
Pinned blocks only work within the same section of the page. If you insert a new section underneath the pinned block, the pinned effect will end when the content reaches that section. For example, if you add a blank section near the bottom of your page, the pinned element will stop sticking when the new section starts.
2. Use Pinned Blocks for Specific Elements
Pinned blocks work well for highlighting specific elements like images or key text. For example, in my demo, the Porsche image is the only element that’s pinned, allowing it to stand out as the rest of the page scrolls.
Another Example: Using Pinned Text Blocks
“The Process” is block is pinned. Scrolling down moves “Plan it” up and “Do it” will scroll up to replace it.
Pinned blocks can also be applied to text. Let’s say you’re displaying your web design process on your site. You can pin the process overview text block so that it stays in place as the user scrolls through the individual steps. This keeps the process overview visible, while the steps themselves scroll past.
To do this, simply add a pin to the text block containing your process, and leave the individual steps unpinned. It creates an interactive experience, making it easier for users to follow along.
Final Thoughts
That’s a quick introduction to using pinned blocks in Squarespace. I think it’s a fantastic feature, and I’ll definitely be incorporating it into future designs. It’s a great way to make your content more dynamic and engaging without needing custom code.
If you’ve used the pinned block feature, I’d love to see what you’ve created! Drop a link to your work in the comments. And if you’re ready to start a new business or redesign your current website, head over to [TangiDigital.co.uk](https://tangidigital.co.uk) to begin your journey.
For more tips, tricks, and first looks at new Squarespace features, don’t forget to like this post and subscribe for more updates!
Need a hand?
If you need some assistance with any of the above, or you want to work with me on anything else, please don’t hesitate to get in touch with me.
