When I first started seriously working with Elementor, I was quickly disappointed by their “inner sections” feature, because they only allow you to nest sections one layer deep. This puts serious limitations on design capabilities.
While I don’t like this clunky and confusing work around, I’m happy that there is at least a solution. So until Elementor fixes this problem, here’s how to handle a need for multiple layers of inner sections using the Elementor Page builder for WordPress:
Start with a single section and color it a transparent black:
Add three Inner Sections inside. I chose alternating backgrounds to make it easier to see where one inner section and column ends and another begins.
It’s going to create a new column next to the column you pasted it into.
Now you’ll want to delete that original pink column, and manipulate the nested inner section the way you want it. In this case, I’ll make the first layer pink (like it was last time) and then the inner-inner sections a blue and black. Like this:
But now we have another problem. Let’s say you want 4 ROWS that alternate between two columns and four columns, all nested within this pink column. It seems like we’re stuck with a two-column setup inside, but we’re not. The easiest way to resolve this issue is to figure out how many columns you need beforehand, and add the inner sections into the column that you paste into the section.
So if you need four columns, then create four inner sections BEFORE copying and pasting, like this:
Now if you wanted even more columns, you could just paste inner sections in as necessary, giving you unlimited nesting of inner sections, and unlimited design possibilities.