Beaver Builder 1.6.4, Featuring a New Color Picker, Full Height Rows, the Number Counter Module and More!

I’m excited to announce that version 1.6.4 of the Beaver Builder plugin is now in beta and ready to take for a spin! If you haven’t already, head on over to your account area and download a copy of the beta to test it out.

Here’s a look at the details of what we’ve been working on and what to expect in the beta.

Beaver Builder 1.6.4

A New Color Picker and Saving Color Presets

The old color picker served its purpose, but it was a bit complicated and had a few bugs. The new color picker (pictured below) was built on Automattic’s Iris color picker, so you know it’s going to be legit. After all, the core WordPress color picker is built on it as well!

beaver-builder-color-picker-presets
The new color picker has a much cleaner interface with one input for the hex code, an area to adjust saturation/brightness, and a slider for the hue. In addition to that, it also has a new feature that you don’t typically see in color pickers on the web. The ability to save presets!

Saving a preset is easy. Pick the color that you like, click the plus icon and a message will appear telling you that your preset has been added. To use a preset, click the Color Presets button at the bottom of the color picker and a list of your presets will slide up. Once the presets pane appears, you can either click on a preset to choose it, or click the delete icon to remove it from the list.

Full-Height Rows

beaver-builder-full-height-rows

If you’ve ever wanted to create a row that fills the height of the browser window, full height rows are for you! To make a row full height, open up the settings for a row and change the new Height setting to Full Height (as pictured below). It’s that easy!

The new Height setting for rows.

The new Height setting for rows.

With the Height setting set to Full Height, the height of your row will automagically adjust based on the size of the browser window and your columns will be centered vertically.

Equal Column Heights

beaver-builder-equal-column-heights

In addition to full height rows, it’s now possible to make a group of columns all have the same height. That is a really useful technique if you have multiple columns that have a background (as pictured above). To make a group of columns have equal heights, change the new Equalize Column Heights setting to Yes in the column settings (as pictured below).

equal-column-heights-setting

The new Equalize Column Heights setting for columns.

With Equalize Column Heights set to Yes, the height of your columns will always be the same, regardless of how much content is in them!

The New Column Settings Dropdown

beaver-builder-column-settings

Working with columns in Beaver Builder has always been somewhat limited. As of today, that is no more! When clicking the settings icon for a column, you will now see a dropdown (as pictured above) that has a number of new options including the ability to edit, delete, and insert columns whether they have modules in them or not.

Clicking Insert Column Before will insert a new column before the one that is highlighted, while clicking Insert Column After will insert a new column after the one that is highlighted. Up to 12 columns can now be added to a row with this new feature!

The last option in the list, Reset Column Widths, allows you to reset the width of all columns in a group so that they are equal. That comes in handy when used in tandem with the next feature in this post, resizing columns by dragging…

Resizing Columns by Dragging

beaver-builder-resize-columns

Another highly requested featured on our UserVoice page that made it into this release is the ability to resize columns by dragging. You now have the ability to drag the left or right edges of a column or module until you are happy with the new width. When you resize a column this way, you’ll also see two indicators appear (as shown above) that tell you the new width of the columns being resized.

Draggable, resizable columns are coming to @BeaverBuilder! https://i.imgur.com/56p7iJW.jpg Click To Tweet

UI Enhancements

While relatively minor, we did make a few small changes to clean up the UI that you may have noticed in the screenshots above. Specifically, we cleaned up the action icons in the row, column, and module overlays by slightly decreasing the font size, tightening up the spacing, and dropping the module name.

That was done in an effort to make things look less cluttered as we had fewer action icons when we first designed those overlays (duplicate and column settings didn’t exist). Additionally, all of the icons in the module overlays tended to get bunched up and drop to a second line in smaller columns. Even though that can still happen on much smaller columns, it looks a lot nicer now that the module name has been dropped.

The Animated Numbers Module

While we were busy working on enhancements to the core builder, we also decided to sneak in a new module. That module is the Animated Numbers module and it’s pretty cool! Just enter a number and watch it animate from zero to the number that you entered when the module is scrolled to on the page.

beaver-builder-number-counter-2

In addition to an assortment of styling and text settings, the Animated Numbers module allows you to display just a number, a number surrounded by an animated circle, or a number in an animated bar.

beaver-builder-number-counter-1

beaver-builder-number-counter-3

If you don’t want to display percents, no problem! You can also choose to display standard numbers and enter a total that will be used to calculate the animation percent. For example, doing that would allow you to enter the numbers 250 and 500 which would animate the text to 250 but the circle or bar to 50%. That feature of the Animated Numbers module makes the type of data that you can animate almost endless!

The New Font Setting

Last but not least in this release is the new font setting. This is a special setting that developers can use to display font-family and font-weight selects (as shown below) in their modules with built-in support and live preview for Google fonts.

beaver-builder-font-setting

While we generally feel that something such as the font family should be decided by the theme, we did add this new setting to the Heading module as it makes sense to have it there to create one-off headings. We’ll be monitoring feedback to see if it makes sense to add this setting to other modules, but keep in mind, if you’re setting the font-family in Beaver Builder modules all of the time, you’re probably better off setting it in the theme instead.

A Huge Thanks to Favolla!

I want to give a shout out to the team of Diego and Thaís at Favolla for all of the amazing work they did to help make this release possible. While we were putting the finishing touches on the Row/Module templates update, they we’re working away on many of the features that you see here. Did I mention that they recently got engaged? 🙂 It’s safe to say that those two are on a roll!

When Will This Be Available?

If you haven’t heard, Robby and I will be at CaboPress next week learning from some brilliant individuals in the WordPress community. We’re really excited about how that experience will help us grow as a business and shape our vision of Beaver Builder’s future. As such, this beta period will probably be longer than the typical two weeks that other releases have seen. Baring any major issues, I’m expecting it to launch the week of October 5th.

What’s Next?

While we’ve already completed a lot of the items on our last roadmap post, there’s still much to do! I’ll probably do another roadmap post sometime soon, but in the meantime, here’s what we’re currently working on…

  • The Countdown module
  • Enhancements to the Pricing Table module
  • Refactoring Beaver Builder’s front-end AJAX API (hint: this is a precursor to undo/redo and partial refresh)
  • Refreshing our current lineup of templates and adding new ones

Over to You

What’s your favorite part of this update? Mine would probably be the new color picker or the column enhancements. Be sure to let us know in the comments below! And as always, don’t hesitate to let us know if you have any feedback or if you run into any issues.

Justin Busa's Bio

Leave a Reply

Your email address will not be published. Required fields are marked *

103 Comments