Varied Column Layout


I need help tackling a varied column layout because we need a right side bar.
If we didn’t need the side bar then the layout would be easy by using multiple rows but because the sidebar is in one row then the other column(s) has to stay the same throughout that whole page… I’m not sure if makes sense…

Basically I want to use the right sidebar option on a BB page and on the left be able to have varied 1,2 or 3 columns … Can I send you an image as example?

Hey Susanna,

It would be great if you could show us an image as an example. You can upload it to imgur and paste the link here. I’m sorry for the hassle.




Here’s the upload link

So the right sidebar would be a column and the left hand column will need to have varied amounts in it…


Hey Susanna,

If you’re using the BB theme, have you tried using the Sidebar Page Template as shown on the screenshot below?

Then, just insert your preferred module on the left column. See attached screenshot below.

Let me know if this is what you are looking for.



Ahhhh!! Let me try that, I didn’t realise that if you use the side bar template you could add modules to it!

Thanks a lot

Is that the same as adding widgets to a themes sidebar in general WP themes? I would like to use BB to add the side bar content to save as modules for other pages…

Hey Susanna,

Yep, you can easily add widgets at Appearance > Widgets.

There are some options for the Sidebar you can play around with it at Appearance > Customize > Content > Blog Layout

Let us know if you need anything further. :slight_smile:



Hi. Can I jump on that one. In your suggestion, KC, the sidebar goes all the way up to the menu. But if you look at the design by Susanna, she actually has a one column block across the width right under the menu and above the sidebar. So the sidebar theme from the Page Attributes doesn’t seem to be a solution. (unless I misunderstood/saw something).

I am trying to do the same and here is my problem. I cannot stack columns on the top of each other, independently of rows. Right now I am using background colour for a column to give some kind of “widget area” style, but then either I have the colour for the whole column, or I have to add a new row to separate two columns vertically aligned.

This gives me another problem, when columns have not the same height as it gives far too much space between vertically aligned columns.

See screenshot here:

As you can see there is far too much space between the Red “look-like-a-widget” area and the grey one (with my photo). That’s because they are on 2 different rows.

Is there any good way to have them right above each other and still have the one column block right under the menu (or anywhere else)?

Hi Emmanuel,

Same problem here. I wanted my sidebar to be created using modules for BB oppose to using the theme sidebar. I haven’t had any choice but to use the theme sidebar which means its taking a lot longer to style/configure… Bit of a bummer!

Hey guys,

Unfortunately, that’s not possible at the moment. If you check our User Voice Forums, it’s the most requested feature, columns inside columns. The guys are still looking for the best way to implement it neatly and friendly to the user as well.

For now, your best bet to achieve that kind of layout is by using the sidebar option. Or hardcode your content, which would be pretty hard.


Hej Susanna

Did you succeed to have a block full width above the theme sidebar? Did you find a way without coding?

Ben. When you say Columns into columns, you mean columns above each other into one columns (or Single row into one columns), not columns on side of each other within one column. I am not interested in the latest, but only the first (single row into one column).

Best. Manu

Hey Manu,

Not really sure how it’s going to be implemented. It’s possible they’ll allow 1 row to be nested inside a column, and you can place whatever column layout you want. Or allow 1 column group(with different layouts) to be nested inside a column.

For your specific case, we could try using a hackish solution. You could try applying a negative margin to the gray column on the bottom. It should bring it up. Hopefully, this doesn’t pose an issue to the responsiveness of your site with our auto spacing. :slight_smile:


Yes. a negative margin does mess things around (especially on intermediary sizes between desktop and mobile).

So if I understand properly, the column in column features (which is something else than I need) is not gonna solve my problem. The only solution is to enable the Sidebar in the Theme feature, but then I cannot have a block accross width at the top.

Will it ever be possible to stack column on top of each other, independently of rows or is it just too much again the nature of the grid?

Another way to solve this would be to be able to have containers with background colour/pictures within a column. Right now my problem is that I can only have a background colour/picture on the whole column or none.

In the mean while. I am rethinking the whole site layout to just have it done. :slight_smile:

Hey Manu,

I won’t really say that the feature won’t solve your problems until the guys shed some light over it. There’s a chance that they are going to make the columns independent of rows. So I guess only time will tell. :slight_smile:

Another way to solve this would be to be able to have containers with background colour/pictures within a column.

Should be possible with custom CSS. You think you can share the URL of the site?


If you are based on Bootstrap’s 12 columns system, it would be awesome to be able to have rows of multiple of 4 or 4 (3, 4, 6, 8, 9 and 12) bootstrap columns. I guess that the hard job would be to make sure that the rows have proper margin/padding to that the content columns are vertically aligned.

Looking forward to see it. :slight_smile:

Hey Manu,

Not really sure what you meant by this.

If you are based on Bootstrap's 12 columns system, it would be awesome to be able to have rows of multiple of 4 or 4 (3, 4, 6, 8, 9 and 12) bootstrap columns.

Do you think you can elaborate? Perhaps a screenshot?


You know what. It wasn’t very clear what I said. I need to make a better drawing.

But while I was drawing I decided to make a simple drawing of what I would like beaver to achieve.

With the colour I wanted to illustrate the key point, which is having the ability to supperposed columns with background colour that have not the same height than the left column. As you see there is one red column with same height than the yellow and turquoise columns together.

Does it make sense?

Sorry The image from above is here.

And here is the illustration of how rows not spending on the whole fixed width will look.

As you can see, we could solve (1) by using rows with a width of 9 and 3 bootstrap columns, instead of allowing beaver columns to stack one above the others (as I first recommended).

Does it make sense now?

I’ve come to the point in my project where I could really do with having a full width row and THEN having the sidebar… Is there any hope??

Hey Susanna,

Sorry but this feature is still far from being implemented. We could add a sidebar before the content for pages where you can add content before the BB content, if that makes sense. But it would require a lot of custom coding. Let me know if you’re interested though.


Thanks for those suggestions! I don’t think we’re using bootstrap on the plugin though. If you have a minute, do you mind posting your suggestion to the feature request? It might help the guys find a way around this and speed up the process. :slight_smile: