Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

The Beaver Builder grid explained simply

Grids are the backbone of many types of design (not just web design) and they will always influence everything you do when designing.

Something that I personally learnt in university, and have never forgotten, is this simple fact:

You must first understand the grid before you can break the grid.

And that’s exactly what we’re about to do in this blog post. We’re going to really understand the Beaver Builder grid so you can be more creative with your designs and add that WOW factor (joking!). But seriously, you’ll be able to improve your designs enormously after we’re done with this post.

At the end of the post we’ll also show you some examples of how you can leverage your new understanding of how the grid works to create some unique design aesthetics that you and you’re clients will be left drooling over!

Spoiler! It will allow you to do effects like I use in this post where I recreate one of our premium Beaver Builder Landing Page templates to move the computer screen up to overlap two different rows.

Let’s dig in!

template-city-lawyers-beaver-builder

All designs are based on a grid, including the more creative ones. The default template The City Lawyers is included in the paid version of the Beaver Builder plugin and is a great example of a design based on a structured grid.

What we know: the Beaver Builder grid is made up of rows, columns and modules

When you break down the Beaver Builder grid, it’s really boxes, in boxes, in boxes – that’s the easiest way to think of it. Actually, let’s use the word box to help us paint a mental visual.

Rows

Rows are the largest box on the grid. Your Beaver builder layout will be made up of rows stacked vertically on top of each other.

For example, look at the image below which shows two rows. The first row has a white background with two columns. The second row is the navy blue strip which contains the testimonials. As you can see, in Beaver Builder the rows stack vertically on one another down the page.

bb-grid-showing-row

Columns

Columns are the boxes inside a row and they divide the row horizontally into sections. This provides the grid that you need to layout your content.

Consider the image below. The bright blue box shows the right column which has the text Why Us? while the left column has the text Philosophy. So, to recap, this row is actually divided into two different columns.

Under this row is the second row with the navy background. This row contains one column.

bb-grid-showing-column

Modules

Modules are the elements that you drag into the columns on the page to actually build the content of your page. Examples of the modules available in Beaver Builder are the Heading module, Callout module, Accordion module and so on.

Below in the right column is two text modules, stacked on top of one another in the same column.

The Beaver Builder Grid

Understanding the grid responsively

Now that we’re all up to speed with what a row, column and module is, and how they relate to each other, let’s talk about how they work responsively.

EXTRA! While we’re talking about responsive behaviour, I recommend you click here to read about how you can set responsive font sizes to instantly improve the readability of your content.

The global Responsive Settings as defined in Beaver Builder

When you launch the Beaver Builder page builder to edit a page, you will see the Beaver Builder tool bar across the top, as shown below.

bb-grid-beaver-builder-editing-toolbar

Click on Tools > Global Settings, as per below.

bb-grid-bb-global-settings

And scroll down to the Responsive Layout area.

bb-grid-beaver-builder-responsive-global-settings

There are three things we’re concerned with right now and they’re as follows:

  1. Enable Auto Spacing: You will nearly always want to keep this set as YES. In fact, we have never changed it here at BeyondBeaver.com. This setting automatically resets the margins and padding on rows, columns and modules, on devices whose width are less than or equal to the Small Device Breakpoint.
  2. Medium Device Breakpoint: The width at which the main layout you’re designing for the desktop changes for devices one step down in width. If you set this to 1023px like above, you’re basically saying that, as an Apple tablet is 1024px wide landscape, anything lower than a landscape tablet will change at this breakpoint. By default, nothing changes as this breakpoint unless you manually set it to, as we’ll explore below.
  3. Small Device Breakpoint: The next width below the Medium Device Breakpoint at which the layout will change. At this point, most modules will expend to 100% width by default, but you can override this.

Row margins and how they change responsively

Desktops: The margin values you set take effect on the row. As you can see in the below image, we have added a 100px margin to the top and bottom, and left and right of the row.

bb-grid-row-desktop-margins

