How to Create Awesome Sticky Sections in Kadence Blocks

In this quick tutorial, I’ll teach you how to create sticky sections in Kadence Blocks. This means you can make individual sections stick to the top of the screen as users scroll down your page. Best of all, this can all be done with the free version of Kadence Blocks.

Kadence Blocks continues to get better and better with each release and blows other block plugins out of the water when it comes to functionality, free features, and ease of use.

Here’s what I’ll teach you how to build. Watch the individual sections stick to the top of your viewport as you scroll down.

Let’s get right into it!

Use the table of contents below to jump around as you need:

Step 1: Add a Row Layout and Create Your Sections

The very first thing you’ll have to do is build out your sections.

In Kadence Blocks, the first thing we’ll have to do is add a Row Layout block and choose the number of columns (sections) that we want to show.

After you choose your layout, sections will automatically be added for each of your columns.

Now, you can fill out each of those sections with whatever content you want.

A very common set of content boxes include sections with an icon, headline, text, and a button.

If you plan to build the content sections yourself, then go ahead and do that now and once you’re done, you can skip to step 2. If you want to save a lot of time and not build the sections yourself, then keep reading.

In the interest of time so that you don’t have to build these sections yourself, you can use Start Blogging Blocks which has hundreds of predesigned templates that can be imported with 1-click including dozens of content box designs.

Start Blogging Blocks offers many free designs to choose from and only takes 30 seconds to connect to our cloud.

If you want to use our predesigned blocks, go to Start Blogging Blocks and fill out the form to get a free license sent to you right away.

You’ll get instructions sent to you on the three easy steps to connect to our cloud and then you’ll be able to access these content sections so you don’t have to spend time building all of them yourself. 🙂

Once you’re connected up to the Start Blogging Blocks cloud, follow these steps to import the context box design of your choosing:

1. Click the ‘Design Library‘ button at the top of your post or page (depending on if you’re building a blog post or landing page)
2. Choose the ‘SB Blocks‘ tab to access our cloud of designs
3. Choose the ‘Content‘ category in the sidebar on the left
4. Choose the content box design of your choosing (we have dozens of free designs to choose from)

I’m going to choose a design with a 3-column set of content boxes and make a few tweaks.

After you have added your content box design, go to the top-level Row Layout block, and let’s make sure our settings are correct.

Expand the Structure Settings for your top-level Row Layout block. Make the following tweaks:

• If the sticky sections are on a blog post, make sure ‘Content Max Width Inherit from Theme?‘ is toggled OFF
• If the sticky sections are on a full-width landing page, make sure ‘Content Max Width Inherit from Theme?‘ is toggled ON
• Make sure ‘Inner Column Height 100%‘ is toggled OFF

Lastly, if you used Start Blogging Blocks to import your design, open up the Custom CSS section for your Row Layout and remove all custom CSS if there is any.

Many of the predesigned content boxes we offer have custom CSS applied. This may mess up your layout for sticky sections, so make sure that’s removed.

Now we have our content sections built! It’s time to move to step 2.

Step 2: Add Top Margin to Sections

With our content sections built, we now need to add top margin to the correct sections to stagger them.

We won’t touch the top margin for our first content section since we want that one to sit at the top.

So, let’s move to our second section. Make sure you are on the ‘Section‘ block itself and expand the ‘Padding/Margin‘ settings.

In the ‘Top‘ margin box, I’m going to add 150px of top margin so that the second section bumps down 150 pixels.

To remove the top margin when we’re on mobile screens, click on the ‘mobile‘ icon for your ‘Margin‘ section and put 0px in the top margin.

Similarly, go to the third section and open the ‘Padding/Margin‘ settings. I’ll add 300px of top margin on the third section so that the third section box moves even lower than the second section.

Also, don’t forget to switch to your mobile margin settings and set the last section to 0px top padding for mobile.

Once you do that, your content boxes should look something like this:

Notice that the sections don’t stick as you scroll down yet. Don’t worry, we’ll cover that in step 3!

Step 3: Make Sections Sticky and Set Offset

Now that our sections are all built out and have top margin applied to them to stagger them like stairs, the very last thing we have to do is make the sections sticky.

This step is super easy.

Go to your first ‘Section‘ and expand the ‘Sticky Settings‘ within the block settings.

Click the ‘Make sticky‘ toggle to turn it ON.

Once you turn that on, you’ll notice you get an option for a ‘Sticky Header Offset.’ This will be blank to start.

If the ‘Sticky Header Offset‘ is blank, the section will stick to the very top of your viewport as you scroll down.

If you want there to be some space between the very top of your viewport and where the sections stick, you can set a header offset.

For this tutorial, I’m going to set a ‘Sticky Header Offset‘ of 50px so that the sections stick 50 pixels from the top of the screen.

Once you turn on the ‘Make Sticky‘ toggle and set a ‘Sticky Header Offset‘ of 50px on the first section, do this for the other two sections.

That’s it! All of your sections will now be sticky as your users scroll down the page.

Here are the sticky sections in all their glory! Keep in mind this effect can only be seen on larger screens and not on mobile.

That was easy, wasn’t it?

If you liked this tutorial, feel free to share it with someone who would love to have sticky sections on their website.

Also, leave a comment below with any feedback you have!

Until next time,
Jake ✌️