Elementor Pro Tip: How to Create More Complex Nested Layouts

How to create more complex nested section layouts with Elementor

The Elementor page builder makes creating beautiful responsive layouts in WordPress drag-n-drop easy.

But a lot of people get stuck creating more complex layouts. This where you want multiple rows of different numbers of columns, but all within the same ‘section’.

It’s actually really easy when you know how… but there’s a trick to doing it properly.

Here’s a very quick example I’ve put together to show you what I mean:

An example of a more complex Elementor layout, using nested sections

Notice it’s actually 3 rows:

  • 1 column for the centered headline;
  • 3 columns for the icon boxes;
  • And 1 column for the button.

But they’re all contained within 1 ‘parent’ or outer section, with an image background in this case.

It’s actually really easy – check out my quick video below for step-by-step instructions.

(NOTE: The Columns widget is now called ‘Inner Section’ instead. It’s exactly the same thing.)

 

By the way: I have a PART 2 follow-up to this video here. It explains more clearly why the ‘method 1’ I show you in the video is not recommended.

Resources used:

This is an affiliate link. If you buy the paid version, I get a small commission. No extra cost to you. I’d 100% recommend Elementor as the only page builder to use anyway.

If you found the video useful or have any questions, drop me a comment below. Thanks.

Check these posts out too...

