[PART 2] How to Easily Create More Complex Nested Layouts

NOTE: The Columns widget is now called 'Inner Section' instead. It's exactly the same thing.

I recently made a video called 'How to Create More Complex Nested Layouts with Elementor':

I showed a method first where I create a section with the ‘add new section’ button, and then dragged the columns widget in for further rows. I mentioned that I didn’t recommend this method because it can cause layout consistency issues. But… I didn’t elaborate on why.

I then showed you the method I actually recommend: dragging the columns widget directly onto the ‘add new section’ area. Check out part 1 on the link above.

A couple of people have since asked me for more detail on what was so wrong with the first method I showed you in part 1, because I didn’t explain with a real world example.

So here it is!

---

RESOURCES:

- Get the Elementor custom CSS I use on ALL my projects:

[joychetry]

This is so important, I wish I would have watched it before. But now that I know this I can apply it to my designs. Thanks again Dave

[monikamueller]

AWESOME, Dave... just what I needed in this moment. I knew I had seen you do a video on this and came to look for it... and... presto: there it is! Thanks a LOT. Well-done and presented as always.

[michaelpalombo]

GREAT - Elementor should recommend this tutorial!

[thomasconrad]

Hi Dave. Are there any custom tweaks for Astra? I used the ones you had in the No Stress Wordpress course I bought.( I loved the training course by the way. I learned a lot of new things, especially the time savers). Just wondering if there were any more tweaks for Astra.?

[sofiacrespo]

Hi, Dave! I hope this message finds you well!

What´s best practice for specifying column width when there are several columns with different widths?

I am trying to make a - column section add up to 100%: 11%, 32%, 7%, 7%, 32%, and 11%.
However, the last column comes up short of 11%. When I raise it to 11%, then the second-to-last column comes up short of 32%.


Do you know any way around this?

[ajito]

Hi Dave, I have a problem with your recommended method, maybe I didnt get right. But when I make the nested columns the "parent" container creates a little margin around the nested columns... The problem with it if I give a background color to that "parent" column because it "wraps" the rest of nested columns inside. Any way I can eliminate or avoid that margin? Thanks!

[kerawelt]

Excellent again. Many thanks, that really helps !

[CarolynSueLogan]

Hi Dave, I was wondering if you can direct me to where I can make a guestbook from elementor or wordpress? I am not too experienced with the blog thing yet and really would like a guest book off my front page. Thank you for everything you do

[franktielemans]

You can remove all that padding on the outer section by clicking once on the link button for the padding in the advanced options. Click a second time on the link button and all padding values are 0.

[BaliCurrent]

Can you show how to make a masonry layout for blog with Elementor Pro?

[bobautrey]

Thanks for your very useful tutorials. You have made me a much better designer in Elementor and a permanent subscriber to your channel. I was wondering if you could tell me the best way to make a dual button, side by side, and on the right? I have made it using columns but when I reduce the screen size, the button on the far right gets squished up against the right column. I've tried different settings in padding and margins but still cannot solve the issue. Any feedback you have would be very greatly appreciated.

[joshallen]

So I was trying to find a solution to equalize the columns in a row section. My min height isnt working. Maybe I need to nest it in another section.

[wellnix]

Can we not insert your custom tweak css inside a generatepress child theme which can be edited easier using the wp file editor noting that the "Additional CSS" box is quite thin?

[richardvickery]

How do you get the tabs to look different than the standard blue un-texted out of the box tabs?

[rmcellig]

How can I make column 1 fixed and column 2 scroll so that what content I have in column 1 will stay put while I scroll down text I have in column 2?

[BOOMBOOM-bktp]

Is there a way to get the pop up without clicking a button by Elementor. I mean if any of visitor visit my landing page they will see a pop up subscription box even without clicking anything.

How may I get this happen through Elementor?

TIA :)

[stefankontrus]

Dave, could you pls. verify if this is still an issue? Just tested both methods with the latest EP and it seems to work fine both ways.. thx!

[karlthomas]

Hi Dave
Ive saved a section as a template
I want to bring that back onto the page and add into my nested layout
I can't get it to work - any ideas would be great

[davefilchakmusic]

What about a layout that has three columns, but, the fist column has three rows as does the last column and, the middle column is full height, just one row? Anyone?

[shahzadhaider]

Can anybody help me? How to reduce/increase, or resize a section width? (No stretch section) in Elmentor Pro