How To Create Stacking Sections In WordPress

Quick one today, I wanted to show how to create stacking sections in WordPress. Before we start, this is the effect we will be creating:

I’ve already written this post on Medium in case you prefer reading over there!

Firstly, the need for this became popular as it was included in a theme released by the WordPress team called Stacks. The issue arose when people realised you’d have to completely change your WordPress theme in order to use it.

Bit of a bummer!

Thankfully, this effect can be achieved with some very basic layout and CSS tricks – and is actually more versatile without using the pre-packaged version from the WordPress theme.

Lets jump in…

Okay, first things first is we need to create a single group with groups nested inside. The ‘parent’ group is what will be used for the effect and the ‘nested’ groups what actually hold the colour and content for each stack.

Head over to your Gutenberg editor and add a new group. Inside this group, nest as many other groups as you need.

I find it easier to use the Document Overview button or use Ctrl + Alt + O. Once done, your content should look like this:

You can now style each of the nested groups. I’ll leave a list of the items to change for this effect:

• Minimum Height: 100vh
• Colour: Unique (so that it stands out)
• Content: e.g. headers, buttons…

You can see this clearly in this screenshot:

Depending on the plugins you use, there are a number of ways to add CSS to your page.

Since I have Spectra installed, I can add CSS on a per page basis very easily.

First, select the parent group and add a CSS class to it, make sure it’s descriptive enough. I went with fancy-stacking-effect. Once this is setup, you can add the CSS code:

I’ll include the actual CSS here too:

.fancy-stacking-effect .wp-block-group{
    position: sticky;
    top: 0;
    z-index: 10;
}

Once done, you can launch or preview your page and the stacking effect is sure to blow you away!

For the best results – I would also consider making sure the parent group is set to full width, all margin and padding is removed from the groups and that you add some padding to the headers so that the content doesn’t go offscreen.

The CSS code targets the CSS class that we assigned to the parent group along with all the .wp-block-group elements within. Let me briefly explain what each property does:

• Position: sticky – This tells the .wp-block-group element stick to the top of the viewport once it reaches the point whilst scrolling
• top: 0 – This sets the sticky element to be at the top of the viewport
• z-index: 10 – This is responsible for setting the stacking order of the .wp-block-group elements so that it’s above the other elements. This would be 1 by default, so setting it to 10 guarantees that the sticky element will always appears on top

It’s worth noting that this effect doesn’t have to take up the entire page and can instead be sandwiched between any other content. Making it super useful as an interesting way to display and FAQ.

The possibilities are quite endless with this effect, and it’s surprisingly simple to implement. P.s. adding some border radius and really sell this effect for the nested group elements.

I’m definitely going to use this effect in a website design coming up. Maybe I will even use it for your website design?

As always, if you have any questions just let me know!

Enjoy! 🎉