90 thoughts on “Elementor Pro Tip: How to Create More Complex Nested Layouts”

  1. OK – understand that the sections have the same hierarchy. But don´t understand the need of having the same hierarchy.

    • It’s a good question. I didn’t want to ramble on too long in the video so decided to just give the best method. Basically, if you don’t do that, then the ‘nested’ section and columns look ‘indented’, or not lined up properly with the first set of column(s) that are in the parent section. Causes layout problems. I should probably have shown that too. Hope that helps?

      • Dave! You just saved me hours of time that I would have spent continuing to fiddle with my site – I had set up a Coming Soon page using a template from Elementor and added sections that of course didn’t line up and created huge issues with tablet & mobile responsiveness when I changed the margins for desktop. I was pulling my hair out and wasted so much time this morning!

        So glad I went looking through all my emails from you and found these videos! Fixed it all up in 2 minutes. I could kiss you! (Ummm… if I wasn’t married and you didn’t live so far away 😉 Kidding! I’m totally kidding! But I am just so happy! lol! )

        Anyway, Thanks so much for an AWESOME tutorial!

        • Ha haaaa! Brilliant Lisa! SO pleased I could help. Sometimes all you need is a pointer in the right direction.

          Your comment has made me VERY happy. 🙂

  2. Excellent video. I already knew how to do this but I really like the way you explain how to do things. Great presentation and explanation – you make complex tasks look so easy. Keep up the good work and thanks

  3. Dave, this really helped me to understand the architecture of the page. I have since gone back over some old pages & made these changes & noticed a huge difference, especially on mobile.

    Top & Bottom Padding between sections (or margins) What do you recommend?

    • Nice one Mark! I’ll be producing some content on padding and margins soon. Just quickly though: I always go with padding, unless a good reason not to. That way, if you have a background color on a section, it will stretch all the way to the top and bottom of the section. With margins, you’d have a top and bottom gap. Hard to explain easily without an example, but generally I find padding gives me the best result.

      Always remember, padding is on the ‘inside’ of a section (or anything else in fact); margins are on the ‘outside’.

      Hope that helps?

  4. Love these videos, been such a help and will gladly use your affiliate links when I purchase. My main worry is that Elementor isn’t stable, with last pro update seemed to be loads of issues, as someone building a few sites for my businesses it scares me if I feel i can’t rely upon it. I have started to look at Beaver Builder, but just love how elementor works and do not want to learn another product. Thoughts……….i know I have put you in a tough position. Anyway thanks for the videos and general info on site, best i have seen and i have looked a lot !!!

    • Yes, there’s no denying Elementor has had its stability issues of late. At least 2 recent updates adversely affected a good number of people, myself included.

      For me, Elementor’s feature-set and workflow far outweigh any potential update issues. I personally now always update on a test server first, and keep daily backups in case I need to rollback. That’s not bad practice anyway, but I agree, it shouldn’t have to be at the back of your mind.

      It’s a young product undergoing phenomenally fast development. I’m sure recent issues are just teething troubles. Fingers crossed! Thanks Paul.

  5. Hi Dave, thanks for the tutorial. It’s very simple.. But I have one problem right now, I want to create column in column. But when I tried to dragging column widget in column, it’s won’t work. Is there any solution for my problem?
    Thanks before! 🙂

    • Hmmm – Elementor will only allow you to nest once, so if you already have a nested column and then you’re trying to nest another one, you can’t do it. Do you think that’s the problem?

  6. Hi, these videos are superb, really easy to follow. One quick question, what’s the best way to create a vertical divider as opposed to a horizontal divider? Is it possible? Great work…

    • Thanks Padraig. 🙂 The easiest way is to put a left or right border on a column. Just watch out for how this looks on mobile, you often end up with an unwanted divider in those cases. The only solution I can think of is custom CSS, to remove the border when screen size is smaller than, say, 768 pixels. Shout if you need any help.

  7. Dave! I am a new big fan, and new to Elementor. I just launched my first site with it, and am so happy with it. However, I need to go change a few sections after watching this… derrrr.

  8. Thanks Dave,
    I haven’t begun using Elementor yet—still exploring. I’ve read that it is difficult to move “sections” up and down after they are created. If I use the method you describe here—building in the column widget—will that solve the problem of moving sections around? And will I ever need to click on the “new section? button?

    Thanks so much,

    • Hi there Jay. No, sections are really easy to move up and down. You just drag and drop. Granted, the sections don’t collapse down – I’ve often though it’d be useful to have the sections fold down to just 1 line each, so they’d be really easy to move around. But it’s pretty easy now, even if you have a nested section. Just drag and drop the parent section.

      I click on the ‘add new section’ button quite a lot actually, without nesting. Depends on the situation.

  9. Dave,
    Thanks a bunch. I have been scratching my head trying to figure out how to do this. Your video was extremely clear and I am off and running

  10. Such a helpful tutorial – thanks, Dave. I’m a writer, not a techy, so though I’ve built WP websites before I’m finding Elementor, while powerful, doesn’t explain the simple things in its documentation.

    For example, how can I make a word or phrase inside a text box link to another page on the site: like from the Home page to the About or Contact page. That’s simple in WP with the little link icon, but I still can’t do it in Elementor.

    Glad I found your tutorials!

  11. Seems UNNECESSARILY complicated. It is what it is, and like anything, you get used to it with some practice. I’m playing around with a new page-builder, Brizy, which is also complicated (at first.) Perhaps for some reason, this stuff needs to be complicated, I wonder though if it has to be this way? Is there some reason they couldn’t just make it more intuitive and work better? Seems to me there’s lots of competition (new and old) in this space. I think the folks that uncomplicate things that should be uncomplicated are going to be the ones that win (everything else being equal.) unnecessary complexity seems to me to be a sucky thing.

  12. This indeed is helpful, as has been all your info on elementor, but I have another situation I can’t figure out.

    I have three columns, with text in left and images in each of the two right. But I want a third image underneath the two images—basically an image that straddles the two right columns. I can put in a new section, of course, but I want my text to go down the whole left column beside the three images. Is this possible?

    Let me try to explain more simply. One column text left. Two one-column pictures beside it. One two-column picture below the two one-column pictures.

    Thanks for any help!

    • Pretty easy when you know how. Create a 2 column section. That holds your text in one col and your single image in the other.

      Then drag a Columns widget into the 2nd column, above the first one.

      You’ll likely have to set Columns Gap to No Gap on the 2 col section created when you dragged in the Columns widget.

  13. You’ve been so helpful let me ask a question slightly off topic. (I’ve not found anywhere else to ask this.) I created a simple slider with the slides widget, but when it’s viewed on mobile it adds space above and below the slider. I’ve played with all the settings, including margin and padding, and nothing fixes that (though I was able to position just where I wanted it on desktop).

    When I use Smart Slider 3 I don’t have that problem, but I’m trying to keep the site as simple as possible for the client to maintain and prefer to use the built-in slider.

    • Yes it does. Sorry for the confusion. By ‘pro tip’ I mean ‘tip from the professionals’, rather than ‘Elementor Pro’. I should change that! 😉

  14. Hey Dave,
    This is the closest i\ve found to an answer so far…. Thanks!

    I am struggling getting an element to expand responsively to the full height of a column though. I have two columns, the left hand one has a number of elementor widgets and of course expand dynamically to fit the content. The right hand side column has just one widget the Tab object which i fill with an image.

    No matter what i try though the tab widget will only be the height of the image within it, is there any way for it to reference the responsive height of the column to the left and expand to the full height of the section??

    Cheers
    D

    • I have the same question! I am interested in making the entire left side of my Elementor page one single image and would like widgets on the other side. I wonder if you have found a solution for this?

  15. Great Post! Thx a lot. However: There is one thing I cannot get my head around. Is this arrangement possible:

    —————————————- < this is just one row
    ——– ——– ——— ———– < 2nd row with 4 columns (first 3 are one section)
    —- ——– —– ——- < within the section of the first 3 columns another row is added (this time with 4 columns); however there is now new row for the 4th column (which is its own section).

    Looks weird, but I hope it's somehow understandable. Thanks a lot

    Peter

  16. is this now null & void or what?
    it’s a great video thank you I really enjoy your tutorials but I cannot get this to work as “columns” are now “inner sections” and for the life of me I cannot get it to work without a section for each ;-(

  17. Hi. Great video…….how can I put links to 3 different pages in each of the 3 Columns?
    I can’t find a widget for “Insert Page”?
    Thanks…….new to this

      • A workaround that I use is to create a new section and create the content that you want to embed (including all of the columns, responsive adjustments, etc.) as if it is going to be a standalone section on the page.

        Publish the page as normal, then use the Inspector in your web browser to select that section, copy that section’s HTML and insert the code into the column that you want to embed it in.

        An additional step only if you’re anal retentive, would be to use something like Insert HTML Snippet to convert the HTML to a shortcode, then use the Shortcode widget to insert the shortcode.

  18. Hey Dave – I have a roster of positions and people’s names like this

    President Joe Thompson
    Vice President Minnie Warhaul
    Member-At-Large Tom Pratt

    I’d like them to line up like above even on mobile – the title and name have to be on one visual line to make any sense and the names need to line up vertically so they look good.

    Any idea how to make this happen?

    • Hey Art. Could you set the 2 columns to be 50%/50% in mobile view only? That way, they wouldn’t stack on top of each other on small screen.

      However, you might be best having these names in an HTML table. It’s pretty much tabular data. You can either code that HTML yourself, or use an online table generator like this and then put the code in an HTML widget. Or, there are a few Elementor add-ons that have a tables widget, like UAE, JetElements, PowerPack. I do really like UAE, but maybe only worth it if you’d use any of the other features.

  19. My struggle is with multiple rows. Say we have multiple rows, each with three columns in them. When you reach a certain breakpoint, the columns become 50% width instead of 1/3, so if there are multiple rows in this page builder layout, the first set will contain two rows, displaying the first two columns side-by-side, but then the following row will contain just one column, with empty space to the side. Same thing happens with the next row at the responsive breakpoint. So, instead of a finished mobile layout of three rows of two columns, we have four rows with empty space (or no column) in the even numbered rows. Not exactly a desired finished product.

  20. Wow, you not only know your stuff. You take me by the hand and even show me the little traps I already have been falling into! You are also an extraordinary teacher.

  21. Hi Dave, thanks for the post!

    Is it just me or is it impossible to create ROWS inside (inner) COLUMNS in any of the builders…..?

    I’ve been struggling with WPBakery, Visual Compose and even in Tatsu Builder to create a simple GRID layout common with Photography layouts…

    TWO COLUMNS – First Column contains a PORTRAIT size image, here is the problem… in the Second Column…I can’t figure out how to SPLIT the Column into Two Small Rows or simple insert/create two small rows (for LANDSCAPE size images) inside it… Both columns need to be the same height so everything (image ratio) resizes properly when resizing browser or viewing on tablet/mobile, etc.

    Would you mind taking a quick look at this layout and let me know if it’s even possible?

    https://ibb.co/6mWHWZV

    Thanks in advance!
    Mark

    • Yes it’s simple. Create a new 2 column section. I’d then drag in an Inner Section widget to the right side column – delete one of the columns, so it’s a 1 column Inner Section. Then do the same again, dragging the 2nd Inner Section widget underneath – again delete 1 of the columns. For consistency, I’d likely also drag another Inner Section into the left column too. Only because each Inner Section comes with its own default padding/spacing inside them, so each Inner Section’s spacing will be the same. Then drag an Image widget (or whatever you like) into each Inner Section.

    • You might maybe want to set Columns Gap to No Gap on the outer section, cos otherwise you’ll have padding around that outer section, PLUS padding around each of the inner sections too. Just something to be aware of anyway, if you’re trying to get things to line up.

  22. I have a problem with adjusting the background when I use this method. Changing the background just puts an overlay on the whole nested section. Am I doing something wrong. I followed all your steps.

    • No worries Christa! This one’s definitely not intuitive is it? But easy when you know how. 🙂 I need to update this video actually, the Elementor interface has changed a lot since. Glad you could figure it out anyway.

  23. amazing video. thank you . i was having this issue and it really helped!

Leave a comment

Tweet
Share