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.