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.

Now try to add an inner section to the middle left column (pink). You can’t! That’s as far as we can nest! I really hope Elementor fixes this, but until then, you can still paste inner sections inside by copying them from somewhere else. Create a new section underneath, with an inner section inside. Then Copy and paste the outermost column into the column where you want the inner section.

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:

Great! Now we have an inner section inside of an inner section! The down side is we had to erase the inner sections column. So if there was content inside of the column, you would have needed to move it somewhere else, and drop it in once you have the layout as desired.

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 paste the entire outer column inside:
and then adjust as necessary. Delete the columns you don’t need, and now we can add our alternating number of columns:

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.

Published by John Curry

John has a diverse technical skill set. He's a "Full-Stack" developer, and can do anything from using page builders in WordPress to building complex applications with a variety of modern tools. When he's not coding you can find him underwater or in the mountains.

Leave a comment

Your email address will not be published.