Beaver Builder 1.7 – Now With Partial Refresh, Per-Page Code Settings, And… Our First Shortcode!?!

The latest version of Beaver Builder is now in beta and ready to test! If you haven’t already, head on over to your account area and download a copy of the beta to check it out.

This update focuses on a number of things, with the biggest being performance enhancements via Partial Refresh. It may not sound as sexy as some of the other features in this update (or that we’ve released previously), but it took quite a bit to implement and should make the editing experience much smoother.

In addition to that, we’ve added new layout settings, new modules, updated a module, added a handy new helper method, and… Beaver Builder’s first shortcode!

Partial Refresh

partial-refresh-3
What is Partial Refresh exactly?

Before 1.7, whenever you made a change to anything within a Beaver Builder layout, all of the CSS, JS, and HTML for a layout would be re-rendered. Even a minor text change would require an entire layout refresh. Sometimes it wasn’t noticeable, but with dynamic content like videos and sliders, you’d see them reload time and time again, even when they weren’t directly being edited.

That’s not very efficient or user-friendly and something we wanted to change. Say hello to Partial Refresh!

With Partial Refresh only the row, column, or module that you are currently editing is updated when you click the save button (or a preview refresh is triggered). It’s that simple! This approach speeds up rendering of CSS, JS, and HTML assets on the server and prevents things from reloading that don’t need to be reloaded.

There are, however, still times when a full refresh is necessary, but we tried to limit those situations as much as possible. The most notable situation is when you’re editing a custom module that doesn’t support partial refresh or a row/column that contains one.

Implementing Partial Refresh for Custom Modules

By default, Partial Refresh is disabled for custom modules and needs to be enabled for it to work. Enabling it is easy, but be sure to check out the custom module docs on implementing Partial Refresh before doing so for your modules. There are a few gotchas regarding JavaScript that need to be considered before that is done.

Other Performance Enhancements Related to Partial Refresh

In addition to the Partial Refresh magic you see on the front-end, we also implemented a number of enhancements on the backend to improve the builder’s editing experience.

  • The front-end AJAX API for the builder’s interface has been completely rewritten to cut down on the number of requests needed to render content and settings.
  • All of the CSS and JS assets (excluding 3rd party) for the builder’s interface are now combined and minified into 2 files instead of 13, making the number of requests needed to load it much less.

Layout Settings (and New Global Settings)

layout-settings
When you update to 1.7 and click the Tools button, you’ll see a new option for Layout Settings just above the Global Settings button. These settings apply to the layout that is being edited and currently include settings for CSS and JS.

Yes, that is correct, you can now save CSS and JS on a per-page basis! Woot!

Export CSS/JS With Your Templates

One of the biggest benefits to being able to save CSS and JS on a per-page basis is the ability to export CSS and JS along with your templates. That is an extremely powerful feature that will allow you to create highly custom templates that can be reused and shared with ease.

Live CSS Preview and Code Completion

While the JS setting doesn’t live preview (that would be a bit messy), the CSS setting does. Make your CSS changes and watch in real-time as they are reflected on the layout that you are updating. We also turned on code completion for all code editors in the builder (not just the ones in the Layout Settings).

New Global Settings

When we added CSS and JS setting to the new Layout Settings panel, it only made sense to allow you to make those kinds of edits on a global level as well. While that might not be necessary for those of you using our theme, for those that are not, it is now possible to add CSS and JS with the Global Settings panel that will be applied to all of your Beaver Builder layouts.

Easily Render Layouts Anywhere

Rendering Beaver Builder layouts within theme files is a more advanced technique that has been gaining in popularity this year. There are a number of reasons for doing it, but the most common is to embed an editable header/footer globally across an entire site.

Until now, the only way to do that successfully was with the fl_builder_global_posts filter and a custom query or using the Insert Pages plugin, but that is no longer the case.

The new FLBuilder::render_query method is a very powerful method that takes the complexities out of rendering Beaver Builder layouts within theme files. Those that are familiar with the WP_Query class will feel right at home with it. It takes a single argument (the same argument you would pass to WP_Query) and renders all of the posts that are found. Be sure to check out the docs for more info.

Our First Shortcode!

Built on top of the new FLBuilder::render_query method is Beaver Builder’s very first shortcode! We know that shortcodes for layout can be a bad thing, but in this case, I think you’ll find it very useful.

The new fl_builder_insert_layout shortcode allows you to insert any number of Beaver Builder layouts into posts, pages, and custom posts of any type!

Why would you want to do that?

Let’s say you built a great looking global row for your newsletter that is shown on the pages that you built with Beaver Builder. It looks so good and works so well that you want to use it in your blog posts. Just pop in the fl_builder_insert_layout shortcode with the ID of your global row and bam! Problem solved!

Please be sure to check out the docs for more info on working with this new shortcode and everything that it can do.

The Audio Module

audio-module
If you haven’t already met Eugene, be sure to hop on over to Robby’s post where he introduces him (that’s about half way down). The Audio module was Eugene’s first project at Beaver Builder (he has since been a part of minor releases such as the recent Subscribe Form module integrations and WebM support for the Video module), and I think he did a great job!

