Suggestion for building this design (Columns issue)

Beaver Builder
1

Hi,

I have run into issues with other designs and the limitations of columns in columns before with beaver builder. I am hoping someone can provide a brilliant solution.

How would you build out this design (ignore the left sidebar) - http://goo.gl/L7cxw2

I also raise this example because your devs have asked for examples previously where columns in columns would be useful.

Thanks,

Chris

2

Hey Chris,

Thanks for getting in touch! I see what you mean in terms of this being a use case for columns within columns. The issues we’re running into when discussing this is the original intent of the Beaver Builder being very easy to use without too many options that would bloat the plugin. However, in looking at the example, I can see a way to do this with the current features. As you probably know, you’ll need some custom CSS for the inner shadow, but the layout could be accomplished by:

Pulling out two 2 column rows. Place a heading module in the first column and then pull out a callout module and place underneath the heading module. This will allow you to place an image to the left and text to the right. The text on the right would probably need to be setup in table format in order to get the layout in the example. You’ll also need a separator module in between the heading and callout modules. All of the above gets you the general layout, but you’ll need to configure the settings for each module appropriately. The callout module does need a heading so perhaps, you can have a sub heading in addition to the original heading to accompany the text bullets?

Let me know how that goes for you and if that gets you close, but we will continue to discuss columns in columns internally to see what we can do there as we have noticed it is a very popular request.

Best,
Billy

3

Hey Chris,

I’ll just add to Billy’s recommendations by suggesting you use a table for the bottle image and text in each column. This would be a breeze using the excellent TablePress plugin, because it enables you to merge cells and insert images. That would easily take care of the bottle images to the side of the lists.

Here is the link to the TablePress plugin: https://wordpress.org/plugins/tablepress/

You’ll also probably need this:

“Responsive” add-on for TablePress: http://tablepress.org/extensions/responsive-tables/

After creating your table, you’ll get a shortcode that you can insert into a HTML module.

Hope that helps:)