Inner Section Inside an Inner Section in Elementor: Unlimited Nested Sections

Inner Section Inside Inner Section and Repeat in Elementor
Share This Post

In this WPDesigns article, we will discuss how to add an inner section inside an inner section in Elementor.  This trick is sometimes useful to know when you have a particularly difficult layout that you are trying to complete.  Do note that you should not over use this as it creates extra code.

Table of Contents

Elementor Logo

Get Elementor Pro

You can’t add an inner section inside of the inner section of an Elementor section but you can use this trick to add an inner section multiple times inside of a section.

Normally Elementor only allows the inner section to only drag and drop once within the section. If you try to add one more, you can’t add it into the inner section. It will allow you to add at the top or bottom of the inner section but not inside.

Sometimes have to improve your work by adding more sections. We want to show you today a simple trick to use “Unlimited Nesting Sections” without an additional Elementor addon. 

inner section inside an inner section
Inner Section Inside Inner Section and Repeat in Elementor

Step – 1 – Open a Page

Open a page with  Elementor and add two sections. The first one is with one column and the second one is with two columns. Section number two will help us as a helper.

Adding section
Adding section

Step – 2 – Add an Inner Section Inside The First

Add an inner section inside the first section. Just search for the inner section from the Elementor widget search bar and then drag and drop it into the section. Then for the second section drag and drop one inner column for the first column and two inner sections for the second column.

Adding inner section inside sections
Adding inner section inside sections

Step – 3 – Copy & Paste

Now the trick is very simple. The trick is that Elementor allows you to copy-paste the column with all the content. So, first, of all, we will copy the first column of the second section.

 As we say Elementor can copy the column with all its content so when we will copy the column it will also include the inner section. Then, just paste it inside the inner section of the first section. Here we go. You will see it will add a column with an inner section. Then delete the first column from the inner section. So, we added an inner section inside the inner section.

Nested section
Nested section
Repeated nested section
Repeated nested section
Repeated nested section

Step – 4 – Add More Sections

If you want to add more inner sections like that repeatedly you can do it easily. The same method just copies the column from the second section and paste it inside the inner section of the first section. Then it will add a new column inside the inner section. You can add more as you want and it will not make any issue.

But one problem is that after adding more than one inner column you will not able to duplicate and copy & paste the inner section. So, you have to do the same method. We added two inner sections in the second column of the second section. Just copy the second column and paste it into the top inner section of the first section. You will see it will add one more column with two inner sections. So, this is the trick how we can make a nest of sections.

Keep in mind that although a useful trick to sometimes add more complex layouts it should not be used often as it created extra code that causes the page to load slower than ideal.  To avoid this only use when really necessary!

Search
Recommended Hosting
Upgrade to Pro
Recent Posts
Picture of Josh
Josh

Josh is passionate about technology, web design, and SEO. Along with this is a keen skier and cyclist. Having spent years developing websites for clients, he enjoys writing and sharing knowledge online.

Contact
Want us to get Creative?

We would love to hear from you!

Josh Cut Out colour white

Josh

Typically replies in minutes

Hi there 👋,

Feel free to message me if you have any questions.