[PART 2] How to Create More Complex Nested Layouts

Part 2 - How to Make More Complex Nested Layouts - why is my method better?

I recently made a video called ‘How to Create More Complex Nested Layouts with Elementor‘.

I showed you 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. If you haven’t seen that main video yet, then check it out first.

A couple of people have since asked me what was so wrong with the first method I showed you, because I didn’t really explain with a real world example.

So here it is.

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

 

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...

16 thoughts on “[PART 2] How to Create More Complex Nested Layouts”

    • Quando será os próximos tutoriais sobre os popups, utilizando o Elementor, que você fez no mês de janeiro e, não deu sequência, Excelentíssimo Davi Foy??? Muito obrigado!!!!

  1. I have the same question. I am new to elementor. In your example above, I would like to have the 1st column have a header widget and then add 3 column in that column under that but I can’t drag the column widget to that area.

    Also in the example above you can make them all line up by selecting no gap and setting margins and padding to zero.

  2. Dave,

    Any chance that you could have a link to “https://www.designbuildweb.co/get-custom-tweaks/” within your site?

    I am sure that there are “other” great gems to be found on your site …

    Cheers,

    Steve

    • Either in the section settings that the columns belong to (see Columns Gap setting). Or you could always set your own gap for each column – click the column settings (hover over the column, click the little icon that appear top left of the column), then Advanced, then set left/right margins or padding.

  3. Hi Dave, I’m new to Elementor and am finding it hard to control the height of sections in a grid 2 or 3 column layout. I’m trying to create a post/page template that is a grid design. I have a multimedia blog and want to make posts that display all kinds of media, – youtubes, Instagram embeds, shortcode galleries or HTML content etc. I want each media item to be in a ‘box’ on a grid page.

    I can’t work out how to make each section or row of the grid the same height, and still be responsive. Any ideas? Isla

  4. Really struggling with this Dave:
    I have a section, at the top in a single column I have text.
    Then I have an inner section below split into 2 columns. Text left, an image (or whatever) right.
    I just can’t make the text of the upper and lower text sections match up on the left side.
    Any suggestions please? 🙂

  5. Hi all,

    can i check if i can have a toggle inside a toggle (nested toggle)

    for example :
    > toggle 1
    > sub toggle
    > sub toggle 2
    > toggle 2
    > sub toggle

  6. Hi Dave, is there a relatively efficient method to line up portrait and landscape pics:
    the idea is 3 portraits and next to them a landscape making them all the same height with a button bar (rectangle box with some writing centred) under each one those should also line up.
    And another one/two is there such a thing as connected text boxes e.g. for a wrapround. I have a page where my friends wanted text across to start with then a pic to the left with some text flowing on the right till it meets a callout box which overlaps the pic in a vertically offset manner: the pic stops and now text wraps to the left of the callout box to its bottom then becomes text across again (hopefully it doesn’t spectacularly fall apart when changing screen sizes. I did the stops manually and used manual spacing and kerning to get justified text to line up when it didn’t want to.
    I am not a coder so can sometimes find tweaks by testing what happens if I change a parameter.
    Thanks for any help. Oh, not trying to be impertinent: adding pics in the text editor when making the mobile responsive doesn’t seem to work. Is that me or is that how it is.

  7. thanks for your videos. i’m trying to add another row within a column and can’t seem to find out how to do it. In your example, it would like trying to add a row under ‘column 1’ with an image. But only under ‘column 1’. How do you do that?

Leave a comment

Tweet
Share