In this tutorial, I will show you how you can build this trendy design using free Kadence blocks+ a bit of CSS.

Video explanation: screenshot showing 3 overlapping sections, on Desktop and CSS

How it’s built:

Step 1:

Using Kadence Blocks, create 2 Rows, each of one for an overlapping section:

Video explanation: a screenshot of Kadence Blocks, showing how the 3 overlapping sections are built using 3 Rows, using 2 classes: sticky-section and top-20.

Step 2:

Add the CSS bellow in Customizer – Custom CSS, or Child Theme – style.css.

.sticky-section {
	position: sticky;
}
.top-20 {
	top: 20%;
}

Final note:

The trick is to have enough space (other elements) on top and at the bottom for the whole section. Otherwise, it won’t work.

You can see a preview of the result on my Kadence Demo Live – Overlap Sections.

Similar Posts