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:
Get instant access to a list of over 1000 winning products
With ready-to-go videos you can use in your facebook ads + more!
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!
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 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.
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.
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.
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.
Click on Tools > Global Settings, as per below.
And scroll down to the Responsive Layout area.
There are three things we're concerned with right now and they're as follows:
- 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.
- 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.
- 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.
Medium Device Breakpoint: The margins on rows at the Medium Device Breakpoint still remain on the row, as shown below.
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.
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.
Medium Device Breakpoint: The padding on rows at the Medium Device Breakpoint still remain on the row, as shown below.
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.
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).
Medium Device Breakpoint: The margins on columns at the Medium Device Breakpoint still remain on the column on all sides, as shown below.
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!
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.
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.
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.
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.
Medium Device Breakpoint: The margins on modules at the Medium Device Breakpoint still remain on the module on all sides, as shown below.
Small Device Breakpoint: The margins on modules at the Small Device Breakpoint reset as per below, but importantly, THEY DO NOT RESET TO 0px.
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.
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:
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.
On mobile, the negative margin resets to 0px and thus removes the overlap so we can read all the content.
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!