Match Beaver Builder Module Heights for Better Layout Control

EDIT: I’ve now included this feature in WPD BB Additions, so you can achieve the same thing for matching Beaver Builder module heights without adding any code. Now you just have to type in a “match height group” (see further down this article) to your modules. Simple! 🙂

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

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):


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 🙂

If you found this article interesting, I'd really appreciate if you'd share this article with people you think would also enjoy it.

14 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 🙂

    • Hi Dan – thanks for your comment!

      I am toying with releasing a plugin to help site builders who use Beaver Builder (but to not include any Beaver Builder modules) – so yes!


  4. I’m glad you added the column version at the end. I took it a step further and had to add a row version as well with fl_builder_row_attributes.

    I found out when doing all three that BB outputs them differently.

    In my code, the modules and column versions output like this:
    $attrs[] = $module->settings->data_attributes;
    $attrs[] = $column->settings->data_attributes;

    The reason I use an empty array is because I only want the data attribute, not a value. I want without any kind of value, and this worked fine. I type “data-checked” in BB in my new field, and it outputs properly.

    But it outputs different for a row.
    When I type “data-checked” and do this:
    $attrs[] = $row->settings->data_attributes;

    Instead the output becomes

    I tried a bunch of different things to fix this but in the end I just had to do this:
    $attrs[$row->settings->data_attributes] = $row->settings->data_attributes;

    Now it outputs
    This works but is not ideal.
    I suppose this is a bug in BB why it outputs the field different?

    Ideally what I want is a single field for all my custom data attributes. Just a textbox where I can type “data-checked data-something=”12″ data-waxon=”waxoff”

    And then it would output properly just like that. I don’t want to have to create a new custom field for every single possible data attribute!

    I couldn’t figure out how to do this using the $attrs array alone.

    • Hi Zack

      Thanks for your comment

      I think a few things didn’t make it through in your comment – maybe they were stripped out 🙂

      For that reason I don’t quite ‘get’ your row output issue – perhaps send a screenshot?

      In response to your last point, perhaps you could create a repeating nested settings form (a bit like the accordion module has) – where you have 2 fields inside it – one is the attribute name, one is the value and then you can simply continue to use the fl_builder_xxx_attributes filter but with the flexibility of adding as many data attributes as you like.

      If I’ve misunderstood then let me know 🙂

  5. Looks like it stripped out my html examples. Not sure how to post code in this particular comment box.

    The point was that when I output the module and column it would create proper html “div data-attribute” but when using the exact same method to output the row it would do “div 0=data-attribute” which is weird.

    Your suggestion about a repeating field is great but I find no tutorials on it and the API docs are sparse at best trying to figure out how to do anything.

    A way to do standalone data attributes, versus a key/value data attribute would be a nice addition to Beaver. They aught to understand that html elements nowadays are more than just IDs and classes.

    • Hi Zack

      If I get a chance, I can show you how to do this with code, but the steps are:

      1) Create a new form using FLBuilder::register_settings_form (eg zack-data-attributes-form)
      2) Add 2 text fields for key and value
      3) Filter the settings form for the row of a module (and separately, row) using ‘fl_builder_register_settings_form’ filter
      3.1) Append a new field (eg zack-custom-data-attributes) to the settings form, which will have a type of ‘form’, and the form as ‘zack-data-attributes-form’
      3.2) Set ‘multiple’ to true

      Screenshot from accordion.php which is doing almost the same thing:

      Registering the settings form:

      Calling the settings form:

      Now you should be able to add the data in modules and rows.

      Next, to add the data attributes to the module, you can use fl_builder_module_attributes filter

      1) The 2nd parameter of this filter is $module, so you can access $module->settings->zack-custom-data-attributes
      2) Do foreach of each attribute, and append $attrs[‘data-‘ . $key] = $value;
      3) Return $attrs

      If $value is empty, it should leave a standalone data attribute as I think you want

      So that should be everything you need – if you need help, I will try and do a code snippet next week.

  6. Thanks for this post! After just a couple minutes I was able to get my columns matched. I was struggling and wondering why the column height match feature wasn’t working natively.

Leave a Comment