Medium Device Breakpoint: The margins on rows at the Medium Device Breakpoint still remain on the row, as shown below.

bb-grid-showing-medium-device-margins

Small Device Breakpoint: The margins on rows at the Small Device Breakpoint reset to 0px as you can see below. Notice how the white on the sides has disappeared? The margins around the row are now 0px which allows the row to extend to its edges.

bb-grid-row-small-margins

Row padding and how it changes responsively

Desktops: The padding values you set take effect on the row. As you can see in the below image, we have added 200px of padding on all sides of the row with the grey background, causing the column inside with the blue background to have spacing around it.

bb-grid-row-desktop-padding

Medium Device Breakpoint: The padding on rows at the Medium Device Breakpoint still remain on the row, as shown below.

bb-grid-row-medium-padding

Small Device Breakpoint: The padding on rows at the Small Device Breakpoint reset to 0px on the left and right but remain on the top and bottom, as you can see below. Notice how the blue of the column inside the row now reaches the sides? The left and right padding has been set to 0px on the row, allowing the column to extend to the edges of the row on the sides. The padding we set on the row remains on the top and bottom, as shown in the grey.

beaver-builder-grid-row-padding-small

Column margins and how they change responsively

Desktops: The margin values you set take effect on the column. As you can see in the below image, we have added 200px of margin on all sides of the column with the blue background (which sits inside the row with the grey background).

beaver-builder-grid-column-padding-desktop

Medium Device Breakpoint: The margins on columns at the Medium Device Breakpoint still remain on the column on all sides, as shown below.

beaver-builder-grid-column-padding-medium

Small Device Breakpoint: The margins on columns at the Small Device Breakpoint reset to 0px on all sides, as you can see below. Notice how not you cannot see any of the grey row that this column is inside? The column extends to all edges of the row on small devices – that’s the key thing here!

beaver-builder-grid-column-padding-small

Column padding and how it changes responsively

Desktops: The padding values you set take effect on the column. As you can see in the below image, we have added 200px of padding on all sides of the column with the blue background (which sits inside the row with the grey background). Note: The grey on the sides of the column in the image below are because the content is set to fixed-width which keeps the content of the row in the grid. Please comment below if you’d like a tutorial on this matter.

beaver-builder-grid-column-padding-values-desktop

Medium Device Breakpoint: The padding on columns at the Medium Device Breakpoint still remain on the column on all sides, as shown below. We can see this by the fact that the Text Editor module in the row has lots of spacing around it still.

beaver-builder-grid-column-padding-values-medium

Small Device Breakpoint: The padding on columns at the Small Device Breakpoint reset to 0px on the left and right sides only, as you can see below. The top and bottom padding remains.

beaver-builder-grid-column-padding-values-small

Module margins and how they change responsively

Desktops: The margin values you set take effect on the module on desktops. As you can see in the below image, we have added 150px of margin on all sides of the module. Note: the module is sitting inside the column with the blue background, so although it may look like the column has padding, the module is actually pushing itself away from the column, in the image below.

beaver-builder-grid-module-margins-desktop

Medium Device Breakpoint: The margins on modules at the Medium Device Breakpoint still remain on the module on all sides, as shown below.

beaver-builder-grid-module-margins-medium

Small Device Breakpoint: The margins on modules at the Small Device Breakpoint reset as per below, but importantly, THEY DO NOT RESET TO 0px.

beaver-builder-grid-module-margins-small

Here’s what you probably didn’t realise. This is the one thing that’ll make this whole article worth reading.

The margins on all sides of the module reset to the value you set in Page Builder > Tools > Global Settings > Modules ONLY if the value of the margin you have set on the module is GREATER THAN this global Module margin setting OR is a negative value.

Let’s all really try and understand this as it’s very important to understand this so you can predict how your design will work across the different devices.

Below you can see that on screen widths equal to or below our Small Device Breakpoint our 150px margin we had applied on the module has been reset to the Global 100px margin we set in the Beaver Builder Global Settings. This is because our 150px margin was GREATER THAN the global 100px.

