Match Beaver Builder Module Heights for Better Layout Control - WP Developers

Match Beaver Builder Module Heights for Better Layout Control

How much does this annoy you?

Match the height of Beaver Builder modules

Perhaps I’m a bit more highly strung than you, because when I was rebuilding my hire me page, it bugged me to distraction.

Being vertically misaligned by… ummm… all of 15px meant that whatever plans I did have that day, were now much less important.

And there was simply no way I’m going to solve this intellectually by, you know, improving my copy.

In Beaver Builder, we’re easily able to match the heights of entire columns, and that’s really useful, but sometimes inner text can be a bit fiddly to get the same length.

Let’s see how to do it with a few bits of trickery.

If you’re following along, you can pop this in your functions.php file. And despite the length of this article, it shouldn’t take more than a few minutes to implement.

Adding the jQuery MatchHeight library to your site

An easy way to add jQuery extensions to your site is via a CDN.

You can of course download scripts, add them to your theme or plugin and enqueue them, but if your site uses HTTP/2 (it uses HTTP/2, right?) then it’s less of an issue for most websites.

The CDN we’re going to use is called CDNJS. You just need to search for ‘jquery match height’ and head to the page the search returns (or click here).

From there, we want to grab the minified file (the one ending with -min.js) – hover over it and you’ll see a button to copy the URL. You can copy this URL, but it’s probably best to get it yourself from CDNJS in case it has been updated since this article was published.

OK… so you’ve got the URL. Let’s enqueue it, so we can use it later.

Still in your functions.php file (or wherever you choose to put it), add the following:

Done! 3 lines of code. Not bad so far, right?

Adding a field to Beaver Builder modules to add a data attribute

Before we go any further, let me explain how this works.

We could use JavaScript to find elements via a CSS class name or ID on the page, or we can simply add a data attribute to the HTML elements instead.

Think of a data attribute like a CSS class. It’s just a bit of text that we add to an HTML element.

An example of a data attribute is <div data-name="doug">. It’s fairly arbitrary; ‘name’ could be absolutely anything.

Now, this jQuery library is looking for a specific data attribute called ‘mh’ (and the detectives among you will probably have figured out this stands for ‘match height’). So in our above example, instead of <div data-name="doug"> we need it to be <div data-mh="doug">.

The value inside this attribute, in our case ‘doug’, is what the match height library will use to group items together. So all items with the data-mh set as ‘doug’ will be in a single group. Being in a group means the match height library will find the tallest item in that group, and set the height of all items in the group to the height of the tallest.

This is great, as it means that we can have multiple groups of items on a single page.

If you want further information on this, check out the jQuery Match Height GitHub repository and look for where it says ‘Data API’.

By adding these as fields to Beaver Builder modules, it means we can easily create these groups whenever we want, simply by editing a module and typing a group name on 2 or more modules.

So how do we do this?

Once again, we’ll defer to the fl_builder_register_settings_form filter (if you’ve seen other tutorials, you’ll see I use this filter frequently).

Below the code we added for enqueuing the jQuery library, we’ll add the following code:

And, that’s it.

If you open any module, and head to the advanced tab, you should see a new field at the bottom.

Beaver Builder - new field in module
Beaver Builder advanced tab inside the settings form – new field added via filter

Great! But that on it’s own isn’t going to be enough. We now need to actually make something happen if you or a user types a value into this field.

Adding a data attribute to a Beaver Builder module

First, we need to check if a value has been set in the match height group inside the settings form. If so, then we need to add the data attribute to the module.

Beaver Builder provides a really useful filter called fl_builder_module_attributes.

Often we use this filter to add new CSS classes or IDs to a module, but in fact it’s the same one for adding data attributes too.

So quite simply we do the following:

And that’s it!

Now to make it ‘work’, we simply need to add the same value into 2 or more modules that we want to match the heights of.

Beaver Builder module data attribute
Our match height group is ‘how-it-looks’

Let’s check it out.

beaver builder modules heights matched
I CAN NOW GET ON WITH MY LIFE

If we inspect the HTML using the Chrome inspector, we’ll see the data attributes applied to the module, and if you’ve refreshed the page after adding the code above, you should see a height that’s been applied too.

Beaver Builder module match height in action
Match height in action on 2 Beaver Builder modules

That’s it!

And for you copy/paste fans here’s all the code (with the comments removed for brevity):

Update

Tom Car in the Beaver Builder Facebook group asked whether this would also be possible with columns. I did query whether this was necessary as Beaver Builder provides column height-matching out of the box, but his use-case was that he sometimes wanted to match 2 out of 3 columns, rather than all of them in a row.

So the answer is yes.

The structure of the column settings form is slightly different. If you recall earlier, I said that the module’s advanced tab is a form in it’s own right. With a column, however, the advanced tab is bundled in with the rest of the column’s settings form.

We can still use the fl_builder_register_settings_form filter that we’ve already added, and just add another check inside, like so:

Next, we have to apply the data attribute as before.

This time, however, we need to use a filter as the fl_builder_module_attributes filter will, unsurprisingly, only work with modules. Can you guess what the column equivalent is? 🙂

Underneath our fl_builder_module_attributes filter, let’s add the column filter:

And that’s all you need. You’ll now find the same ‘Match height group’ field in the advanced tab of your column settings, allowing you to match the height of some, but not all, columns in a row.

Thanks for the suggestion, Tom!

If you found this useful, I’d really appreciate if you’d share with others who’d benefit too 🙂

Here's the thing... I love to write and teach, but I'm terrible at self-promotion. If you found this article interesting, I'd really appreciate if you'd share this article with people you think would also enjoy it.

7 thoughts on “Match Beaver Builder Module Heights for Better Layout Control

  1. Hi Doug, thank you very much for this. I really needed to add a data attribute to a Beaver Builder module recently. I shall be trying this out soon.

    This is the perfect type of tutorial for me . It nudges me into new areas without scaring me off .

    Excellent quality. I owe you a pint the next time we meet 🙂

    • That’s GREAT to hear, David – really glad it was useful.

      It’s always a pleasure to prop up a bar with you; I hope it’s not too long until the next time.

      • Me too.

        I was adamant in 2018 we were staying put in Goa for the whole year. We are back 2 weeks and already we are booked out for 6 months of travel. Not got as far a London yet, but Europe is included.

        Thanks again Doug.

  2. This came at the exact right time! I was just trying to figure out how to get my CTA buttons to align nicely at the bottom of columns. Added the data name to the main content, which was the variable height and presto.. my buttons look ah-mazing!!

    Thank you!!

  3. Great article. Wouldn’t it be possible to add the ID of the column that is generated by Beaver Builder instead of the value of the data attribute? And then use a checkbox to indicate if the height of the module should be customized. This would be much easier than to choose a name for the group of modules.

    • Howdy Roland!

      Hmmm, not the column ID… but maybe the parent row ID (as all of the values of the data attribute need to match… with each column’s ID, they would be different).

      That said, even if it was the row ID, it would limit you slightly as you could only match the height of 1 type of item per row, but it would perhaps be necessary to match the height of multiple.

      And, rather than a checkbox, a select field would be used for simplicity (checkboxes don’t exist natively yet within BB, so they would need to be created).

      But yes, I completely agree – this would certainly be a great idea – much easier for the user if they only needed to match the height of 1 item per row. Perhaps a little more code to write, however, but I think definitely possible.

      Thanks for stopping by 🙂

Leave a Comment