The Audio module is essentially a wrapper for WordPress’ core audio and playlist shortcodes. It allows you to insert either a player for a single audio file or a player for multiple audio files (a playlist) with a number of customization settings.

This update also includes a new audio field for developers of custom modules. Please check out the custom module docs for more info on how that works.

The Countdown Module

countdown-module-1
The Countdown module is a new module by the work of a Beaver Builder developer you should all be familiar with at this point. The rockstar of the 1.6.4 update, Diego de Oliveira from Favolla!

The Countdown module allows you to insert a countdown timer into your layout that counts down to zero from a date and time that you specify. It allows you to specify the exact date and time, including choosing the timezone that should be used and has a number of styling settings for customizing the look of your countdown timers.

countdown-module-2
In addition to the new audio field, this update also brings a new time field for developers of custom modules that allows users to select a specific time of day (currently in a 12-hour format). Please check out the custom module docs for more info on how that works.

Big Updates to the Pricing Table Module

pricing-table-update
Over the next year, you’ll probably see us release fewer new modules (we only have a Table module planned) and instead, start working on enhancements to our existing lineup of modules. We’ve already started that process with updates to the Contact Form and Video modules and are currently working on some really nice updates to the Testimonials module.

As far as module updates, in this release we focused on the Pricing Table module, and I think you’ll like what you see!

The new additions to the Pricing Table module include overall styling settings for the highlight (title, price, or none), border style, and individual buttons for each pricing box. Those may seem like small changes, but looking at the screenshot above, you can already see that a number of different looks that weren’t possible with the settings before, now are.

Be sure to check it out for yourself and let us know what you think about the changes!

Recategorized Modules

If you haven’t noticed, the Advanced Modules section of the builder’s interface is getting a bit full (and it just got two new modules in this update). At some point, we might put our thinking caps on and look at grouping all of the modules into different sections. However, that’s a really big change and one that we don’t feel is necessary to put our users through right now (maybe never, who knows).

To even things out a bit, we’ve decided to recategorize two existing modules into the Basic Modules section. Those are the Button module and the HTML module.

We realize that even those this is a small change it is big in many ways for those that have been using Beaver Builder for a while. Be sure to check it out and let us know what you think about this decision.

Theme Enhancements

As many of you probably know from my post in the Facebook users group, we’re starting to work on some updates for the theme. It’s been a while since there has been anything major, but we’re planning on changing that in 2016.

While the theme update (version 1.4) is already out as of 12/9/2015, we didn’t blog about it, so I thought I’d cover a few of the highlights here…

Improved Code Editing in the Customizer

When we switched to the Customizer from our own custom theme settings page, one of the things we had to give up was the nice code editor we had there. While it doesn’t go fullscreen (yet), it’s much better than the previous code editing experience we had in the Customizer. The CSS field also does live preview now without having to refresh the layout!

New Body Font Weight and Header Background Opacity Settings

We’ll be adding a number of new settings in 2016. To start that off, we’ve added two highly requested settings in the 1.4 update. A setting for the body font weight and a setting for the background opacity of the header.

New Actions

We also added a number of new actions in the 1.4 update for customizing the Beaver Builder theme within your child themes. Here’s a complete list of the new actions. For more info on how those work, please check out the knowledge base.

  • fl_after_top_bar
  • fl_after_header
  • fl_comments_open
  • fl_comments_close
  • fl_sidebar_open
  • fl_sidebar_close
  • fl_footer_wrap_open
  • fl_before_footer_widgets
  • fl_before_footer
  • fl_footer_wrap_close
  • fl_page_close

More Theme Overrides

Most of the Beaver Builder theme can be overridden within a child theme, but until 1.4, there were still some very important parts that couldn’t be. The following sections can now be easily overridden in a child theme by copying the corresponding PHP files.

  • Top Bar Column 1 – includes/top-bar-col1.php
  • Top Bar Column 2 – includes/top-bar-col2.php
  • Archive Header – includes/archive-header.php
  • Post Top Meta – includes/post-top-meta.php
  • Post Bottom Meta – includes/post-bottom-meta.php
  • Footer Column 1 – includes/footer-col1.php
  • Footer Column 2 – includes/footer-col2.php

A Note on Semantic Versioning

You may have noticed that the version number for this update (and the theme update) only use two numbers. That is because after using three numbers for major updates and four for minor updates, we have decided to adopt Semantic Versioning for all future updates (because that’s how WordPress does it).

What does that mean?

In a nutshell, it means that going forward, major updates will use two version numbers (e.g. 1.7) while minor updates will use three version numbers (e.g. 1.7.1).

In addition to that, as of this release, we will also be versioning betas so it’s easier to tell what version of a beta you are currently on when testing. When you go to download this beta, you will see that it’s versioned 1.7-beta.1. When we update it, the version number will change to 1.7-beta.2 and continue to increment in that fashion until the official 1.7 version is released.

When Will This Be Available?

As with all of our beta releases, we’re planning on having this in beta for the next two weeks unless anything major comes up. Our goal is to get this out as soon as possible, but we need your help! More beta testers mean that we can find and fix bugs faster. If you haven’t already, be sure to download the new beta from your account area and test it out! If you run into any issues, be sure to let us know in the forums.

Over to You

What’s your favorite part of this update? 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 *

45 Comments