The Beaver Builder grid global settings explained

If we set all the margin values on the module to be 90px (which would be less than the global 100px margin value), then on screen widths equal to or below to Small Device Breakpoint, the module would retain this 90px around the module and would NOT reset to the global 100px value set in the Global Beaver settings, as 90px is LESS THAN the 100px global setting default.

If we continue to run with this example and give the module 110px margins on the top and bottom, and 90px margins on the left and right, on screen widths less than or equal to the Small Device Breakpoint the module would reset its top and bottom margins (as 110px is greater than the global default of 100px) and the left and right would maintain the 90px as it is LESS THAN the 100px default margin value).

Lastly, and very importantly, if the value for a module’s margin is a negative value, it will be reset to the Global Settings value. Beaver Builder’s second item in its changelog is as follows:

beaver-builder-grid-explained-changelog

See 0.8.2? The second thing the Beaver Builder guys changed with the plugins is exactly what we’re talking about!

Understanding the grid will allow you to be more creative and produce higher quality designs

By understanding how what your doing on the desktop will work responsively in the grid, you’ll also be able to fix things faster (but you know that!).

So, let’s run through some examples of where you can use the grid to your advantage and be creative.

Add negative margins on columns to create an overlapping effect

As we learnt above, the margins on columns reset on all sides on devices at the Small Device Breakpoint. This means we can adjust the margins on columns for the desktop and medium devices WITHOUT any negative implications on mobile devices.

Negative margins are extremely powerful.

We use negative margins in a lot of our client projects because they allow us to break out of the grid. Magazine layouts look awesome because with print you can be flexible and place elements wherever you like. Unfortunately this isn’t the case with websites as we’re limited by technology. But, negative margins can get us pretty close.

In the image below, I have added a negative -70px top margin to the middle column, and set the columns to equal height. This way, the middle column can overlap the row above and stand out.

beaver-builder-grid-creating-panels

On mobile, the negative margin resets to 0px and thus removes the overlap so we can read all the content.

beaver-builder-grid-creating-panels-mobile

Cool, eh?

Please share examples of where you’ve used your understanding of the Beaver Builder grid to do something creative

We’d love to see where you’ve pushed boundaries and broken out of the Beaver Builder grid to product a unique effect in your design.

Please comment below. Your example could help a fellow Beyonder!

What you should do next

  1. Play around with using negative margins in the Beaver Builder Page Builder plugin for WordPress (click here to try the demo). Try using negative margins on all three layout types – rows, columns and modules. Experiment and review how they change between Desktop, Tablet and mobile devices. You could try recreating the subscribe strip we’ve designed in our BeWell Beaver Builder Child Theme
  2. Incase you missed the tip in the article, while we’re talking about responsive behaviour, I recommend you click here to read about how you can set responsive font sizes to instantly improve the readability of your content.

3 Comments

  1. fran_eleazer on September 19, 2016 at 6:44 am

    Hey Grant – Thank you for putting this together, it explains so much that I didn’t understand! It’s also brought into focus a problem I’m having on a site I’m currently re-creating in BB. On the home page, I need the module global settings to be 0 so that a picture I have in the homepage hero image doesn’t float off the bottom of the row. That creates a problem with my sidebars…I have several modules, each in their own row with a light gray background behind each row, when the module margin goes down to 0 for the default in mobile views, then the content in the sidebars gets too close to the sides of the gray background! Can I over-ride that global default, just for the sidebar? I can send you a link if you want to see what I’m talking about.

    Thanks again for this great explanation of the grid!

    • Grant Ambrose on September 19, 2016 at 8:01 am

      Hi Fran, sure. Please send through the link 🙂 You can edit the module and then click on the Advanced Tab and then set margins here on a per-module basis.

  2. hashimwarren on June 3, 2017 at 1:42 am

    This is a game changer tip for me – thanks.

Leave a Comment

You must be logged in to post a comment.