Make an incredible website with sticky blocks in Squarespace

Creating a website with Sticky Blocks is an amazing way to make your website design stand out. SquareKicker is the fastest and best way to make a Professional Squarespace Website.

No more dealing with complex custom code and confusing sticky problems.

One click is all its takes to make a Sticky Image, Sidebar, Text Block or even a Sticky Navigation.

Transcript

Hi, this is Nick from SquareKicker. In this tutorial, I'll show you how to use sticky blocks on Squarespace using SquareKicker's, no code sticky block tools. By the end of this tutorial, you'll know exactly how to make this beautiful design using only SquareKicker's sticky block tool. So I'm starting with the section here on Fluid Engine on Squarespace.

And in below as I scroll down, I have a handful of other images that I've randomly placed throughout my grid. As I head to the top, I'm gonna head into my SquareKicker tools and click on sticky blocks. The first thing sticky does when you apply it asks, where do you want this block to be sticky? And you choose the top or the bottom.

When it becomes sticky to the top, it asks, how far from the top do you want this block to stay sticky? If I said zero, it will stay sticky to the top of the screen. VH stands for viewport. height, but you can also apply something different like a pixel value, so when it stays sticky from the top, it will stay sticky until it finishes scrolling throughout its parent element, which is the section.

As it scrolls to the bottom, it will then lift off when it reaches the bottom of that section. But if I don't want it to be sticky right to the top, I actually want to stay sticky a bit further down, I'm gonna select the offset to about 30 viewport height. The top of the block defines where that viewport height is. So if I said 50, the top of this block, which is here, this will be the center of my screen.

So I hit apply, and now I can see that this block will stay sticky on my screen.

The next thing I wanna do is select another block and head into sticky. And then am I gonna choose top? But this time I'm gonna select zero because I want this block to stay sticky, at the top of the screen. I'm now gonna apply this to the rest of my blocks as I work down the page.

So each of my blocks are staying sticky when it reaches the top, the last two blocks, I'm not gonna make sticky because I want these to actually continue to scroll, but now you can see that when all these blocks have finished scrolling and the section has completed all the blocks, scroll with the section and becomes unstuck.

Here's another option where you can use sticky, but sometimes a layer from the bottom you actually want to be on the top is actually sliding underneath. This is because of Squarespace's layers. Squarespace layers and the order in which they were created, giving them a specific layer. That can be adjusted in the Squarespace tools, but only when a block is overlapping another block. So you can bring a block up, you get the layer option here in Squarespace to make layers forward and back on top of each other. And then you can bring it down and apply your sticky. However, you can actually use a really cool, nifty tool called layers. So let's move this to the back again.

Apply sticky and with my next block also apply sticky.

But now if I wanna use my layer option here just below sticky. I have the ability to send it back or bring to the front. Now this block will always stay in front no matter where I'm scrolling on the section. However, my next block, I actually wanna also stack on top of that. So bring to front isn't gonna work because I also want to be in front of this one.

And two, bring to fronts will counsel each other out. So that's where the custom element comes in.

On my first element, I'm gonna select the custom layer level one. Then for my next block, I'm gonna select custom level two, and for my third and final block, I'm gonna select layer three. Now I've specified the exact order in which I want my blocks to stack when they're sticky.

Here are some other interesting, fun things you can do with sticky, but you can also notice at the bottom of this I have another element, and here I'm gonna explain how you can use sticky bottom.

So if I use Sticky Top, for example, this will say, this block will become sticky when it reaches the top of the screen. However, I haven't even got to top of my screen yet, but I want my block to be sticky higher up here from the very top as I work down my screen. So, If I head into my SquareKicker tools again and apply sticky bottom, bottom says, as soon as the section comes in, this block will be sticky from the very start of the section at the bottom.

And how far from the bottom? Well, let's just keep it to be zero just for simplicity.

As you can see, the bottom of my screen, this block will stay sticky right till it gets to the bottom of the screen as well. And when it reaches the bottom of the section, it will scroll away. So this block will always stay sticky to the bottom no matter where I am in the section from the very beginning, and it will stay stuck to the bottom until the section has scrolled away.

Make sure you subscribe to get an update on our next SquareKicker tutorial.