Columns: how to replicate example in documentation

I’m attempting to follow the example here:
https://docs.wpbeaverbuilder.com/beaver-builder/layouts/columns/tips-for-working-with-columns

At Tip #2 an example is given of creating a complex layout with columns within columns:

For example, here’s a layout for three main columns (two on top, one below) in which the first column (on the left) includes a layer with four child columns and the second column (on the right) includes a layer with two child columns.

See the link for the image.

To recreate this layout can I simply:

  • Start with a row containing one column.
  • Drag in a second column to create two columns in the top layer
  • Drag in 4 columns into the second layer
  • Then adjust the width of the first four columns in the second layer so that they add up to 50% percent?

Like this:

The description sounds to me like the aim is to create two columns side by side, then to add a layer of 4 columns within the left hand column. However, this doesn’t work. I think this is because this would be a child column within a child column.

Am learning, so any help appreciated. Thanks! :sweat_smile:

This is what the above layout looks like with modules added:

So it’s not the same layout as the example. The two columns at bottom right won’t go any higher than the bottom edge of the image in the top left column (bench).

How can I recreate the example layout?

NB. I’m using BB in Firefox 81.0.1 (Flatpak) on Debian Buster

I’ve found a solution. :grinning:

This is what I was doing:

  • I was dragging a column from the content panel to the row, below the existing column.
  • Dragging the lower column into the existing column to create a child column.
  • BB wouldn’t allow me to do this.

This is what worked:

  • I inserted a picture module into the upper column.
  • Then dragged the lower column into the upper column to create a child column.
  • Then I could recreate the example layout with two parent columns side by side.

The documentation suggests here:
https://docs.wpbeaverbuilder.com/beaver-builder/layouts/columns/tips-for-working-with-columns

Tip #2: Drag in the layout before inserting content

This didn’t work for me. Is this an error in the documentation or a quirk caused by my setup?