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:

https://mharwood.uk/wp-content/uploads/2024/05/stack-video.mp4

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

Introduction

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…

How To Create Stacking Sections In WordPress

Create The Layout

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:

Add Stacking Effect

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